diff --git a/src/__tests__/__snapshots__/storybook.test.ts.snap b/src/__tests__/__snapshots__/storybook.test.ts.snap
index 59432595..d6559c82 100644
--- a/src/__tests__/__snapshots__/storybook.test.ts.snap
+++ b/src/__tests__/__snapshots__/storybook.test.ts.snap
@@ -226,13 +226,6 @@ exports[`Storyshots Filesystem default 1`] = `
           Download
         </a>
       </span>
-      <button
-        className="btn btn-primary"
-        disabled={false}
-        type="button"
-      >
-        New Folder
-      </button>
     </span>
   </div>
   <div
@@ -333,7 +326,6 @@ exports[`Storyshots Filesystem default 1`] = `
             <div
               className="text-center col"
             >
-               
               Nothing to see here.
             </div>
           </div>
diff --git a/src/background/api/filesystem.ts b/src/background/api/filesystem.ts
index 48fadea0..89cd24ea 100644
--- a/src/background/api/filesystem.ts
+++ b/src/background/api/filesystem.ts
@@ -1,20 +1,30 @@
-import {FsEntity} from "./filesystemTypes";
-import {filesystemPath, hostname} from "./api";
-import Axios, {AxiosResponse} from "axios";
-import {constants} from "../constants";
+import { FsEntity } from "./filesystemTypes";
+import { filesystemPath, hostname } from "./api";
+import Axios, { AxiosError, AxiosResponse } from "axios";
+import { constants } from "../constants";
 
 import store from "../redux/store";
