diff --git a/package-lock.json b/package-lock.json
index 9ec33ed..1bb376d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "aray",
       "version": "0.1.0",
       "dependencies": {
         "@aws-amplify/ui-components": "^1.3.0",
@@ -32,11 +33,12 @@
         "prop-types": "^15.7.2",
         "query-string": "^4.3.4",
         "react": "^17.0.2",
-        "react-avatar-edit": "^1.0.0",
+        "react-avatar-editor": "^12.0.0",
         "react-big-calendar": "^0.33.5",
         "react-calendar-heatmap": "^1.8.1",
         "react-document-title": "^2.0.3",
         "react-dom": "^17.0.2",
+        "react-dropzone": "^11.3.4",
         "react-i18next": "^11.8.15",
         "react-image-file-resizer": "^0.4.4",
         "react-number-format": "^4.5.5",
@@ -3608,7 +3610,6 @@
       "version": "7.14.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz",
       "integrity": "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.13.12",
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -7748,6 +7749,14 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "9.7.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz",
@@ -9504,11 +9513,6 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "license": "MIT"
     },
-    "node_modules/blueimp-load-image": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz",
-      "integrity": "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA=="
-    },
     "node_modules/bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -14579,11 +14583,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/exif-js": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
-      "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
-    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -15008,6 +15007,22 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
+      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/file-selector/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -19762,11 +19777,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/konva": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz",
-      "integrity": "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A=="
-    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -24488,17 +24498,18 @@
       "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
       "license": "MIT"
     },
-    "node_modules/react-avatar-edit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz",
-      "integrity": "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw==",
+    "node_modules/react-avatar-editor": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz",
+      "integrity": "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug==",
       "dependencies": {
-        "blueimp-load-image": "^5.14.0",
-        "exif-js": "^2.3.0",
-        "konva": "^2.5.1"
+        "@babel/plugin-transform-runtime": "^7.12.1",
+        "@babel/runtime": "^7.12.5",
+        "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "react": "16.x"
+        "react": "^0.14.0 || ^17.0.0",
+        "react-dom": ">=0.14.0"
       }
     },
     "node_modules/react-big-calendar": {
@@ -24762,6 +24773,22 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "11.3.4",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz",
+      "integrity": "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==",
+      "dependencies": {
+        "attr-accept": "^2.2.1",
+        "file-selector": "^0.2.2",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
@@ -33824,7 +33851,6 @@
       "version": "7.14.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz",
       "integrity": "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q==",
-      "peer": true,
       "requires": {
         "@babel/helper-module-imports": "^7.13.12",
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -36915,6 +36941,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "9.7.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz",
@@ -38252,11 +38283,6 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
-    "blueimp-load-image": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz",
-      "integrity": "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA=="
-    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -41924,11 +41950,6 @@
         }
       }
     },
-    "exif-js": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
-      "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
-    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -42266,6 +42287,21 @@
         }
       }
     },
+    "file-selector": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
+      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -45837,11 +45873,6 @@
       "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
       "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
     },
-    "konva": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz",
-      "integrity": "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A=="
-    },
     "language-subtag-registry": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -49377,14 +49408,14 @@
         }
       }
     },
