diff --git a/package.json b/package.json
index 9f497ac..85cd011 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-dropzone": "14.2.10",
+    "react-dropzone": "20.1.2",
     "react-scripts": "^5.0.1",
     "serialize-error": "^8.1.0",
     "source-map-support": "^0.5.21",
diff --git a/src/app/Input.js b/src/app/Input.js
index edc7e86..bea578e 100644
--- a/src/app/Input.js
+++ b/src/app/Input.js
@@ -18,6 +18,51 @@ const Input = ({ run }) => {
   if (run.hasAstralTree) {
     console.log('run.hasAstralTree :>> ', run.hasAstralTree);
   }
+
+  const onAlignmentDrop = (acceptedFiles) => {
+    const droppedPathes = acceptedFiles.map((file) => ({
+      path: webUtils.getPathForFile(file),
+    }));
+    run.addAlignments(droppedPathes);
+  };
+
+  const onPartitionDrop = (acceptedFiles) => {
+    const droppedPathes = acceptedFiles.map((file) => ({
+      path: webUtils.getPathForFile(file),
+    }));
+    run.addPartitionFiles(droppedPathes);
+  };
+
+  const onTreeDrop = (type) => (acceptedFiles) => {
+    const droppedPathes = acceptedFiles.map((file) => ({
+      path: webUtils.getPathForFile(file),
+    }));
+    run.addTreeFiles(type, droppedPathes);
+  };
+
+  const onAstralTreeDrop = (acceptedFiles) => {
+    const droppedPathes = acceptedFiles.map((file) => ({
+      path: webUtils.getPathForFile(file),
+    }));
+    if (droppedPathes.length) {
+      run.addAstralFiles(droppedPathes[0]);
+    }
+  };
+
+  const dropzoneRootSx = (isDragActive, extra = {}) => ({
+    width: 'fit-content',
+    alignSelf: 'flex-start',
+    borderRadius: 1,
+    border: (theme) =>
+      isDragActive
+        ? `2px dashed ${theme.palette.input.darker}`
+        : '2px dashed transparent',
+    bgcolor: (theme) =>
+      isDragActive ? theme.palette.input.lighter : 'transparent',
+    transition: 'background-color 0.15s ease, border-color 0.15s ease',
+    ...extra,
+  });
+
   // const SelectNumRuns = run.
   return (
     <Box display="flex" flexDirection="column" sx={{ width: '100%' }}>
@@ -32,19 +77,10 @@ const Input = ({ run }) => {
           padding: '10px',
         }}
       >
-        <Dropzone
-          noClick
-          onDrop={(acceptedFiles) => {
-            const droppedPathes = acceptedFiles.map((file) => {
-              return {
-                path: webUtils.getPathForFile(file),
-              };
-            });
-            run.addAlignments(droppedPathes);
-          }}
-        >
-          {({ getRootProps, getInputProps }) => (
-            <div {...getRootProps()}>
+        <Dropzone noClick onDrop={onAlignmentDrop}>
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <Box {...getRootProps()} sx={dropzoneRootSx(isDragActive)}>
+              <input {...getInputProps()} style={{ display: 'none' }} />
               <Box display="flex" alignItems="center" sx={{ gap: '10px' }}>
                 {run.inputIsAlignment
                   ? run.alignments.map((alignment) => (
@@ -57,43 +93,80 @@ const Input = ({ run }) => {
                 {run.inputIsTree && run.hasAstralTree ? (
                   <AstralTreeCard astralTree={run.astralTree} />
                 ) : null}
-                <Box paddingX={1}>
-                  <PartitionFileCard run={run} />
-                </Box>
-                {run.canLoadAstralTree ? (
-                  <Button
-                    variant="outlined"
-                    sx={{
-                      width: '200px',
-                      height: '200px',
-                    }}
-                    onClick={run.loadAstralTree}
-                  >
-                    Load input trees
-                  </Button>
-                ) : null}
-                {run.canLoadAlignment && !run.canLoadPartitionFile ? (
+                {run.canLoadAlignment &&
+                !run.haveAlignments &&
+                !run.canLoadPartitionFile ? (
                   <Button
                     variant="outlined"
                     sx={{
-                      width: '200px',
+                      width: '550px',
                       height: '200px',
                     }}
                     onClick={run.loadAlignmentFiles}
-                    title={
-                      run.haveAlignments
-                        ? 'Concatenate new alignments and create partition'
-                        : ''
-                    }
                   >
-                    {run.haveAlignments ? 'Add alignment' : 'Load alignment'}
+                    Load alignment
                   </Button>
                 ) : null}
               </Box>
-            </div>
+            </Box>
           )}
         </Dropzone>
 
+        <Box paddingX={1}>
+          <PartitionFileCard run={run} />
+        </Box>
+        {run.canLoadAstralTree ? (
+          <Dropzone noClick onDrop={onAstralTreeDrop}>
+            {({ getRootProps, getInputProps, isDragActive }) => (
+              <Box
+                {...getRootProps()}
+                sx={dropzoneRootSx(isDragActive, {
+                  width: '200px',
+                  height: '200px',
+                })}
+              >
+                <input {...getInputProps()} style={{ display: 'none' }} />
+                <Button
+                  variant="outlined"
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                  }}
+                  onClick={run.loadAstralTree}
+                >
+                  Load input trees
+                </Button>
+              </Box>
+            )}
+          </Dropzone>
+        ) : null}
+        {run.canLoadAlignment &&
+        !run.canLoadPartitionFile &&
+        run.haveAlignments ? (
+          <Dropzone noClick onDrop={onAlignmentDrop}>
+            {({ getRootProps, getInputProps, isDragActive }) => (
+              <Box
+                {...getRootProps()}
+                sx={dropzoneRootSx(isDragActive, { flexShrink: 0 })}
+              >
+                <input {...getInputProps()} style={{ display: 'none' }} />
+                <Button
+                  variant="outlined"
+                  sx={{
+                    width: '200px',
+                    minWidth: '200px',
+                    height: '200px',
+                  }}
+                  onClick={run.loadAlignmentFiles}
+                  title="Concatenate new alignments and create partition"
+                >
+                  Add alignment
+                </Button>
+              </Box>
+            )}
+          </Dropzone>
+        ) : null}
+
         {run.canLoadAlignment && run.canLoadPartitionFile ? (
           <Box
             display="flex"
@@ -101,29 +174,61 @@ const Input = ({ run }) => {
             alignItems="center"
             style={{ height: '200px' }}
           >
-            <Button
-              variant="outlined"
-              sx={{
-                minWidth: '200px',
-                flexGrow: 1,
-              }}
-              onClick={run.loadAlignmentFiles}
-              title="Concatenate new alignments and automatically generate a partition"
-            >
-              Add alignment
-            </Button>
+            <Dropzone noClick onDrop={onAlignmentDrop}>
+              {({ getRootProps, getInputProps, isDragActive }) => (
+                <Box
+                  {...getRootProps()}
+                  sx={dropzoneRootSx(isDragActive, {
+                    flexGrow: 1,
+                    width: '100%',
+                    minWidth: '200px',
+                  })}
+                >
+                  <input {...getInputProps()} style={{ display: 'none' }} />
+                  <Button
+                    variant="outlined"
+                    sx={{
+                      minWidth: '200px',
+                      width: '100%',
+                      height: '100%',
+                      flexGrow: 1,
+                    }}
+                    onClick={run.loadAlignmentFiles}
+                    title="Concatenate new alignments and automatically generate a partition"
+                  >
+                    Add alignment
+                  </Button>
+                </Box>
+              )}
+            </Dropzone>
             <Box paddingX={2}>OR</Box>
-            <Button
-              variant="outlined"
-              sx={{
-                minWidth: '200px',
-                flexGrow: 1,
-              }}
-              onClick={run.loadPartitionFile}
-              title="Load a partition file for the current alignment"
-            >
-              Load partition
-            </Button>
+            <Dropzone noClick onDrop={onPartitionDrop}>
+              {({ getRootProps, getInputProps, isDragActive }) => (
+                <Box
+                  {...getRootProps()}
+                  sx={dropzoneRootSx(isDragActive, {
+                    flexGrow: 1,
+                    width: '100%',
+                    minWidth: '200px',
+                  })}
+                >
+                  <input {...getInputProps()} style={{ display: 'none' }} />
+                  <Button
+                    variant="outlined"
+                    sx={{
+                      minWidth: '200px',
+                      width: '100%',
+                      height: '100%',
+                      flexGrow: 1,
+                    }}
+                    onClick={run.loadPartitionFile}
+                    title="Load a partition file for the current alignment"
+                  >
+                    Load partition
+                  </Button>
+                </Box>
+              )}
+            </Dropzone>
           </Box>
         ) : null}
         <Box>
@@ -150,16 +255,29 @@ const Input = ({ run }) => {
                 }}
               />
             ) : (
-              <Button
-                variant="outlined"
-                sx={{
-                  width: '380px',
-                  height: '100px',
-                }}
-                onClick={run.loadTreeFile}
-              >
-                Add Tree
-              </Button>
+              <Dropzone noClick onDrop={onTreeDrop('tree')}>
+                {({ getRootProps, getInputProps, isDragActive }) => (
+                  <Box
+                    {...getRootProps()}
+                    sx={dropzoneRootSx(isDragActive, {
+                      width: '380px',
+                      height: '100px',
+                    })}
+                  >
+                    <input {...getInputProps()} style={{ display: 'none' }} />
+                    <Button
+                      variant="outlined"
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      onClick={run.loadTreeFile}
+                    >
+                      Add Tree
+                    </Button>
+                  </Box>
+                )}
+              </Dropzone>
             )}
           </Box>
         </Box>
@@ -183,16 +301,29 @@ const Input = ({ run }) => {
                 }}
               />
             ) : (
-              <Button
-                variant="outlined"
-                sx={{
-                  width: '380px',
-                  height: '100px',
-                }}
-                onClick={run.loadBackboneConstraintFile}
-              >
-                Add Backbone Constraint
-              </Button>
+              <Dropzone noClick onDrop={onTreeDrop('backboneConstraint')}>
+                {({ getRootProps, getInputProps, isDragActive }) => (
+                  <Box
+                    {...getRootProps()}
+                    sx={dropzoneRootSx(isDragActive, {
+                      width: '380px',
+                      height: '100px',
+                    })}
+                  >
+                    <input {...getInputProps()} style={{ display: 'none' }} />
+                    <Button
+                      variant="outlined"
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      onClick={run.loadBackboneConstraintFile}
+                    >
+                      Add Backbone Constraint
+                    </Button>
+                  </Box>
+                )}
+              </Dropzone>
             )}
           </Box>
         </Box>
