diff --git a/package-lock.json b/package-lock.json
index b28e2f47a..f95663b14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5477,7 +5477,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001561",
+      "version": "1.0.30001632",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
+      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5491,8 +5493,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/canonicalize": {
       "version": "2.0.0",
@@ -18575,7 +18576,9 @@
       "version": "1.0.1"
     },
     "caniuse-lite": {
-      "version": "1.0.30001561"
+      "version": "1.0.30001632",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
+      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg=="
     },
     "canonicalize": {
       "version": "2.0.0",
diff --git a/src/components/Modals/UploadDocumentModal.jsx b/src/components/Modals/UploadDocumentModal.jsx
index f2a531b07..09b4313f2 100644
--- a/src/components/Modals/UploadDocumentModal.jsx
+++ b/src/components/Modals/UploadDocumentModal.jsx
@@ -7,6 +7,7 @@ import ClearIcon from '@mui/icons-material/Clear';
 import DialogActions from '@mui/material/DialogActions';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import FormControl from '@mui/material/FormControl';
+import Backdrop from '@mui/material/Backdrop';
 // import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 // import Switch from '@mui/material/Switch';
@@ -20,6 +21,7 @@ import { useTheme } from '@mui/material/styles';
 // Context Imports
 import { DocumentListContext } from '@contexts';
 // Component Imports
+import { LoadingAnimation } from '@components/Notification';
 import ModalBase from './ModalBase';
 import { DocumentSelection, FormSection } from '../Form';
 import UploadButtonGroup from './UploadButtonGroup';
@@ -222,7 +224,12 @@ const UploadDocumentModal = ({ showModal, setShowModal }) => {
             </DialogActions>
           </FormControl>
         </form>
+        {/* {processing && <LoadingAnimation loadingItem={file.name} />} */}
+        {/* <LoadingAnimation loadingItem={'testfilename'} /> */}
       </FormSection>
+      <Backdrop open={processing}>
+        <LoadingAnimation loadingItem="file name" />
+      </Backdrop>
     </ModalBase>
   );
 };
diff --git a/src/components/Notification/LoadingAnimation.jsx b/src/components/Notification/LoadingAnimation.jsx
index b14108be3..b384f7efc 100644
--- a/src/components/Notification/LoadingAnimation.jsx
+++ b/src/components/Notification/LoadingAnimation.jsx
@@ -33,7 +33,15 @@ const LoadingAnimation = ({ loadingItem, children }) => (
       padding: '20px'
     }}
   >
-    <Paper elevation={2} sx={{ display: 'inline-block', mx: '2px', padding: '20px' }}>
+    <Paper
+      elevation={2}
+      sx={{
+        display: 'inline-block',
+        mx: '2px',
+        padding: '20px',
+        backgroundColor: 'background.tint'
+      }}
+    >
       <Typography variant="h5" component="h2" mb={2} align="center">
         Loading {loadingItem}...
       </Typography>