+
+
+ >
+ );
+});
+
+AddStep.propTypes = {
+ onCreate: PropTypes.func.isRequired,
+ onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(AddStep);
diff --git a/client/src/components/Boards/AddPopup/AddPopup.module.scss b/client/src/components/Boards/AddPopup/AddPopup.module.scss
new file mode 100644
index 00000000..cda85c3c
--- /dev/null
+++ b/client/src/components/Boards/AddPopup/AddPopup.module.scss
@@ -0,0 +1,42 @@
+:global(#app) {
+ .controls {
+ display: flex;
+ max-width: 280px;
+
+ @media only screen and (max-width: 767px) {
+ max-width: 226px;
+ }
+ }
+
+ .createButton {
+ white-space: nowrap;
+ }
+
+ .field {
+ margin-bottom: 8px;
+ }
+
+ .importButton {
+ background: transparent;
+ box-shadow: none;
+ color: #6b808c;
+ font-weight: normal;
+ margin-left: auto;
+ margin-right: 0;
+ overflow: hidden;
+ text-align: left;
+ text-decoration: underline;
+ text-overflow: ellipsis;
+ transition: none;
+ white-space: nowrap;
+
+ &:hover {
+ background: rgba(9, 30, 66, 0.08);
+ color: #092d42;
+ }
+ }
+
+ .importButtonIcon {
+ text-decoration: none;
+ }
+}
diff --git a/client/src/components/Boards/AddPopup/ImportStep.jsx b/client/src/components/Boards/AddPopup/ImportStep.jsx
new file mode 100644
index 00000000..d56bf2a2
--- /dev/null
+++ b/client/src/components/Boards/AddPopup/ImportStep.jsx
@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
+
+import styles from './ImportStep.module.scss';
+
+const ImportStep = React.memo(({ onSelect, onBack }) => {
+ const [t] = useTranslation();
+
+ const handleFileSelect = useCallback(
+ (type, file) => {
+ onSelect({
+ type,
+ file,
+ });
+
+ onBack();
+ },
+ [onSelect, onBack],
+ );
+
+ return (
+ <>
+