diff --git a/x-pack/plugins/stack_alerts/public/rule_types/components/source_fields_select.tsx b/x-pack/plugins/stack_alerts/public/rule_types/components/source_fields_select.tsx
index 3cd34a3cd0015..79b2e6ca4ed16 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/components/source_fields_select.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/components/source_fields_select.tsx
@@ -7,7 +7,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { uniqBy } from 'lodash';
-import { EuiComboBox, EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiComboBox, EuiFormRow } from '@elastic/eui';
 import { FieldOption } from '@kbn/triggers-actions-ui-plugin/public/common';
 import { IErrorObject } from '@kbn/triggers-actions-ui-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -77,44 +77,39 @@ export const SourceFields: React.FC<SourceFieldsProps> = ({
       fullWidth
       isInvalid={errors.length > 0 && sourceFields !== undefined}
       error={errors}
+      label={
+        <FormattedMessage
+          id="xpack.stackAlerts.components.ui.sourceFieldsSelect.title"
+          defaultMessage="Add more fields to alert details"
+        />
+      }
     >
-      <>
-        <EuiTitle size="xs">
-          <h5>
-            <FormattedMessage
-              id="xpack.stackAlerts.components.ui.sourceFieldsSelect.title"
-              defaultMessage="Add more fields to alert details"
-            />
-          </h5>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiComboBox
-          fullWidth
-          placeholder={i18n.translate(
-            'xpack.stackAlerts.components.ui.sourceFieldsSelect.placeholder',
-            {
-              defaultMessage: 'Select fields',
+      <EuiComboBox
+        fullWidth
+        placeholder={i18n.translate(
+          'xpack.stackAlerts.components.ui.sourceFieldsSelect.placeholder',
+          {
+            defaultMessage: 'Select fields',
+          }
+        )}
+        data-test-subj="sourceFields"
+        isInvalid={errors.length > 0 && sourceFields !== undefined}
+        selectedOptions={(sourceFields || []).map((f) => ({
+          label: f.label,
+          value: f.searchPath,
+          'data-test-subj': `option-${f.label}`,
+        }))}
+        onChange={(options) => {
+          const fields: SourceField[] = [];
+          options.forEach((f) => {
+            if (f.value) {
+              fields.push({ label: f.label, searchPath: f.value });
             }
-          )}
-          data-test-subj="sourceFields"
-          isInvalid={errors.length > 0 && sourceFields !== undefined}
-          selectedOptions={(sourceFields || []).map((f) => ({
-            label: f.label,
-            value: f.searchPath,
-            'data-test-subj': `option-${f.label}`,
-          }))}
-          onChange={(options) => {
-            const fields: SourceField[] = [];
-            options.forEach((f) => {
-              if (f.value) {
-                fields.push({ label: f.label, searchPath: f.value });
-              }
-            });
-            onChangeSourceFields(fields);
-          }}
-          options={sourceFieldsOptions}
-        />
-      </>
+          });
+          onChangeSourceFields(fields);
+        }}
+        options={sourceFieldsOptions}
+      />
     </EuiFormRow>
   ) : null;
 };
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
index 1cf901ecae8f9..66a1ca82feff5 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
@@ -11,7 +11,7 @@ import { lastValueFrom } from 'rxjs';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFormRow, EuiLink, EuiSpacer } from '@elastic/eui';
 
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
@@ -195,60 +195,49 @@ export const EsQueryExpression: React.FC<
 
   return (
     <Fragment>
-      <EuiTitle size="xs">
-        <h5>
+      <EuiFormRow
+        fullWidth
+        label={
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.selectIndexPrompt"
             defaultMessage="Select indices"
           />
-        </h5>
-      </EuiTitle>
-
-      <EuiSpacer size="s" />
-
-      <IndexSelectPopover
-        index={index}
-        data-test-subj="indexSelectPopover"
-        esFields={esFields}
-        timeField={timeField}
-        errors={errors}
-        onIndexChange={async (indices: string[]) => {
-          setParam('index', indices);
-
-          // reset expression fields if indices are deleted
-          if (indices.length === 0) {
-            setRuleProperty('params', {
-              timeField: ruleParams.timeField,
-              index: indices,
-              esQuery: DEFAULT_VALUES.QUERY,
-              size: DEFAULT_VALUES.SIZE,
-              thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
-              timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
-              timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
-              threshold: DEFAULT_VALUES.THRESHOLD,
-              aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
-              groupBy: DEFAULT_VALUES.GROUP_BY,
-              termSize: DEFAULT_VALUES.TERM_SIZE,
-              searchType: SearchType.esQuery,
-              excludeHitsFromPreviousRun: DEFAULT_VALUES.EXCLUDE_PREVIOUS_HITS,
-              sourceFields: undefined,
-            });
-          } else {
-            await refreshEsFields(indices);
-          }
-        }}
-        onTimeFieldChange={(updatedTimeField: string) => setParam('timeField', updatedTimeField)}
-      />
-      <EuiSpacer size="s" />
+        }
+      >
+        <IndexSelectPopover
+          index={index}
+          data-test-subj="indexSelectPopover"
+          esFields={esFields}
+          timeField={timeField}
+          errors={errors}
+          onIndexChange={async (indices: string[]) => {
+            setParam('index', indices);
 
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.defineQueryPrompt"
-            defaultMessage="Define your query using Query DSL"
-          />
-        </h5>
-      </EuiTitle>
+            // reset expression fields if indices are deleted
+            if (indices.length === 0) {
+              setRuleProperty('params', {
+                timeField: ruleParams.timeField,
+                index: indices,
+                esQuery: DEFAULT_VALUES.QUERY,
+                size: DEFAULT_VALUES.SIZE,
+                thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
+                timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
+                timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
+                threshold: DEFAULT_VALUES.THRESHOLD,
+                aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
+                groupBy: DEFAULT_VALUES.GROUP_BY,
+                termSize: DEFAULT_VALUES.TERM_SIZE,
+                searchType: SearchType.esQuery,
+                excludeHitsFromPreviousRun: DEFAULT_VALUES.EXCLUDE_PREVIOUS_HITS,
+                sourceFields: undefined,
+              });
+            } else {
+              await refreshEsFields(indices);
+            }
+          }}
+          onTimeFieldChange={(updatedTimeField: string) => setParam('timeField', updatedTimeField)}
+        />
+      </EuiFormRow>
       <EuiSpacer size="s" />
       <EuiFormRow
         id="queryEditor"
@@ -264,6 +253,12 @@ export const EsQueryExpression: React.FC<
             />
           </EuiLink>
         }
