diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
deleted file mode 100644
index 41cc80bb73bb2..0000000000000
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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, EuiDescriptionList, EuiLoadingSpinner } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { EncryptedSyntheticsMonitor } from '../../../../../../common/runtime_types';
-
-export const MonitorStatus = ({
-  loading,
-  monitor,
-  status,
-  compressed = true,
-}: {
-  loading?: boolean;
-  compressed?: boolean;
-  monitor: EncryptedSyntheticsMonitor;
-  status?: string;
-}) => {
-  const isBrowserType = monitor.type === 'browser';
-
-  const badge = loading ? (
-    <EuiLoadingSpinner size="s" />
-  ) : !status ? (
-    <EuiBadge color="default">{PENDING_LABEL}</EuiBadge>
-  ) : status === 'up' ? (
-    <EuiBadge color="success">{isBrowserType ? SUCCESS_LABEL : UP_LABEL}</EuiBadge>
-  ) : (
-    <EuiBadge color="danger">{isBrowserType ? FAILED_LABEL : DOWN_LABEL}</EuiBadge>
-  );
-
-  return (
-    <EuiDescriptionList
-      align="left"
-      compressed={compressed}
-      listItems={[{ title: STATUS_LABEL, description: badge }]}
-    />
-  );
-};
-
-const STATUS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.statusLabel', {
-  defaultMessage: 'Status',
-});
-
-const FAILED_LABEL = i18n.translate('xpack.synthetics.monitorStatus.failedLabel', {
-  defaultMessage: 'Failed',
-});
-
-const PENDING_LABEL = i18n.translate('xpack.synthetics.monitorStatus.pendingLabel', {
-  defaultMessage: 'Pending',
-});
-
-const SUCCESS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.succeededLabel', {
-  defaultMessage: 'Succeeded',
-});
-
-const UP_LABEL = i18n.translate('xpack.synthetics.monitorStatus.upLabel', {
-  defaultMessage: 'Up',
-});
-
-const DOWN_LABEL = i18n.translate('xpack.synthetics.monitorStatus.downLabel', {
-  defaultMessage: 'Down',
-});
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
index 8b60edce8b93f..8333c608b02f3 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-import { MonitorStatus } from '../common/components/monitor_status';
+import { MonitorStatus } from '../monitor_status/monitor_status';
 import { useSelectedMonitor } from './hooks/use_selected_monitor';
 import { useMonitorLatestPing } from './hooks/use_monitor_latest_ping';
 
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_status/monitor_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_status/monitor_status.tsx
new file mode 100644
index 0000000000000..bb64ab62d621e
--- /dev/null
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_status/monitor_status.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiDescriptionList, EuiBadge, EuiLoadingSpinner } from '@elastic/eui';
+import { LABELS } from '../monitors_page/overview/overview/monitor_status_flyout';
+import { EncryptedSyntheticsMonitor } from '../monitors_page/overview/types';
+
+export interface MonitorStatusProps {
+  monitor: EncryptedSyntheticsMonitor;
+  loading?: boolean;
+  status?: string;
+  compressed?: boolean;
+}
+
+const statusListItems = ({ monitor, loading, status }: MonitorStatusProps) => {
+  const isBrowserType = monitor.type === 'browser';
+
+  const badge = () => {
+    switch (true) {
+      case loading:
+        return <EuiLoadingSpinner size="s" />;
+      case !status:
+        return <EuiBadge color="default">{LABELS.PENDING}</EuiBadge>;
+      case status === 'up':
+        return <EuiBadge color="success">{isBrowserType ? LABELS.SUCCESS : LABELS.UP}</EuiBadge>;
+      default:
+        return <EuiBadge color="danger">{isBrowserType ? LABELS.FAILED : LABELS.DOWN}</EuiBadge>;
+    }
+  };
+
+  return [{ title: LABELS.STATUS, description: badge }];
+};
+export const MonitorStatus = ({
+  monitor,
+  loading,
+  status,
+  compressed = true,
+}: MonitorStatusProps) => {
+  return (
+    <EuiDescriptionList
+      align="left"
+      compressed={compressed}
+      listItems={statusListItems({ monitor, loading, status })}
+    />
+  );
+};
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx
index 9e0e22ed28457..99224ecb9b5a2 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx
@@ -59,7 +59,7 @@ import {
 } from '../types';
 import { useMonitorDetailLocator } from '../../hooks/use_monitor_detail_locator';
 import { fetchSyntheticsMonitor } from '../../../../state/overview/api';
-import { MonitorStatus } from '../../../common/components/monitor_status';
+import { MonitorStatus } from '../../../monitor_status/monitor_status';
 
 interface Props {
   configId: string;
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_status_flyout.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_status_flyout.tsx
new file mode 100644
index 0000000000000..a6d8058ad19fe
--- /dev/null
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_status_flyout.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+const STATUS = i18n.translate('xpack.synthetics.monitorStatus.statusLabel', {
+  defaultMessage: 'Status',
+});
+
+const FAILED = i18n.translate('xpack.synthetics.monitorStatus.failedLabel', {
+  defaultMessage: 'Failed',
+});
+
+const PENDING = i18n.translate('xpack.synthetics.monitorStatus.pendingLabel', {
+  defaultMessage: 'Pending',
+});
+
+const SUCCESS = i18n.translate('xpack.synthetics.monitorStatus.succeededLabel', {
+  defaultMessage: 'Succeeded',
+});
+
+const UP = i18n.translate('xpack.synthetics.monitorStatus.upLabel', {
+  defaultMessage: 'Up',
+});
+
+const DOWN = i18n.translate('xpack.synthetics.monitorStatus.downLabel', {
+  defaultMessage: 'Down',
+});
+
+export const LABELS = {
+  STATUS,
+  FAILED,
+  PENDING,
+  SUCCESS,
+  UP,
+  DOWN,
+};