-import {ApiAction, ApiActionStatus, ApiActionType} from "../redux/actions/apiActionsTypes";
-import {addApiAction, changeStatus, nextFsEntity} from "../redux/actions/apiActions";
-import {addToContents, removeFromContents} from "../redux/actions/filesystem";
-import {EditableFileWithPreflightInfo, PreflightEntity} from "../../components/pages/filesytem/upload/preflightTypes";
-import {isFsEntityInFolder} from "../methods/filesystem";
-
+import {
+    ApiAction,
+    ApiActionStatus,
+    ApiActionType
+} from "../redux/actions/apiActionsTypes";
+import {
+    addApiAction,
+    changeStatus,
+    nextFsEntity
+} from "../redux/actions/apiActions";
+import { addToContents, removeFromContents } from "../redux/actions/filesystem";
+import {
+    EditableFileWithPreflightInfo,
+    PreflightEntity
+} from "../../components/pages/filesytem/upload/preflightTypes";
+import { isFsEntityInFolder } from "../methods/filesystem";
 
 const fhHostname = constants.url.FH_URL;
 
 export const getFolderContents = (path: string) => {
-    console.log("[Get folder content", path)
+    console.log("[Get folder content", path);
     return new Promise<AxiosResponse<FsEntity[]>>((resolve, reject) => {
         let config = {
             headers: {
@@ -24,9 +34,8 @@ export const getFolderContents = (path: string) => {
         Axios.get<FsEntity[]>(hostname + filesystemPath + "contents", config)
             .then((response: AxiosResponse<FsEntity[]>) => resolve(response))
             .catch((error) => reject(error));
-    })
-}
-
+    });
+};
 
 export const uploadPreflight = (
     files: File[] | EditableFileWithPreflightInfo[],
@@ -43,7 +52,8 @@ export const uploadPreflight = (
     }));
     return new Promise<PreflightEntity[]>((resolve, reject) => {
         Axios.post<PreflightEntity[]>(
-            hostname + filesystemPath + parentFolderID + "/upload/preflight", postData
+            hostname + filesystemPath + parentFolderID + "/upload/preflight",
+            postData
         )
             .then((response: AxiosResponse<PreflightEntity[]>) => {
                 resolve(response.data);
@@ -52,8 +62,15 @@ export const uploadPreflight = (
     });
 };
 
-export const uploadFiles = (files: File[] | EditableFileWithPreflightInfo[], parentFolderID: string) => {
-    console.log("[API filesystem] uploading files to folderID", parentFolderID , files);
+export const uploadFiles = (
+    files: File[] | EditableFileWithPreflightInfo[],
+    parentFolderID: string
+) => {
+    console.log(
+        "[API filesystem] uploading files to folderID",
+        parentFolderID,
+        files
+    );
     const apiCall = (file: File | EditableFileWithPreflightInfo) => {
         return new Promise((resolve, reject) => {
             let formData = new FormData();
@@ -78,9 +95,10 @@ export const uploadFiles = (files: File[] | EditableFileWithPreflightInfo[], par
                 .then((response: AxiosResponse<[FsEntity]>) => {
                     const currentPath = store.getState().filesystem.currentPath;
 
-                    const fsEntityToShow = response.data.find((fsEntity: FsEntity) =>
-                        isFsEntityInFolder(fsEntity, currentPath)
-                    )
+                    const fsEntityToShow = response.data.find(
+                        (fsEntity: FsEntity) =>
+                            isFsEntityInFolder(fsEntity, currentPath)
+                    );
 
                     if (fsEntityToShow) {
                         store.dispatch(addToContents(fsEntityToShow));
@@ -93,7 +111,6 @@ export const uploadFiles = (files: File[] | EditableFileWithPreflightInfo[], par
     handleMultipleApiActions(files, apiCall, ApiActionType.UPLOAD);
 };
 
-
 export const deleteFsEntities = (files: FsEntity[]) => {
     const apiCall = (fsEntity: FsEntity) => {
         return new Promise((resolve, reject) => {
@@ -101,7 +118,9 @@ export const deleteFsEntities = (files: FsEntity[]) => {
                 fhHostname + "/delete/" + fsEntity.fileSystemId
             )
                 .then((response: AxiosResponse<FsEntity[]>) => {
-                    response.data.forEach((e) => store.dispatch(removeFromContents(e)));
+                    response.data.forEach((e) =>
+                        store.dispatch(removeFromContents(e))
+                    );
                     resolve(response);
                 })
                 .catch((error) => reject(error));
@@ -110,6 +129,21 @@ export const deleteFsEntities = (files: FsEntity[]) => {
     handleMultipleApiActions(files, apiCall, ApiActionType.DELETE);
 };
 
+export const createNewFolder = (
+    folderName: string,
+    parentFolderID: string
+): Promise<AxiosResponse<FsEntity>> => {
+    const body = { name: folderName };
+
+    return new Promise((resolve, reject) => {
+        Axios.post<FsEntity>(
+            hostname + filesystemPath + parentFolderID + "/folder/create",
+            body
+        )
+            .then((response: AxiosResponse<FsEntity>) => resolve(response))
+            .catch((error: AxiosError) => reject(error));
+    });
+};
 
 function handleMultipleApiActions<Type extends File | FsEntity>(
     items: Type[],
@@ -134,7 +168,9 @@ function handleMultipleApiActions<Type extends File | FsEntity>(
         // get the info from the store
         apiAction = store
             .getState()
-            .apiActions.actions.find((a: ApiAction) => a.key === apiAction?.key);
+            .apiActions.actions.find(
+                (a: ApiAction) => a.key === apiAction?.key
+            );
 
         if (
             !apiAction ||
@@ -150,7 +186,10 @@ function handleMultipleApiActions<Type extends File | FsEntity>(
 
         if (currentIndex === apiAction.totalAmount) {
             store.dispatch(
-                changeStatus({key: apiAction.key, status: ApiActionStatus.FINISHED})
+                changeStatus({
+                    key: apiAction.key,
+                    status: ApiActionStatus.FINISHED
+                })
             );
             return;
         } else {
@@ -166,7 +205,9 @@ function handleMultipleApiActions<Type extends File | FsEntity>(
 
     action(items[currentIndex])
         .then((response) => {
-            console.log("[API filesystem] handleMultipleApiActions next iteration");
+            console.log(
+                "[API filesystem] handleMultipleApiActions next iteration"
+            );
             handleMultipleApiActions(items, action, type, apiAction);
         })
         .catch((error) => {
diff --git a/src/background/constants.ts b/src/background/constants.ts
index 1a65fcfe..d70d2f01 100644
--- a/src/background/constants.ts
+++ b/src/background/constants.ts
@@ -1,29 +1,26 @@
 interface constantsdef {
-  url: { API_URL: string
-  FH_URL: string};
+    url: { API_URL: string; FH_URL: string };
 }
 
 const prod: constantsdef = {
-  url: {
-    API_URL: window.location.origin + "/api",
-    FH_URL: window.location.origin + "/data"
-  }
+    url: {
+        API_URL: window.location.origin + "/api",
+        FH_URL: window.location.origin + "/data"
+    }
 };
 
 const dev: constantsdef = {
-  url: {
-    API_URL: "https://demo.filefighter.de/api",
-   // API_URL: "http://localhost:8080",
-    //API_URL: "http://localhost/api",
-    //FH_URL: "http://localhost:5000/data"
-    //FH_URL: "http://localhost/data"
-    FH_URL: "https://demo.filefighter.de/data"
-
-  }
+    url: {
+        API_URL: "https://demo.filefighter.de/api",
+        //     API_URL: "http://localhost:8080",
+        //API_URL: "http://localhost/api",
+        //FH_URL: "http://localhost:5000/data"
+        //FH_URL: "http://localhost/data"
+        FH_URL: "https://demo.filefighter.de/data"
+    }
 };
 export const constants = process.env.NODE_ENV === "development" ? dev : prod;
 
-
 export const MIN_PASSWORD_LENGTH = 8;
 export const MAX_PASSWORD_LENGTH = 20;
 export const DEFAULT_ALERT_DURATION = 3500;
diff --git a/src/components/pages/filesytem/FileList.tsx b/src/components/pages/filesytem/FileList.tsx
index b62bacd7..8929c7f1 100644
--- a/src/components/pages/filesytem/FileList.tsx
+++ b/src/components/pages/filesytem/FileList.tsx
@@ -223,11 +223,10 @@ function FileList(props: Props): ReactElement {
             <div className="overflow-auto flex-grow-1">
                 {/*Table Body*/}
                 <Row className="m-0">
-                    {error ? (
+                    {error  && !filesAndFolders.length ? (
                         <Col className={"text-center"}> {error}</Col>
                     ) : filesAndFolders?.length === 0 ? (
                         <Col className={"text-center"}>
-                            {" "}
                             Nothing to see here.
                         </Col>
                     ) : (
diff --git a/src/components/pages/filesytem/ToolbarActions.tsx b/src/components/pages/filesytem/ToolbarActions.tsx
index 0d9f337b..f958107c 100644
--- a/src/components/pages/filesytem/ToolbarActions.tsx
+++ b/src/components/pages/filesytem/ToolbarActions.tsx
@@ -5,6 +5,7 @@ import { connect, ConnectedProps } from "react-redux";
 import { deleteFsEntities } from "../../../background/api/filesystem";
 import { constants } from "../../../background/constants";
 import { FsEntity } from "../../../background/api/filesystemTypes";
+import { NewFolder } from "./upload/NewFolder";
 
 const mapState = (state: SystemState) => ({
     selectedFsEntities: state.filesystem.selectedFsEntities
@@ -34,7 +35,7 @@ function ToolbarActions(props: Props): ReactElement | null {
                     href={constants.url.FH_URL + "/download?ids=" + props.selectedFsEntities.map((e: FsEntity) => e.fileSystemId.toString())}>Download</Button>
         </span>
       </Fade>
-      <Button>New Folder</Button>
+      <NewFolder/>
     </span>
     );
 }
diff --git a/src/components/pages/filesytem/upload/NewFolder.tsx b/src/components/pages/filesytem/upload/NewFolder.tsx
new file mode 100644
index 00000000..5cbf2970
--- /dev/null
+++ b/src/components/pages/filesytem/upload/NewFolder.tsx
@@ -0,0 +1,37 @@
+import { useSelector } from "react-redux";
+import React, { ReactElement, useState } from "react";
+import { RootState } from "../../../../background/redux/store";
+import { Button } from "react-bootstrap";
+import { Modal } from "react-bootstrap";
+import { NewFolderModalContent } from "./NewFolderModalContent";
+
+function NewFolder(): ReactElement {
+    const currentFsItemId = useSelector(
+        (state: RootState) => state.filesystem.currentFsItemId
+    );
+    const [showModal, setShowModal] = useState(false);
+    const handleClose = () => setShowModal(false);
+    const handleShow = () => setShowModal(true);
+
+    if (currentFsItemId === "-1") {
+        return <></>;
+    }
+
+    return (
+        <>
+            <Button onClick={handleShow}>New Folder</Button>
+            <Modal
+                show={showModal}
+                onHide={handleClose}
+                contentClassName={"bg-body"}
+            >
+                <NewFolderModalContent
+                    handleClose={handleClose}
+                    currentFsItemId={currentFsItemId}
+                />
+            </Modal>
+        </>
+    );
+}
+
+export { NewFolder };
diff --git a/src/components/pages/filesytem/upload/NewFolderModalContent.tsx b/src/components/pages/filesytem/upload/NewFolderModalContent.tsx
new file mode 100644
index 00000000..d99c5a87
--- /dev/null
+++ b/src/components/pages/filesytem/upload/NewFolderModalContent.tsx
@@ -0,0 +1,71 @@
+import { Button, Form, Modal, Row } from "react-bootstrap";
+import React, { FormEvent, useState } from "react";
+import { createNewFolder } from "../../../../background/api/filesystem";
+import { isFileNameValid } from "../../../../background/methods/filesystem";
+import { useDispatch } from "react-redux";
+import { addToContents } from "../../../../background/redux/actions/filesystem";
+
+interface Props {
+    handleClose: () => void;
+    currentFsItemId: string;
+}
+
+function NewFolderModalContent({ handleClose, currentFsItemId }: Props) {
+    const dispatch = useDispatch();
+    const [folderName, setFolderName] = useState("");
+    const [error, setError] = useState("");
+
+    function handleApply(event: FormEvent) {
+        event.preventDefault();
+        console.log("[NEW FOLDER ]", folderName);
+        if (!isFileNameValid(folderName)) {
+            setError("The name is not a valid foldername.");
+            return;
+        }
+
+        createNewFolder(folderName, currentFsItemId)
+            .then((response) => {
+                dispatch(addToContents(response.data));
+                setError("");
+                handleClose();
+            })
+            .catch((error) =>
+                setError(
+                    error.response?.data.message ?? "Something went wrong :("
+                )
+            );
+    }
+
+    return (
+        <Form onSubmit={handleApply}>
+            <Modal.Header closeButton>
+                <Modal.Title>Create new Directory</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Form.Group controlId="formFolderName">
+                    <Form.Label>Folder name</Form.Label>
+                    <Form.Control
+                        type="text"
+                        placeholder="e.g. My Cat Pictures"
+                        value={folderName}
+                        onChange={(event) => setFolderName(event.target.value)}
+                    />
+                </Form.Group>
+                {error && <p className="text-danger">{error}</p>}
+            </Modal.Body>
+
+            <Modal.Footer>
+                <Row className="w-100 justify-content-between">
+                    <Button variant="secondary" onClick={handleClose}>
+                        Abort
+                    </Button>
+                    <Button variant="primary" onClick={handleApply}>
+                        Creat Folder
+                    </Button>
+                </Row>
+            </Modal.Footer>
+        </Form>
+    );
+}
+
+export { NewFolderModalContent };
diff --git a/src/components/pages/filesytem/upload/UploadZone.tsx b/src/components/pages/filesytem/upload/UploadZone.tsx
index fbd9def6..ae8aec4d 100644
--- a/src/components/pages/filesytem/upload/UploadZone.tsx
+++ b/src/components/pages/filesytem/upload/UploadZone.tsx
@@ -1,253 +1,301 @@
-import React, { ReactElement, Reducer, useCallback, useReducer, useState } from "react";
+import React, {
+    ReactElement,
+    Reducer,
+    useCallback,
+    useReducer,
+    useState
+} from "react";
 import { useDropzone } from "react-dropzone";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../background/redux/store";
 import { Modal } from "react-bootstrap";
-import { uploadFiles, uploadPreflight } from "../../../../background/api/filesystem";
+import {
+    uploadFiles,
+    uploadPreflight
+} from "../../../../background/api/filesystem";
 import { FsEntity } from "../../../../background/api/filesystemTypes";
 import { UploadDecisionsModalContent } from "./UploadDecisionsModalContent";
 import { divideArrayByCondition } from "../../../../background/methods/dataTypes/arrays";
 import { getPathWithoutName, isFileNameValid } from "../../../../background/methods/filesystem";
 import {
-  EditableEntityError,
-  EditableFileWithPreflightInfo,
-  EditablePreflightEntityOrFile,
-  PeflightEntiesActionTypes,
-  PREFLIGHT_ADD_ENTITIES,
-  PREFLIGHT_CHANGE_NAME,
-  PREFLIGHT_TOGGLE_ALL,
-  PREFLIGHT_TOGGLE_OVERWRITE,
-  PREFLIGHT_UPDATE_NAME,
-  PreflightEntity
+    EditableEntityError,
+    EditableFileWithPreflightInfo,
+    EditablePreflightEntityOrFile,
+    PeflightEntiesActionTypes,
+    PREFLIGHT_ADD_ENTITIES,
+    PREFLIGHT_CHANGE_NAME,
+    PREFLIGHT_TOGGLE_ALL,
+    PREFLIGHT_TOGGLE_OVERWRITE,
+    PREFLIGHT_UPDATE_NAME,
+    PreflightEntity
 } from "./preflightTypes";
 import { preflightResultCombine } from "./preflightResponseParser";
 
 export const UploadZone = (): ReactElement => {
-  const [showUploadDialog, setShowUploadDialog] = useState(false);
-  const handleClose = () => {
-    setPreflightResultDispatch({ type: PREFLIGHT_ADD_ENTITIES, payload: [] });
-    setShowUploadDialog(false);
-  };
-  const handleShow = () => setShowUploadDialog(true);
-
-  const currentFsItemId = useSelector(
-    (state: RootState) => state.filesystem.currentFsItemId
-  );
-  const [fsItemIdToUpload, setFsItemIdToUpload] = useState(currentFsItemId);
-  const currentFsContent = useSelector(
-    (state: RootState) => state.filesystem.folderContents
-  );
-
-  const onDrop = useCallback(
-    (acceptedFiles: EditableFileWithPreflightInfo[]) => {
-
-
-      if (!acceptedFiles.length){
-        return // TODO: dispatch a action to show that a empty folder could not be uploaded
-      }
-
-      //check if preflight is needed
-      let preflightNeeded = acceptedFiles.some(
-        (file: EditablePreflightEntityOrFile) => {
-          return (
-            file.path.includes("/") || !isFileNameValid(file.name) ||
-            currentFsContent.some(
-              (fsEntiy: FsEntity) => fsEntiy.name === file.name
-            )
-          );
-        }
-      );
-      console.log("[Upload Zone, add files]",acceptedFiles, preflightNeeded);
-
-      if (preflightNeeded) {
-        setFsItemIdToUpload(currentFsItemId);
-        uploadPreflight(
-          acceptedFiles,
-          currentFsItemId
-        ).then((response) => {
-          const actionsNeeded = response.some(
-            (e: PreflightEntity) =>
-              !e.permissionIsSufficient || e.nameAlreadyInUse || !e.nameIsValid
-          );
-          if (actionsNeeded) {
-            const combined = preflightResultCombine(acceptedFiles, response);
-            console.log("combined",combined)
-
-            setPreflightResultDispatch({
-              type: PREFLIGHT_ADD_ENTITIES,
-              payload: [
-                ...combined,
-                ...(response.filter(
-                  (f) => !f.isFile
-                ))
-              ]
-            });
-            handleShow();
-          } else {
-            uploadFiles((acceptedFiles as unknown) as File[], currentFsItemId);
-          }
+    const [showUploadDialog, setShowUploadDialog] = useState(false);
+    const handleClose = () => {
+        setPreflightResultDispatch({
+            type: PREFLIGHT_ADD_ENTITIES,
+            payload: []
         });
-      } else {
-        uploadFiles((acceptedFiles as unknown) as File[], currentFsItemId);
-      }
-    },
-    [currentFsItemId, currentFsContent]
-  );
-
-  const [preflightResult, setPreflightResultDispatch] = useReducer<Reducer<EditablePreflightEntityOrFile[], PeflightEntiesActionTypes>>(preflightResultReducer, []);
-
-  // @ts-ignore
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
-
-  if (currentFsItemId === "-1" ){
-    return <></>
-  }
-  return (
-    <>
-      <div {...getRootProps()} className={"text-center border py-4 mx-3"}>
-        <input {...getInputProps()} />
-        {isDragActive ? (
-          <p>Drop files here ...</p>
-        ) : (
-          <p>Drag 'n' drop files or folders here, or click to select files</p>
-        )}
-      </div>
-
-      <Modal
-        size="lg"
-        scrollable
-        show={showUploadDialog}
-        onHide={handleClose}
-        contentClassName={"bg-body"}
-      >
-        <UploadDecisionsModalContent
-          handleClose={handleClose}
-          preflightResult={preflightResult}
-          setPreflightResultDispatch={setPreflightResultDispatch}
-          fsItemIdToUpload={fsItemIdToUpload}
-        />
-      </Modal>
-    </>
-  );
-};
+        setShowUploadDialog(false);
+    };
+    const handleShow = () => setShowUploadDialog(true);
+
+    const currentFsItemId = useSelector(
+        (state: RootState) => state.filesystem.currentFsItemId
+    );
+    const [fsItemIdToUpload, setFsItemIdToUpload] = useState(currentFsItemId);
+    const currentFsContent = useSelector(
+        (state: RootState) => state.filesystem.folderContents
+    );
+
+    const onDrop = useCallback(
+        (acceptedFiles: EditableFileWithPreflightInfo[]) => {
+            if (!acceptedFiles.length) {
+                return; // TODO: dispatch a action to show that a empty folder could not be uploaded
+            }
+
+            //check if preflight is needed
+            let preflightNeeded = acceptedFiles.some(
+                (file: EditablePreflightEntityOrFile) => {
+                    return (
+                        file.path.includes("/") ||
+                        !isFileNameValid(file.name) ||
+                        currentFsContent.some(
+                            (fsEntiy: FsEntity) => fsEntiy.name === file.name
+                        )
+                    );
+                }
+            );
+            console.log(
+                "[Upload Zone, add files]",
+                acceptedFiles,
+                preflightNeeded
+            );
+
+            if (preflightNeeded) {
+                setFsItemIdToUpload(currentFsItemId);
+                uploadPreflight(acceptedFiles, currentFsItemId).then(
+                    (response) => {
+                        const actionsNeeded = response.some(
+                            (e: PreflightEntity) =>
+                                !e.permissionIsSufficient ||
+                                e.nameAlreadyInUse ||
+                                !e.nameIsValid
+                        );
+                        if (actionsNeeded) {
+                            const combined = preflightResultCombine(
+                                acceptedFiles,
+                                response
+                            );
+                            console.log("combined", combined);
 
-export const preflightResultReducer: Reducer<EditablePreflightEntityOrFile[],
-  PeflightEntiesActionTypes> = (currentState, action) => {
-  switch (action.type) {
-    case PREFLIGHT_ADD_ENTITIES: {
-      return action.payload.sort(sortPreflightResult);
+                            setPreflightResultDispatch({
+                                type: PREFLIGHT_ADD_ENTITIES,
+                                payload: [
+                                    ...combined,
+                                    ...response.filter((f) => !f.isFile)
+                                ]
+                            });
+                            handleShow();
+                        } else {
+                            uploadFiles(
+                                (acceptedFiles as unknown) as File[],
+                                currentFsItemId
+                            );
+                        }
+                    }
+                );
+            } else {
+                uploadFiles(
+                    (acceptedFiles as unknown) as File[],
+                    currentFsItemId
+                );
+            }
+        },
+        [currentFsItemId, currentFsContent]
+    );
+
+    const [preflightResult, setPreflightResultDispatch] = useReducer<
+        Reducer<EditablePreflightEntityOrFile[], PeflightEntiesActionTypes>
+    >(preflightResultReducer, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        // @ts-ignore
+        onDrop
+    });
+
+    if (currentFsItemId === "-1") {
+        return <></>;
     }
-    case PREFLIGHT_TOGGLE_ALL: {
-      let [files, folders] = divideArrayByCondition(
-        currentState,
-        (e) => e.isFile
-      );
-      let toChange = action.payload.isFolders ? folders : files;
-      let notToChange = !action.payload.isFolders ? folders : files;
-
-      toChange = toChange.map((e: EditablePreflightEntityOrFile) => {
-        if (e.nameIsValid && e.permissionIsSufficient) {
-          e.overwrite = action.payload?.newValue ?? false;
+    return (
+        <>
+            <div {...getRootProps()} className={"text-center border py-4 mx-3"}>
+                <input {...getInputProps()} />
+                {isDragActive ? (
+                    <p>Drop files here ...</p>
+                ) : (
+                    <p>
+                        Drag 'n' drop files or folders here, or click to select
+                        files
+                    </p>
+                )}
+            </div>
+
+            <Modal
+                size="xl"
+                scrollable
+                show={showUploadDialog}
+                onHide={handleClose}
+                contentClassName={"bg-body"}
+            >
+                <UploadDecisionsModalContent
+                    handleClose={handleClose}
+                    preflightResult={preflightResult}
+                    setPreflightResultDispatch={setPreflightResultDispatch}
+                    fsItemIdToUpload={fsItemIdToUpload}
+                />
+            </Modal>
+        </>
+    );
+};
+
+export const preflightResultReducer: Reducer<
+    EditablePreflightEntityOrFile[],
+    PeflightEntiesActionTypes
+> = (currentState, action) => {
+    switch (action.type) {
+        case PREFLIGHT_ADD_ENTITIES: {
+            return action.payload.sort(sortPreflightResult);
         }
-        return e;
-      });
-      return [...toChange, ...notToChange].sort(sortPreflightResult);
-    }
-    case PREFLIGHT_TOGGLE_OVERWRITE: {
-      let [[elementToReplace], restOfElements] = divideArrayByCondition(
-        currentState,
-        (e) => e.path === action.payload.path
-      );
-      elementToReplace.overwrite = action.payload.overwrite;
-
-      return [...restOfElements, elementToReplace].sort(sortPreflightResult);
-    }
-    case PREFLIGHT_CHANGE_NAME: {
-      let [[elementToReplace], restOfElements] = divideArrayByCondition(
-        currentState,
-        (e) => e.path === action.payload.path
-      );
-      let oldPath = elementToReplace.newPath ?? elementToReplace.path;
-
-      elementToReplace.newPath =
-        oldPath.substring(
-          0,
-          oldPath.lastIndexOf(elementToReplace.newName ?? elementToReplace.name)
-        ) + action.payload.newName;
-      elementToReplace.newName = action.payload.newName;
-      elementToReplace.error = undefined;
-      return [...restOfElements, elementToReplace].sort(sortPreflightResult);
-    }
-    case PREFLIGHT_UPDATE_NAME: {
-      let [[elementToReplace], restOfElements] = divideArrayByCondition(
-        currentState,
-        (e) => e.path === action.payload.path
-      );
-      let oldPath = elementToReplace.newPath ?? elementToReplace.path;
-      let newPath =
-        oldPath.substring(
-          0,
-          oldPath.lastIndexOf(elementToReplace.newName ?? elementToReplace.name)
-        ) + action.payload.newName;
-
-      let newPathAlreadyExits = restOfElements.some(
-        (e: EditablePreflightEntityOrFile) => {
-          let localPath = e.newPath ?? e.path;
-          return localPath === newPath;
+        case PREFLIGHT_TOGGLE_ALL: {
+            let [files, folders] = divideArrayByCondition(
+                currentState,
+                (e) => e.isFile
+            );
+            let toChange = action.payload.isFolders ? folders : files;
+            let notToChange = !action.payload.isFolders ? folders : files;
+
+            toChange = toChange.map((e: EditablePreflightEntityOrFile) => {
+                if (e.nameIsValid && e.permissionIsSufficient) {
+                    e.overwrite = action.payload?.newValue ?? false;
+                }
+                return e;
+            });
+            return [...toChange, ...notToChange].sort(sortPreflightResult);
+        }
+        case PREFLIGHT_TOGGLE_OVERWRITE: {
+            let [[elementToReplace], restOfElements] = divideArrayByCondition(
+                currentState,
+                (e) => e.path === action.payload.path
+            );
+            elementToReplace.overwrite = action.payload.overwrite;
+
+            return [...restOfElements, elementToReplace].sort(
+                sortPreflightResult
+            );
+        }
+        case PREFLIGHT_CHANGE_NAME: {
+            let [[elementToReplace], restOfElements] = divideArrayByCondition(
+                currentState,
+                (e) => e.path === action.payload.path
+            );
+            let oldPath = elementToReplace.newPath ?? elementToReplace.path;
+
+            elementToReplace.newPath =
+                oldPath.substring(
+                    0,
+                    oldPath.lastIndexOf(
+                        elementToReplace.newName ?? elementToReplace.name
+                    )
+                ) + action.payload.newName;
+            elementToReplace.newName = action.payload.newName;
+            elementToReplace.error = undefined;
+            return [...restOfElements, elementToReplace].sort(
+                sortPreflightResult
+            );
+        }
+        case PREFLIGHT_UPDATE_NAME: {
+            let [[elementToReplace], restOfElements] = divideArrayByCondition(
+                currentState,
+                (e) => e.path === action.payload.path
+            );
+            let oldPath = elementToReplace.newPath ?? elementToReplace.path;
+            let newPath =
+                oldPath.substring(
+                    0,
+                    oldPath.lastIndexOf(
+                        elementToReplace.newName ?? elementToReplace.name
+                    )
+                ) + action.payload.newName;
+
+            let newPathAlreadyExits = restOfElements.some(
+                (e: EditablePreflightEntityOrFile) => {
+                    let localPath = e.newPath ?? e.path;
+                    return localPath === newPath;
+                }
+            );
+
+            let newNameIsNotValid = !isFileNameValid(action.payload.newName);
+
+            if (newPathAlreadyExits || newNameIsNotValid) {
+                elementToReplace.error = newPathAlreadyExits
+                    ? EditableEntityError.ALREADYEXITS
+                    : EditableEntityError.INVALIDNAME;
+                elementToReplace.newPath =
+                    elementToReplace.prefNewPath ?? elementToReplace.path;
+                elementToReplace.newName =
+                    elementToReplace.prefNewName ?? elementToReplace.name;
+            } else {
+                console.log(
+                    elementToReplace.newPath,
+                    elementToReplace.prefNewPath,
+                    elementToReplace.path
+                );
+                let prevOldPath =
+                    elementToReplace.prefNewPath ?? elementToReplace.path;
+                restOfElements = restOfElements.map((e) => {
+                    let currentPath = e.newPath ?? e.path;
+                    let currentName = e.newName ?? e.name;
+                    let currentPathWithoutName = getPathWithoutName(
+                        currentPath,
+                        currentName
+                    );
+
+                    let index = currentPathWithoutName.indexOf(prevOldPath);
+
+                    console.log(
+                        prevOldPath,
+                        currentPathWithoutName,
+                        currentName
+                    );
+                    if (index === 0) {
+                        e.newPath =
+                            newPath + currentPath.substr(prevOldPath?.length);
+                        e.prefNewPath = e.newPath;
+                    }
+                    return e;
+                });
+                elementToReplace.prefNewPath = newPath;
+                elementToReplace.prefNewName = action.payload.newName;
+                elementToReplace.newPath = newPath;
+                elementToReplace.newName = action.payload.newName;
+                elementToReplace.error = undefined;
+                console.log("updated");
+            }
+            return [...restOfElements, elementToReplace].sort(
+                sortPreflightResult
+            );
         }
-      );
-
-      let newNameIsNotValid = !isFileNameValid(action.payload.newName)
-
-      if (newPathAlreadyExits || newNameIsNotValid) {
-        elementToReplace.error = newPathAlreadyExits
-          ? EditableEntityError.ALREADYEXITS
-          : EditableEntityError.INVALIDNAME;
-        elementToReplace.newPath =
-          elementToReplace.prefNewPath ?? elementToReplace.path;
-        elementToReplace.newName =
-          elementToReplace.prefNewName ?? elementToReplace.name;
-      } else {
-        console.log(
-          elementToReplace.newPath,
-          elementToReplace.prefNewPath,
-          elementToReplace.path
-        );
-        let prevOldPath = elementToReplace.prefNewPath ?? elementToReplace.path;
-        restOfElements = restOfElements.map((e) => {
-          let currentPath = e.newPath ?? e.path;
-          let currentName = e.newName ?? e.name;
-          let currentPathWithoutName = getPathWithoutName(
-            currentPath,
-            currentName
-          );
-
-          let index = currentPathWithoutName.indexOf(prevOldPath);
-
-          console.log(prevOldPath, currentPathWithoutName, currentName);
-          if (index === 0) {
-            e.newPath = newPath + currentPath.substr(prevOldPath?.length);
-            e.prefNewPath = e.newPath;
-          }
-          return e;
-        });
-        elementToReplace.prefNewPath = newPath;
-        elementToReplace.prefNewName = action.payload.newName;
-        elementToReplace.newPath = newPath;
-        elementToReplace.newName = action.payload.newName;
-        elementToReplace.error = undefined;
-        console.log("updated");
-      }
-      return [...restOfElements, elementToReplace].sort(sortPreflightResult);
     }
-  }
 };
 
 const sortPreflightResult = (
-  a: EditablePreflightEntityOrFile,
-  b: EditablePreflightEntityOrFile
+    a: EditablePreflightEntityOrFile,
+    b: EditablePreflightEntityOrFile
 ) => {
-  return a.path.localeCompare(b.path);
+    return a.path.localeCompare(b.path);
 };
 
 export default UploadZone;