diff --git a/web/modals/chat/invalid-upload.css b/web/modals/chat/invalid-upload.css
deleted file mode 100644
index acf18aa0a..000000000
--- a/web/modals/chat/invalid-upload.css
+++ /dev/null
@@ -1,15 +0,0 @@
-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/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
index d1a93b0aa..8d9d724bb 100644
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -1,29 +1,15 @@
 // @flow
 
 import * as React from 'react';
 
-import Button from '../../components/button.react.js';
-import { useModalContext } from '../../modals/modal-provider.react';
-import Modal from '../modal.react';
-import css from './invalid-upload.css';
+import Alert from '../alert.react.js';
 
 function InvalidUploadModal(): React.Node {
-  const { popModal } = useModalContext();
   return (
-    <Modal name="Invalid upload" onClose={popModal}>
-      <div className={css.modal_body}>
-        <p>We don&apos;t support that file type yet :(</p>
-        <Button
-          onClick={popModal}
-          type="submit"
-          variant="primary"
-          className={css.ok_button}
-        >
-          OK
-        </Button>
-      </div>
-    </Modal>
+    <Alert title="Invalid upload">
+      We don&apos;t support that file type yet :(
+    </Alert>
   );
 }
 
 export default InvalidUploadModal;