diff --git a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
similarity index 89%
rename from x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx
rename to x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
index f951ffdff44ba..fe53dd84c48d1 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
@@ -12,24 +12,18 @@ import type { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import { useKibana } from '../../../utils/kibana_react';
 import { getHealthColor } from '../helpers/get_health_color';
 
-interface PageTitleProps {
+interface PageTitleContentProps {
   rule: Rule;
 }
 
-export function PageTitle({ rule }: PageTitleProps) {
+export function PageTitleContent({ rule }: PageTitleContentProps) {
   const {
     triggersActionsUi: { getRuleTagBadge: RuleTagBadge },
   } = useKibana().services;
 
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem grow={false} data-test-subj="ruleName">
-          {rule.name}
-        </EuiFlexItem>
-      </EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiSpacer size="m" />
         <EuiText size="xs">
           <EuiBadge color={getHealthColor(rule.executionStatus.status)}>
             {rule.executionStatus.status.charAt(0).toUpperCase() +
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
index 31ae9e41d0529..e8270434c12b2 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
@@ -18,7 +18,7 @@ import { usePluginContext } from '../../hooks/use_plugin_context';
 import { useFetchRule } from '../../hooks/use_fetch_rule';
 import { useFetchRuleTypes } from '../../hooks/use_fetch_rule_types';
 import { useGetFilteredRuleTypes } from '../../hooks/use_get_filtered_rule_types';
-import { PageTitle } from './components/page_title';
+import { PageTitleContent } from './components/page_title_content';
 import { DeleteConfirmationModal } from './components/delete_confirmation_modal';
 import { CenterJustifiedSpinner } from '../../components/center_justified_spinner';
 import { NoRuleFoundPanel } from './components/no_rule_found_panel';
@@ -200,7 +200,11 @@ export function RuleDetailsPage() {
     <ObservabilityPageTemplate
       data-test-subj="ruleDetails"
       pageHeader={{
-        pageTitle: <PageTitle rule={rule} />,
+        pageTitle: rule.name,
+        pageTitleProps: {
+          'data-test-subj': 'ruleName',
+        },
+        children: <PageTitleContent rule={rule} />,
         bottomBorder: false,
         rightSideItems: [
           <HeaderActions