diff --git a/client/src/components/StaffModal.tsx b/client/src/components/StaffModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f1756b806cf0ec434d8c47706a7d1b65dd2970d
--- /dev/null
+++ b/client/src/components/StaffModal.tsx
@@ -0,0 +1,47 @@
+import { Modal, Button } from "react-bootstrap";
+
+function StaffModal(props: {
+  children?: any;
+  header?: string;
+  hideColor?: string;
+  successColor?: string;
+  onSuccess?: any;
+  onHide?: any;
+  successText?: string;
+  hideText?: string;
+  show: boolean;
+}) {
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          {props.header}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div>{props.children}</div>
+      </Modal.Body>
+      <Modal.Footer className="justify-content-between">
+        <Button
+          className="float-left"
+          variant={props.hideColor || "danger"}
+          onClick={props.onHide}
+        >
+          {props.hideText || "Close"}
+        </Button>
+        <Button
+          variant={props.successColor || "primary"}
+          onClick={props.onSuccess}
+        >
+          {props.successText || "Done"}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+export default StaffModal;