@@ -216,16 +347,29 @@ const Input = ({ run }) => {
                 }}
               />
             ) : (
-              <Button
-                variant="outlined"
-                sx={{
-                  width: '380px',
-                  height: '100px',
-                }}
-                onClick={run.loadMultifurcatingConstraintFile}
-              >
-                Add Multifurcating Constraint
-              </Button>
+              <Dropzone noClick onDrop={onTreeDrop('multifurcatingConstraint')}>
+                {({ getRootProps, getInputProps, isDragActive }) => (
+                  <Box
+                    {...getRootProps()}
+                    sx={dropzoneRootSx(isDragActive, {
+                      width: '380px',
+                      height: '100px',
+                    })}
+                  >
+                    <input {...getInputProps()} style={{ display: 'none' }} />
+                    <Button
+                      variant="outlined"
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      onClick={run.loadMultifurcatingConstraintFile}
+                    >
+                      Add Multifurcating Constraint
+                    </Button>
+                  </Box>
+                )}
+              </Dropzone>
             )}
           </Box>
         </Box>
diff --git a/src/app/store/Run.js b/src/app/store/Run.js
index 43c0c87..a1007b2 100644
--- a/src/app/store/Run.js
+++ b/src/app/store/Run.js
@@ -2149,11 +2149,41 @@ Results saved to: ${this.outputDir}
     ipcRenderer.send(ipc.PARTITION_FILE_SELECT, this.id);
   };
 
