diff --git a/web/modals/chat/invalid-upload.css b/web/modals/chat/invalid-upload.css
new file mode 100644
index 000000000..acf18aa0a
--- /dev/null
+++ b/web/modals/chat/invalid-upload.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/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
index bfa214905..deaa65163 100644
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -1,30 +1,39 @@
 // @flow
 
 import * as React from 'react';
 
+import Button from '../../components/button.react.js';
 import { useModalContext } from '../../modals/modal-provider.react';
-import css from '../../style.css';
 import Modal from '../modal.react';
+import css from './invalid-upload.css';
 
 type Props = {
   +clearModal: () => void,
 };
 class InvalidUploadModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
       <Modal name="Invalid upload" onClose={this.props.clearModal}>
-        <div className={css['modal-body']}>
+        <div className={css.modal_body}>
           <p>We don&apos;t support that file type yet :(</p>
+          <Button
+            onClick={this.props.clearModal}
+            type="submit"
+            variant="primary"
+            className={css.ok_button}
+          >
+            OK
+          </Button>
         </div>
       </Modal>
     );
   }
 }
 
 function ConnectedInvalidUploadModal(): React.Node {
   const modalContext = useModalContext();
 
   return <InvalidUploadModal clearModal={modalContext.clearModal} />;
 }
 
 export default ConnectedInvalidUploadModal;