diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index bac4553..e073b45 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -9,6 +9,7 @@ import Breadcrumb from "@/components/Breadcrumb";
 import { AxiosProvider } from "@/app/(main)/axios/AxiosProvider";
 import { SetupAxiosInterceptors } from "@/app/(main)/axios/axiosInstance";
 import { CameraProvider } from "@/components/Cameras/CameraProvider";
+import { UploadProvider } from "@/components/UploadProvider/UploadProvider";
 
 export default async function MainLayout({
   children,
@@ -26,27 +27,29 @@ export default async function MainLayout({
   }
 
   return (
-    <CameraProvider>
-      <AxiosProvider>
-        <>
-          <AppBar
-            profileName={session.user.name!}
-            avatarImageSrc={session.user.image || undefined}
-          />
-          <Box
-            component="main"
-            sx={{
-              marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
-              padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
-            }}
-          >
-            <Stack spacing={2}>
-              <Breadcrumb />
-              {children}
-            </Stack>
-          </Box>
-        </>
-      </AxiosProvider>
-    </CameraProvider>
+    <UploadProvider>
+      <CameraProvider>
+        <AxiosProvider>
+          <>
+            <AppBar
+              profileName={session.user.name!}
+              avatarImageSrc={session.user.image || undefined}
+            />
+            <Box
+              component="main"
+              sx={{
+                marginInlineStart: { xs: 0, xl: NAVIGATION_CONTENT_WIDTH },
+                padding: { xs: "1rem", sm: "1.5rem", lg: "3rem" },
+              }}
+            >
+              <Stack spacing={2}>
+                <Breadcrumb />
+                {children}
+              </Stack>
+            </Box>
+          </>
+        </AxiosProvider>
+      </CameraProvider>
+    </UploadProvider>
   );
 }
diff --git a/src/components/UploadProvider/UploadProvider.tsx b/src/components/UploadProvider/UploadProvider.tsx
new file mode 100644
index 0000000..e34c520
--- /dev/null
+++ b/src/components/UploadProvider/UploadProvider.tsx
@@ -0,0 +1,52 @@
+"use client";
+import React, { createContext, useState } from 'react';
+import {CircularProgress} from "@mui/material";
+
+const UploadContext = createContext<{
+    isUploading: boolean,
+    setIsUploading: React.Dispatch<React.SetStateAction<boolean>>
+} | undefined>(undefined);
+
+export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({
+    children,
+  }) => {
+    const [isUploading, setIsUploading] = useState(false);
+
+    return (
+        <UploadContext.Provider value={{ isUploading, setIsUploading }}>
+            {children}
+            {isUploading && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        zIndex: 9999,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: 75,
+                            height: 75,
+                            borderRadius: '50%',
+                            backgroundColor: 'white',
+                        }}
+                    >
+                        <CircularProgress />
+                    </div>
+                </div>
+            )}
+        </UploadContext.Provider>
+    );
+};
+
+export default UploadContext;
\ No newline at end of file
diff --git a/src/components/UploadProvider/useUploadContext.tsx b/src/components/UploadProvider/useUploadContext.tsx
new file mode 100644
index 0000000..508f3ca
--- /dev/null
+++ b/src/components/UploadProvider/useUploadContext.tsx
@@ -0,0 +1,15 @@
+
+"use client"
+import { useContext } from 'react';
+import UploadContext from './UploadProvider';
+
+
+const useUploadContext = () => {
+    const context = useContext(UploadContext);
+    if (!context) {
+        throw new Error('useUploadContext must be used within an UploadProvider');
+    }
+    return context;
+};
+
+export default useUploadContext;
\ No newline at end of file