diff --git a/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx b/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx
index 8a1bd2ecd8b1b..3762337395dee 100644
--- a/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx
+++ b/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx
@@ -6,7 +6,7 @@ import { Cell, Column, Row } from 'react-table';
 
 import { OrgRole } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Icon, LinkButton, useStyles2 } from '@grafana/ui';
+import { LinkButton, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { useNavModel } from 'app/core/hooks/useNavModel';
 import { alertmanagerApi } from 'app/features/alerting/unified/api/alertmanagerApi';
@@ -26,6 +26,7 @@ import { AlertDetails } from './AlertDetails/AlertDetails';
 import { ACTIONS_COLUMN, DATA_INTERVAL, SILENCES_URL } from './Alerts.constants';
 import { Messages as AlertMessages } from './Alerts.messages';
 import { getStyles } from './Alerts.styles';
+import { AlertsEmptyState } from './AlertsEmptyState';
 
 const {
   table: { columns },
@@ -170,11 +171,7 @@ export const Alerts: FC = () => {
             columns={columns}
             pendingRequest={amAlertsIsLoading}
             autoResetExpanded={false}
-            emptyMessage={
-              <h1>
-                <Icon name="check-circle" size="xxl" /> No alerts detected
-              </h1>
-            }
+            emptyMessage={<AlertsEmptyState />}
             getCellProps={getCellProps}
             renderExpandedRow={renderSelectedSubRow}
           />
diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts
new file mode 100644
index 0000000000000..671a0ac54be61
--- /dev/null
+++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts
@@ -0,0 +1,9 @@
+export const Messages = {
+  heading: 'No alerts detected',
+  templateLink: 'Alert rule templates',
+  alertRulesLink: 'Alert rules',
+  firstParagraph:
+    'custom made by our database experts, for a faster start, and configure how you want to receive them at',
+  secondParagraph: 'For more information please visit our',
+  documentationLink: 'Percona Alerting documentation page',
+};
diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts
new file mode 100644
index 0000000000000..dd2e8f1818304
--- /dev/null
+++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts
@@ -0,0 +1,20 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    textAlign: 'center',
+    maxWidth: '600px',
+    margin: '0 auto',
+  }),
+  heading: css({
+    marginBottom: theme.spacing(2),
+  }),
+  paragraph: css({
+    marginTop: theme.spacing(2),
+    fontSize: theme.typography.body.fontSize,
+    lineHeight: theme.typography.body.lineHeight,
+    color: theme.colors.text.secondary,
+  }),
+});
diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx
new file mode 100644
index 0000000000000..3839bc1bea4e2
--- /dev/null
+++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import { Icon, TextLink, useStyles2 } from '@grafana/ui';
+
+import { Messages } from './AlertsEmptyState.messages';
+import { getStyles } from './AlertsEmptyState.styles';
+
+export const AlertsEmptyState: FC = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.heading}>
+        <Icon name="check-circle" size="xxl" /> {Messages.heading}
+      </h1>
+      <p className={styles.paragraph}>
+        Use{' '}
+        <TextLink href="/alerting/alert-rule-templates" inline>
+          {Messages.templateLink},{' '}
+        </TextLink>{' '}
+        {Messages.firstParagraph}{' '}
+        <TextLink href="/alerting/list" inline>
+          {Messages.alertRulesLink}
+        </TextLink>
+        .
+      </p>
+      <p className={styles.paragraph}>
+        {Messages.secondParagraph}{' '}
+        <TextLink href="https://per.co.na/alerting" external inline>
+          {Messages.documentationLink}
+        </TextLink>
+        .
+      </p>
+    </div>
+  );
+};