diff --git a/web/modals/alert.css b/web/modals/alert.css
new file mode 100644
index 000000000..acf18aa0a
--- /dev/null
+++ b/web/modals/alert.css
@@ -0,0 +1,15 @@
+div.modal_body {
+  padding: 20px;
+  color: var(--fg);
+  background-color: var(--modal-bg);
+  border-radius: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.ok_button {
+  width: 100%;
+  margin-top: 24px;
+}
diff --git a/web/modals/alert.react.js b/web/modals/alert.react.js
new file mode 100644
index 000000000..28b23fb2f
--- /dev/null
+++ b/web/modals/alert.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+
+import Button from '../components/button.react';
+import css from './alert.css';
+import { useModalContext } from './modal-provider.react';
+import Modal from './modal.react';
+
+type AlertProps = {
+  +title: string,
+  +children: string,
+};
+function Alert(props: AlertProps): React.Node {
+  const { title, children } = props;
+  const { popModal } = useModalContext();
+
+  return (
+    <Modal name={title} onClose={popModal}>
+      <div className={css.modal_body}>
+        <p>{children}</p>
+        <Button
+          onClick={popModal}
+          type="submit"
+          variant="primary"
+          className={css.ok_button}
+        >
+          OK
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default Alert;