diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx
index f492240a8f9b8..0bd582e1cef62 100644
--- a/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx
+++ b/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx
@@ -28,6 +28,7 @@ export const CaseViewAlerts = ({ caseData }: CaseViewAlertsProps) => {
     }),
     [caseData.comments]
   );
+
   const alertRegistrationContexts = useMemo(
     () => getRegistrationContextFromAlerts(caseData.comments),
     [caseData.comments]
diff --git a/x-pack/plugins/cases/public/mocks.ts b/x-pack/plugins/cases/public/mocks.ts
index 57eead3b80b10..10a4c1f6fd059 100644
--- a/x-pack/plugins/cases/public/mocks.ts
+++ b/x-pack/plugins/cases/public/mocks.ts
@@ -21,9 +21,13 @@ const uiMock: jest.Mocked<CasesUiStart['ui']> = {
   getRecentCases: jest.fn(),
 };
 
+export const openAddToExistingCaseModalMock = jest.fn();
+
 const hooksMock: jest.Mocked<CasesUiStart['hooks']> = {
   getUseCasesAddToNewCaseFlyout: jest.fn(),
-  getUseCasesAddToExistingCaseModal: jest.fn(),
+  getUseCasesAddToExistingCaseModal: jest.fn().mockImplementation(() => ({
+    open: openAddToExistingCaseModalMock,
+  })),
 };
 
 const helpersMock: jest.Mocked<CasesUiStart['helpers']> = {
diff --git a/x-pack/plugins/observability/public/hooks/use_fetch_alert_detail.ts b/x-pack/plugins/observability/public/hooks/use_fetch_alert_detail.ts
index aa604659f8c08..a86b97741f24c 100644
--- a/x-pack/plugins/observability/public/hooks/use_fetch_alert_detail.ts
+++ b/x-pack/plugins/observability/public/hooks/use_fetch_alert_detail.ts
@@ -21,7 +21,6 @@ interface AlertDetailParams {
 
 export const useFetchAlertDetail = (id: string): [boolean, TopAlert | null] => {
   const { observabilityRuleTypeRegistry } = usePluginContext();
-
   const params = useMemo(
     () => ({ id, ruleType: observabilityRuleTypeRegistry }),
     [id, observabilityRuleTypeRegistry]
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx
index d2c67c85c021e..eaa253efbc51f 100644
--- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx
@@ -7,23 +7,58 @@
 
 import React from 'react';
 import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
+import { useParams } from 'react-router-dom';
+import { Chance } from 'chance';
+import { waitFor } from '@testing-library/react';
+import { casesPluginMock } from '@kbn/cases-plugin/public/mocks';
+import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
+
 import { render } from '../../../utils/test_helper';
+import { useKibana } from '../../../utils/kibana_react';
+import { kibanaStartMock } from '../../../utils/kibana_react.mock';
 import { useFetchAlertDetail } from '../../../hooks/use_fetch_alert_detail';
-import { AlertDetails } from './alert_details';
-import { Chance } from 'chance';
-import { useParams } from 'react-router-dom';
 import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs';
+import { AlertDetails } from './alert_details';
 import { ConfigSchema } from '../../../plugin';
 import { alert, alertWithNoData } from '../mock/alert';
-import { waitFor } from '@testing-library/react';
 
-jest.mock('../../../hooks/use_fetch_alert_detail');
-jest.mock('../../../hooks/use_breadcrumbs');
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: jest.fn(),
 }));
 
+jest.mock('../../../utils/kibana_react');
+
+const useKibanaMock = useKibana as jest.Mock;
+
+const mockKibana = () => {
+  useKibanaMock.mockReturnValue({
+    services: {
+      ...kibanaStartMock.startContract(),
+      cases: casesPluginMock.createStartContract(),
+      http: {
+        basePath: {
+          prepend: jest.fn(),
+        },
+      },
+      triggersActionsUi: triggersActionsUiMock.createStart(),
+    },
+  });
+};
+
+jest.mock('../../../hooks/use_fetch_alert_detail');
+jest.mock('../../../hooks/use_breadcrumbs');
+jest.mock('../../../hooks/use_get_user_cases_permissions', () => ({
+  useGetUserCasesPermissions: () => ({
+    all: true,
+    create: true,
+    delete: true,
+    push: true,
+    read: true,
+    update: true,
+  }),
+}));
+
 const useFetchAlertDetailMock = useFetchAlertDetail as jest.Mock;
 const useParamsMock = useParams as jest.Mock;
 const useBreadcrumbsMock = useBreadcrumbs as jest.Mock;
@@ -49,16 +84,20 @@ describe('Alert details', () => {
     jest.clearAllMocks();
     useParamsMock.mockReturnValue(params);
     useBreadcrumbsMock.mockReturnValue([]);
+    mockKibana();
   });
 
-  it('should show alert summary', async () => {
+  it('should show the alert detail page with all necessary components', async () => {
     useFetchAlertDetailMock.mockReturnValue([false, alert]);
 
     const alertDetails = render(<AlertDetails />, config);
 
-    expect(alertDetails.queryByTestId('alertDetails')).toBeTruthy();
     await waitFor(() => expect(alertDetails.queryByTestId('centerJustifiedSpinner')).toBeFalsy());
+
+    expect(alertDetails.queryByTestId('alertDetails')).toBeTruthy();
     expect(alertDetails.queryByTestId('alertDetailsError')).toBeFalsy();
+    expect(alertDetails.queryByTestId('page-title-container')).toBeTruthy();
+    expect(alertDetails.queryByTestId('alert-summary-container')).toBeTruthy();
   });
 
   it('should show error loading the alert details', async () => {
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx
index a2cd7fd68a2ce..1b501e62a7dde 100644
--- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx
@@ -9,23 +9,36 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useParams } from 'react-router-dom';
 import { EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
+
 import { useKibana } from '../../../utils/kibana_react';
-import { ObservabilityAppServices } from '../../../application/types';
 import { usePluginContext } from '../../../hooks/use_plugin_context';
 import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs';
-import { paths } from '../../../config/paths';
-import { AlertDetailsPathParams } from '../types';
+import { useFetchAlertDetail } from '../../../hooks/use_fetch_alert_detail';
+
+import { AlertSummary, HeaderActions, PageTitle } from '.';
 import { CenterJustifiedSpinner } from '../../rule_details/components/center_justified_spinner';
-import { AlertSummary } from '.';
 import PageNotFound from '../../404';
-import { useFetchAlertDetail } from '../../../hooks/use_fetch_alert_detail';
+
+import { ObservabilityAppServices } from '../../../application/types';
+import { AlertDetailsPathParams } from '../types';
+import { observabilityFeatureId } from '../../../../common';
+import { paths } from '../../../config/paths';
 
 export function AlertDetails() {
-  const { http } = useKibana<ObservabilityAppServices>().services;
+  const {
+    http,
+    cases: {
+      helpers: { canUseCases },
+      ui: { getCasesContext },
+    },
+  } = useKibana<ObservabilityAppServices>().services;
   const { ObservabilityPageTemplate, config } = usePluginContext();
   const { alertId } = useParams<AlertDetailsPathParams>();
   const [isLoading, alert] = useFetchAlertDetail(alertId);
 
+  const CasesContext = getCasesContext();
+  const userCasesPermissions = canUseCases();
+
   useBreadcrumbs([
     {
       href: http.basePath.prepend(paths.observability.alerts),
@@ -69,7 +82,22 @@ export function AlertDetails() {
     );
 
   return (
-    <ObservabilityPageTemplate data-test-subj="alertDetails">
+    <ObservabilityPageTemplate
+      pageHeader={{
+        pageTitle: <PageTitle title={alert?.reason} active={Boolean(alert?.active)} />,
+        rightSideItems: [
+          <CasesContext
+            owner={[observabilityFeatureId]}
+            permissions={userCasesPermissions}
+            features={{ alerts: { sync: false } }}
+          >
+            <HeaderActions alert={alert} />
+          </CasesContext>,
+        ],
+        bottomBorder: false,
+      }}
+      data-test-subj="alertDetails"
+    >
       <AlertSummary alert={alert} />
     </ObservabilityPageTemplate>
   );
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx
index 4a1d88e928fb2..eada6a3925521 100644
--- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx
@@ -30,7 +30,7 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
   const tags = alert?.fields[ALERT_RULE_TAGS];
 
   return (
-    <>
+    <div data-test-subj="alert-summary-container">
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiTitle size="xxs">
@@ -161,6 +161,6 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </>
+    </div>
   );
 }
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.test.tsx
new file mode 100644
index 0000000000000..8bbec59c52b95
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
+import { casesPluginMock, openAddToExistingCaseModalMock } from '@kbn/cases-plugin/public/mocks';
+
+import { render } from '../../../utils/test_helper';
+import { useKibana } from '../../../utils/kibana_react';
+import { kibanaStartMock } from '../../../utils/kibana_react.mock';
+import { alertWithTags, mockAlertUuid } from '../mock/alert';
+
+import { HeaderActions } from './header_actions';
+
+jest.mock('../../../utils/kibana_react');
+
+const useKibanaMock = useKibana as jest.Mock;
+
+const mockKibana = () => {
+  useKibanaMock.mockReturnValue({
+    services: {
+      ...kibanaStartMock.startContract(),
+      triggersActionsUi: triggersActionsUiMock.createStart(),
+      cases: casesPluginMock.createStartContract(),
+    },
+  });
+};
+
+const ruleId = '123';
+const ruleName = '456';
+
+jest.mock('../../../hooks/use_fetch_rule', () => {
+  return {
+    useFetchRule: () => ({
+      reloadRule: jest.fn(),
+      rule: {
+        id: ruleId,
+        name: ruleName,
+      },
+    }),
+  };
+});
+
+describe('Header Actions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockKibana();
+  });
+
+  it('should display an actions button', () => {
+    const { queryByTestId } = render(<HeaderActions alert={alertWithTags} />);
+    expect(queryByTestId('alert-details-header-actions-menu-button')).toBeTruthy();
+  });
+
+  describe('when clicking the actions button', () => {
+    it('should offer an "add to case" button which opens the add to case modal', async () => {
+      const { getByTestId, findByRole } = render(<HeaderActions alert={alertWithTags} />);
+
+      fireEvent.click(await findByRole('button', { name: 'Actions' }));
+
+      fireEvent.click(getByTestId('add-to-case-button'));
+
+      expect(openAddToExistingCaseModalMock).toBeCalledWith({
+        attachments: [
+          {
+            alertId: mockAlertUuid,
+            index: '.internal.alerts-observability.metrics.alerts-*',
+            rule: {
+              id: ruleId,
+              name: ruleName,
+            },
+            type: 'alert',
+          },
+        ],
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx
new file mode 100644
index 0000000000000..e7a2c773dc68f
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { noop } from 'lodash';
+import { CaseAttachmentsWithoutOwner } from '@kbn/cases-plugin/public/types';
+import { CommentType } from '@kbn/cases-plugin/common';
+import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiPopover, EuiText } from '@elastic/eui';
+import { ALERT_RULE_UUID, ALERT_UUID } from '@kbn/rule-data-utils';
+
+import { useKibana } from '../../../utils/kibana_react';
+import { useFetchRule } from '../../../hooks/use_fetch_rule';
+import { ObservabilityAppServices } from '../../../application/types';
+import { TopAlert } from '../../alerts';
+
+export interface HeaderActionsProps {
+  alert: TopAlert | null;
+}
+
+export function HeaderActions({ alert }: HeaderActionsProps) {
+  const {
+    http,
+    cases: {
+      hooks: { getUseCasesAddToExistingCaseModal },
+    },
+    triggersActionsUi: { getEditAlertFlyout, getRuleSnoozeModal },
+  } = useKibana<ObservabilityAppServices>().services;
+
+  const { rule, reloadRule } = useFetchRule({
+    http,
+    ruleId: alert?.fields[ALERT_RULE_UUID] || '',
+  });
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const [ruleConditionsFlyoutOpen, setRuleConditionsFlyoutOpen] = useState<boolean>(false);
+  const [snoozeModalOpen, setSnoozeModalOpen] = useState<boolean>(false);
+
+  const selectCaseModal = getUseCasesAddToExistingCaseModal();
+
+  const handleTogglePopover = () => setIsPopoverOpen(!isPopoverOpen);
+  const handleClosePopover = () => setIsPopoverOpen(false);
+
+  const attachments: CaseAttachmentsWithoutOwner =
+    alert && rule
+      ? [
+          {
+            alertId: alert?.fields[ALERT_UUID] || '',
+            index: '.internal.alerts-observability.metrics.alerts-*',
+            rule: {
+              id: rule.id,
+              name: rule.name,
+            },
+            type: CommentType.alert,
+          },
+        ]
+      : [];
+
+  const handleAddToCase = () => {
+    setIsPopoverOpen(false);
+    selectCaseModal.open({ attachments });
+  };
+
+  const handleViewRuleDetails = () => {
+    setIsPopoverOpen(false);
+    setRuleConditionsFlyoutOpen(true);
+  };
+
+  const handleOpenSnoozeModal = () => {
+    setIsPopoverOpen(false);
+    setSnoozeModalOpen(true);
+  };
+
+  return (
+    <>
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={handleClosePopover}
+        button={
+          <EuiButton
+            fill
+            iconType="arrowDown"
+            iconSide="right"
+            onClick={handleTogglePopover}
+            data-test-subj="alert-details-header-actions-menu-button"
+          >
+            {i18n.translate('xpack.observability.alertDetails.actionsButtonLabel', {
+              defaultMessage: 'Actions',
+            })}
+          </EuiButton>
+        }
+      >
+        <EuiFlexGroup direction="column" alignItems="flexStart">
+          <EuiButtonEmpty
+            size="s"
+            color="text"
+            disabled={!alert?.fields[ALERT_RULE_UUID]}
+            onClick={handleViewRuleDetails}
+            data-test-subj="view-rule-details-button"
+          >
+            <EuiText size="s">
+              {i18n.translate('xpack.observability.alertDetails.viewRuleDetails', {
+                defaultMessage: 'View rule details',
+              })}
+            </EuiText>
+          </EuiButtonEmpty>
+
+          <EuiButtonEmpty
+            size="s"
+            color="text"
+            onClick={handleOpenSnoozeModal}
+            data-test-subj="snooze-rule-button"
+          >
+            <EuiText size="s">
+              {i18n.translate('xpack.observability.alertDetails.editSnoozeRule', {
+                defaultMessage: 'Snooze the rule',
+              })}
+            </EuiText>
+          </EuiButtonEmpty>
+
+          <EuiButtonEmpty
+            size="s"
+            color="text"
+            onClick={handleAddToCase}
+            data-test-subj="add-to-case-button"
+          >
+            <EuiText size="s">
+              {i18n.translate('xpack.observability.alertDetails.addToCase', {
+                defaultMessage: 'Add to case',
+              })}
+            </EuiText>
+          </EuiButtonEmpty>
+        </EuiFlexGroup>
+      </EuiPopover>
+
+      {rule && ruleConditionsFlyoutOpen
+        ? getEditAlertFlyout({
+            initialRule: rule,
+            onClose: () => {
+              setRuleConditionsFlyoutOpen(false);
+            },
+            onSave: reloadRule,
+          })
+        : null}
+
+      {rule && snoozeModalOpen
+        ? getRuleSnoozeModal({
+            rule,
+            onClose: () => setSnoozeModalOpen(false),
+            onRuleChanged: reloadRule,
+            onLoading: noop,
+          })
+        : null}
+    </>
+  );
+}
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/index.ts b/x-pack/plugins/observability/public/pages/alert_details/components/index.ts
index f49d7bd3c721a..9e2ae5d34dc18 100644
--- a/x-pack/plugins/observability/public/pages/alert_details/components/index.ts
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/index.ts
@@ -5,5 +5,7 @@
  * 2.0.
  */
 
+export { HeaderActions } from './header_actions';
 export { AlertSummary } from './alert_summary';
 export { AlertDetails } from './alert_details';
+export { PageTitle } from './page_title';
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/page_title.stories.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.stories.tsx
new file mode 100644
index 0000000000000..ab0109ef1c214
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+import { EuiPageTemplate } from '@elastic/eui';
+
+import { PageTitle as Component, PageTitleProps } from './page_title';
+
+export default {
+  component: Component,
+  title: 'app/AlertDetails/PageTitle',
+  argTypes: {
+    title: { control: 'text' },
+    active: { control: 'boolean' },
+  },
+};
+
+const Template: ComponentStory<typeof Component> = (props: PageTitleProps) => (
+  <Component {...props} />
+);
+
+const TemplateWithPageTemplate: ComponentStory<typeof Component> = (props: PageTitleProps) => (
+  <EuiPageTemplate>
+    <EuiPageTemplate.Header pageTitle={<Component {...props} />} bottomBorder={false} />
+  </EuiPageTemplate>
+);
+
+const defaultProps = {
+  title: 'host.cpu.usage is 0.2024 in the last 1 min for all hosts. Alert when > 0.02.',
+  active: true,
+};
+
+export const PageTitle = Template.bind({});
+PageTitle.args = defaultProps;
+
+export const PageTitleUsedWithinPageTemplate = TemplateWithPageTemplate.bind({});
+PageTitleUsedWithinPageTemplate.args = defaultProps;
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx
new file mode 100644
index 0000000000000..bd0b15e8ffc2a
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { PageTitle, PageTitleProps } from './page_title';
+
+describe('Page Title', () => {
+  const defaultProps = {
+    title: 'Great success',
+    active: true,
+  };
+
+  const renderComp = (props: PageTitleProps) => {
+    return render(<PageTitle {...props} />);
+  };
+
+  it('should display a title when it is passed', () => {
+    const { getByText } = renderComp(defaultProps);
+    expect(getByText(defaultProps.title)).toBeTruthy();
+  });
+
+  it('should display an active badge when active is true', async () => {
+    const { getByText } = renderComp(defaultProps);
+    expect(getByText('Active')).toBeTruthy();
+  });
+
+  it('should display an inactive badge when active is false', async () => {
+    const { getByText } = renderComp({ ...defaultProps, active: false });
+
+    expect(getByText('Recovered')).toBeTruthy();
+  });
+
+  it('should display no badge when active is not passed', async () => {
+    const { queryByTestId } = renderComp({ title: '123' });
+
+    expect(queryByTestId('page-title-active-badge')).not.toBeInTheDocument();
+  });
+});
diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx
new file mode 100644
index 0000000000000..61301f16e37a9
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export interface PageTitleProps {
+  title: string | undefined;
+  active?: boolean;
+}
+
+export function PageTitle({ title, active }: PageTitleProps) {
+  const label = active
+    ? i18n.translate('xpack.observability.alertDetails.alertActiveState', {
+        defaultMessage: 'Active',
+      })
+    : i18n.translate('xpack.observability.alertDetails.alertRecoveredState', {
+        defaultMessage: 'Recovered',
+      });
+
+  return (
+    <div data-test-subj="page-title-container">
+      {title}
+
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <div>
+            {typeof active === 'boolean' ? (
+              <EuiBadge color="#BD271E" data-test-subj="page-title-active-badge">
+                {label}
+              </EuiBadge>
+            ) : null}
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+}
diff --git a/x-pack/plugins/observability/public/pages/alert_details/mock/alert.ts b/x-pack/plugins/observability/public/pages/alert_details/mock/alert.ts
index ed129fc3d24ec..a3031fb0aa18d 100644
--- a/x-pack/plugins/observability/public/pages/alert_details/mock/alert.ts
+++ b/x-pack/plugins/observability/public/pages/alert_details/mock/alert.ts
@@ -32,6 +32,8 @@ import { TopAlert } from '../../alerts';
 
 export const tags: string[] = ['tag1', 'tag2', 'tag3'];
 
+export const mockAlertUuid = '756240e5-92fb-452f-b08e-cd3e0dc51738';
+
 export const alert: TopAlert = {
   reason: '1957 log entries (more than 100.25) match the conditions.',
   fields: {
@@ -50,7 +52,7 @@ export const alert: TopAlert = {
     [ALERT_EVALUATION_VALUE]: 1957,
     [ALERT_INSTANCE_ID]: '*',
     [ALERT_RULE_NAME]: 'Log threshold (from logs)',
-    [ALERT_UUID]: '756240e5-92fb-452f-b08e-cd3e0dc51738',
+    [ALERT_UUID]: mockAlertUuid,
     [SPACE_IDS]: ['default'],
     [VERSION]: '8.0.0',
     [EVENT_KIND]: 'signal',
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx
index f4ae5d399e6f9..2e476855926d4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx
@@ -49,6 +49,9 @@ export const RulesList = suspendedComponentWithProps(
 export const RulesListNotifyBadge = suspendedComponentWithProps(
   lazy(() => import('./rules_list/components/rules_list_notify_badge'))
 );
+export const RuleSnoozeModal = suspendedComponentWithProps(
+  lazy(() => import('./rules_list/components/rule_snooze_modal'))
+);
 export const RuleDefinition = suspendedComponentWithProps(
   lazy(() => import('./rule_details/components/rule_definition'))
 );
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze_modal.tsx
new file mode 100644
index 0000000000000..c4624e7ea8e61
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze_modal.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiModal, EuiModalBody, EuiSpacer } from '@elastic/eui';
+
+import { useKibana } from '../../../../common/lib/kibana';
+import { snoozeRule, unsnoozeRule } from '../../../lib/rule_api';
+import {
+  SNOOZE_FAILED_MESSAGE,
+  SNOOZE_SUCCESS_MESSAGE,
+  UNSNOOZE_SUCCESS_MESSAGE,
+} from './rules_list_notify_badge';
+import { SnoozePanel, futureTimeToInterval } from './rule_snooze';
+import { Rule, RuleTypeParams, SnoozeSchedule } from '../../../../types';
+
+export interface RuleSnoozeModalProps {
+  rule: Rule<RuleTypeParams>;
+  onClose: () => void;
+  onLoading: (isLoading: boolean) => void;
+  onRuleChanged: () => void;
+}
+
+const isRuleSnoozed = (rule: { isSnoozedUntil?: Date | null; muteAll: boolean }) =>
+  Boolean(
+    (rule.isSnoozedUntil && new Date(rule.isSnoozedUntil).getTime() > Date.now()) || rule.muteAll
+  );
+
+export const RuleSnoozeModal: React.FunctionComponent<RuleSnoozeModalProps> = ({
+  rule,
+  onClose,
+  onLoading,
+  onRuleChanged,
+}) => {
+  const {
+    http,
+    notifications: { toasts },
+  } = useKibana().services;
+
+  const isSnoozed = useMemo(() => {
+    return isRuleSnoozed(rule);
+  }, [rule]);
+
+  const onApplySnooze = useCallback(
+    async (snoozeSchedule: SnoozeSchedule) => {
+      try {
+        onLoading(true);
+        onClose();
+
+        await snoozeRule({ http, id: rule.id, snoozeSchedule });
+
+        onRuleChanged();
+
+        toasts.addSuccess(SNOOZE_SUCCESS_MESSAGE);
+      } catch (e) {
+        toasts.addDanger(SNOOZE_FAILED_MESSAGE);
+      } finally {
+        onLoading(false);
+      }
+    },
+    [onLoading, onClose, http, rule.id, onRuleChanged, toasts]
+  );
+
+  const onApplyUnsnooze = useCallback(
+    async (scheduleIds?: string[]) => {
+      try {
+        onLoading(true);
+        onClose();
+        await unsnoozeRule({ http, id: rule.id, scheduleIds });
+        onRuleChanged();
+        toasts.addSuccess(UNSNOOZE_SUCCESS_MESSAGE);
+      } catch (e) {
+        toasts.addDanger(SNOOZE_FAILED_MESSAGE);
+      } finally {
+        onLoading(false);
+      }
+    },
+    [onLoading, onClose, http, rule.id, onRuleChanged, toasts]
+  );
+
+  return (
+    <EuiModal onClose={onClose} data-test-subj="ruleSnoozeModal">
+      <EuiModalBody>
+        <EuiSpacer size="s" />
+        <SnoozePanel
+          inPopover={false}
+          interval={futureTimeToInterval(rule.isSnoozedUntil)}
+          activeSnoozes={rule.activeSnoozes ?? []}
+          scheduledSnoozes={rule.snoozeSchedule ?? []}
+          showCancel={isSnoozed}
+          snoozeRule={onApplySnooze}
+          unsnoozeRule={onApplyUnsnooze}
+        />
+      </EuiModalBody>
+    </EuiModal>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export { RuleSnoozeModal as default };
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_rule_snooze_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_rule_snooze_modal.tsx
new file mode 100644
index 0000000000000..b22fe16f77312
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/common/get_rule_snooze_modal.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { RuleSnoozeModal } from '../application/sections';
+import { RuleSnoozeModalProps } from '../application/sections/rules_list/components/rule_snooze_modal';
+
+export const getRuleSnoozeModalLazy = (props: RuleSnoozeModalProps) => {
+  return <RuleSnoozeModal {...props} />;
+};
diff --git a/x-pack/plugins/triggers_actions_ui/public/mocks.ts b/x-pack/plugins/triggers_actions_ui/public/mocks.ts
index 02722bc0ee73b..7c18ea1b6fa2c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/mocks.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/mocks.ts
@@ -43,6 +43,7 @@ import { getFieldBrowserLazy } from './common/get_field_browser';
 import { getRuleAlertsSummaryLazy } from './common/get_rule_alerts_summary';
 import { getRuleDefinitionLazy } from './common/get_rule_definition';
 import { getRuleStatusPanelLazy } from './common/get_rule_status_panel';
+import { getRuleSnoozeModalLazy } from './common/get_rule_snooze_modal';
 
 function createStartMock(): TriggersAndActionsUIPublicPluginStart {
   const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
@@ -124,6 +125,9 @@ function createStartMock(): TriggersAndActionsUIPublicPluginStart {
     getRuleStatusPanel: (props) => {
       return getRuleStatusPanelLazy(props);
     },
+    getRuleSnoozeModal: (props) => {
+      return getRuleSnoozeModalLazy(props);
+    },
   };
 }
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/plugin.ts b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
index 10c5e5637f159..1374f10355e16 100644
--- a/x-pack/plugins/triggers_actions_ui/public/plugin.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
@@ -78,6 +78,8 @@ import { getRuleDefinitionLazy } from './common/get_rule_definition';
 import { RuleStatusPanelProps } from './application/sections/rule_details/components/rule_status_panel';
 import { RuleAlertsSummaryProps } from './application/sections/rule_details/components/alert_summary';
 import { getRuleAlertsSummaryLazy } from './common/get_rule_alerts_summary';
+import { RuleSnoozeModalProps } from './application/sections/rules_list/components/rule_snooze_modal';
+import { getRuleSnoozeModalLazy } from './common/get_rule_snooze_modal';
 
 export interface TriggersAndActionsUIPublicPluginSetup {
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
@@ -123,6 +125,7 @@ export interface TriggersAndActionsUIPublicPluginStart {
   getRuleDefinition: (props: RuleDefinitionProps) => ReactElement<RuleDefinitionProps>;
   getRuleStatusPanel: (props: RuleStatusPanelProps) => ReactElement<RuleStatusPanelProps>;
   getRuleAlertsSummary: (props: RuleAlertsSummaryProps) => ReactElement<RuleAlertsSummaryProps>;
+  getRuleSnoozeModal: (props: RuleSnoozeModalProps) => ReactElement<RuleSnoozeModalProps>;
 }
 
 interface PluginsSetup {
@@ -352,6 +355,9 @@ export class Plugin
       getRuleAlertsSummary: (props: RuleAlertsSummaryProps) => {
         return getRuleAlertsSummaryLazy(props);
       },
+      getRuleSnoozeModal: (props: RuleSnoozeModalProps) => {
+        return getRuleSnoozeModalLazy(props);
+      },
     };
   }