diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
index 460a109b14c28..2d7e7545db736 100644
--- a/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
+++ b/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
@@ -8,6 +8,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { AlertsTableFlyoutBaseProps } from '@kbn/triggers-actions-ui-plugin/public';
 
+import { useRouteMatch } from 'react-router-dom';
+import { SLO_ALERTS_TABLE_ID } from '../../pages/slo_details/components/slo_detail_alerts';
+import { SLO_DETAIL_PATH } from '../../../common/locators/paths';
 import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
@@ -19,6 +22,7 @@ export { AlertsFlyout } from './alerts_flyout';
 export const useGetAlertFlyoutComponents = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry
 ) => {
+  const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);
   const body = useCallback(
     (props: AlertsTableFlyoutBaseProps) => {
       const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
@@ -37,10 +41,11 @@ export const useGetAlertFlyoutComponents = (
 
   const footer = useCallback(
     (props: AlertsTableFlyoutBaseProps) => {
+      const isInApp = Boolean(SLO_ALERTS_TABLE_ID === props.id && isSLODetailsPage);
       const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
-      return <AlertsFlyoutFooter isInApp={false} alert={alert} />;
+      return <AlertsFlyoutFooter isInApp={isInApp} alert={alert} />;
     },
-    [observabilityRuleTypeRegistry]
+    [isSLODetailsPage, observabilityRuleTypeRegistry]
   );
 
   return useMemo(
diff --git a/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.test.tsx b/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.test.tsx
index ab7080e1d6d60..33a00564bc7e9 100644
--- a/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.test.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.test.tsx
@@ -23,6 +23,8 @@ import { noop } from 'lodash';
 import { EuiDataGridCellValueElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
 import { waitFor } from '@testing-library/react';
 import { AlertsTableQueryContext } from '@kbn/triggers-actions-ui-plugin/public/application/sections/alerts_table/contexts/alerts_table_context';
+import { Router } from '@kbn/shared-ux-router';
+import { createMemoryHistory } from 'history';
 
 const refresh = jest.fn();
 const caseHooksReturnedValue = {
@@ -114,9 +116,11 @@ describe('ObservabilityActions component', () => {
     };
 
     const wrapper = mountWithIntl(
-      <QueryClientProvider client={queryClient} context={AlertsTableQueryContext}>
-        <AlertActions {...props} />
-      </QueryClientProvider>
+      <Router history={createMemoryHistory()}>
+        <QueryClientProvider client={queryClient} context={AlertsTableQueryContext}>
+          <AlertActions {...props} />
+        </QueryClientProvider>
+      </Router>
     );
     await act(async () => {
       await nextTick();
diff --git a/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx b/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx
index ca5bdff47bac1..e54c0f060d2c1 100644
--- a/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx
@@ -21,8 +21,10 @@ import { AttachmentType } from '@kbn/cases-plugin/common';
 import { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { TimelineNonEcsData } from '@kbn/timelines-plugin/common';
 import type { AlertActionsProps } from '@kbn/triggers-actions-ui-plugin/public/types';
+import { useRouteMatch } from 'react-router-dom';
+import { SLO_ALERTS_TABLE_ID } from '../../slo_details/components/slo_detail_alerts';
 import { RULE_DETAILS_PAGE_ID } from '../../rule_details/constants';
-import { paths } from '../../../../common/locators/paths';
+import { paths, SLO_DETAIL_PATH } from '../../../../common/locators/paths';
 import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled';
 import { useKibana } from '../../../utils/kibana_react';
 import { parseAlert } from '../helpers/parse_alert';
@@ -40,7 +42,10 @@ export function AlertActions({
   observabilityRuleTypeRegistry,
   ...customActionsProps
 }: ObservabilityAlertActionsProps) {
-  const { alert, refresh } = customActionsProps;
+  const { alert, refresh, id } = customActionsProps;
+  const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);
+
+  const isInApp = Boolean(id === SLO_ALERTS_TABLE_ID && isSLODetailsPage);
   const {
     cases: {
       helpers: { getRuleIdFromEvent, canUseCases },
@@ -183,7 +188,7 @@ export function AlertActions({
 
   return (
     <>
-      {viewInAppUrl ? (
+      {viewInAppUrl && !isInApp ? (
         <EuiFlexItem>
           <EuiToolTip
             content={i18n.translate('xpack.observability.alertsTable.viewInAppTextLabel', {
@@ -202,11 +207,13 @@ export function AlertActions({
             />
           </EuiToolTip>
         </EuiFlexItem>
-      ) : (
-        <EuiFlexItem style={{ width: 32 }} />
-      )}
+      ) : null}
 
-      <EuiFlexItem>
+      <EuiFlexItem
+        css={{
+          textAlign: 'center',
+        }}
+      >
         <EuiPopover
           anchorPosition="downLeft"
           button={
diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx
index f5d84d19b5c4e..c2eb2e5ebbd21 100644
--- a/x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx
@@ -11,7 +11,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
 import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../../utils/kibana_react';
 
-const ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
+export const SLO_ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
 
 export interface Props {
   slo: SLOWithSummaryResponse;
@@ -30,7 +30,7 @@ export function SloDetailsAlerts({ slo }: Props) {
           <AlertsStateTable
             alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
             configurationId={AlertConsumers.OBSERVABILITY}
-            id={ALERTS_TABLE_ID}
+            id={SLO_ALERTS_TABLE_ID}
             data-test-subj="alertTable"
             featureIds={[AlertConsumers.SLO, AlertConsumers.OBSERVABILITY]}
             query={{