diff --git a/src/pages/gallery/components/CollectionDropZone.tsx b/src/pages/gallery/components/CollectionDropZone.tsx
index 5205d4876..10e068f38 100644
--- a/src/pages/gallery/components/CollectionDropZone.tsx
+++ b/src/pages/gallery/components/CollectionDropZone.tsx
@@ -34,17 +34,18 @@ const CollectionDropZone = ({
     setData,
     collectionLatestFile,
     noDragEventsBubbling,
-    showProgress,
+    setProgressView,
     token,
     encryptionKey,
-    setPercentComplete
+    progressBarProps
 
 }) => {
 
     const upload = async (acceptedFiles) => {
         closeModal();
-        showProgress();
-        await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token, setPercentComplete);
+        setProgressView(true);
+        await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token, progressBarProps);
+        setProgressView(false);
         setData(await fetchData(token, encryptionKey, [collectionLatestFile.collection]));
     }
     return (
diff --git a/src/pages/gallery/components/CollectionSelector.tsx b/src/pages/gallery/components/CollectionSelector.tsx
index 3ab04b14c..d32ebf065 100644
--- a/src/pages/gallery/components/CollectionSelector.tsx
+++ b/src/pages/gallery/components/CollectionSelector.tsx
@@ -9,9 +9,9 @@ function CollectionSelector({
     uploadModalView,
     closeUploadModal,
     collectionLatestFile,
-    showProgress,
+    setProgressView,
     setData,
-    setPercentComplete,
+    progressBarProps,
 }) {
 
     const [token, setToken] = useState(null);
@@ -27,11 +27,11 @@ function CollectionSelector({
             closeModal={closeUploadModal}
             collectionLatestFile={item}
             noDragEventsBubbling
-            showProgress={showProgress}
+            setProgressView={setProgressView}
             token={token}
             encryptionKey={encryptionKey}
             setData={setData}
-            setPercentComplete={setPercentComplete}
+            progressBarProps={progressBarProps}
         >
             <Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
                 <PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />
diff --git a/src/pages/gallery/components/Upload.tsx b/src/pages/gallery/components/Upload.tsx
index b4f1d2271..fd8abdc4f 100644
--- a/src/pages/gallery/components/Upload.tsx
+++ b/src/pages/gallery/components/Upload.tsx
@@ -1,13 +1,17 @@
 import React, { useState } from "react"
+import { UPLOAD_STAGES } from "services/uploadService";
 import CollectionSelector from "./CollectionSelector"
 import UploadProgress from "./UploadProgress"
 
 export default function Upload({ uploadModalView, closeUploadModal, collectionLatestFile, setData }) {
     const [progressView, setProgressView] = useState(false);
+    const [uploadStage, setUploadStage] = useState<UPLOAD_STAGES>(UPLOAD_STAGES.START);
+    const [fileCounter, setFileCounter] = useState({ current: 0, total: 0 });
     const [percentComplete, setPercentComplete] = useState(0);
-
     const init = () => {
         setProgressView(false);
+        setUploadStage(UPLOAD_STAGES.START);
+        setFileCounter({ current: 0, total: 0 });
         setPercentComplete(0);
     }
     return (<>
@@ -15,12 +19,14 @@ export default function Upload({ uploadModalView, closeUploadModal, collectionLa
             uploadModalView={uploadModalView}
             closeUploadModal={closeUploadModal}
             collectionLatestFile={collectionLatestFile}
-            showProgress={() => setProgressView(true)}
+            setProgressView={ setProgressView}
             setData={setData}
-            setPercentComplete={setPercentComplete}
+            progressBarProps={{ setPercentComplete, setFileCounter, setUploadStage }}
         />
         <UploadProgress
             now={percentComplete}
+            fileCounter={fileCounter}
+            uploadStage={uploadStage}
             show={progressView}
             onHide={init}
         />
diff --git a/src/pages/gallery/components/UploadProgress.tsx b/src/pages/gallery/components/UploadProgress.tsx
index bb1ab774d..2f3da5ec3 100644
--- a/src/pages/gallery/components/UploadProgress.tsx
+++ b/src/pages/gallery/components/UploadProgress.tsx
@@ -19,12 +19,12 @@ export default function UploadProgress(props) {
                 {props.now == 100 ? (
                     <Alert variant='success'>Upload Completed</Alert>
                 ) : (
-                        <ProgressBar animated now={props.now} />
+                        <>
+                            <Alert variant='info'>{props.uploadStage} {props.fileCounter.current} of {props.fileCounter.total}</Alert>
+                            <ProgressBar animated now={props.now} />
+                        </>
                     )}
             </Modal.Body>
-            <Modal.Footer>
-                <Button onClick={props.onHide}>Minimize</Button>
-            </Modal.Footer>
         </Modal>
     );
 }
diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts
index 70152f583..931c67ede 100644
--- a/src/services/uploadService.ts
+++ b/src/services/uploadService.ts
@@ -77,42 +77,60 @@ class Queue<T> {
     }
 }
 
+export enum UPLOAD_STAGES {
+    START = "Preparing to upload",
+    ENCRYPTION = "Encryting your files",
+    UPLOAD = "Uploading your Files",
+    FINISH = "Files Uploaded Successfully !!!"
+}
+
 class UploadService {
 
     private uploadURLs = new Queue<uploadURL>();
     private uploadURLFetchInProgress: Promise<any> = null
-    private increment
-    private currentPercent
-    public async uploadFiles(recievedFiles: File[], collectionLatestFile: collectionLatestFile, token, setPercentComplete) {
+    private perStepProgress: number
+    private stepsCompleted: number
+    private totalFilesCount: number
+
+    public async uploadFiles(recievedFiles: File[], collectionLatestFile: collectionLatestFile, token: string, uploadProgressProps) {
         try {
-            this.currentPercent = 0;
-            this.increment = 100 / (3 * recievedFiles.length);
             const worker = await new CryptoWorker();
-            await Promise.all(recievedFiles.map(async (recievedFile: File) => {
+            this.stepsCompleted = 1;
+            this.totalFilesCount = recievedFiles.length;
+            this.perStepProgress = 100 / (2 * recievedFiles.length);
+
+            uploadProgressProps.setUploadStage(UPLOAD_STAGES.ENCRYPTION);
+            const encryptedFiles: encryptedFile[] = await Promise.all(recievedFiles.map(async (recievedFile: File, index) => {
                 const file = await this.formatData(recievedFile);
-                console.log(file);
+                const encryptedFile = await this.encryptFiles(worker, file, collectionLatestFile.collection.key);
 
-                const encryptedfile: encryptedFile = await this.encryptFiles(worker, file, collectionLatestFile.collection.key);
-                this.increasePercent(setPercentComplete)
-
-                const objectKeys = await this.uploadtoBucket(encryptedfile, token);
-                this.increasePercent(setPercentComplete)
-
-                const uploadedfile = await this.uploadFile(collectionLatestFile, encryptedfile, objectKeys, token);
-                this.increasePercent(setPercentComplete)
-
-                console.log(uploadedfile);
+                this.changeUploadProgressProps(uploadProgressProps);
+                return encryptedFile;
             }));
-            setPercentComplete(100);
+
+            uploadProgressProps.setUploadStage(UPLOAD_STAGES.UPLOAD);
+            await Promise.all(encryptedFiles.map(async (encryptedFile: encryptedFile, index) => {
+
+                const objectKeys = await this.uploadtoBucket(encryptedFile, token);
+                await this.uploadFile(collectionLatestFile, encryptedFile, objectKeys, token);
+                this.changeUploadProgressProps(uploadProgressProps);
+
+            }));
+
+            uploadProgressProps.setUploadStage(UPLOAD_STAGES.FINISH);
+            uploadProgressProps.setPercentComplete(0);
+
         }
         catch (e) {
             console.log(e);
         }
     }
 
-    private increasePercent(setPercentComplete) {
-        this.currentPercent += this.increment;
-        setPercentComplete(this.currentPercent);
+    private changeUploadProgressProps({ setPercentComplete, setFileCounter }) {
+        this.stepsCompleted++;
+        const fileCompleted = this.stepsCompleted % this.totalFilesCount;
+        setFileCounter({ current: fileCompleted, total: this.totalFilesCount });
+        setPercentComplete(this.perStepProgress * this.stepsCompleted);
     }
     private async formatData(recievedFile: File) {
         const filedata: Uint8Array = await this.getUint8ArrayView(recievedFile);