-    "react-avatar-edit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz",
-      "integrity": "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw==",
+    "react-avatar-editor": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz",
+      "integrity": "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug==",
       "requires": {
-        "blueimp-load-image": "^5.14.0",
-        "exif-js": "^2.3.0",
-        "konva": "^2.5.1"
+        "@babel/plugin-transform-runtime": "^7.12.1",
+        "@babel/runtime": "^7.12.5",
+        "prop-types": "^15.7.2"
       }
     },
     "react-big-calendar": {
@@ -49581,6 +49612,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-dropzone": {
+      "version": "11.3.4",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz",
+      "integrity": "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==",
+      "requires": {
+        "attr-accept": "^2.2.1",
+        "file-selector": "^0.2.2",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
diff --git a/package.json b/package.json
index c3d561a..89812ca 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,12 @@
     "prop-types": "^15.7.2",
     "query-string": "^4.3.4",
     "react": "^17.0.2",
-    "react-avatar-edit": "^1.0.0",
+    "react-avatar-editor": "^12.0.0",
     "react-big-calendar": "^0.33.5",
     "react-calendar-heatmap": "^1.8.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.4",
     "react-i18next": "^11.8.15",
     "react-image-file-resizer": "^0.4.4",
     "react-number-format": "^4.5.5",
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index fd443a7..b1b9423 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 
-import AvatarEditor from 'components//AvatarEditor';
+import AvatarEditor from 'components/AvatarEditor';
 import Colors from 'constants/Colors';
 
 const useStyles = makeStyles((theme) => ({
@@ -65,6 +65,7 @@ export default function CustomAvatar({
       {showEditor && canEdit &&
         <div className={classes.editButton} style={{ right: `calc(50% - ${size/2}px)` }}>
           <AvatarEditor
+            src={src}
             title={editorTitle}
             s3Key={s3Key}
             exportAsSquare={variant !== 'circle'}
@@ -77,7 +78,7 @@ export default function CustomAvatar({
 }
 
 CustomAvatar.propTypes = {
-  src: PropTypes.string.isRequired,
+  src: PropTypes.string,
   fallbackSrc: PropTypes.string,
   size: PropTypes.number,
   variant: PropTypes.string,
diff --git a/src/components/AvatarEditor.js b/src/components/AvatarEditor.js
index d1a489f..dcbc0d9 100644
--- a/src/components/AvatarEditor.js
+++ b/src/components/AvatarEditor.js
@@ -1,48 +1,91 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 import Tooltip from '@material-ui/core/Tooltip';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
+import Slider from '@material-ui/core/Slider';
+import Typography from '@material-ui/core/Typography';
 
-import ReactAvatarEdit from 'react-avatar-edit';
+import ReactAvatarEditor from 'react-avatar-editor';
+import Dropzone from 'react-dropzone';
 import Resizer from 'react-image-file-resizer';
 import { useTranslation } from 'react-i18next';
 import { Storage } from 'aws-amplify';
 
 import FormDialog from 'forms/components/FormDialog';
 
+const useStyles = makeStyles((theme) => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+}));
+
 export default function AvatarEditor({
-  // src,
+  src,
   exportAsSquare = false,
   title = 'AvatarEditor Title',
   type = 'icon',
-  size = 24,
+  size = 'medium',
   cropSize = 300,
   s3Key,
   onUpdate,
 }) {
   const { t } = useTranslation();
+  const classes = useStyles();
 
   const [open, setOpen] = useState(false);
-  const [preview, setPreview] = useState();
+  const [preview, setPreview] = useState(src);
   const [isLoading, setIsLoading] = useState(false);
+  const [scale, setScale] = useState(1);
+  const [rotate, setRotate] = useState(0);
+  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
+
+  const editorRef = useRef(null);
+
+  const onDrop = (dropped) => {
+    setPreview(dropped[0]);
+  };
+
+  const onCancel = () => {
+    setPreview(src);
+    setScale(1);
+    setRotate(0);
+    setPosition({ x: 0.5, y: 0.5 });
+    setOpen(false);
+  };
+
+  const handleScale = (event, newValue) => {
+    const scale = parseFloat(newValue);
+    setScale(scale);
+  };
 
-  // const onBeforeFileLoad = (elem) => {
-  //   console.log(elem.target.files[0]);
-  // };
+  const rotateScale = (event, newValue) => {
+    const scale = parseFloat(newValue);
+    setRotate(scale);
+  };
+
+  const rotateLeft = (e) => {
+    setRotate(rotate - 90);
+  };
+
+  const rotateRight = (e) => {
+    setRotate(rotate + 90);
+  };
 
-  const onCrop = (preview) => {
-    setPreview(preview);
+  const handlePositionChange = (position) => {
+    setPosition(position);
   };
 
   const handleSubmit = async () => {
     try {
       setIsLoading(true);
-      const res = await fetch(preview);
+      const canvas = await editorRef.current.getImageScaledToCanvas().toDataURL();
+      const res = await fetch(canvas);
       const blob = await res.blob();
       const file = await new Promise((resolve) => {
         Resizer.imageFileResizer(
@@ -58,7 +101,6 @@ export default function AvatarEditor({
           'blob', // base64, blob, file
         );
       });
-
       await Storage.put(s3Key, file);
       setOpen(false);
 
@@ -93,25 +135,102 @@ export default function AvatarEditor({
             openOnInit={true}
             fullScreen={false}
             maxWidth={'sm'}
-            onClose={() => {
-              setOpen(false);
-            }}
+            onClose={onCancel}
           >
-            <Box align="center" justify="center" p={8}>
-              <ReactAvatarEdit
-                width={'100%'}
-                height={300}
-                // onBeforeFileLoad={onBeforeFileLoad}
-                label={t('avatarEditor_clickAndUpload')}
-                onCrop={onCrop}
-                // onImageLoad={onImageLoad}
-                // src={src}
-                exportAsSquare={exportAsSquare}
-              />
+            <Box align="center" justify="center" p={4}>
+              <Dropzone
+                onDrop={(dropped) => onDrop(dropped)}
+                noClick
+                multiple={false}
+                style={{ width: '300px', height: '300px' }}
+              >
+                {({ getRootProps, getInputProps }) => {
+                  return (
+                    <div {...getRootProps()}>
+                      <Box align="center" justify="center" p={2}>
+                        <ReactAvatarEditor
+                          ref={editorRef}
+                          image={preview}
+                          border={2}
+                          scale={parseFloat(scale)}
+                          width={cropSize}
+                          height={cropSize}
+                          position={position}
+                          onPositionChange={handlePositionChange}
+                          rotate={parseFloat(rotate)}
+                          borderRadius={cropSize / 2}
+                          crossOrigin="anonymous"
+                        />
+                      </Box>
+                      <Grid container alignItems="center" spacing={2}>
+                        <Grid item>
+                          <Typography gutterBottom>
+                            New File:
+                          </Typography>
+                        </Grid>
+                        <Grid item xs>
+                          <input
+                            name="newImage"
+                            type="file"
+                            onChange={(e) => onDrop(e.target.files)}
+                            {...getInputProps()}
+                            style={{ display: 'initial' }}
+                          />
+                        </Grid>
+                      </Grid>
+                    </div>
+                  );
+                }}
+              </Dropzone>
+              <Grid container alignItems="center" spacing={2}>
+                <Grid item>
+                  <Typography id="zoom" gutterBottom>
+                    Zoom:
+                  </Typography>
+                </Grid>
+                <Grid item xs>
+                  <Slider
+                    aria-labelledby="zoom"
+                    min={1.00}
+                    max={2.00}
+                    step={0.01}
+                    value={scale}
+                    onChange={handleScale}
+                  />
+                </Grid>
+              </Grid>
+              <Grid container alignItems="center" spacing={2}>
+                <Grid item>
+                  <Typography gutterBottom>
+                    Rotate:
+                  </Typography>
+                </Grid>
+                <Grid item xs>
+                  <Button size="small" variant="outlined" className={classes.button} onClick={rotateLeft}>Left</Button>
+                  <Button size="small" variant="outlined" className={classes.button} onClick={rotateRight}>Right</Button>
+                </Grid>
+              </Grid>
+              <Grid container alignItems="center" spacing={2}>
+                <Grid item>
+                  <Typography id="rotation-scale" gutterBottom>
+                    Rotation Scale:
+                  </Typography>
+                </Grid>
+                <Grid item xs>
+                  <Slider
+                    aria-labelledby="rotation-scale"
+                    min={0}
+                    max={180}
+                    step={1}
+                    value={rotate}
+                    onChange={rotateScale}
+                  />
+                </Grid>
+              </Grid>
             </Box>
             <Grid container align="center" justify="center">
               <Button
-                onClick={()=> setOpen(false)}
+                onClick={onCancel}
                 variant="outlined"
                 disabled={isLoading}
               >
@@ -136,7 +255,7 @@ AvatarEditor.propTypes = {
   src: PropTypes.string,
   title: PropTypes.string,
   type: PropTypes.string,
-  size: PropTypes.number,
+  size: PropTypes.string,
   cropSize: PropTypes.number,
   s3Key: PropTypes.string,
   exportAsSquare: PropTypes.bool,
diff --git a/src/forms/components/FormDialog.js b/src/forms/components/FormDialog.js
index 10755ef..05f1b4a 100644
--- a/src/forms/components/FormDialog.js
+++ b/src/forms/components/FormDialog.js
@@ -93,7 +93,7 @@ DetailFormDialog.propTypes = {
   onClose: PropTypes.func,
   fullScreen: PropTypes.bool,
   maxWidth: PropTypes.string,
-  width: PropTypes.number,
+  width: PropTypes.string,
 };
 
 export default withWidth()(DetailFormDialog);
diff --git a/yarn.lock b/yarn.lock
index 0efd8e9..fb5a1ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2485,7 +2485,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-runtime@^7.0.0":
+"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.12.1":
   "integrity" "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q=="
   "resolved" "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz"
   "version" "7.14.2"
@@ -4853,6 +4853,11 @@
   "resolved" "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
   "version" "2.1.2"
 
+"attr-accept@^2.2.1":
+  "integrity" "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+  "resolved" "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz"
+  "version" "2.2.2"
+
 "autoprefixer@^9.6.1":
   "integrity" "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g=="
   "resolved" "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz"
@@ -5238,11 +5243,6 @@
   "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
   "version" "3.7.2"
 
-"blueimp-load-image@^5.14.0":
-  "integrity" "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA=="
-  "resolved" "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz"
-  "version" "5.14.0"
-
 "bn.js@^4.0.0", "bn.js@^4.1.0", "bn.js@^4.1.1", "bn.js@^4.4.0":
   "integrity" "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
   "resolved" "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz"
@@ -7697,11 +7697,6 @@
     "signal-exit" "^3.0.2"
     "strip-final-newline" "^2.0.0"
 
-"exif-js@^2.3.0":
-  "integrity" "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
-  "resolved" "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz"
-  "version" "2.3.0"
-
 "exit@^0.1.2":
   "integrity" "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
   "resolved" "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
@@ -7929,6 +7924,13 @@
     "loader-utils" "^2.0.0"
     "schema-utils" "^3.0.0"
 
+"file-selector@^0.2.2":
+  "integrity" "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA=="
+  "resolved" "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz"
+  "version" "0.2.4"
+  dependencies:
+    "tslib" "^2.0.3"
+
 "file-uri-to-path@1.0.0":
   "integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
   "resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
@@ -10254,11 +10256,6 @@
   "resolved" "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz"
   "version" "2.0.4"
 
-"konva@^2.5.1":
-  "integrity" "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A=="
-  "resolved" "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz"
-  "version" "2.6.0"
-
 "language-subtag-registry@~0.3.2":
   "integrity" "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg=="
   "resolved" "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
@@ -13128,14 +13125,14 @@
     "regenerator-runtime" "^0.13.7"
     "whatwg-fetch" "^3.4.1"
 
-"react-avatar-edit@^1.0.0":
-  "integrity" "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw=="
-  "resolved" "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz"
-  "version" "1.0.0"
+"react-avatar-editor@^12.0.0":
+  "integrity" "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug=="
+  "resolved" "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz"
+  "version" "12.0.0"
   dependencies:
-    "blueimp-load-image" "^5.14.0"
-    "exif-js" "^2.3.0"
-    "konva" "^2.5.1"
+    "@babel/plugin-transform-runtime" "^7.12.1"
+    "@babel/runtime" "^7.12.5"
+    "prop-types" "^15.7.2"
 
 "react-big-calendar@^0.33.5":
   "integrity" "sha512-Srr1WvzbthX4suM/fordG3WOLgAl8Qc1cjACIJLSki6dUwxrRjTdGVnfH6VHoE4zMw3y1vydYMdjv9+wH22oLw=="
@@ -13217,6 +13214,15 @@
     "object-assign" "^4.1.1"
     "scheduler" "^0.20.2"
 
+"react-dropzone@^11.3.4":
+  "integrity" "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw=="
+  "resolved" "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz"
+  "version" "11.3.4"
+  dependencies:
+    "attr-accept" "^2.2.1"
+    "file-selector" "^0.2.2"
+    "prop-types" "^15.7.2"
+
 "react-error-overlay@^6.0.9":
   "integrity" "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
   "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
@@ -13467,7 +13473,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@16.x", "react@17.0.2":
+"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^0.14.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -15412,6 +15418,11 @@
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz"
   "version" "2.2.0"
 
+"tslib@^2.0.3":
+  "integrity" "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+  "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz"
+  "version" "2.3.0"
+
 "tsutils@^3.17.1":
   "integrity" "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g=="
   "resolved" "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz"