diff --git a/src/pages/gallery/components/AddCollection.tsx b/src/pages/gallery/components/AddCollection.tsx
new file mode 100644
index 000000000..0fd38b63a
--- /dev/null
+++ b/src/pages/gallery/components/AddCollection.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import Dropzone from "react-dropzone";
+import { DropDiv } from "./CollectionDropZone";
+import CreateCollection from "./CreateCollection";
+
+export default function AddCollection(props) {
+
+    const [acceptedFiles, setAcceptedFiles] = useState<File[]>();
+    const [createCollectionView, setCreateCollectionView] = useState(false);
+
+    const { children, closeModal, ...rest } = props;
+
+    const createCollection = (acceptedFiles) => {
+        closeModal();
+        setAcceptedFiles(acceptedFiles);
+        setCreateCollectionView(true);
+    };
+
+    return (
+        <>
+            <Dropzone
+                onDropAccepted={createCollection}
+                onDropRejected={props.closeUploadModal}
+                noDragEventsBubbling
+                accept="image/*, video/*, application/json "
+            >
+                {({
+                    getRootProps,
+                    getInputProps,
+                    isDragActive,
+                    isDragAccept,
+                    isDragReject,
+                }) => {
+                    return (
+                        <DropDiv
+                            {...getRootProps({
+                                isDragActive,
+                                isDragAccept,
+                                isDragReject,
+                            })}
+                        >
+                            <input {...getInputProps()} />
+                            {children}
+                        </DropDiv>
+                    );
+                }}
+            </Dropzone>
+            <CreateCollection
+                {...rest}
+                show={createCollectionView}
+                closeModal={() => setCreateCollectionView(false)}
+                acceptedFiles={acceptedFiles}
+            />
+        </>
+    )
+}