diff --git a/x-pack/plugins/observability/public/components/alerts_flyout.mock.ts b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.mock.ts
similarity index 100%
rename from x-pack/plugins/observability/public/components/alerts_flyout.mock.ts
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.mock.ts
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout.stories.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx
similarity index 88%
rename from x-pack/plugins/observability/public/components/alerts_flyout.stories.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx
index 26ed2d240af30..4be0a7deb816f 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout.stories.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx
@@ -8,10 +8,10 @@
 import React, { ComponentType } from 'react';
 import { ALERT_UUID } from '@kbn/rule-data-utils';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { PluginContext, PluginContextValue } from '../context/plugin_context';
-import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
+import { PluginContext, PluginContextValue } from '../../context/plugin_context';
+import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
+import AlertsFlyout from './alerts_flyout';
 import { apmAlertResponseExample } from './alerts_flyout.mock';
-import { AlertsFlyout } from './alerts_flyout';
 
 interface Args {
   alerts: Array<Record<string, unknown>>;
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout.test.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx
similarity index 94%
rename from x-pack/plugins/observability/public/components/alerts_flyout.test.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx
index 96716ab593200..267bac3b158d7 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout.test.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
-import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
-import { render } from '../utils/test_helper';
-import { AlertsFlyout } from './alerts_flyout';
-import type { TopAlert } from '../typings/alerts';
+import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
+import AlertsFlyout from './alerts_flyout';
+import { render } from '../../utils/test_helper';
+import type { TopAlert } from '../../typings/alerts';
 
 describe('AlertsFlyout', () => {
   jest
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx
similarity index 87%
rename from x-pack/plugins/observability/public/components/alerts_flyout.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx
index c2e1c9626eb51..7f7784524f26c 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx
@@ -12,9 +12,9 @@ import { ALERT_UUID } from '@kbn/rule-data-utils';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
 import { AlertsFlyoutFooter } from './alerts_flyout_footer';
-import { parseAlert } from '../pages/alerts/helpers/parse_alert';
-import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
-import type { TopAlert } from '../typings/alerts';
+import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
+import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
+import type { TopAlert } from '../../typings/alerts';
 
 type AlertsFlyoutProps = {
   alert?: TopAlert;
@@ -24,7 +24,7 @@ type AlertsFlyoutProps = {
   selectedAlertId?: string;
 } & EuiFlyoutProps;
 
-export function AlertsFlyout({
+function AlertsFlyout({
   alert,
   alerts,
   isInApp = false,
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout_body.test.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx
similarity index 78%
rename from x-pack/plugins/observability/public/components/alerts_flyout_body.test.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx
index 89b19a91cbe22..b28f09efd46c9 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout_body.test.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 import React from 'react';
-import { render } from '../utils/test_helper';
+import { render } from '../../utils/test_helper';
 import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
-import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
+import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
-import { inventoryThresholdAlert } from '../rules/fixtures/example_alerts';
-import { parseAlert } from '../pages/alerts/helpers/parse_alert';
-import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/rule_details';
+import { inventoryThresholdAlert } from '../../rules/fixtures/example_alerts';
+import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
+import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/rule_details';
 
 describe('AlertsFlyoutBody', () => {
   jest
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout_body.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx
similarity index 89%
rename from x-pack/plugins/observability/public/components/alerts_flyout_body.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx
index d7613819e62ce..0250e317d81a8 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout_body.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx
@@ -29,13 +29,13 @@ import {
 import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared';
 import moment from 'moment-timezone';
 import { useUiSetting } from '@kbn/kibana-react-plugin/public';
-import { useKibana } from '../utils/kibana_react';
-import { asDuration } from '../../common/utils/formatters';
-import { paths } from '../config/paths';
-import { translations } from '../config/translations';
-import { formatAlertEvaluationValue } from '../utils/format_alert_evaluation_value';
-import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/rule_details';
-import type { TopAlert } from '../typings/alerts';
+import { useKibana } from '../../utils/kibana_react';
+import { asDuration } from '../../../common/utils/formatters';
+import { paths } from '../../config/paths';
+import { translations } from '../../config/translations';
+import { formatAlertEvaluationValue } from '../../utils/format_alert_evaluation_value';
+import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/rule_details';
+import type { TopAlert } from '../../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout_footer.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx
similarity index 82%
rename from x-pack/plugins/observability/public/components/alerts_flyout_footer.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx
index 5b82d5b6339f6..c664b6391e299 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout_footer.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx
@@ -6,12 +6,12 @@
  */
 import React from 'react';
 import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
-import { useKibana } from '../utils/kibana_react';
-import { usePluginContext } from '../hooks/use_plugin_context';
-import { isAlertDetailsEnabledPerApp } from '../utils/is_alert_details_enabled';
-import { translations } from '../config/translations';
-import { paths } from '../config/paths';
-import type { TopAlert } from '../typings/alerts';
+import { useKibana } from '../../utils/kibana_react';
+import { usePluginContext } from '../../hooks/use_plugin_context';
+import { isAlertDetailsEnabledPerApp } from '../../utils/is_alert_details_enabled';
+import { translations } from '../../config/translations';
+import { paths } from '../../config/paths';
+import type { TopAlert } from '../../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout_header.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx
similarity index 92%
rename from x-pack/plugins/observability/public/components/alerts_flyout_header.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx
index fc4f9d4d0d316..b30436efffca6 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout_header.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import type { TopAlert } from '../typings/alerts';
+import type { TopAlert } from '../../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;
diff --git a/x-pack/plugins/observability/public/components/use_get_alert_flyout_components.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
similarity index 87%
rename from x-pack/plugins/observability/public/components/use_get_alert_flyout_components.tsx
rename to x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
index 06d616b067f26..938cad37661b0 100644
--- a/x-pack/plugins/observability/public/components/use_get_alert_flyout_components.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
@@ -8,13 +8,11 @@
 import React, { useCallback, useMemo } from 'react';
 import { AlertsTableFlyoutBaseProps } from '@kbn/triggers-actions-ui-plugin/public';
 
-import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
 import { AlertsFlyoutFooter } from './alerts_flyout_footer';
-import { parseAlert } from '../pages/alerts/helpers/parse_alert';
-
-export { AlertsFlyout } from './alerts_flyout';
+import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
+import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 
 export const useGetAlertFlyoutComponents = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry
diff --git a/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx
index bc7faa02f5a23..5c35127a8cdea 100644
--- a/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx
@@ -21,7 +21,7 @@ import {
   AlertActions,
   Props as AlertActionsProps,
 } from '../../pages/alerts/components/alert_actions';
-import { useGetAlertFlyoutComponents } from '../use_get_alert_flyout_components';
+import { useGetAlertFlyoutComponents } from '../alerts_flyout/use_get_alert_flyout_components';
 import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 import type { ConfigSchema } from '../../plugin';
 import type { TopAlert } from '../../typings/alerts';
diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts
index 694a7f7f0dd94..ac5cff15ba015 100644
--- a/x-pack/plugins/observability/public/index.ts
+++ b/x-pack/plugins/observability/public/index.ts
@@ -70,7 +70,7 @@ export {
   METRIC_TYPE,
 } from './hooks/use_track_metric';
 
-export const LazyAlertsFlyout = lazy(() => import('./components/alerts_flyout'));
+export const LazyAlertsFlyout = lazy(() => import('./components/alerts_flyout/alerts_flyout'));
 export { useFetcher, FETCH_STATUS } from './hooks/use_fetcher';
 export { useEsSearch, createEsParams } from './hooks/use_es_search';