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 3d8134d0c9..a82756a376 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
@@ -16,11 +16,13 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Observability dashboards
-          </h1>
+            <h1>
+              Observability dashboards
+            </h1>
+          </div>
         </div>
       </header>
       <div
@@ -859,11 +861,13 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Observability dashboards
-          </h1>
+            <h1>
+              Observability dashboards
+            </h1>
+          </div>
         </div>
       </header>
       <div
@@ -1099,11 +1103,13 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Observability dashboards
-          </h1>
+            <h1>
+              Observability dashboards
+            </h1>
+          </div>
         </div>
       </header>
       <div
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 f7b35c7f10..6faa30c895 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
@@ -15,10 +15,13 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
-            data-test-subj="panelNameHeader"
-          />
+          <div
+            class="euiText euiText--small"
+          >
+            <h1
+              data-test-subj="panelNameHeader"
+            />
+          </div>
           <div
             class="euiFlexItem"
           >
@@ -446,10 +449,13 @@ exports[`Panels View Component render panel view so container and reload dashboa
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
-            data-test-subj="panelNameHeader"
-          />
+          <div
+            class="euiText euiText--small"
+          >
+            <h1
+              data-test-subj="panelNameHeader"
+            />
+          </div>
           <div
             class="euiFlexItem"
           >
@@ -1354,14 +1360,17 @@ exports[`Panels View Component renders panel view container with visualizations
                     <div
                       className="euiPageHeaderSection"
                     >
-                      <EuiTitle
-                        size="l"
+                      <EuiText
+                        size="s"
                       >
-                        <h1
-                          className="euiTitle euiTitle--large"
-                          data-test-subj="panelNameHeader"
-                        />
-                      </EuiTitle>
+                        <div
+                          className="euiText euiText--small"
+                        >
+                          <h1
+                            data-test-subj="panelNameHeader"
+                          />
+                        </div>
+                      </EuiText>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
@@ -3705,14 +3714,17 @@ exports[`Panels View Component renders panel view container without visualizatio
                     <div
                       className="euiPageHeaderSection"
                     >
-                      <EuiTitle
-                        size="l"
+                      <EuiText
+                        size="s"
                       >
-                        <h1
-                          className="euiTitle euiTitle--large"
-                          data-test-subj="panelNameHeader"
-                        />
-                      </EuiTitle>
+                        <div
+                          className="euiText euiText--small"
+                        >
+                          <h1
+                            data-test-subj="panelNameHeader"
+                          />
+                        </div>
+                      </EuiText>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
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 f2cf3b5e36..fd011eeba2 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
@@ -15,10 +15,13 @@ exports[`Panels View SO Component render panel view container and refresh panel
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
-            data-test-subj="panelNameHeader"
-          />
+          <div
+            class="euiText euiText--small"
+          >
+            <h1
+              data-test-subj="panelNameHeader"
+            />
+          </div>
           <div
             class="euiFlexItem"
           >
@@ -446,10 +449,13 @@ exports[`Panels View SO Component render panel view so container and reload dash
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
-            data-test-subj="panelNameHeader"
-          />
+          <div
+            class="euiText euiText--small"
+          >
+            <h1
+              data-test-subj="panelNameHeader"
+            />
+          </div>
           <div
             class="euiFlexItem"
           >
@@ -879,10 +885,13 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
         <div
           class="euiPageHeaderSection"
         >
-          <h1
-            class="euiTitle euiTitle--large"
-            data-test-subj="panelNameHeader"
-          />
+          <div
+            class="euiText euiText--small"
+          >
+            <h1
+              data-test-subj="panelNameHeader"
+            />
+          </div>
           <div
             class="euiFlexItem"
           >
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
index 5ea33c9ed8..92b55a6968 100644
--- a/public/components/custom_panels/custom_panel_table.tsx
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -155,7 +155,7 @@ export const CustomPanelTable = ({
           sourcePanel = legacyFetchResult.operationalPanel;
         }
 
-        const { id, ...newPanel } = {
+        const { ...newPanel } = {
           ...sourcePanel,
           title: newName,
         };
@@ -342,9 +342,9 @@ export const CustomPanelTable = ({
         <EuiPageBody component="div">
           <EuiPageHeader>
             <EuiPageHeaderSection>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Observability dashboards</h1>
-              </EuiTitle>
+              </EuiText>
             </EuiPageHeaderSection>
           </EuiPageHeader>
           <EuiPageContent id="customPanelArea">
@@ -374,11 +374,15 @@ export const CustomPanelTable = ({
                       isOpen={isActionsPopoverOpen}
                       closePopover={() => setIsActionsPopoverOpen(false)}
                     >
-                      <EuiContextMenuPanel items={popoverItems()} />
+                      <EuiContextMenuPanel items={popoverItems()} size="s" />
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiSmallButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
+                    <EuiSmallButton
+                      fill
+                      href="#/create"
+                      data-test-subj="customPanels__createNewPanels"
+                    >
                       Create Dashboard
                     </EuiSmallButton>
                   </EuiFlexItem>
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
index 5b74bc0556..5be1810094 100644
--- a/public/components/custom_panels/custom_panel_view.tsx
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -21,7 +21,7 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiCompressedSuperDatePicker,
-  EuiTitle,
+  EuiText,
   OnTimeChangeProps,
   ShortDate,
 } from '@elastic/eui';
@@ -465,7 +465,11 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   );
 
   const saveButton = (
-    <EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
+    <EuiSmallButton
+      data-test-subj="savePanelButton"
+      iconType="save"
+      onClick={() => editPanel('save')}
+    >
       Save
     </EuiSmallButton>
   );
@@ -612,9 +616,9 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
             {appPanel || (
               <>
                 <EuiPageHeaderSection>
-                  <EuiTitle size="l">
+                  <EuiText size="s">
                     <h1 data-test-subj="panelNameHeader">{openPanelName}</h1>
-                  </EuiTitle>
+                  </EuiText>
                   <EuiFlexItem>
                     <EuiSpacer size="s" />
                   </EuiFlexItem>
@@ -638,7 +642,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
                         isOpen={panelsMenuPopover}
                         closePopover={() => setPanelsMenuPopover(false)}
                       >
-                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
+                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} size="s" />
                       </EuiPopover>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
index 62f4efde0b..5db2548343 100644
--- a/public/components/custom_panels/custom_panel_view_so.tsx
+++ b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -22,14 +22,14 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiCompressedSuperDatePicker,
-  EuiTitle,
+  EuiText,
   OnTimeChangeProps,
   ShortDate,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import last from 'lodash/last';
 import moment from 'moment';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CoreStart } from '../../../../../src/core/public';
 import { CREATE_PANEL_MESSAGE } from '../../../common/constants/custom_panels';
@@ -119,7 +119,6 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
     parentBreadcrumbs,
     childBreadcrumbs,
     updateAvailabilityVizId,
-    cloneCustomPanel,
     onEditClick,
     onAddClick,
   } = props;
@@ -131,7 +130,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
   const [loading, setLoading] = useState(true);
 
   const [pplFilterValue, setPPLFilterValue] = useState('');
-  const [baseQuery, setBaseQuery] = useState('');
+  const [baseQuery, _] = useState('');
   const [onRefresh, setOnRefresh] = useState(false);
 
   const [inputDisabled, setInputDisabled] = useState(true);
@@ -375,7 +374,11 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
   );
 
   const saveButton = (
-    <EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
+    <EuiSmallButton
+      data-test-subj="savePanelButton"
+      iconType="save"
+      onClick={() => editPanel('save')}
+    >
       Save
     </EuiSmallButton>
   );
@@ -562,9 +565,9 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
             {appPanel || (
               <>
                 <EuiPageHeaderSection>
-                  <EuiTitle size="l">
+                  <EuiText size="s">
                     <h1 data-test-subj="panelNameHeader">{panel?.title}</h1>
-                  </EuiTitle>
+                  </EuiText>
                   <EuiFlexItem>
                     <EuiSpacer size="s" />
                   </EuiFlexItem>
@@ -587,7 +590,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
                         isOpen={panelsMenuPopover}
                         closePopover={() => setPanelsMenuPopover(false)}
                       >
-                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
+                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} size="s" />
                       </EuiPopover>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
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 7399b3e415..a14594c28a 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
@@ -8,7 +8,13 @@ exports[`Custom Input Model component renders custom input modal with multiple a
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        Input test
+        <EuiText
+          size="s"
+        >
+          <h2>
+            Input test
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
@@ -58,7 +64,13 @@ exports[`Custom Input Model component renders custom input modal with single arg
   >
     <EuiModalHeader>
       <EuiModalHeaderTitle>
-        Input test
+        <EuiText
+          size="s"
+        >
+          <h2>
+            Input test
+          </h2>
+        </EuiText>
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
index 6772cfce7e..8b2b78d6ce 100644
--- a/public/components/custom_panels/helpers/add_visualization_popover.tsx
+++ b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -86,7 +86,7 @@ export const AddVisualizationPopover = ({
       panelPaddingSize="none"
       anchorPosition="downLeft"
     >
-      <EuiContextMenu initialPanelId={0} panels={getVizContextPanels()} />
+      <EuiContextMenu initialPanelId={0} panels={getVizContextPanels()} size="s" />
     </EuiPopover>
   );
 };
diff --git a/public/components/custom_panels/helpers/custom_input_modal.tsx b/public/components/custom_panels/helpers/custom_input_modal.tsx
index dd073eb7b8..e99e4a1924 100644
--- a/public/components/custom_panels/helpers/custom_input_modal.tsx
+++ b/public/components/custom_panels/helpers/custom_input_modal.tsx
@@ -16,6 +16,7 @@ import {
   EuiCompressedFormRow,
   EuiCompressedFieldText,
   EuiSmallButton,
+  EuiText,
 } from '@elastic/eui';
 
 /*
@@ -33,7 +34,7 @@ import {
  * optionalArgs - Arguments needed to pass them to runModal function
  */
 
-type CustomInputModalProps = {
+interface CustomInputModalProps {
   runModal:
     | ((value: string, value2: string, value3: string, value4: string) => void)
     | ((value: string) => void);
@@ -47,7 +48,7 @@ type CustomInputModalProps = {
   openPanelName?: string;
   helpText?: string;
   optionalArgs?: string[];
-};
+}
 
 export const CustomInputModal = (props: CustomInputModalProps) => {
   const {
@@ -71,7 +72,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={closeModal} initialFocus="[name=input]">
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{titletxt}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{titletxt}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
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 a8895d4a06..669eee9068 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
@@ -132,12 +132,16 @@ export const VisualizationContainer = ({
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <h1>{visualizationMetaData.name}</h1>
+              <EuiText size="s">
+                <h2>{visualizationMetaData.name}</h2>
+              </EuiText>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
-            This PPL Query is generated in runtime from selected data source
+            <EuiText size="s">
+              This PPL Query is generated in runtime from selected data source
+            </EuiText>
             <EuiSpacer />
             <EuiCodeBlock language="html" isCopyable>
               {visualizationMetaData.query}
@@ -156,12 +160,14 @@ export const VisualizationContainer = ({
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <h1>{isError.errorMessage}</h1>
+              <EuiText size="s">
+                <h2>{isError.errorMessage}</h2>
+              </EuiText>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
-            Error Details
+            <EuiText size="s">Error Details</EuiText>
             <EuiSpacer />
             <EuiCodeBlock language="html" isCopyable>
               {isError.errorDetails}
@@ -388,10 +394,12 @@ export const VisualizationContainer = ({
                   isOpen={isPopoverOpen}
                   closePopover={closeActionsMenu}
                   anchorPosition="downLeft"
+                  panelPaddingSize="none"
                 >
                   <EuiContextMenuPanel
                     items={popoverPanel}
                     data-test-subj="panelViz__popoverPanel"
+                    size="s"
                   />
                 </EuiPopover>
               )}
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 ca10206760..3e040c5d63 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
@@ -74,15 +74,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
       <EuiFlyoutHeader
         hasBorder={true}
       >
-        <EuiTitle
-          size="m"
+        <EuiText
+          size="s"
         >
           <h2
             id="addVisualizationFlyout"
           >
             Select existing visualization
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
     }
   >
@@ -142,12 +142,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                     <div
                       class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                     >
-                      <h2
-                        class="euiTitle euiTitle--medium"
-                        id="addVisualizationFlyout"
+                      <div
+                        class="euiText euiText--small"
                       >
-                        Select existing visualization
-                      </h2>
+                        <h2
+                          id="addVisualizationFlyout"
+                        >
+                          Select existing visualization
+                        </h2>
+                      </div>
                     </div>
                     <div
                       class="euiFlyoutBody"
@@ -358,12 +361,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                             <div
                               class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                             >
-                              <h2
-                                class="euiTitle euiTitle--medium"
-                                id="addVisualizationFlyout"
+                              <div
+                                class="euiText euiText--small"
                               >
-                                Select existing visualization
-                              </h2>
+                                <h2
+                                  id="addVisualizationFlyout"
+                                >
+                                  Select existing visualization
+                                </h2>
+                              </div>
                             </div>
                             <div
                               class="euiFlyoutBody"
@@ -506,12 +512,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                               <div
                                 class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="addVisualizationFlyout"
+                                <div
+                                  class="euiText euiText--small"
                                 >
-                                  Select existing visualization
-                                </h2>
+                                  <h2
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Select existing visualization
+                                  </h2>
+                                </div>
                               </div>
                               <div
                                 class="euiFlyoutBody"
@@ -654,12 +663,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                 <div
                                   class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    class="euiText euiText--small"
                                   >
-                                    Select existing visualization
-                                  </h2>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Select existing visualization
+                                    </h2>
+                                  </div>
                                 </div>
                                 <div
                                   class="euiFlyoutBody"
@@ -790,12 +802,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   <div
                                     class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                   >
-                                    <h2
-                                      class="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      class="euiText euiText--small"
                                     >
-                                      Select existing visualization
-                                    </h2>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Select existing visualization
+                                      </h2>
+                                    </div>
                                   </div>
                                   <div
                                     class="euiFlyoutBody"
@@ -986,16 +1001,19 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                               <div
                                 className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <EuiTitle
-                                  size="m"
+                                <EuiText
+                                  size="s"
                                 >
-                                  <h2
-                                    className="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    className="euiText euiText--small"
                                   >
-                                    Select existing visualization
-                                  </h2>
-                                </EuiTitle>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Select existing visualization
+                                    </h2>
+                                  </div>
+                                </EuiText>
                               </div>
                             </EuiFlyoutHeader>
                             <EuiFlyoutBody
@@ -1375,15 +1393,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
       <EuiFlyoutHeader
         hasBorder={true}
       >
-        <EuiTitle
-          size="m"
+        <EuiText
+          size="s"
         >
           <h2
             id="addVisualizationFlyout"
           >
             Replace visualization
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
     }
   >
@@ -1443,12 +1461,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                     <div
                       class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                     >
-                      <h2
-                        class="euiTitle euiTitle--medium"
-                        id="addVisualizationFlyout"
+                      <div
+                        class="euiText euiText--small"
                       >
-                        Replace visualization
-                      </h2>
+                        <h2
+                          id="addVisualizationFlyout"
+                        >
+                          Replace visualization
+                        </h2>
+                      </div>
                     </div>
                     <div
                       class="euiFlyoutBody"
@@ -1659,12 +1680,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                             <div
                               class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                             >
-                              <h2
-                                class="euiTitle euiTitle--medium"
-                                id="addVisualizationFlyout"
+                              <div
+                                class="euiText euiText--small"
                               >
-                                Replace visualization
-                              </h2>
+                                <h2
+                                  id="addVisualizationFlyout"
+                                >
+                                  Replace visualization
+                                </h2>
+                              </div>
                             </div>
                             <div
                               class="euiFlyoutBody"
@@ -1807,12 +1831,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                               <div
                                 class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="addVisualizationFlyout"
+                                <div
+                                  class="euiText euiText--small"
                                 >
-                                  Replace visualization
-                                </h2>
+                                  <h2
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Replace visualization
+                                  </h2>
+                                </div>
                               </div>
                               <div
                                 class="euiFlyoutBody"
@@ -1955,12 +1982,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                 <div
                                   class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    class="euiText euiText--small"
                                   >
-                                    Replace visualization
-                                  </h2>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Replace visualization
+                                    </h2>
+                                  </div>
                                 </div>
                                 <div
                                   class="euiFlyoutBody"
@@ -2091,12 +2121,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   <div
                                     class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                   >
-                                    <h2
-                                      class="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      class="euiText euiText--small"
                                     >
-                                      Replace visualization
-                                    </h2>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Replace visualization
+                                      </h2>
+                                    </div>
                                   </div>
                                   <div
                                     class="euiFlyoutBody"
@@ -2287,16 +2320,19 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                               <div
                                 className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <EuiTitle
-                                  size="m"
+                                <EuiText
+                                  size="s"
                                 >
-                                  <h2
-                                    className="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    className="euiText euiText--small"
                                   >
-                                    Replace visualization
-                                  </h2>
-                                </EuiTitle>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Replace visualization
+                                    </h2>
+                                  </div>
+                                </EuiText>
                               </div>
                             </EuiFlyoutHeader>
                             <EuiFlyoutBody
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 f291fdc79b..816a0740a8 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
@@ -85,15 +85,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
         <EuiFlyoutHeader
           hasBorder={true}
         >
-          <EuiTitle
-            size="m"
+          <EuiText
+            size="s"
           >
             <h2
               id="addVisualizationFlyout"
             >
               Select existing visualization
             </h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
       }
     >
@@ -153,12 +153,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                       <div
                         class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                       >
-                        <h2
-                          class="euiTitle euiTitle--medium"
-                          id="addVisualizationFlyout"
+                        <div
+                          class="euiText euiText--small"
                         >
-                          Select existing visualization
-                        </h2>
+                          <h2
+                            id="addVisualizationFlyout"
+                          >
+                            Select existing visualization
+                          </h2>
+                        </div>
                       </div>
                       <div
                         class="euiFlyoutBody"
@@ -369,12 +372,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                               <div
                                 class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="addVisualizationFlyout"
+                                <div
+                                  class="euiText euiText--small"
                                 >
-                                  Select existing visualization
-                                </h2>
+                                  <h2
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Select existing visualization
+                                  </h2>
+                                </div>
                               </div>
                               <div
                                 class="euiFlyoutBody"
@@ -517,12 +523,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                 <div
                                   class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    class="euiText euiText--small"
                                   >
-                                    Select existing visualization
-                                  </h2>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Select existing visualization
+                                    </h2>
+                                  </div>
                                 </div>
                                 <div
                                   class="euiFlyoutBody"
@@ -665,12 +674,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   <div
                                     class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                   >
-                                    <h2
-                                      class="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      class="euiText euiText--small"
                                     >
-                                      Select existing visualization
-                                    </h2>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Select existing visualization
+                                      </h2>
+                                    </div>
                                   </div>
                                   <div
                                     class="euiFlyoutBody"
@@ -801,12 +813,15 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     <div
                                       class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                     >
-                                      <h2
-                                        class="euiTitle euiTitle--medium"
-                                        id="addVisualizationFlyout"
+                                      <div
+                                        class="euiText euiText--small"
                                       >
-                                        Select existing visualization
-                                      </h2>
+                                        <h2
+                                          id="addVisualizationFlyout"
+                                        >
+                                          Select existing visualization
+                                        </h2>
+                                      </div>
                                     </div>
                                     <div
                                       class="euiFlyoutBody"
@@ -997,16 +1012,19 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                 <div
                                   className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <EuiTitle
-                                    size="m"
+                                  <EuiText
+                                    size="s"
                                   >
-                                    <h2
-                                      className="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      className="euiText euiText--small"
                                     >
-                                      Select existing visualization
-                                    </h2>
-                                  </EuiTitle>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Select existing visualization
+                                      </h2>
+                                    </div>
+                                  </EuiText>
                                 </div>
                               </EuiFlyoutHeader>
                               <EuiFlyoutBody
@@ -1381,15 +1399,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
         <EuiFlyoutHeader
           hasBorder={true}
         >
-          <EuiTitle
-            size="m"
+          <EuiText
+            size="s"
           >
             <h2
               id="addVisualizationFlyout"
             >
               Replace visualization
             </h2>
-          </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
       }
     >
@@ -1449,12 +1467,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                       <div
                         class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                       >
-                        <h2
-                          class="euiTitle euiTitle--medium"
-                          id="addVisualizationFlyout"
+                        <div
+                          class="euiText euiText--small"
                         >
-                          Replace visualization
-                        </h2>
+                          <h2
+                            id="addVisualizationFlyout"
+                          >
+                            Replace visualization
+                          </h2>
+                        </div>
                       </div>
                       <div
                         class="euiFlyoutBody"
@@ -1665,12 +1686,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                               <div
                                 class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                               >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="addVisualizationFlyout"
+                                <div
+                                  class="euiText euiText--small"
                                 >
-                                  Replace visualization
-                                </h2>
+                                  <h2
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Replace visualization
+                                  </h2>
+                                </div>
                               </div>
                               <div
                                 class="euiFlyoutBody"
@@ -1813,12 +1837,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                 <div
                                   class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="addVisualizationFlyout"
+                                  <div
+                                    class="euiText euiText--small"
                                   >
-                                    Replace visualization
-                                  </h2>
+                                    <h2
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Replace visualization
+                                    </h2>
+                                  </div>
                                 </div>
                                 <div
                                   class="euiFlyoutBody"
@@ -1961,12 +1988,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   <div
                                     class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                   >
-                                    <h2
-                                      class="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      class="euiText euiText--small"
                                     >
-                                      Replace visualization
-                                    </h2>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Replace visualization
+                                      </h2>
+                                    </div>
                                   </div>
                                   <div
                                     class="euiFlyoutBody"
@@ -2097,12 +2127,15 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     <div
                                       class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                     >
-                                      <h2
-                                        class="euiTitle euiTitle--medium"
-                                        id="addVisualizationFlyout"
+                                      <div
+                                        class="euiText euiText--small"
                                       >
-                                        Replace visualization
-                                      </h2>
+                                        <h2
+                                          id="addVisualizationFlyout"
+                                        >
+                                          Replace visualization
+                                        </h2>
+                                      </div>
                                     </div>
                                     <div
                                       class="euiFlyoutBody"
@@ -2293,16 +2326,19 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                 <div
                                   className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
                                 >
-                                  <EuiTitle
-                                    size="m"
+                                  <EuiText
+                                    size="s"
                                   >
-                                    <h2
-                                      className="euiTitle euiTitle--medium"
-                                      id="addVisualizationFlyout"
+                                    <div
+                                      className="euiText euiText--small"
                                     >
-                                      Replace visualization
-                                    </h2>
-                                  </EuiTitle>
+                                      <h2
+                                        id="addVisualizationFlyout"
+                                      >
+                                        Replace visualization
+                                      </h2>
+                                    </div>
+                                  </EuiText>
                                 </div>
                               </EuiFlyoutHeader>
                               <EuiFlyoutBody
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 4dc3c426a3..a017cdb926 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
@@ -28,7 +28,6 @@ import {
   EuiSelectOption,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiToolTip,
   ShortDate,
 } from '@elastic/eui';
@@ -128,17 +127,19 @@ export const VisaulizationFlyout = ({
   const [modalContent, setModalContent] = useState(<></>);
 
   const closeModal = () => setIsModalVisible(false);
-  const showModal = (modalType: string) => {
+  const showModal = (_: string) => {
     setModalContent(
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>{isPreviewError.errorMessage}</h1>
+            <EuiText size="s">
+              <h2>{isPreviewError.errorMessage}</h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          Error Details
+          <EuiText size="s">Error Details</EuiText>
           <EuiSpacer />
           <EuiCodeBlock language="html" isCopyable>
             {isPreviewError.errorDetails}
@@ -267,11 +268,11 @@ export const VisaulizationFlyout = ({
 
   const flyoutHeader = (
     <EuiFlyoutHeader hasBorder>
-      <EuiTitle size="m">
+      <EuiText size="s">
         <h2 id="addVisualizationFlyout">
           {isFlyoutReplacement ? 'Replace visualization' : 'Select existing visualization'}
         </h2>
-      </EuiTitle>
+      </EuiText>
     </EuiFlyoutHeader>
   );
 
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 691f89c994..b9d8845f34 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
@@ -28,7 +28,6 @@ import {
   EuiSelectOption,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiToolTip,
   ShortDate,
 } from '@elastic/eui';
@@ -128,17 +127,19 @@ export const VisaulizationFlyoutSO = ({
   const [modalContent, setModalContent] = useState(<></>);
 
   const closeModal = () => setIsModalVisible(false);
-  const showModal = (modalType: string) => {
+  const showModal = (_: string) => {
     setModalContent(
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>{isPreviewError.errorMessage}</h1>
+            <EuiText size="s">
+              <h2>{isPreviewError.errorMessage}</h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          Error Details
+          <EuiText size="s">Error Details</EuiText>
           <EuiSpacer />
           <EuiCodeBlock language="html" isCopyable>
             {isPreviewError.errorDetails}
@@ -177,7 +178,7 @@ export const VisaulizationFlyoutSO = ({
         replaceVizInPanel(panel, replaceVisualizationId, selectValue, newVisualizationTitle)
       );
     } else {
-      const visualizationsWithNewPanel = addVisualizationPanel({
+      addVisualizationPanel({
         savedVisualizationId: selectValue,
         onSuccess: `Visualization ${newVisualizationTitle} successfully added!`,
         onFailure: `Error in adding ${newVisualizationTitle} visualization to the panel`,
@@ -249,11 +250,11 @@ export const VisaulizationFlyoutSO = ({
 
   const flyoutHeader = (
     <EuiFlyoutHeader hasBorder>
-      <EuiTitle size="m">
+      <EuiText size="s">
         <h2 id="addVisualizationFlyout">
           {isFlyoutReplacement ? 'Replace visualization' : 'Select existing visualization'}
         </h2>
-      </EuiTitle>
+      </EuiText>
     </EuiFlyoutHeader>
   );