diff --git a/components/NoIncidents.tsx b/components/NoIncidents.tsx
new file mode 100644
index 0000000..22e9a2d
--- /dev/null
+++ b/components/NoIncidents.tsx
@@ -0,0 +1,32 @@
+import { Alert, Text } from '@mantine/core'
+import { IconInfoCircle } from '@tabler/icons-react'
+
+export default function NoIncidentsAlert({ style }: { style?: React.CSSProperties }) {
+  return (
+    <Alert
+      icon={<IconInfoCircle />}
+      title="No Incidents in this month"
+      color="gray"
+      withCloseButton={false}
+      style={{
+        position: 'relative',
+        margin: '16px auto 0 auto',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+          fontSize: '0.85rem',
+          textAlign: 'right',
+          padding: '2px 8px',
+          borderRadius: 6,
+          color: '#888',
+        }}
+      ></div>
+      <Text>There are no incidents for this month.</Text>
+    </Alert>
+  )
+}