+        label={
+          <FormattedMessage
+            id="xpack.stackAlerts.esQuery.ui.defineQueryPrompt"
+            defaultMessage="Define your query using Query DSL"
+          />
+        }
       >
         <CodeEditor
           languageId="xjson"
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/esql_query_expression.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/esql_query_expression.tsx
index 30f34b0a15d05..e86abff874bd7 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/esql_query_expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/esql_query_expression.tsx
@@ -15,7 +15,6 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiSpacer,
-  EuiTitle,
 } from '@elastic/eui';
 import { getFields, RuleTypeParamsExpressionProps } from '@kbn/triggers-actions-ui-plugin/public';
 import { TextBasedLangEditor } from '@kbn/text-based-languages/public';
@@ -180,16 +179,17 @@ export const EsqlQueryExpression: React.FC<
 
   return (
     <Fragment>
-      <EuiTitle size="xs">
-        <h5>
+      <EuiFormRow
+        id="queryEditor"
+        data-test-subj="queryEsqlEditor"
+        fullWidth
+        label={
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.defineEsqlQueryPrompt"
             defaultMessage="Define your query using ES|QL"
           />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiFormRow id="queryEditor" data-test-subj="queryEsqlEditor" fullWidth>
+        }
+      >
         <TextBasedLangEditor
           query={query}
           onTextLangQueryChange={debounce((q: AggregateQuery) => {
@@ -215,20 +215,17 @@ export const EsqlQueryExpression: React.FC<
         errors={errors.sourceFields}
       />
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.selectEsqlQueryTimeFieldPrompt"
-            defaultMessage="Select a time field"
-          />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
       <EuiFormRow
         id="timeField"
         fullWidth
         isInvalid={errors.timeField.length > 0 && timeField !== undefined}
         error={errors.timeField}
+        label={
+          <FormattedMessage
+            id="xpack.stackAlerts.esQuery.ui.selectEsqlQueryTimeFieldPrompt"
+            defaultMessage="Select a time field"
+          />
+        }
       >
         <EuiSelect
           options={timeFieldOptions}
@@ -243,21 +240,18 @@ export const EsqlQueryExpression: React.FC<
         />
       </EuiFormRow>
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.setEsqlQueryTimeWindowPrompt"
-            defaultMessage="Set the time window"
-          />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiFlexGroup>
+      <EuiFlexGroup alignItems="flexEnd">
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id="timeWindowSize"
             isInvalid={errors.timeWindowSize.length > 0}
             error={errors.timeWindowSize}
+            label={
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.setEsqlQueryTimeWindowPrompt"
+                defaultMessage="Set the time window"
+              />
+            }
           >
             <EuiFieldNumber
               name="timeWindowSize"
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/search_source_expression_form.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/search_source_expression_form.tsx
index c6ee0157e082a..5cc193f7c4624 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/search_source_expression_form.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/search_source_expression_form.tsx
@@ -10,7 +10,7 @@ import deepEqual from 'fast-deep-equal';
 import { lastValueFrom } from 'rxjs';
 import type { Filter, Query } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { IErrorObject } from '@kbn/triggers-actions-ui-plugin/public';
 import type { SearchBarProps } from '@kbn/unified-search-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -300,22 +300,23 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp
 
   return (
     <Fragment>
-      <EuiTitle size="xs">
-        <h5>
+      <EuiFormRow
+        fullWidth
+        label={
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.selectDataViewPrompt"
             defaultMessage="Select a data view"
           />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <DataViewSelectPopover
-        dependencies={{ dataViews, dataViewEditor }}
-        dataView={dataView}
-        metadata={props.metadata}
-        onSelectDataView={onSelectDataView}
-        onChangeMetaData={props.onChangeMetaData}
-      />
+        }
+      >
+        <DataViewSelectPopover
+          dependencies={{ dataViews, dataViewEditor }}
+          dataView={dataView}
+          metadata={props.metadata}
+          onSelectDataView={onSelectDataView}
+          onChangeMetaData={props.onChangeMetaData}
+        />
+      </EuiFormRow>
       {Boolean(dataView?.id) && (
         <>
           <EuiSpacer size="s" />
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx
index 313d3f586c73e..c356104ed831f 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx
@@ -7,15 +7,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiCheckbox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIconTip,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiCheckbox, EuiFormRow, EuiIconTip, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
   builtInAggregationTypes,
@@ -98,22 +90,23 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
   }, [groupBy]);
   return (
     <>
-      <EuiTitle size="xs">
-        <h4>
+      <EuiFormRow
+        fullWidth
+        label={[
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.conditionsPrompt"
             defaultMessage="Set the group, threshold, and time window"
-          />{' '}
-          <QueryThresholdHelpPopover />
-        </h4>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <WhenExpression
-        display="fullWidth"
-        data-test-subj="whenExpression"
-        aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
-        onChangeSelectedAggType={onChangeSelectedAggType}
-      />
+          />,
+          <QueryThresholdHelpPopover />,
+        ]}
+      >
+        <WhenExpression
+          display="fullWidth"
+          data-test-subj="whenExpression"
+          aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
+          onChangeSelectedAggType={onChangeSelectedAggType}
+        />
+      </EuiFormRow>
       {aggType && builtInAggregationTypes[aggType].fieldRequired ? (
         <OfExpression
           aggField={aggField}
@@ -159,18 +152,13 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
         onChangeWindowUnit={onChangeWindowUnit}
       />
       <EuiSpacer size="s" />
-      <EuiFlexGroup alignItems="center" responsive={false} gutterSize="xs">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="xs">
-            <h5>
-              <FormattedMessage
-                id="xpack.stackAlerts.esQuery.ui.selectSizePrompt"
-                defaultMessage="Set the number of documents to send"
-              />
-            </h5>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+      <EuiFormRow
+        fullWidth
+        label={[
+          <FormattedMessage
+            id="xpack.stackAlerts.esQuery.ui.selectSizePrompt"
+            defaultMessage="Set the number of documents to send"
+          />,
           <EuiIconTip
             position="right"
             color="subdued"
@@ -179,21 +167,21 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
               defaultMessage:
                 'Specify the number of documents to pass to the configured actions when the threshold condition is met.',
             })}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="s" />
-      <ValueExpression
-        description={i18n.translate('xpack.stackAlerts.esQuery.ui.sizeExpression', {
-          defaultMessage: 'Size',
-        })}
-        data-test-subj="sizeValueExpression"
-        value={size}
-        errors={errors.size}
-        display="fullWidth"
-        popupPosition="upLeft"
-        onChangeSelectedValue={onChangeSizeValue}
-      />
+          />,
+        ]}
+      >
+        <ValueExpression
+          description={i18n.translate('xpack.stackAlerts.esQuery.ui.sizeExpression', {
+            defaultMessage: 'Size',
+          })}
+          data-test-subj="sizeValueExpression"
+          value={size}
+          errors={errors.size}
+          display="fullWidth"
+          popupPosition="upLeft"
+          onChangeSelectedValue={onChangeSizeValue}
+        />
+      </EuiFormRow>
       <EuiSpacer size="m" />
       <EuiFormRow>
         <EuiCheckbox
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/expression.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/expression.tsx
index 5fc0d89216292..9dff833cd59da 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/expression.tsx
@@ -13,7 +13,6 @@ import {
   EuiCallOut,
   EuiEmptyPrompt,
   EuiText,
-  EuiTitle,
   EuiFieldSearch,
   EuiFormRow,
 } from '@elastic/eui';
@@ -163,64 +162,66 @@ export const IndexThresholdRuleTypeExpression: React.FunctionComponent<
           <EuiSpacer />
         </Fragment>
       ) : null}
-      <EuiTitle size="xs">
-        <h5>
+      <EuiFormRow
+        fullWidth
+        label={
           <FormattedMessage
             id="xpack.stackAlerts.threshold.ui.selectIndex"
             defaultMessage="Select indices"
           />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <IndexSelectPopover
-        index={indexArray}
-        data-test-subj="indexSelectPopover"
-        esFields={esFields}
-        timeField={timeField}
-        errors={errors}
-        onIndexChange={async (indices: string[]) => {
-          setRuleParams('index', indices);
+        }
+      >
+        <IndexSelectPopover
+          index={indexArray}
+          data-test-subj="indexSelectPopover"
+          esFields={esFields}
+          timeField={timeField}
+          errors={errors}
+          onIndexChange={async (indices: string[]) => {
+            setRuleParams('index', indices);
 
-          // reset expression fields if indices are deleted
-          if (indices.length === 0) {
-            setRuleProperty('params', {
-              ...ruleParams,
-              index: indices,
-              aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
-              termSize: DEFAULT_VALUES.TERM_SIZE,
-              thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
-              timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
-              timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
-              groupBy: DEFAULT_VALUES.GROUP_BY,
-              threshold: DEFAULT_VALUES.THRESHOLD,
-              timeField: '',
-            });
-          } else {
-            await refreshEsFields(indices);
+            // reset expression fields if indices are deleted
+            if (indices.length === 0) {
+              setRuleProperty('params', {
+                ...ruleParams,
+                index: indices,
+                aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
+                termSize: DEFAULT_VALUES.TERM_SIZE,
+                thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
+                timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
+                timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
+                groupBy: DEFAULT_VALUES.GROUP_BY,
+                threshold: DEFAULT_VALUES.THRESHOLD,
+                timeField: '',
+              });
+            } else {
+              await refreshEsFields(indices);
+            }
+          }}
+          onTimeFieldChange={(updatedTimeField: string) =>
+            setRuleParams('timeField', updatedTimeField)
           }
-        }}
-        onTimeFieldChange={(updatedTimeField: string) =>
-          setRuleParams('timeField', updatedTimeField)
-        }
-      />
+        />
+      </EuiFormRow>
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
+      <EuiFormRow
+        fullWidth
+        label={
           <FormattedMessage
             id="xpack.stackAlerts.threshold.ui.conditionPrompt"
             defaultMessage="Define the condition"
           />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <WhenExpression
-        display="fullWidth"
-        data-test-subj="whenExpression"
-        aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
-        onChangeSelectedAggType={(selectedAggType: string) =>
-          setRuleParams('aggType', selectedAggType)
         }
-      />
+      >
+        <WhenExpression
+          display="fullWidth"
+          data-test-subj="whenExpression"
+          aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
+          onChangeSelectedAggType={(selectedAggType: string) =>
+            setRuleParams('aggType', selectedAggType)
+          }
+        />
+      </EuiFormRow>
       {aggType && builtInAggregationTypes[aggType].fieldRequired ? (
         <OfExpression
           aggField={aggField}