diff --git a/package-lock.json b/package-lock.json
index 3b919ebd..29387056 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5490,7 +5490,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",
@@ -5504,8 +5506,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/canonicalize": {
       "version": "2.0.0",
@@ -18613,7 +18614,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 f2a531b0..57589a24 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';
@@ -223,6 +225,9 @@ const UploadDocumentModal = ({ showModal, setShowModal }) => {
           </FormControl>
         </form>
       </FormSection>
+      <Backdrop open={processing}>
+        <LoadingAnimation loadingItem={file?.name} isModal />
+      </Backdrop>
     </ModalBase>
   );
 };
diff --git a/src/components/Notification/LoadingAnimation.jsx b/src/components/Notification/LoadingAnimation.jsx
index 430750d7..49c0cc31 100644
--- a/src/components/Notification/LoadingAnimation.jsx
+++ b/src/components/Notification/LoadingAnimation.jsx
@@ -18,11 +18,13 @@ import Typography from '@mui/material/Typography';
  * @name LoadingAnimation
  * @param {object} Props - Component props for LoadingAnimation
  * @param {string} Props.loadingItem - The name of what you plan on loading
+ * @param {boolean} Props.isModal - If component is used in modal
+ * @param Props.isModal
  * @param {React.JSX.Element} [Props.children] - If used as a provider, wrapped
  * component will be used as the animation
  * @returns {React.ReactElement} Div of what is currently loading
  */
-const LoadingAnimation = ({ loadingItem, children }) => (
+const LoadingAnimation = ({ loadingItem, children, isModal }) => (
   <Box
     sx={{
       my: '3rem',
@@ -34,7 +36,15 @@ const LoadingAnimation = ({ loadingItem, children }) => (
     }}
     data-testid="loading-animation"
   >
-    <Paper elevation={2} sx={{ display: 'inline-block', mx: '2px', padding: '20px' }}>
+    <Paper
+      elevation={2}
+      sx={{
+        display: 'inline-block',
+        mx: '2px',
+        padding: '20px',
+        backgroundColor: isModal ? 'background.tint' : 'background.main'
+      }}
+    >
       <Typography variant="h5" component="h2" mb={2} align="center">
         Loading {loadingItem}...
       </Typography>