+  @action
+  addPartitionFiles = async (files) => {
+    if (!files.length) {
+      return;
+    }
+    const { path } = files[0];
+    const content = await readFile(path, 'utf-8');
+    this.partitionFile = path;
+    this.partitionFileContent = content;
+  };
+
   @action onPartitionSelected = async (event, { id, filePath }) => {
     if (id === this.id) {
-      const content = await readFile(filePath, 'utf-8');
-      this.partitionFile = filePath;
-      this.partitionFileContent = content;
+      await this.addPartitionFiles([{ path: filePath }]);
+    }
+  };
+
+  @action
+  addTreeFiles = (type, files) => {
+    if (!files.length) {
+      return;
+    }
+    const { path } = files[0];
+    switch (type) {
+      case 'tree':
+        this.tree.setFilePath(path);
+        break;
+      case 'backboneConstraint':
+        this.backboneConstraint.setFilePath(path);
+        break;
+      case 'multifurcatingConstraint':
+        this.multifurcatingConstraint.setFilePath(path);
+        break;
+      default:
+        break;
     }
   };
 
@@ -2214,19 +2244,7 @@ Results saved to: ${this.outputDir}
   @action
   onTreeSelected = (event, { id, type, filePath }) => {
     if (id === this.id) {
-      switch (type) {
-        case 'tree':
-          this.tree.setFilePath(filePath);
-          break;
-        case 'backboneConstraint':
-          this.backboneConstraint.setFilePath(filePath);
-          break;
-        case 'multifurcatingConstraint':
-          this.multifurcatingConstraint.setFilePath(filePath);
-          break;
-        default:
-          break;
-      }
+      this.addTreeFiles(type, [{ path: filePath }]);
     }
   };
 
