diff --git a/client/src/pages/ManageProjects.jsx b/client/src/pages/ManageProjects.jsx
index ba15399f6..b6088acc3 100644
--- a/client/src/pages/ManageProjects.jsx
+++ b/client/src/pages/ManageProjects.jsx
@@ -8,6 +8,7 @@ import RecurringEventsApiService from '../api/RecurringEventsApiService';
 import Loading from '../svg/22.gif';
 import '../sass/ManageProjects.scss';
 import EventsApiService_ from '../api/EventsApiService';
+import { Box } from '@mui/material';
 
 const PAGES = Object.freeze({
   selectProject: 'selectProject',
@@ -15,6 +16,28 @@ const PAGES = Object.freeze({
   editMeetingTimes: 'editMeetingTimes',
 });
 
+// Added styles for MUI components
+const loadingStyle = {
+  "display": "none",
+  "position": "absolute",
+  "display": "flex",
+  "flexDirection": "row",
+  "alignItems": "center",
+  "justifyContent": "center",
+  "zIndex": 1,
+  "top": 0,
+  "left": 0,
+  "right": 0,
+  "backgroundColor": "white",
+  "height": '100%',
+  "opacity": 0.6,
+}
+
+const noStyle = {
+  "opacity": 0,
+  "display": "none",
+}
+
 const ManageProjects = () => {
   const { projectId } = useParams();
   const { auth } = useAuth();
@@ -155,13 +178,13 @@ const ManageProjects = () => {
   }
   return (
     <>
-      <span
-        className={`bg-overlay ${
-          eventsLoading || projectsLoading ? 'active' : ''
-        }`}
+      <Box
+        sx={eventsLoading || projectsLoading ? loadingStyle : noStyle}
+        component='span'
+        display='inline'
       >
-        <img src={Loading} alt="Logo" />
-      </span>
+        <Box component='img' src={Loading} alt="Logo" />
+      </Box>
       {displayedComponent}
     </>
   );