diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js
index 9ff63055..d0c4efc0 100644
--- a/client/src/components/ProjectForm.js
+++ b/client/src/components/ProjectForm.js
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { useForm, useFormState } from 'react-hook-form';
 import { Redirect } from 'react-router-dom';
 import {
+  CircularProgress,
   Typography,
   Box,
   Button,
@@ -69,10 +70,11 @@ export default function ProjectForm({
   const history = useHistory();
 
   // ----------------- States -----------------
+  const { auth } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
   const [locationType, setLocationType] = useState('remote');
   // State to track the toggling from Project view to Edit Project View via edit icon.
   const [editMode, setEditMode] = useState(false);
-  const { auth } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const handleOpen = () => setIsModalOpen(true);
   const handleClose = () => setIsModalOpen(false);
@@ -111,25 +113,31 @@ export default function ProjectForm({
   // Handles POST request found in api/ProjectApiService.
   const submitNewProject = async (data) => {
     const projectApi = new ProjectApiService();
+
     try {
+      setIsLoading(true);
       const id = await projectApi.create(data);
       history.push(`/projects/${id}`);
     } catch (errors) {
       console.error(errors);
-      return;
     }
+    return () => setIsLoading(false);
   };
 
   // Fires PUT request to update the project,
   const submitEditProject = async (data) => {
     const projectApi = new ProjectApiService();
     try {
+      setIsLoading(true);
       await projectApi.updateProject(projectToEdit._id, data);
     } catch (errors) {
       console.error(errors);
+      setIsLoading(false);
       return;
     }
     // setOriginalProjectData(data);
+
+    setIsLoading(false);
     setFormData(data);
     setEditMode(false);
   };
@@ -273,9 +281,9 @@ export default function ProjectForm({
                   !isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
                 }
                 cursor="pointer"
-                disabled={isEdit ? !editMode : false}
+                disabled={isEdit && !isLoading ? !editMode : false}
               >
-                Save
+                {isLoading ? <CircularProgress /> : 'Save'}
               </StyledButton>
             </Grid>
             <Grid item xs="auto">
diff --git a/client/src/pages/ManageProjects.js b/client/src/pages/ManageProjects.js
index add89f59..ba15399f 100644
--- a/client/src/pages/ManageProjects.js
+++ b/client/src/pages/ManageProjects.js
@@ -31,7 +31,7 @@ const ManageProjects = () => {
 
   const user = auth?.user;
 
-    const fetchProjects = useCallback(async () => {
+  const fetchProjects = useCallback(async () => {
     setProjectsLoading(true);
     const projectRes = await projectApiService.fetchProjects();
     setProjects(projectRes);
@@ -43,7 +43,7 @@ const ManageProjects = () => {
     const eventsRes = await EventsApiService.fetchEvents();
     setRegularEvents(eventsRes);
     setEventsLoading(false);
-  }, [recurringEventsApiService]);
+  }, [EventsApiService]);
 
   const fetchRecurringEvents = useCallback(async () => {
     setEventsLoading(true);
@@ -94,13 +94,10 @@ const ManageProjects = () => {
 
   const updateRegularEvent = useCallback(
     async (eventToUpdate, eventId) => {
-      await EventsApiService.updateEvent(
-        eventToUpdate,
-        eventId
-      );
+      await EventsApiService.updateEvent(eventToUpdate, eventId);
       fetchRegularEvents();
     },
-    [recurringEventsApiService, fetchRegularEvents]
+    [fetchRegularEvents, EventsApiService]
   );
 
   useEffect(() => {