diff --git a/yarn.lock b/yarn.lock
index b363cf8..255d02a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4592,10 +4592,10 @@ atomically@^1.7.0:
   resolved "https://registry.yarnpkg.com/atomically/-/atomically-1.7.0.tgz#c07a0458432ea6dbc9a3506fffa424b48bccaafe"
   integrity sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==
 
-attr-accept@^2.2.2:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
-  integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==
+attr-accept@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-4.0.0.tgz#e038002c875830b2b98774918abfd4bdeb7d9c97"
+  integrity sha512-hmCnJClmeKNKlsBHgbM8yLZRiQZ4/20UXbLJb6OUT16eWcM5/xNZerr80a/zCYob768KIGq++aLrQNTuwPsIOQ==
 
 autoprefixer@^10.4.12, autoprefixer@^10.4.13:
   version "10.4.20"
@@ -7679,12 +7679,10 @@ file-loader@^6.0.0, file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-file-selector@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
-  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
-  dependencies:
-    tslib "^2.4.0"
+file-selector@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-5.0.1.tgz#9a8f7a944559efe4115bef40df885ac2092b0651"
+  integrity sha512-v0g/PTeuQgvKCBrVRsfVudvwXlRHSWHEQkVgKawgCGHkEpKA1clp3Om5jvEVhz8G9W/mOYjJH9FhkH4C888PgQ==
 
 file-type@^11.1.0:
   version "11.1.0"
@@ -12572,14 +12570,13 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-dropzone@14.2.10:
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.10.tgz#b8d86775c616534b44a30bd9c962044d2925c1a2"
-  integrity sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw==
+react-dropzone@20.1.2:
+  version "20.1.2"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-20.1.2.tgz#f05d27cb331800c8019f1faf3c2699e21d66806d"
+  integrity sha512-gj2m31ZmYOZjTuW6CDfx38/WW2JlbuQ/X2Il8cOwIWa7Znp7vQSPJFtRfDbAjusBuoXzAYktI+r2R6iKMaRTPw==
   dependencies:
-    attr-accept "^2.2.2"
-    file-selector "^0.6.0"
-    prop-types "^15.8.1"
+    attr-accept "^4.0.0"
+    file-selector "^5.0.0"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -14641,11 +14638,6 @@ tslib@^2.0.3, tslib@^2.1.0, tslib@^2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
-tslib@^2.4.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
-  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"