diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index a1eb5795df..0000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  // other settings
-  // formatting using eslint
-  // let editor format using prettier for all other files
-  "editor.formatOnSave": true,
-  // disable editor formatting, so eslint can handle it
-  "[javascript]": {
-    "editor.formatOnSave": true
-  },
-  //"eslint.enable": true,
-  // available through eslint plugin in vscode
-  "eslint.alwaysShowStatus": true,
-  "editor.tabSize": 2,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "files.exclude": {
-    "**/.classpath": true,
-    "**/.project": true,
-    "**/.settings": true,
-    "**/.factorypath": true
-  },
-  "files.associations": {
-    "limits": "cpp"
-  }
-}
diff --git a/package-lock.json b/package-lock.json
index 347d388356..f9fc3a1c05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3197,6 +3197,13 @@
       "requires": {
         "prop-types": "^15.6.2",
         "tinymce": "^5.5.1"
+      },
+      "dependencies": {
+        "tinymce": {
+          "version": "5.10.9",
+          "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.9.tgz",
+          "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg=="
+        }
       }
     },
     "@tootallnate/once": {
@@ -4896,15 +4903,6 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "optional": true
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -8784,12 +8782,6 @@
         }
       }
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -18582,18 +18574,23 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.12",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.12.tgz",
-      "integrity": "sha512-jU4TdemS31uABHd+Lt5WEYJuzn+TJTCBLljvIAHZOz6M9Os5pJ4dD+vRFLxPa/n3T0iEFzpi+0x1UfuDZYbRMw==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
+        "minipass": "^5.0.0",
         "minizlib": "^2.1.1",
         "mkdirp": "^1.0.3",
         "yallist": "^4.0.0"
       },
       "dependencies": {
+        "minipass": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+          "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ=="
+        },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -18825,9 +18822,9 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tinymce": {
-      "version": "5.10.9",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.9.tgz",
-      "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.0.0.tgz",
+      "integrity": "sha512-ggXLfTRrUALAcjeJSRrZcJDOl6MgC2tPXe/zNOEkQXvTDgcKqFypPRoPpfpK5wejexjyaI/7dwETOntJ5MPBFg=="
     },
     "tmp": {
       "version": "0.0.33",
@@ -19716,7 +19713,6 @@
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -20342,7 +20338,6 @@
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
diff --git a/package.json b/package.json
index 2f15f0203a..91c639fee9 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "redux-concatenate-reducers": "^1.0.0",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
-    "tinymce": "^5.10.9",
+    "tinymce": "^7.0.0",
     "uuid": "^9.0.1"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index 8ee425319d..08d52a9788 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,6 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/__tests__/mockAdminState.js b/src/__tests__/mockAdminState.js
index d47a708c67..d4b78cd19a 100644
--- a/src/__tests__/mockAdminState.js
+++ b/src/__tests__/mockAdminState.js
@@ -1628,6 +1628,7 @@ export default {
             'postUserProfile',
             'putUserProfile',
             'putUserProfileImportantInfo',
+            'updateSummaryRequirements',
             'updatePassword',
             'deleteUserProfile',
             'infringementAuthorizer',
diff --git a/src/__tests__/mockStates.js b/src/__tests__/mockStates.js
index 22701ae28c..7cf09296fe 100644
--- a/src/__tests__/mockStates.js
+++ b/src/__tests__/mockStates.js
@@ -1110,6 +1110,7 @@ export const rolesMock = {
           'putUserProfile',
           'putUserProfileImportantInfo',
           'manageAdminLinks',
+          'updateSummaryRequirements',
           'changeUserStatus',
           'updatePassword',
           'deleteUserProfile',
@@ -1259,6 +1260,7 @@ export const rolesMock = {
           'postUserProfile',
           'putUserProfile',
           'putUserProfileImportantInfo',
+          'updateSummaryRequirements',
           'deleteUserProfile',
           'infringementAuthorizer',
           'manageAdminLinks',
diff --git a/src/actions/blueSquareEmailBCCAction.js b/src/actions/blueSquareEmailBCCAction.js
new file mode 100644
index 0000000000..d44c289fd8
--- /dev/null
+++ b/src/actions/blueSquareEmailBCCAction.js
@@ -0,0 +1,73 @@
+import * as types from '../constants/BluequareEmailBccConstants';
+import axios from 'axios';
+import { ENDPOINTS } from '../utils/URL';
+import { toast } from 'react-toastify';
+
+const getAllBlueSquareEmailBccs = allAssignements => ({
+  type: types.GET_BLUE_SQUARE_EMAIL_ASSIGNMENTS,
+  payload: allAssignements,
+});
+
+const setBlueSquareEmailBcc = emailAssignement => ({
+  type: types.SET_BLUE_SQUARE_EMAIL_ASSIGNMENT,
+  payload: emailAssignement,
+});
+
+const deleteBlueSquareEmailBcc = id => ({
+  type: types.DELETE_BLUE_SQUARE_EMAIL_ASSIGNMENT,
+  payload: id,
+});
+
+const blueSquareEmailBccError = error => ({
+  type: types.BLUE_SQUARE_EMAIL_ASSIGNMENT_ERROR,
+  payload: error,
+});
+
+export const getAllBlueSquareEmailAssignements = () => {
+  const url = ENDPOINTS.BLUE_SQUARE_EMAIL_BCC();
+  return async dispatch => {
+    try {
+      const response = await axios.get(url);
+      if (response.status === 200) {
+        dispatch(getAllBlueSquareEmailBccs(response.data));
+      } else {
+        dispatch(blueSquareEmailBccError(response.data));
+      }
+    } catch (err) {
+        dispatch(blueSquareEmailBccError(err));
+    }
+  };
+};
+
+export const setBlueSquareEmailAssignement = email => {
+  const url = ENDPOINTS.BLUE_SQUARE_EMAIL_BCC();
+  return async dispatch => {
+    try {
+      const response = await axios.post(url, {email});
+      if (response.status === 200) {
+        dispatch(setBlueSquareEmailBcc(response.data));
+      } else {
+        dispatch(blueSquareEmailBccError(response.data));
+      }
+    } catch (err) {
+        dispatch(blueSquareEmailBccError(err));
+    }
+  };
+};
+
+export const deleteBlueSquareEmailAssignement = id => {
+    const url = ENDPOINTS.DELETE_BLUE_SQUARE_EMAIL_BCC(id);
+    return async dispatch => {
+      try {
+        const response = await axios.delete(url);
+        if (response.status === 200) {
+            console.log(response.data)
+          dispatch(deleteBlueSquareEmailBcc(response.data.id));
+        } else {
+          dispatch(blueSquareEmailBccError(response.data));
+        }
+      } catch (err) {
+          dispatch(blueSquareEmailBccError(err));
+      }
+    };
+  };
diff --git a/src/actions/bmdashboard/equipmentActions.js b/src/actions/bmdashboard/equipmentActions.js
index 462443c51b..5287fc60d4 100644
--- a/src/actions/bmdashboard/equipmentActions.js
+++ b/src/actions/bmdashboard/equipmentActions.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { ENDPOINTS } from "utils/URL";
-import GET_EQUIPMENT_BY_ID from 'constants/bmdashboard/equipmentConstants';
+import GET_EQUIPMENT_BY_ID,{SET_EQUIPMENTS}from 'constants/bmdashboard/equipmentConstants';
 import { GET_ERRORS } from 'constants/errors';
 
 export const fetchEquipmentById = (equipmentId) => {
@@ -16,6 +16,25 @@ export const fetchEquipmentById = (equipmentId) => {
   }
 }
 
+export const fetchAllEQUIPMENTS = () => {
+  return async dispatch => {
+    axios.get(ENDPOINTS.BM_EQUIPMENTS)
+      .then(res => {
+        dispatch(setEquipments(res.data))
+      })
+      .catch(err => {
+        dispatch(setErrors(err))
+      })
+  }
+}
+
+export const setEquipments = payload => {
+  return {
+    type: SET_EQUIPMENTS,
+    payload
+  }
+}
+
 export const addEquipmentType = async (body) => {
   return axios.post(`${ENDPOINTS.BM_INVTYPE_ROOT}/equipment`, body)
     .then(res => res)
@@ -38,4 +57,14 @@ export const setErrors = payload => {
     type: GET_ERRORS,
     payload
   }
+}
+
+export const purchaseEquipment = async (body) => {
+  return axios.post(ENDPOINTS.BM_EQUIPMENT_PURCHASE, body)
+    .then(res => res)
+    .catch((err) => {
+      if (err.response) return err.response
+      if (err.request) return err.request
+      return err.message
+    })
 }
\ No newline at end of file
diff --git a/src/actions/bmdashboard/invTypeActions.js b/src/actions/bmdashboard/invTypeActions.js
index b2a71665af..4afaca80f9 100644
--- a/src/actions/bmdashboard/invTypeActions.js
+++ b/src/actions/bmdashboard/invTypeActions.js
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { ENDPOINTS } from "utils/URL";
-import GET_MATERIAL_TYPES, { POST_BUILDING_MATERIAL_INVENTORY_TYPE, POST_ERROR_BUILDING_MATERIAL_INVENTORY_TYPE, RESET_POST_BUILDING_MATERIAL_INVENTORY_TYPE, GET_INV_BY_TYPE, GET_TOOL_TYPES ,GET_CONSUMABLE_TYPES  } from "constants/bmdashboard/inventoryTypeConstants";
+import GET_MATERIAL_TYPES, { POST_BUILDING_MATERIAL_INVENTORY_TYPE, POST_ERROR_BUILDING_MATERIAL_INVENTORY_TYPE, RESET_POST_BUILDING_MATERIAL_INVENTORY_TYPE, GET_INV_BY_TYPE, GET_TOOL_TYPES ,GET_CONSUMABLE_TYPES, GET_EQUIPMENT_TYPES, GET_REUSABLE_TYPES } from "constants/bmdashboard/inventoryTypeConstants";
+import { POST_TOOLS_LOG, POST_ERROR_TOOLS_LOG, RESET_POST_TOOLS_LOG } from 'constants/bmdashboard/toolsConstants';
 import { GET_ERRORS } from "constants/errors";
 
 export const fetchMaterialTypes = () => {
@@ -15,7 +16,20 @@ export const fetchMaterialTypes = () => {
   }
 }
 
+export const fetchEquipmentTypes = () => {
+  return async dispatch => {
+    axios.get(ENDPOINTS.BM_EQUIPMENT_TYPES)
+      .then(res => {
+        dispatch(setEquipmentTypes(res.data))
+      })
+      .catch(err => {
+        dispatch(setErrors(err))
+      })
+  }
+}
+
 export const fetchReusableTypes = () => {
+  console.log("fetchReusableTypes");
   return async dispatch => {
     axios.get(ENDPOINTS.BM_REUSABLE_TYPES)
       .then(res => {
@@ -32,9 +46,11 @@ export const fetchToolTypes = () => {
     axios
       .get(ENDPOINTS.BM_TOOL_TYPES)
       .then(res => {
+        // console.log("tool types: ", res)
         dispatch(setToolTypes(res.data));
       })
       .catch(err => {
+        // console.log("fetchToolTypes err: ", err)
         dispatch(setErrors(err));
       });
   };
@@ -153,6 +169,13 @@ export const setMaterialTypes = payload => {
   }
 }
 
+export const setEquipmentTypes = payload => {
+  return {
+    type: GET_EQUIPMENT_TYPES,
+    payload
+  }
+}
+
 export const setReusableTypes = payload => {
   return {
     type: GET_REUSABLE_TYPES,
@@ -180,5 +203,42 @@ export const setErrors = payload => {
     payload
   }
 };
+// 
+export const postToolsLog = payload => {
+  return async dispatch => {
+    axios
+      .post(ENDPOINTS.BM_LOG_TOOLS, payload)
+      .then(res => {
+        // eslint-disable-next-line no-console
+        // eslint-disable-next-line no-use-before-define
+        dispatch(setToolsLogResult(res.data));
+      })
+      .catch(err => {
+        dispatch(
+          // setPostErrorToolsLog(JSON.stringify(err.response.data) || 'Sorry! Some error occurred!'),
+          // eslint-disable-next-line no-use-before-define
+          setPostErrorToolsLog(err.response.data || 'Sorry! Some error occurred!'),
+        );
+      });
+  };
+};
 
+export const setToolsLogResult = payload => {
+  return {
+    type: POST_TOOLS_LOG,
+    payload,
+  };
+};
+
+export const setPostErrorToolsLog = payload => {
+  return {
+    type: POST_ERROR_TOOLS_LOG,
+    payload,
+  };
+};
 
+export const resetPostToolsLog = () => {
+  return {
+    type: RESET_POST_TOOLS_LOG,
+  };
+};
\ No newline at end of file
diff --git a/src/actions/bmdashboard/toolActions.js b/src/actions/bmdashboard/toolActions.js
index 8d0bb7d40c..e95adf2ad8 100644
--- a/src/actions/bmdashboard/toolActions.js
+++ b/src/actions/bmdashboard/toolActions.js
@@ -3,7 +3,6 @@ import GET_TOOL_BY_ID, { GET_TOOLS } from '../../constants/bmdashboard/toolsCons
 import { GET_ERRORS } from '../../constants/errors';
 import { ENDPOINTS } from '../../utils/URL';
 
-
 export const fetchTools = () => {
   const url = ENDPOINTS.BM_TOOLS;
   return async dispatch => {
diff --git a/src/actions/projects.js b/src/actions/projects.js
index d7e830b0c3..add382c512 100644
--- a/src/actions/projects.js
+++ b/src/actions/projects.js
@@ -1,7 +1,3 @@
-/** *******************************************************************************
- * Action: PROJECTS
- * Author: Henry Ng - 01/17/20
- ******************************************************************************* */
 import axios from 'axios';
 import * as types from "../constants/projects";
 import { ENDPOINTS } from '../utils/URL';
@@ -14,100 +10,87 @@ import { ENDPOINTS } from '../utils/URL';
  * Call API to get all projects
  */
 export const fetchAllProjects = () => {
-  const request = axios.get(ENDPOINTS.PROJECTS);
   return async dispatch => {
-    await dispatch(setProjectsStart());
-    request
-      .then(res => {
-        dispatch(setProjects(res.data));
-      })
-      .catch(err => {
-        console.log('Error', err);
-        dispatch(setProjectsError());
-      });
+    const url = ENDPOINTS.PROJECTS;
+    let status, error;
+    dispatch(setProjectsStart());
+    try {
+      const res = await axios.get(url);
+      status = res.status;
+      const projects = res.data;
+      dispatch(setProjectsSuccess({ projects, status }));
+    } catch (err) {
+      status = err.response.status;
+      error = err.response.data;
+      dispatch(setProjectsError({ status, error }));
+    }
   };
 };
 
 /**
  * Post new project to DB
  * @param {projectName}: name of new project
- * @param {isActive}: the active status of new project
+ * @param {projectCategory}: category of new project
  */
-export const postNewProject = (projectName, projectCategory, isActive) => {
-  const url = ENDPOINTS.PROJECTS;
+export const postNewProject = (projectName, projectCategory) => {
   return async dispatch => {
-    let status = 200;
-    let _id = null;
-
+    const url = ENDPOINTS.PROJECTS;
+    let status, error;
+    dispatch(setProjectsStart());
     try {
-      const res = await axios.post(url, { projectName, projectCategory, isActive });
-      _id = res.data._id;
+      const res = await axios.post(url, { projectName, projectCategory });
+      const _id = res.data._id;
       status = res.status;
+      const newProject = {
+        _id,
+        projectName,
+        category: projectCategory,
+        isActive: true,
+      };
+      dispatch(addNewProject({ newProject, status }));
     } catch (err) {
-      console.log('TRY CATCH ERR', err);
-      status = 400;
+      status = err.response.status;
+      error = err.response.data;
+      dispatch(addNewProject({ status, error }));
     }
-
-    dispatch(
-      addNewProject(
-        {
-          _id,
-          projectName,
-          category: projectCategory,
-          isActive,
-        },
-        status,
-      ),
-    );
   };
 };
 
-/**
- * Post new project to DB
- * @param {projectId}: Id of deleted project
- */
-export const deleteProject = projectId => {
-  const url = ENDPOINTS.PROJECT + projectId;
-
+export const modifyProject = (updatedProject) => {
   return async dispatch => {
-    let status = 200;
-
+    const url = ENDPOINTS.PROJECT + updatedProject._id;
+    let status, error;
     try {
-      const res = await axios.delete(url);
+      const res = await axios.put(url, updatedProject);
       status = res.status;
+      dispatch(updateProject({ updatedProject, status }));
     } catch (err) {
-      console.log("CAN'T DELETE", err);
-      status = 400;
+      status = err.response.status;
+      error = err.response.data;
+      dispatch(updateProject({ status, error }));
     }
-
-    dispatch(removeProject(projectId, status));
   };
 };
 
-export const modifyProject = (type, projectId, projectName, category, isActive) => {
-  const url = ENDPOINTS.PROJECT + projectId;
-  if (type === 'setActive') {
-    isActive = !isActive;
-  }
+/**
+ * Post new project to DB
+ * @param {projectId}: Id of deleted project
+ */
+export const deleteProject = projectId => {
   return async dispatch => {
-    let status = 200;
-
+    const url = ENDPOINTS.PROJECT + projectId;
+    let status, error;
     try {
-      const res = await axios.put(url, {
-        projectName,
-        category,
-        isActive,
-      });
+      const res = await axios.delete(url);
       status = res.status;
-      console.log(status);
+      dispatch(removeProject({ projectId, status }));
     } catch (err) {
-      console.log("CAN'T SET ACTIVE", err);
-      status = 400;
+      status = err.response.status;
+      error = err.response.data;
+      dispatch(removeProject({ status, error }));
     }
-
-    dispatch(updateProject(projectId, projectName, category, isActive, status));
   };
-};
+}
 
 /** *****************************************
  * PLAIN OBJECT ACTIONS
@@ -116,57 +99,74 @@ export const modifyProject = (type, projectId, projectName, category, isActive)
 /**
  * Set a flag that fetching projects
  */
-export const setProjectsStart = () => {
-  return {
-    type: types.FETCH_PROJECTS_START,
-  };
-};
+const setProjectsStart = () => ({
+  type: types.FETCH_PROJECTS_START,
+});
 
 /**
  * set Projects in store
- * @param payload : projects []
+ * @param projects: projects
+ * @param status: status code
  */
-export const setProjects = payload => {
-  return {
-    type: types.RECEIVE_PROJECTS,
-    payload,
-  };
-};
+const setProjectsSuccess = ({ projects, status }) => ({
+  type: types.FETCH_PROJECTS_SUCCESS,
+  projects,
+  status,
+});
 
 /**
  * Error when setting project
- * @param payload : error status code
+ * @param payload: error status code
  */
-export const setProjectsError = payload => {
-  return {
-    type: types.FETCH_PROJECTS_ERROR,
-    payload,
-  };
-};
+const setProjectsError = ({ status, error }) => ({
+  type: types.FETCH_PROJECTS_ERROR,
+  status,
+  error,
+});
+
+/** 
+ * Add new project to store
+ * @param payload : new project
+ * @param status: status code
+ * @param error: error message
+ */
+const addNewProject = ({ newProject, status, error }) => ({
+  type: types.ADD_NEW_PROJECT,
+  newProject,
+  status,
+  error,
+});
 
-export const addNewProject = (payload, status) => {
-  return {
-    type: types.ADD_NEW_PROJECT,
-    payload,
-    status,
-  };
-};
+/**
+ * Update project in store
+ * @param updatedProject: updated project
+ * @param status: status code
+ * @param error: error message
+ */
+// const updateProject = (projectId, projectName, category, isActive, status, error) => {
+const updateProject = ({ updatedProject, status, error}) => ({
+  type: types.UPDATE_PROJECT,
+  updatedProject,
+  status,
+  error,
+});
 
-export const removeProject = (projectId, status) => {
-  return {
-    type: types.DELETE_PROJECT,
-    projectId,
-    status,
-  };
-};
+/**
+ * Remove project from store
+ * @param projectId: id of project to remove
+ * @param status: status code
+ */
+const removeProject = ({ projectId, status, error }) => ({
+  type: types.DELETE_PROJECT,
+  projectId,
+  status,
+  error,
+});
+
+/**
+ * Clear error in store
+ */
+export const clearError = () => ({
+  type: types.CLEAR_ERROR,
+});
 
-export const updateProject = (projectId, projectName, category, isActive, status) => {
-  return {
-    type: types.UPDATE_PROJECT,
-    projectId,
-    projectName,
-    category,
-    isActive,
-    status,
-  };
-};
diff --git a/src/actions/userProjects.js b/src/actions/userProjects.js
index e1b7c17491..1b13e640bd 100644
--- a/src/actions/userProjects.js
+++ b/src/actions/userProjects.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { GET_USER_PROJECTS, GET_USER_WBS } from '../constants/userProjects';
+import types from '../constants/userProjects';
 import { ENDPOINTS } from '../utils/URL';
 
 export const getUserProjects = userId => {
@@ -16,29 +16,8 @@ export const getUserProjects = userId => {
   };
 };
 
-export const getUserWBSs = userId => {
-  const url = ENDPOINTS.WBS_USER(userId);
-  return async dispatch => {
-    try {
-      const res = await axios.get(url);
-      if (res.status === 200) {
-        await dispatch(setUserWBSs(res.data));
-      } else {
-        console.log(`Get user WBS request status is not 200, status message: ${res.statusText}`)
-      }
-    } catch (error) {
-      console.log(error)
-    }
-  };
-};
-
-
 export const setUserProjects = data => ({
-  type: GET_USER_PROJECTS,
+  type: types.GET_USER_PROJECTS,
   payload: data,
 });
 
-export const setUserWBSs = data => ({
-  type: GET_USER_WBS,
-  payload: data,
-});
diff --git a/src/components/Admin/Admin.jsx b/src/components/Admin/Admin.jsx
deleted file mode 100644
index cceaa488b1..0000000000
--- a/src/components/Admin/Admin.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-import { connect } from 'react-redux';
-import PopupText from './PopupText';
-import { fetchAllPopupEditor } from '../../actions/popupEditorAction';
-import './style.css';
-
-function Admin(props) {
-  const { popupEditor } = props;
-  useEffect(() => {
-    fetchAllPopupEditor();
-  }, [1]);
-
-  return (
-    <div className="container mt-3">
-      {popupEditor.popupItems.length === 0 ? (
-        <p style={{ textAlign: 'center' }}>
-          A popup is needed for this. Help us make the app better by sharing with the Admin what you
-          did to get this screen.
-        </p>
-      ) : (
-        popupEditor.popupItems.map(item => (
-          <PopupText
-            key={item._id}
-            title={item.popupName}
-            content={item.popupContent}
-            id={item._id}
-          />
-        ))
-      )}
-    </div>
-  );
-}
-
-export default connect(state => state, { fetchAllPopupEditor })(Admin);
diff --git a/src/components/Admin/PopupText/PopupText.jsx b/src/components/Admin/PopupText/PopupText.jsx
deleted file mode 100644
index c62300d88c..0000000000
--- a/src/components/Admin/PopupText/PopupText.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useState } from 'react';
-import { connect } from 'react-redux';
-import { Editor } from '@tinymce/tinymce-react';
-import axios from 'axios';
-import { updatePopupEditor, backupPopupEditor } from '../../../actions/popupEditorAction';
-import ModalBackupConfirm from '../../common/Modal';
-import { ENDPOINTS } from '../../../utils/URL';
-import './style.css';
-import { boxStyle } from '../../../styles';
-
-function PopupText(props) {
-  const { propscontent, id, title } = props;
-  const [content, setContent] = useState(propscontent);
-  const [displaySave, setDisplaySave] = useState(true);
-  const [pressed, setPressed] = useState(2);
-  const [isPopup, setIsPopup] = useState(false);
-
-  const save = identifier => {
-    setDisplaySave(false);
-    updatePopupEditor(identifier, content, title);
-    setTimeout(() => {
-      setDisplaySave(true);
-    }, 1000);
-  };
-
-  const pressBackup = () => {
-    setPressed(pressed - 1);
-    if (pressed === 1) {
-      setIsPopup(true);
-    }
-  };
-
-  const getBackupData = async popupId => {
-    const request = await axios.get(ENDPOINTS.POPUP_EDITOR_BACKUP_BY_ID(popupId));
-    setContent(request.data.popupContent);
-  };
-
-  return (
-    <div>
-      <div className="m-cover">
-        <div className="m-header">
-          {title}
-          <div className="save">
-            {pressed >= 0
-              ? `Press ${pressed > 1 ? `${pressed} times` : ``} to backup this data.`
-              : 'Backup successful '}{' '}
-            {pressed > 0 ? (
-              <button
-                type="button"
-                className="ml-1 p-1 align-middle btn btn-warning"
-                onClick={() => pressBackup()}
-                style={boxStyle}
-              >
-                Backup
-              </button>
-            ) : null}
-          </div>
-        </div>
-
-        <div className="m-body">
-          <Editor
-            tinymceScriptSrc="/tinymce/tinymce.min.js"
-            init={{
-              license_key: 'gpl',
-              menubar: false,
-              plugins: 'advlist autolink autoresize lists link charmap table paste help',
-              toolbar:
-                'bold italic  underline numlist   |  removeformat link bullist  outdent indent',
-              branding: false,
-              min_height: 180,
-              max_height: 300,
-              autoresize_bottom_margin: 1,
-            }}
-            value={content}
-            onEditorChange={newcontent => setContent(newcontent)}
-          />
-        </div>
-
-        <div className="m-footer">
-          {displaySave ? (
-            <div className="save">
-              <button
-                type="button"
-                className="ml-1 p-1 align-middle btn btn-success"
-                onClick={() => save(id)}
-                style={boxStyle}
-              >
-                Apply
-              </button>
-            </div>
-          ) : null}
-          <button
-            type="button"
-            className="btn btn-outline-info"
-            onClick={() => getBackupData(id)}
-            style={boxStyle}
-          >
-            Restore
-          </button>
-          <div className="id">{id}</div>
-        </div>
-
-        <ModalBackupConfirm
-          isOpen={isPopup}
-          modalMessage="Are you sure you want to save this data to backup store. This action can not be undo."
-          modalTitle="Warning"
-          closeModal={() => {
-            setIsPopup(false);
-          }}
-          confirmModal={() => {
-            backupPopupEditor(id, content, title);
-            setIsPopup(false);
-            setPressed(pressed - 1);
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-export default connect(state => state, { updatePopupEditor, backupPopupEditor })(PopupText);
diff --git a/src/components/Admin/PopupText/index.js b/src/components/Admin/PopupText/index.js
deleted file mode 100644
index 182bf28e93..0000000000
--- a/src/components/Admin/PopupText/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PopupText from './PopupText';
-
-export default PopupText;
diff --git a/src/components/Admin/PopupText/style.css b/src/components/Admin/PopupText/style.css
deleted file mode 100644
index 0be7fa1429..0000000000
--- a/src/components/Admin/PopupText/style.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.m-cover {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  pointer-events: auto;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
-  outline: 0;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  margin-top: 20px;
-}
-
-.m-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 1rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  border-top-left-radius: calc(0.3rem - 1px);
-  border-top-right-radius: calc(0.3rem - 1px);
-}
-
-.m-body {
-  position: relative;
-  flex: 1 1 auto;
-  padding: 1rem;
-}
-
-.m-footer {
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0.75rem;
-  border-top: 1px solid #dee2e6;
-  border-bottom-right-radius: calc(0.3rem - 1px);
-  border-bottom-left-radius: calc(0.3rem - 1px);
-}
-
-.m-footer .id {
-  float: left;
-  color: gray;
-  padding: 10px;
-}
-
-.m-footer .save {
-  float: right;
-}
-
-textarea {
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  border: 1px solid white;
-}
diff --git a/src/components/Admin/index.js b/src/components/Admin/index.js
deleted file mode 100644
index c59261a863..0000000000
--- a/src/components/Admin/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Admin from './Admin';
-
-export default Admin;
diff --git a/src/components/Admin/style.css b/src/components/Admin/style.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.css b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.css
new file mode 100644
index 0000000000..7d4000f02b
--- /dev/null
+++ b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.css
@@ -0,0 +1,18 @@
+.purchase-equipment-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 1rem 2rem;
+  border: 1px solid #ccc;
+  border-radius: 40px;
+}
+
+.purchase-equipment-header {
+  margin: 1rem auto;
+}
+
+@media screen and (max-width: 800px) {
+  .purchase-equipment-container {
+    width: 95%;
+  }
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.jsx b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.jsx
new file mode 100644
index 0000000000..4d33ca35bf
--- /dev/null
+++ b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseEquipment.jsx
@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { BsInfoCircle } from 'react-icons/bs';
+
+import { fetchBMProjects } from 'actions/bmdashboard/projectActions';
+import { fetchEquipmentTypes } from 'actions/bmdashboard/invTypeActions';
+import BMError from '../shared/BMError';
+import PurchaseForm from './PurchaseForm';
+import './PurchaseEquipment.css';
+
+export default function PurchaseEquipment() {
+  const dispatch = useDispatch();
+  const errors = useSelector(state => state.errors);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchBMProjects());
+    dispatch(fetchEquipmentTypes());
+  }, []);
+
+  // trigger error state if an error object is added to props
+  useEffect(() => {
+    if (Object.entries(errors).length) {
+      setIsError(true);
+    }
+  }, [errors]);
+
+  // error state
+  if (isError) {
+    return (
+      <main className="equipments_list_container">
+        <h2>Equipments List</h2>
+        <BMError errors={errors} />
+      </main>
+    );
+  }
+
+  return (
+    <main className="purchase-equipment-container">
+      <header className="purchase-equipment-header">
+        <h2>Purchase Request: Equipments</h2>
+        <div className="inv-form-info">
+          <BsInfoCircle />
+          Initiate a purchase request for approval/action by project admins.
+        </div>
+      </header>
+      <PurchaseForm />
+    </main>
+  );
+}
diff --git a/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.css b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.css
new file mode 100644
index 0000000000..32878d6174
--- /dev/null
+++ b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.css
@@ -0,0 +1,51 @@
+.purchase-tool-form {
+  margin-top: 2rem;
+}
+
+.purchase-tool-form input,
+.purchase-tool-form select {
+  background-color: rgb(249, 249, 249);
+}
+
+.purchase-tool-flex-group {
+  display: flex;
+  gap: 2rem;
+}
+
+.purchase-tool-flex-group input {
+  width: 100px;
+}
+
+.flex-group-qty {
+  width: 50%;
+}
+
+.flex-group-qty-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.purchase-tool-buttons {
+  display: flex;
+  gap: 1rem;
+  margin: 0 auto 2rem;
+}
+
+.purchase-tool-buttons button {
+  width: 50%;
+}
+
+.purchase-tool-error {
+  height: 2.5rem;
+  color: red;
+}
+
+@media screen and (max-width: 640px) {
+  .purchase-tool-flex-group {
+    display: block;
+  }
+  .flex-group-qty {
+    width: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.jsx b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.jsx
new file mode 100644
index 0000000000..6256fd7938
--- /dev/null
+++ b/src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.jsx
@@ -0,0 +1,257 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Form, FormGroup, FormText, Label, Input, Button } from 'reactstrap';
+import Joi from 'joi';
+
+import { boxStyle } from 'styles';
+import { purchaseEquipment } from 'actions/bmdashboard/equipmentActions';
+
+import './PurchaseForm.css';
+
+export default function PurchaseForm() {
+  const bmProjects = useSelector(state => state.bmProjects);
+  const equipments = useSelector(state => state.bmInvTypes.list);
+  const history = useHistory();
+
+  const [projectId, setProjectId] = useState('');
+  const [equipmentId, setEquipmentId] = useState('');
+  const [quantity, setQty] = useState('');
+  // const [isTracking, setIsTracking] = useState(true);
+  const [priority, setPriority] = useState('Low');
+  const [makeModel, setMakeModel] = useState('');
+  const [estTime, setEstTime] = useState('');
+  const [desc, setDesc] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const schema = Joi.object({
+    projectId: Joi.string().required(),
+    equipmentId: Joi.string().required(),
+    quantity: Joi.number()
+      .min(1)
+      .max(999)
+      .integer()
+      .required(),
+    // isTracking: Joi.boolean().required(),
+    priority: Joi.string().required(),
+    estTime: Joi.string().required(),
+    desc: Joi.string()
+      .required()
+      .max(150),
+    makeModel: Joi.string().allow(''),
+  });
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const validate = schema.validate({
+      projectId,
+      equipmentId,
+      quantity,
+      // isTracking,
+      priority,
+      estTime,
+      desc,
+      makeModel,
+    });
+    // TODO: provide specific validation info to the user
+    if (validate.error) {
+      setValidationError('Invalid form data. Please try again.');
+      return;
+    }
+    const body = {
+      projectId,
+      equipmentId,
+      quantity,
+      // isTracking,
+      priority,
+      estTime,
+      desc,
+      makeModel,
+    };
+    const response = await purchaseEquipment(body);
+    setProjectId('');
+    setEquipmentId('');
+    setQty('');
+    // setIsTracking(true);
+    setPriority('Low');
+    setMakeModel('');
+    setEstTime('');
+    setDesc('');
+
+    if (response.status === 201) {
+      toast.success('Success: your purchase request has been logged.');
+    } else if (response.status >= 400) {
+      toast.error(`Error: ${response.status} ${response.statusText}.`);
+    } else toast.warning(`Warning: unexpected status ${response.status}.`);
+  };
+
+  const handleCancel = e => {
+    e.preventDefault();
+    history.goBack();
+  };
+
+  return (
+    <Form className="purchase-equipment-form" onSubmit={handleSubmit}>
+      <FormGroup>
+        <Label for="select-project">Project</Label>
+        <Input
+          id="select-project"
+          type="select"
+          value={projectId}
+          onChange={({ currentTarget }) => {
+            setValidationError('');
+            setProjectId(currentTarget.value);
+          }}
+          disabled={!bmProjects.length}
+        >
+          <option disabled hidden value="">
+            {' '}
+          </option>
+          {bmProjects.map(({ _id, name }) => (
+            <option value={_id} key={_id}>
+              {name}
+            </option>
+          ))}
+        </Input>
+      </FormGroup>
+      <FormGroup>
+        <Label for="select-equipment">Equipment</Label>
+        <Input
+          id="select-equipment"
+          type="select"
+          value={equipmentId}
+          onChange={({ currentTarget }) => {
+            setValidationError('');
+            setEquipmentId(currentTarget.value);
+          }}
+        >
+          <option disabled hidden value="">
+            {' '}
+          </option>
+          {equipments.map(({ _id, name }) => (
+            <option value={_id} key={_id}>
+              {name}
+            </option>
+          ))}
+        </Input>
+      </FormGroup>
+      <div className="purchase-equipment-flex-group">
+        <FormGroup className="flex-group-qty">
+          <Label for="input-quantity">Quantity</Label>
+          <div className="flex-group-qty-container">
+            <Input
+              id="input-quantity"
+              type="number"
+              value={quantity}
+              min={1}
+              onChange={({ currentTarget }) => {
+                setValidationError('');
+                setQty(currentTarget.value);
+              }}
+            />
+          </div>
+        </FormGroup>
+        {/* <FormGroup>
+          <Label for="is-tracking">Is Tracking</Label>
+          <Input
+            id="is-tracking"
+            type="select"
+            value={isTracking}
+            onChange={({ currentTarget }) => {
+              setValidationError('');
+              setIsTracking(currentTarget.value);
+            }}
+          >
+            <option value>True</option>
+            <option value={false}>False</option>
+          </Input>
+        </FormGroup> */}
+        <FormGroup>
+          <Label for="input-priority">Priority</Label>
+          <Input
+            id="input-priority"
+            type="select"
+            value={priority}
+            onChange={({ currentTarget }) => {
+              setValidationError('');
+              setPriority(currentTarget.value);
+            }}
+          >
+            <option value="Low">Low</option>
+            <option value="Medium">Medium</option>
+            <option value="High">High</option>
+          </Input>
+        </FormGroup>
+      </div>
+      <FormGroup>
+        <Label htmlFor="input-estimated-time">Est. Time of Use</Label>
+        <Input
+          id="input-estimated-time"
+          type="text"
+          value={estTime}
+          onChange={({ currentTarget }) => {
+            setValidationError('');
+            setEstTime(currentTarget.value);
+          }}
+        />
+        <FormText>
+          Ex: <q>10 days</q>, <q>2 weeks</q>, etc.
+        </FormText>
+      </FormGroup>
+      <FormGroup>
+        <Label htmlFor="input-usage-description">Usage Description</Label>
+        <Input
+          id="input-usage-description"
+          type="textarea"
+          value={desc}
+          onChange={({ currentTarget }) => {
+            setValidationError('');
+            setDesc(currentTarget.value);
+          }}
+        />
+        <FormText>Max 150 characters</FormText>
+      </FormGroup>
+      <FormGroup>
+        <Label for="input-brand">Preferred Make &amp; Model (optional)</Label>
+        <Input
+          type="text"
+          value={makeModel}
+          onChange={({ currentTarget }) => {
+            setValidationError('');
+            setMakeModel(currentTarget.value);
+          }}
+        />
+      </FormGroup>
+      <div className="purchase-equipment-error">{validationError && <p>{validationError}</p>}</div>
+      <div className="purchase-equipment-buttons">
+        <Button
+          type="button"
+          id="cancel-button"
+          color="secondary"
+          onClick={handleCancel}
+          style={boxStyle}
+        >
+          Cancel
+        </Button>
+        <Button
+          id="submit-button"
+          color="primary"
+          style={boxStyle}
+          disabled={
+            !projectId ||
+            !equipmentId ||
+            !quantity ||
+            // !isTracking ||
+            !priority ||
+            !estTime ||
+            !desc ||
+            !!validationError
+          }
+        >
+          Submit
+        </Button>
+      </div>
+    </Form>
+  );
+}
diff --git a/src/components/BMDashboard/EquipmentPurchaseRequest/index.js b/src/components/BMDashboard/EquipmentPurchaseRequest/index.js
new file mode 100644
index 0000000000..e42e2b9774
--- /dev/null
+++ b/src/components/BMDashboard/EquipmentPurchaseRequest/index.js
@@ -0,0 +1,3 @@
+import PurchaseEquipment from './PurchaseEquipment';
+
+export default PurchaseEquipment;
diff --git a/src/components/BMDashboard/ItemList/ItemListView.css b/src/components/BMDashboard/ItemList/ItemListView.css
index edc65c85db..00a54728f8 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.css
+++ b/src/components/BMDashboard/ItemList/ItemListView.css
@@ -41,6 +41,7 @@
 
 .select_input {
   display: flex;
+  background-color: blanchedalmond;
   align-items: flex-end;
   width: 300px;
   column-gap: 1rem;
diff --git a/src/components/BMDashboard/ItemList/RecordsModal.jsx b/src/components/BMDashboard/ItemList/RecordsModal.jsx
index 254b7c3b80..4a0f81b05a 100644
--- a/src/components/BMDashboard/ItemList/RecordsModal.jsx
+++ b/src/components/BMDashboard/ItemList/RecordsModal.jsx
@@ -42,21 +42,28 @@ export function Record({ record, recordType }) {
           </tr>
         </thead>
         <tbody>
-          {record.updateRecord.map(data => {
-            return (
-              <tr key={data._id}>
-                <td>{moment.utc(data.date).format('LL')}</td>
-                <td>{`${data.quantityUsed} ${record.itemType?.unit || 'Unit'}` || '-'}</td>
-                <td>{`${data.quantityWasted} ${record.itemType?.unit || 'Unit'}` || '-'}</td>
-                <td>
-                  <a href={`/userprofile/${data.createdBy._id}`}>
-                    {`${data.createdBy?.firstName || 'Unknown'} 
-                    ${data.createdBy?.lastName || 'Unknown'}`}
-                  </a>
-                </td>
-              </tr>
-            );
-          })}
+          {record?.updateRecord && record?.updateRecord.length ? (
+            record.updateRecord.map(data => {
+              return (
+                <tr key={data._id}>
+                  <td>{moment.utc(data.date).format('LL')}</td>
+                  <td>{`${data.quantityUsed} ${record.itemType?.unit}` || '-'}</td>
+                  <td>{`${data.quantityWasted} ${record.itemType?.unit}` || '-'}</td>
+                  <td>
+                    <a href={`/userprofile/${data.createdBy._id}`}>
+                      {`${data.createdBy.firstName} ${data.createdBy.lastName}`}
+                    </a>
+                  </td>
+                </tr>
+              );
+            })
+          ) : (
+            <tr>
+              <td colSpan={4} style={{ fontWeight: 'bold' }}>
+                There are no updates for this item.
+              </td>
+            </tr>
+          )}
         </tbody>
       </>
     );
@@ -75,22 +82,30 @@ export function Record({ record, recordType }) {
           </tr>
         </thead>
         <tbody>
-          {record.map(({ _id, date, status, brandPref, priority, quantity, requestedBy }) => {
-            return (
-              <tr key={_id}>
-                <td>{priority}</td>
-                <td>{brandPref}</td>
-                <td>{quantity || '-'}</td>
-                <td>
-                  <a href={`/userprofile/${requestedBy?._id}`}>
-                    {`${requestedBy?.firstName || 'Unknown'} ${requestedBy?.lastName || 'User'}`}
-                  </a>
-                </td>
-                <td>{moment(date).format('MM/DD/YY')}</td>
-                <td>{status}</td>
-              </tr>
-            );
-          })}
+          {record?.purchaseRecord && record?.purchaseRecord.length ? (
+            record.map(({ _id, date, status, brandPref, priority, quantity, requestedBy }) => {
+              return (
+                <tr key={_id}>
+                  <td>{priority}</td>
+                  <td>{brandPref}</td>
+                  <td>{quantity || '-'}</td>
+                  <td>
+                    <a href={`/userprofile/${requestedBy._id}`}>
+                      {`${requestedBy.firstName} ${requestedBy.lastName}`}
+                    </a>
+                  </td>
+                  <td>{moment(date).format('MM/DD/YY')}</td>
+                  <td>{status}</td>
+                </tr>
+              );
+            })
+          ) : (
+            <tr>
+              <td colSpan={6} style={{ fontWeight: 'bold' }}>
+                There are no purchase records.
+              </td>
+            </tr>
+          )}
         </tbody>
       </>
     );
diff --git a/src/components/BMDashboard/LogTools/LogTools.css b/src/components/BMDashboard/LogTools/LogTools.css
new file mode 100644
index 0000000000..8ad78731bf
--- /dev/null
+++ b/src/components/BMDashboard/LogTools/LogTools.css
@@ -0,0 +1,166 @@
+.page {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #e8f4f9;
+}
+
+.page .row {
+  flex-wrap: nowrap;
+}
+
+.log-form-container {
+  background-color: #ffffff;
+  margin: 0 auto;
+  max-width: 100vw;
+  max-height: 100vh;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  padding: 50px;
+}
+
+.title-label {
+  font-size: large;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+
+.subtitle-row {
+  background-color: #e8f4f9;
+  border-radius: 10px;
+  text-align: center;
+  /* border-bottom: 1px solid #707377; */
+  /* border-bottom: 1px solid #63676c; */
+  border-bottom: 1px solid #595d62;
+}
+
+.subtitle-row span {
+  display: inline-block;
+  width: 33.33%;
+}
+
+.log-form-cancel-button {
+  padding: 0.5rem 1.8rem !important;
+  font-size: 20px;
+  background-color: #ffffff !important;
+  color: #2e5061 !important;
+  border-width: 2px !important;
+  border-radius: 0.6rem !important;
+  border-color: #2e5061 !important;
+}
+
+.log-form-submit-button {
+  background-color: #2e5061 !important;
+  color: #ffffff !important;
+  border-color: #2e5061 !important;
+  font-size: 20px;
+  padding: 0.5rem 1.8rem !important;
+  border-width: 2px !important;
+  border-radius: 0.6rem !important;
+}
+
+.input-group-div {
+  border-radius: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  width: 80vw;
+  max-width: 300px;
+  transition: height 0.3s ease;
+  overflow: hidden;
+}
+
+.input-group-div.expanded {
+  height: 200px;
+}
+
+.input-item-div {
+  position: relative;
+  display: inline-block;
+  height: auto;
+}
+
+.input-dropdown-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+}
+
+.span-and-input-box {
+  display: flex;
+  align-items: center;
+}
+
+.span-text {
+  margin-right: 8px;
+}
+
+.transparent-dropdown-caret {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: inherit !important;
+}
+
+.transparent-dropdown-toggle:focus {
+  outline: none;
+}
+
+.working-column {
+  width: 10px;
+}
+
+.selectors {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.selector_label {
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+.select_input {
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+  /* margin-top: 1rem; */
+}
+
+.table-subtitle {
+  font-weight: 500;
+  /* color: #9fd0e5 */
+  /* color: #78bdda */
+  /* color: #3ea0cb */
+  color: #869aa3
+}
+
+.subtitle-highlight {
+  color: #168dc0
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tool-type-head {
+  color: #aaacaf;
+  border-bottom: 2px solid #aaacaf !important;
+}
+
+.tool-type-row {
+  border: none !important;
+  color:#aaacaf;
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/LogTools/LogTools.jsx b/src/components/BMDashboard/LogTools/LogTools.jsx
new file mode 100644
index 0000000000..ae6d2b69c6
--- /dev/null
+++ b/src/components/BMDashboard/LogTools/LogTools.jsx
@@ -0,0 +1,339 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Input, Button, Table, Form, FormGroup, Label } from 'reactstrap';
+import './LogTools.css';
+import { toast } from 'react-toastify';
+import { useDispatch, useSelector } from 'react-redux';
+import Select from 'react-select';
+import {
+  fetchToolTypes,
+  postToolsLog,
+  resetPostToolsLog,
+} from '../../../actions/bmdashboard/invTypeActions';
+import { fetchBMProjects } from '../../../actions/bmdashboard/projectActions';
+
+function LogTools() {
+  const toolTypes = useSelector(state => state.bmInvTypes.list);
+  const projects = useSelector(state => state.bmProjects);
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const today = new Date().toISOString().split('T')[0];
+  const [selectedProject, setSelectedProject] = useState(projects[0].name);
+  const [selectedAction, setSelectedAction] = useState('Check In');
+  const [relevantToolTypes, setRelevantToolTypes] = useState([]);
+  const [postObject, setPostObject] = useState({
+    action: selectedAction,
+    date: today,
+    typesArray: [],
+  });
+  const postToolsLogResult = useSelector(state => state.bmInvTypes.postedResult);
+  const selectRefs = useRef([]);
+
+  const clearAllSelects = () => {
+    selectRefs.current.forEach(ref => {
+      ref.current?.commonProps.clearValue();
+    });
+  };
+
+  const clearPostObj = () => {
+    setPostObject({
+      action: selectedAction,
+      date: today,
+      typesArray: [],
+    });
+  };
+
+  const multiSelectCustomStyles = {
+    control: provided => ({
+      ...provided,
+      width: 300,
+    }),
+    multiValue: provided => ({
+      ...provided,
+      padding: '5px',
+      backgroundColor: '#f7f7f7',
+      borderRadius: '5px',
+      border: '1px solid #aaacaf',
+    }),
+    multiValueLabel: provided => ({
+      ...provided,
+      color: '#aaacaf',
+    }),
+    multiValueRemove: provided => ({
+      ...provided,
+      svg: {
+        ...provided.svg,
+        width: 20,
+        height: 20,
+      },
+    }),
+  };
+
+  useEffect(() => {
+    dispatch(fetchToolTypes());
+    dispatch(fetchBMProjects());
+  }, []);
+
+  useEffect(() => {
+    clearAllSelects();
+    clearPostObj();
+    const actionArray = selectedAction === 'Check In' ? 'using' : 'available';
+    const filteredToolTypes = [];
+
+    toolTypes.forEach(type => {
+      let availForSelectedProj = 0;
+      let usingForSelectedProj = 0;
+
+      type.available.forEach(availItem => {
+        if (availItem.project.name === selectedProject) {
+          availForSelectedProj += 1;
+        }
+      });
+
+      type.using.forEach(usingItem => {
+        if (usingItem.project.name === selectedProject) {
+          usingForSelectedProj += 1;
+        }
+      });
+
+      if (type[actionArray].length > 0) {
+        const typeDetails = {
+          toolName: type.name,
+          _id: type._id,
+          using: 0,
+          available: 0,
+          items: [],
+        };
+        if (type[actionArray].length > 0) {
+          type[actionArray].forEach(item => {
+            if (item.project.name === selectedProject) {
+              const toolCodes = {
+                value: item._id,
+                label: item.code,
+                type: type._id,
+                name: type.name,
+              };
+              typeDetails.items.push(toolCodes);
+            }
+          });
+        }
+        typeDetails.available = availForSelectedProj;
+        typeDetails.using = usingForSelectedProj;
+        if (typeDetails.items.length > 0) {
+          filteredToolTypes.push(typeDetails);
+        }
+      }
+      setRelevantToolTypes(filteredToolTypes);
+    });
+  }, [selectedProject, selectedAction, toolTypes]);
+
+  useEffect(() => {
+    const numberOfRefs = relevantToolTypes.length;
+    selectRefs.current = Array(numberOfRefs)
+      .fill()
+      .map((_, i) => selectRefs.current[i] || React.createRef());
+  }, [relevantToolTypes]);
+
+  useEffect(() => {
+    if (postToolsLogResult.result && !postToolsLogResult.error) {
+      const postResult = postToolsLogResult.result.results;
+      postResult.forEach(res => {
+        toast.success(res.message);
+      });
+      dispatch(fetchToolTypes());
+      dispatch(resetPostToolsLog());
+    } else if (postToolsLogResult.result && postToolsLogResult.error) {
+      const postResult = postToolsLogResult.result;
+      postResult.errors.forEach(err => {
+        toast.error(err.message);
+      });
+      postResult.results.forEach(res => {
+        toast.success(res.message);
+      });
+      dispatch(fetchToolTypes());
+      dispatch(resetPostToolsLog());
+      clearPostObj();
+    }
+  }, [postToolsLogResult]);
+
+  const handleProjectSelect = event => {
+    setSelectedProject(event.target.value);
+  };
+
+  const handleInOutSelect = event => {
+    setSelectedAction(event.target.value);
+  };
+
+  const handleCodeSelect = (event, eventParams) => {
+    const postObjCopy = { ...postObject };
+
+    if (eventParams.action === 'select-option') {
+      const tempObj = {
+        toolType: '',
+        toolName: '',
+        toolItems: [],
+        toolCodes: [],
+      };
+      event.forEach((el, eventElIdx) => {
+        const idx = postObjCopy.typesArray.findIndex(obj => obj.toolType === el.type);
+        if (idx < 0) {
+          tempObj.toolType = el.type;
+          tempObj.toolName = el.name;
+          tempObj.toolItems.push(el.value);
+          tempObj.toolCodes.push(el);
+          postObjCopy.typesArray.push(tempObj);
+        } else {
+          const lastIdx = postObjCopy.typesArray[idx].toolItems.length - 1;
+          if (eventElIdx > lastIdx) {
+            postObjCopy.typesArray[idx].toolItems.push(el.value);
+            postObjCopy.typesArray[idx].toolCodes.push(el);
+          }
+        }
+      });
+    } else if (eventParams.action === 'remove-value') {
+      const removedType = eventParams.removedValue.type;
+      const removedItem = eventParams.removedValue.value;
+      const typeIdx = postObjCopy.typesArray.findIndex(obj => obj.toolType === removedType);
+      const itemIdx = postObjCopy.typesArray[typeIdx].toolItems.findIndex(
+        item => item === removedItem,
+      );
+      postObjCopy.typesArray[typeIdx].toolItems.splice(itemIdx, 1);
+      postObjCopy.typesArray[typeIdx].toolCodes.splice(itemIdx, 1);
+      if (postObjCopy.typesArray[typeIdx].toolItems.length === 0) {
+        postObjCopy.typesArray.splice(typeIdx, 1);
+      }
+    } else if (eventParams.action === 'clear') {
+      const clearedType = eventParams.removedValues[0]?.type;
+      const clearedTypeIdx = postObjCopy.typesArray.findIndex(
+        type => type.toolType === clearedType,
+      );
+      postObjCopy.typesArray.splice(clearedTypeIdx, 1);
+    }
+    setPostObject(postObjCopy);
+  };
+
+  const handleCancel = () => {
+    clearPostObj();
+    clearAllSelects();
+    history.push('/bmdashboard/tools');
+  };
+
+  const handleSubmit = () => {
+    dispatch(postToolsLog(postObject));
+    clearPostObj();
+    clearAllSelects();
+  };
+
+  return (
+    <div className="page">
+      <div className="log-form-container">
+        <div className="title-label">
+          <span>TOOL/EQUIPMENT DAILY ACTIVITIES LOG</span>
+        </div>
+
+        <Form className="selectors">
+          <FormGroup className="select_input">
+            <Label htmlFor="dateSelect" className="selector_label">
+              Date:
+            </Label>
+            <Input type="date" defaultValue={today} disabled />
+          </FormGroup>
+          <FormGroup className="select_input">
+            <Label htmlFor="projectSelect" className="selector_label">
+              Project:
+            </Label>
+            <Input
+              id="projectSelect"
+              name="projectSelect"
+              type="select"
+              onChange={handleProjectSelect}
+            >
+              {projects.map(proj => (
+                <option key={proj._id}>{proj.name}</option>
+              ))}
+            </Input>
+          </FormGroup>
+          <FormGroup className="select_input">
+            <Label htmlFor="projectSelect" className="selector_label">
+              Check In or Out:
+            </Label>
+            <Input
+              id="inOutSelect"
+              name="inOutSelect"
+              type="select"
+              onChange={handleInOutSelect}
+              value={selectedAction}
+            >
+              <option>Check In</option>
+              <option>Check Out</option>
+            </Input>
+          </FormGroup>
+        </Form>
+
+        <Table>
+          <thead>
+            <tr className="subtitle-row">
+              <td colSpan="6">
+                <span className="table-subtitle">Item</span>
+                <span className="table-subtitle">Quantity</span>
+                <span className="table-subtitle subtitle-highlight">Daily Log Input</span>
+              </td>
+            </tr>
+
+            <tr className="tool-type-head">
+              <td>ID </td>
+              <td>Name </td>
+              <td>Working </td>
+              <td>Available </td>
+              <td>Using </td>
+              <td>Tool/Equipment Number</td>
+            </tr>
+          </thead>
+
+          <tbody>
+            {relevantToolTypes.length > 0 ? (
+              relevantToolTypes.map((toolType, index) => (
+                <tr key={toolType._id} className="tool-type-row">
+                  <td>{index + 1}</td>
+                  <td>{toolType.toolName}</td>
+                  <td>{toolType.available + toolType.using}</td>
+                  <td>{toolType.available}</td>
+                  <td>{toolType.using}</td>
+                  <td>
+                    <Select
+                      ref={selectRefs.current[index]}
+                      options={toolType.items}
+                      isMulti
+                      styles={multiSelectCustomStyles}
+                      onChange={handleCodeSelect}
+                    />
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan="6">
+                  There are no tools to {selectedAction.toLowerCase()} for this project
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </Table>
+        <div className="action-buttons">
+          <Button className="log-form-cancel-button" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button
+            className="log-form-submit-button"
+            onClick={handleSubmit}
+            disabled={postObject.typesArray.length === 0}
+          >
+            Submit
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LogTools;
diff --git a/src/components/BMDashboard/Login/BMLogin.jsx b/src/components/BMDashboard/Login/BMLogin.jsx
index c8eb416cb5..36bda58ea8 100644
--- a/src/components/BMDashboard/Login/BMLogin.jsx
+++ b/src/components/BMDashboard/Login/BMLogin.jsx
@@ -14,17 +14,21 @@ function BMLogin(props) {
   const [validationError, setValidationError] = useState(null);
   const [hasAccess, setHasAccess] = useState(false);
 
+  // get the previous location from the state if available
+  // If access login page from URL directly, redirect to BM Dashboard
+  const prevLocation = location.state?.from || { pathname: '/bmdashboard' };
+
   // push to dashboard if user is authenticated
   useEffect(() => {
     if (auth.user.access && auth.user.access.canAccessBMPortal) {
-      history.push('/bmdashboard');
+      history.push(prevLocation.pathname);
     }
   }, []);
   useEffect(() => {
     if (hasAccess) {
-      history.push('/bmdashboard');
+      history.push(prevLocation.pathname);
     }
-  }, [hasAccess]);
+  }, [hasAccess, history, prevLocation.pathname]);
 
   // Note: email input type="text" to validate with Joi
   const schema = Joi.object({
diff --git a/src/components/BMDashboard/Login/__tests__/BMLogin.test.js b/src/components/BMDashboard/Login/__tests__/BMLogin.test.js
new file mode 100644
index 0000000000..ba0eee2aa0
--- /dev/null
+++ b/src/components/BMDashboard/Login/__tests__/BMLogin.test.js
@@ -0,0 +1,224 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import BMLogin from '..';
+import { useDispatch, Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import { BrowserRouter as Router } from 'react-router-dom';
+import axios from 'axios';
+
+const mockStore = configureStore([thunk]);
+let store;
+
+beforeEach(() => {
+  store = mockStore({
+    auth: {
+      isAuthenticated: true,
+      user: {
+        permissions: {
+          frontPermissions: [],
+          backPermissions: [],
+        },
+        role: 'Owner',
+      },
+      permissions: {
+        frontPermissions: [],
+        backPermissions: [],
+      },
+    },
+  });
+});
+
+jest.mock('axios');
+
+jest.mock('jwt-decode', () => jest.fn(token => ({ decodedPayload: 'mocked_decoded_payload' })));
+
+const history = {
+  push: jest.fn(),
+  location: { pathname: '/' },
+};
+
+const renderComponent = testStore => {
+  function LoginWrapper() {
+    const dispatch = useDispatch();
+    const location = {};
+
+    return <BMLogin dispatch={dispatch} history={history} location={location} />;
+  }
+  return render(
+    <Provider store={testStore}>
+      <Router>
+        <LoginWrapper />
+      </Router>
+    </Provider>,
+  );
+};
+
+describe('BMLogin component', () => {
+  it('renders without crashing', () => {
+    renderComponent(store);
+  });
+  it('check if login elements get displayed when isAuthenticated is true', () => {
+    renderComponent(store);
+    expect(screen.getByText('Log In To Building Management Dashboard')).toBeInTheDocument();
+  });
+  it('check if login elements does not get displayed when isAuthenticated is false', () => {
+    const testStore = mockStore({
+      auth: {
+        isAuthenticated: false,
+        user: {
+          permissions: {
+            frontPermissions: [],
+            backPermissions: [],
+          },
+          role: 'Owner',
+        },
+        permissions: {
+          frontPermissions: [],
+          backPermissions: [],
+        },
+      },
+    });
+    renderComponent(testStore);
+    expect(screen.queryByText('Log In To Building Management Dashboard')).not.toBeInTheDocument();
+  });
+  it('check if Enter your current user credentials to access the Building Management Dashboard header displays as expected', () => {
+    renderComponent(store);
+    expect(
+      screen.getByText(
+        'Enter your current user credentials to access the Building Management Dashboard',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('check if email label is displaying as expected', () => {
+    renderComponent(store);
+    expect(screen.getByText('Email')).toBeInTheDocument();
+  });
+  it('check if password label is displaying as expected', () => {
+    renderComponent(store);
+    expect(screen.getByText('Password')).toBeInTheDocument();
+  });
+  it('check if submit button is disabled when either email or password is not entered', () => {
+    renderComponent(store);
+    const buttonElement = screen.getByText('Submit');
+    expect(buttonElement).toBeDisabled();
+  });
+  it('check if validation for invalid email id works as expected', () => {
+    const { container } = renderComponent(store);
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: '12' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    expect(emailElement).toBeInvalid();
+    expect(screen.getByText('"email" must be a valid email')).toBeInTheDocument();
+  });
+  it('check if validation for password works as expected', () => {
+    const { container } = renderComponent(store);
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test@gmail.com' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: '12' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    expect(passwordElement).toBeInvalid();
+    expect(
+      screen.getByText('"password" length must be at least 8 characters long'),
+    ).toBeInTheDocument();
+  });
+  it('check if entering the right email and password logs in as expected', async () => {
+    axios.post.mockResolvedValue({
+      statusText: 'OK',
+      data: { token: '1234' },
+    });
+    const { container } = renderComponent(store);
+
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test@gmail.com' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: 'Test12345' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    expect(screen.queryByText('"email" must be a valid email')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('"password" length must be at least 8 characters long'),
+    ).not.toBeInTheDocument();
+    expect(emailElement).not.toBeInvalid();
+    expect(passwordElement).not.toBeInvalid();
+    await waitFor(() => {
+      expect(history.push).toHaveBeenCalledWith('/bmdashboard');
+    });
+  });
+  it("check if statusText in response is not 'OK' and status is 422 and displays validation error", async () => {
+    axios.post.mockResolvedValue({
+      statusText: 'ERROR',
+      status: 422,
+      data: { token: '1234', label: 'email', message: 'User not found' },
+    });
+    const { container } = renderComponent(store);
+
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test@gmail.com' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: 'Test12345' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    await waitFor(() => {
+      expect(screen.getByText('User not found')).toBeInTheDocument();
+    });
+  });
+  it("check if statusText in response is not 'OK' and status is not 422 and does not display any validation error", async () => {
+    axios.post.mockResolvedValue({
+      statusText: 'ERROR',
+      status: 500,
+      data: { token: '1234' },
+    });
+    const { container } = renderComponent(store);
+
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test@gmail.com' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: 'Test12345' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    await waitFor(() => {
+      const messageElement = container.querySelector('.invalid-feedback');
+      expect(messageElement).not.toBeInTheDocument();
+    });
+  });
+  it('check failed post request does not display any validation error', async () => {
+    axios.post.mockRejectedValue({ response: 'server error' });
+    const { container } = renderComponent(store);
+
+    const emailElement = container.querySelector('[name="email"]');
+    fireEvent.change(emailElement, { target: { value: 'test@gmail.com' } });
+
+    const passwordElement = container.querySelector('[name="password"]');
+    fireEvent.change(passwordElement, { target: { value: 'Test12345' } });
+
+    const submitElement = screen.getByText('Submit');
+    fireEvent.click(submitElement);
+
+    await waitFor(() => {
+      const messageElement = container.querySelector('.invalid-feedback');
+      expect(messageElement).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/Badge/BadgeReport.jsx b/src/components/Badge/BadgeReport.jsx
index 4aadf3a17c..2d51c6fdad 100644
--- a/src/components/Badge/BadgeReport.jsx
+++ b/src/components/Badge/BadgeReport.jsx
@@ -28,12 +28,13 @@ import moment from 'moment';
 import 'moment-timezone';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { boxStyle } from 'styles';
+import { boxStyle, boxStyleDark } from 'styles';
 import { formatDate } from 'utils/formatDate';
 import hasPermission from '../../utils/permissions';
 import { changeBadgesByUserID } from '../../actions/badgeManagement';
 import './BadgeReport.css';
 import { getUserProfile } from '../../actions/userProfile';
+import { PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE } from 'utils/constants';
 
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
 function BadgeReport(props) {
@@ -46,6 +47,8 @@ function BadgeReport(props) {
   const canDeleteBadges = props.hasPermission('deleteBadges');
   const canUpdateBadges = props.hasPermission('updateBadges');
 
+  const darkMode = props.darkMode;
+
   async function imageToUri(url, callback) {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
@@ -324,7 +327,7 @@ function BadgeReport(props) {
     <div>
       <div className="desktop">
         <div style={{ overflowY: 'scroll', height: '75vh' }}>
-          <Table>
+          <Table className={darkMode ? 'text-light' : ''}>
             <thead style={{ zIndex: '10' }}>
               <tr style={{ zIndex: '10' }}>
                 <th style={{ width: '90px' }}>Badge</th>
@@ -375,7 +378,11 @@ function BadgeReport(props) {
                       <>
                         {' '}
                         <UncontrolledDropdown className="me-2" direction="down">
-                          <DropdownToggle caret color="primary" style={boxStyle}>
+                          <DropdownToggle
+                            caret
+                            color="primary"
+                            style={darkMode ? boxStyleDark : boxStyle}
+                          >
                             Dates
                           </DropdownToggle>
                           <DropdownMenu className="badge_dropdown">
@@ -424,7 +431,7 @@ function BadgeReport(props) {
                           type="button"
                           className="btn btn-outline-danger"
                           onClick={e => handleDeleteBadge(sortBadges[index])}
-                          style={boxStyle}
+                          style={darkMode ? boxStyleDark : boxStyle}
                         >
                           Delete
                         </button>
@@ -461,7 +468,7 @@ function BadgeReport(props) {
         </div>
         <Button
           className="btn--dark-sea-green float-right"
-          style={{ ...boxStyle, margin: 5 }}
+          style={darkMode ? { ...boxStyleDark, margin: 5 } : { ...boxStyle, margin: 5 }}
           disabled={savingChanges}
           onClick={e => {
             saveChanges();
@@ -471,20 +478,20 @@ function BadgeReport(props) {
         </Button>
         <Button
           className="btn--dark-sea-green float-right"
-          style={{ ...boxStyle, margin: 5 }}
+          style={darkMode ? { ...boxStyleDark, margin: 5 } : { ...boxStyle, margin: 5 }}
           onClick={pdfDocGenerator}
         >
           Export All Badges to PDF
         </Button>
         <Button
           className="btn--dark-sea-green float-right"
-          style={{ ...boxStyle, margin: 5 }}
+          style={darkMode ? { ...boxStyleDark, margin: 5 } : { ...boxStyle, margin: 5 }}
           onClick={pdfFeaturedDocGenerator}
         >
           Export Selected/Featured Badges to PDF
         </Button>
-        <Modal isOpen={showModal}>
-          <ModalBody>
+        <Modal isOpen={showModal} className={darkMode ? 'text-light' : ''}>
+          <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
             <p>Woah, easy tiger! Are you sure you want to delete this badge?</p>
             <br />
             <p>
@@ -492,11 +499,15 @@ function BadgeReport(props) {
               until you click the &quot;Save Changes&quot; button below.
             </p>
           </ModalBody>
-          <ModalFooter>
-            <Button onClick={() => handleCancel()} style={boxStyle}>
+          <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+            <Button onClick={() => handleCancel()} style={darkMode ? boxStyleDark : boxStyle}>
               Cancel
             </Button>
-            <Button color="danger" onClick={() => deleteBadge()} style={boxStyle}>
+            <Button
+              color="danger"
+              onClick={() => deleteBadge()}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
               Yes, Delete
             </Button>
           </ModalFooter>
@@ -658,9 +669,7 @@ function BadgeReport(props) {
             style={{ margin: 5 }}
             onClick={e => {
               if (props.isRecordBelongsToJaeAndUneditable) {
-                alert(
-                  'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.',
-                );
+                alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
               }
               saveChanges();
             }}
@@ -682,8 +691,8 @@ function BadgeReport(props) {
             <span>Export Selected/Featured Badges to PDF</span>
           </Button>
         </div>
-        <Modal isOpen={showModal}>
-          <ModalBody>
+        <Modal isOpen={showModal} className={darkMode ? 'text-light dark-mode' : ''}>
+          <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
             <p>Woah, easy tiger! Are you sure you want to delete this badge?</p>
             <br />
             <p>
@@ -691,11 +700,15 @@ function BadgeReport(props) {
               until you click the &quot;Save Changes&quot; button below.
             </p>
           </ModalBody>
-          <ModalFooter>
-            <Button onClick={() => handleCancel()} style={boxStyle}>
+          <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+            <Button onClick={() => handleCancel()} style={darkMode ? boxStyleDark : boxStyle}>
               Cancel
             </Button>
-            <Button color="danger" onClick={() => deleteBadge()} style={boxStyle}>
+            <Button
+              color="danger"
+              onClick={() => deleteBadge()}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
               Yes, Delete
             </Button>
           </ModalFooter>
diff --git a/src/__tests__/AssignBadgePopup.test.js b/src/components/Badge/__tests__/AssignBadgePopup.test.js
similarity index 98%
rename from src/__tests__/AssignBadgePopup.test.js
rename to src/components/Badge/__tests__/AssignBadgePopup.test.js
index 3dcc1e84ea..4c623cbff0 100644
--- a/src/__tests__/AssignBadgePopup.test.js
+++ b/src/components/Badge/__tests__/AssignBadgePopup.test.js
@@ -5,7 +5,7 @@ import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import AssignBadgePopup from 'components/Badge/AssignBadgePopup';
 import { Provider } from 'react-redux';
-import { themeMock } from './mockStates';
+import { themeMock } from '../../../__tests__/mockStates';
 
 const mockStore = configureStore([thunk]);
 
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index cb7febcd17..38ed6e62ff 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -9,6 +9,11 @@ import SummaryBar from '../SummaryBar/SummaryBar';
 import '../../App.css';
 import TimeOffRequestDetailModal from './TimeOffRequestDetailModal';
 import { cantUpdateDevAdminDetails } from 'utils/permissions';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 
 export function Dashboard(props) {
   const [popup, setPopup] = useState(false);
@@ -25,7 +30,11 @@ export function Dashboard(props) {
 
   const toggle = () => {
     if (isNotAllowedToEdit) {
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      if (viewingUser?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     setPopup(!popup);
@@ -76,6 +85,7 @@ export function Dashboard(props) {
                 isPopup={popup}
                 userRole={authUser.role}
                 displayUserId={displayUserId}
+                displayUserEmail={viewingUser?.email}
                 isNotAllowedToEdit={isNotAllowedToEdit}
                 darkMode={darkMode}
               />
diff --git a/src/__tests__/ForcePasswordUpdate.test.js b/src/components/ForcePasswordUpdate/__tests__/ForcePasswordUpdate.test.js
similarity index 94%
rename from src/__tests__/ForcePasswordUpdate.test.js
rename to src/components/ForcePasswordUpdate/__tests__/ForcePasswordUpdate.test.js
index 883a3adcfd..180e0f1591 100644
--- a/src/__tests__/ForcePasswordUpdate.test.js
+++ b/src/components/ForcePasswordUpdate/__tests__/ForcePasswordUpdate.test.js
@@ -1,16 +1,16 @@
-import { renderWithProvider, renderWithRouterMatch } from './utils.js';
+import { renderWithProvider, renderWithRouterMatch } from '../../../__tests__/utils.js';
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import mockState from './mockAdminState.js';
+import mockState from '../../../__tests__/mockAdminState.js';
 import { createMemoryHistory } from 'history';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
-import { ENDPOINTS } from '../utils/URL';
+import { ENDPOINTS } from '../../../utils/URL.js';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import routes from './../routes';
-import { ForcePasswordUpdate } from '../components/ForcePasswordUpdate/ForcePasswordUpdate';
-import { forcePasswordUpdate as fPU } from './../actions/updatePassword';
-import { clearErrors } from './../actions/errorsActions';
+import routes from '../../../routes.js';
+import { ForcePasswordUpdate } from '../ForcePasswordUpdate.jsx';
+import { forcePasswordUpdate as fPU } from '../../../actions/updatePassword.js';
+import { clearErrors } from '../../../actions/errorsActions.js';
 import { shallow } from 'enzyme';
 
 describe('Force Password Update page structure', () => {
diff --git a/src/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap b/src/components/ForcePasswordUpdate/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap
similarity index 99%
rename from src/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap
rename to src/components/ForcePasswordUpdate/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap
index f5d00b442b..05c3c15deb 100644
--- a/src/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap
+++ b/src/components/ForcePasswordUpdate/__tests__/__snapshots__/ForcePasswordUpdate.test.js.snap
@@ -70,4 +70,4 @@ exports[`Force Password Update page structure should match the snapshot 1`] = `
     </form>
   </div>
 </DocumentFragment>
-`;
+`;
\ No newline at end of file
diff --git a/src/components/Header/DarkMode.css b/src/components/Header/DarkMode.css
index 804544c735..1abf6a3172 100644
--- a/src/components/Header/DarkMode.css
+++ b/src/components/Header/DarkMode.css
@@ -1,15 +1,9 @@
 /* Dark mode button styles */
 .dark-mode-button {
-  width: 50px;
-  height: 50px;
   cursor: pointer;
   padding: 0;
 }
 
-.dark-mode-button .icon {
-  font-size: 34px;
-}
-
 .dark-mode .close {
   color: white;
   opacity: 1; 
diff --git a/src/components/Header/DarkModeButton.jsx b/src/components/Header/DarkModeButton.jsx
index e83722ffd6..b7f765c62c 100644
--- a/src/components/Header/DarkModeButton.jsx
+++ b/src/components/Header/DarkModeButton.jsx
@@ -30,7 +30,7 @@ const DarkModeButton = () => {
         className={`dark-mode-button ${darkMode ? 'dark-mode' : ''}`} 
         onClick={toggleDarkMode}
         id="darkModeTooltip">
-      <span className="icon">{darkMode ? '🌞' : '🌜'}</span>
+      <span className="icon">{darkMode ? 'Dark Mode Off' : 'Dark Mode On'}</span>
       </button>
 
     </>
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 049589d02e..960516d091 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -116,7 +116,7 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-  const unreadNotifications = props.notification.unreadNotifications; // List of unread notifications
+  const unreadNotifications = props.notification?.unreadNotifications; // List of unread notifications
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -167,11 +167,11 @@ export function Header(props) {
   }, []);
 
   useEffect(() => {
-    if (props.notification.error) {
+    if (props.notification?.error) {
       toast.error(props.notification.error.message);
       dispatch(resetNotificationError());
     }
-  }, [props.notification.error]);
+  }, [props.notification?.error]);
 
   const roles = props.role?.roles;
 
@@ -283,7 +283,6 @@ export function Header(props) {
           <Collapse isOpen={isOpen} navbar>
             <Nav className="ml-auto nav-links" navbar>
               <div className='d-flex justify-content-center align-items-center' style={{width: '100%'}}>
-                <DarkModeButton />
                 {canUpdateTask && (
                   <NavItem>
                     <NavLink tag={Link} to="/taskeditsuggestions">
@@ -422,6 +421,9 @@ export function Header(props) {
                         {UPDATE_PASSWORD}
                       </DropdownItem>
                     )}
+                    <DropdownItem>
+                      <DarkModeButton />
+                    </DropdownItem>
                     <DropdownItem divider />
                     <DropdownItem onClick={openModal}>{LOGOUT}</DropdownItem>
                   </DropdownMenu>
diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css
index 1455fff065..1ae989bc42 100644
--- a/src/components/LeaderBoard/Leaderboard.css
+++ b/src/components/LeaderBoard/Leaderboard.css
@@ -14,14 +14,26 @@
     display: relative;
   }
 
-  thead th {
+  .leaderboard thead th {
+    position: sticky;
     top: 0;
-    border-top: 1px solid #dee2e6;
+    background-color: #1c2541;
+    border-top: 10px solid #dee2e6;
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: rgb(222, 226, 230);
   }
 }
+.row{
+  width: 97%;
+}
+
+.table-fixed tbody td {
+  white-space: normal; /* Allow text wrapping within cells */
+}
+.table-fixed{
+  font-size: 0.93rem;
+}
 
 .animation {
   animation: l-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index b52b42a265..fc58c6da6e 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -37,6 +37,17 @@ function useDeepEffect(effectFunc, deps) {
   }, deps);
 }
 
+function displayDaysLeft(lastDay) {
+  if (lastDay) {
+    const today = new Date();
+    const endDate = new Date(lastDay);
+    const differenceInTime = endDate.getTime() - today.getTime();
+    const differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));
+    return -differenceInDays;
+  }
+  return null; // or any other appropriate default value
+}
+
 function LeaderBoard({
   getLeaderboardData,
   getOrgData,
@@ -189,6 +200,7 @@ function LeaderBoard({
                   />
                 </div>
               </th>
+              <th>Days Left</th>
               <th>Time Off</th>
               <th>
                 <span className="d-sm-none">Tan. Time</span>
@@ -373,6 +385,11 @@ function LeaderBoard({
                     <i className="fa fa-eye-slash" title="User is invisible" />
                   )}
                 </th>
+                <td className="align-middle">
+                  <span title={mouseoverTextValue} id="Days left" style={{ color: 'red' }}>
+                    {displayDaysLeft(item.endDate)}
+                  </span>
+                </td>
                 <td className="align-middle">
                   {allRequests && allRequests[item.personId]?.length > 0 && (
                     <div>
diff --git a/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx b/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
index b69b87468c..a6d924e7c6 100644
--- a/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
+++ b/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
@@ -27,7 +27,7 @@ describe('Leaderboard page structure', () => {
     const tableHeader = mountedLeaderboard.find('thead');
     expect(tableHeader.length).toBe(1);
     const tableHeads = tableHeader.find('th');
-    expect(tableHeads.length).toBe(6);
+    expect(tableHeads.length).toBe(7);
   });
 
   it('should be rendered with mock Leaderboard data', () => {
diff --git a/src/components/Notification/__tests__/notification.test.js b/src/components/Notification/__tests__/notification.test.js
new file mode 100644
index 0000000000..a3edcad54f
--- /dev/null
+++ b/src/components/Notification/__tests__/notification.test.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import NotificationCard from '../notificationCard';
+import * as actions from '../../../actions/notificationAction';
+
+const mockStore = configureStore([thunk]);
+
+jest.mock('../../../actions/notificationAction');
+
+describe('NotificationCard', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({});
+
+    store.dispatch = jest.fn();
+  });
+
+  const notification = {
+    _id: '123',
+    message: 'This is a <a href="#">test</a> message',
+    sender: { firstName: 'John', lastName: 'Doe' },
+    isSystemGenerated: false,
+    createdTimeStamps: '2024-06-07T12:34:56Z',
+  };
+
+  it('should render correctly', () => {
+    render(
+      <Provider store={store}>
+        <NotificationCard notification={notification} />
+      </Provider>,
+    );
+
+    expect(screen.getByText(/You have a new notification from John Doe!/)).toBeInTheDocument();
+    expect(
+      screen.getByText((content, node) => {
+        const hasText = node => node.textContent === 'This is a test message';
+        const nodeHasText = hasText(node);
+        const childrenDontHaveText = Array.from(node.children).every(child => !hasText(child));
+        return nodeHasText && childrenDontHaveText;
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Date: Jun-07-24/)).toBeInTheDocument();
+  });
+
+  it('should dispatch markNotificationAsRead action on button click', () => {
+    const mockAction = { type: 'MARK_NOTIFICATION_AS_READ', payload: '123' };
+    actions.markNotificationAsRead.mockReturnValue(mockAction);
+
+    render(
+      <Provider store={store}>
+        <NotificationCard notification={notification} />
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByText('Mark as Read'));
+
+    // // 打印出 dispatch 的所有调用
+    // console.log(store.dispatch.mock.calls);
+
+    expect(store.dispatch).toHaveBeenCalledWith(mockAction);
+  });
+});
diff --git a/src/components/PermissionsManagement/PermissionsConst.js b/src/components/PermissionsManagement/PermissionsConst.js
index c4ff2eac27..bcd971d7ee 100644
--- a/src/components/PermissionsManagement/PermissionsConst.js
+++ b/src/components/PermissionsManagement/PermissionsConst.js
@@ -13,6 +13,18 @@ const getAllSubpermissionKeys = permissions => {
 };
 
 export const permissionLabels = [
+  {
+    label: 'General',
+    description: 'Category for all generalized permissions',
+    subperms: [
+      {
+        label: 'See All Users in Dashboard and Leaderboard',
+        key: 'seeUsersInDashboard',
+        description:
+          'Lets the user see all users in the dashboard as if they were on the same team. Requires "See All Users" to function',
+      },
+    ],
+  },
   {
     label: 'Reports',
     description: 'Category for all permissions related to reports',
@@ -39,6 +51,12 @@ export const permissionLabels = [
         description:
           'Under "Reports" -> "Weekly Summaries Reports", make the "Bio announcement" row highlighted yellow if that user is eligible for their bio to be posted (they have at least 80 tangible hours, 60 days on the team, and still don\'t have their bio posted)',
       },
+      {
+        label: 'Edit Team 4-Digit Codes',
+        key: 'editTeamCode',
+        description:
+          'Gives the user permission to edit 4-digit team codes on profile page and weekly summaries report page.',
+      },
     ],
   },
   {
@@ -81,10 +99,10 @@ export const permissionLabels = [
           'Gives the user the ability to modify several protected parts of users profiles. This includes changing admin links,  weekly summary options, committed hours, role, isRehireable, email, date created, bio status, and more. It also allows to circumvent permissions related to assigning teams or projects and changing active status.',
       },
       {
-        label: 'Manage Admin Links in User Profile',
-        key: 'manageAdminLinks',
+        label: 'Edit Summary Submit Requirement (Others)',
+        key: 'updateSummaryRequirements',
         description:
-          'Gives the user permission to edit the links of any user on the user profile page. "User Profile" -> "Links button"',
+          'Gives the user permission to change the requirement to the user to submit a summary.',
       },
       {
         label: 'Manage Time Off Requests',
@@ -157,10 +175,10 @@ export const permissionLabels = [
           'Gives the user permission to edit the category or the status of any Project. "Other Links" -> "Projects"',
       },
       {
-        label: 'Find User in Project',
+        label: 'See User in Project',
         key: 'getProjectMembers',
         description:
-          'Gives the user permission to find any user on the project members page. "Other Links" -> "Projects" -> "Members" -> "Find user input" ',
+          'Gives the user permission to access the profile of any user directly from the projects members page. "Other Links" -> "Projects" -> "Members"',
       },
       {
         label: 'Assign Project to Users',
@@ -234,16 +252,6 @@ export const permissionLabels = [
     label: 'Teams Management',
     description: 'Category for all permissions related to team management',
     subperms: [
-      {
-        label: 'See Teams Management Tab',
-        key: 'seeTeams',
-        description: 'Make the "Other Links" -> "Teams" button appear',
-      },
-      {
-        label: 'Create Team',
-        key: 'postTeam',
-        description: 'Gives the user permission to create a team.',
-      },
       {
         label: 'Edit Team',
         key: 'putTeam',
@@ -255,10 +263,21 @@ export const permissionLabels = [
         description: 'Gives the user permission to delete a team.',
       },
       {
-        label: 'Assign Users to Team',
-        key: 'assignTeamToUsers',
-        description:
-          'Gives the user permission to add users to teams. "Other Links" -> "Teams" -> "Members" -> "Add Input"',
+        label: 'Create/assign teams',
+        description: 'Quality of life bundling of two permissions commonly used together',
+        subperms: [
+          {
+            label: 'Create Team',
+            key: 'postTeam',
+            description: 'Gives the user permission to create a team.',
+          },
+          {
+            label: 'Assign Users to Team',
+            key: 'assignTeamToUsers',
+            description:
+              'Gives the user permission to add users to teams. "Other Links" -> "Teams" -> "Members" -> "Add Input"',
+          },
+        ],
       },
     ],
   },
@@ -266,6 +285,12 @@ export const permissionLabels = [
     label: 'Timelog Management',
     description: 'Category for all permissions related to timelog management',
     subperms: [
+      {
+        label: 'Toggle Tangible Time Self',
+        key: 'toggleTangibleTime',
+        description:
+          'Gives the user permission to toggle the Tangible check when editing their own time entry.',
+      },
       {
         label: 'Timelog Management (Others)',
         description: 'Category for all permissions related to timelog management',
@@ -276,12 +301,6 @@ export const permissionLabels = [
             description:
               'Gives the user permission to add Intangible time entry to others users "Dashboard" -> "Leaderboard" -> "Dot By the side of user\'s name" -> "Add Time entry to (Name of the user) yellow button". Currently not implemented.',
           },
-          {
-            label: 'Toggle Tangible Time Self',
-            key: 'toggleTangibleTime',
-            description:
-              'Gives the user permission to toggle the Tangible check when editing their own time entry.',
-          },
           {
             label: 'Delete Time Entry (Others)',
             key: 'deleteTimeEntry',
@@ -289,29 +308,29 @@ export const permissionLabels = [
               'Gives the user permission to Delete time entry from others users "Dashboard" -> "Leaderboard" -> "Dot By the side of user\'s name" -> "Current Time Log" -> "Trash button on bottom right"',
           },
           {
-            label: 'Edit Time Entries',
-            description: 'Category for all permissions related to timelog management',
+            label: 'Editing Time Entries',
+            description: 'Category for all permissions related to editing timelogs',
             subperms: [
               {
                 label: 'Edit Timelog Time',
-                key: 'editTimeEntry',
+                key: 'editTimeEntryTime',
                 description: 'Gives the user permission to edit the time of any time log entry.',
               },
               {
                 label: 'Edit Timelog Description',
-                key: 'editTimeEntry',
+                key: 'editTimeEntryDescription',
                 description:
                   'Gives the user permission to edit the description of any time log entry.',
               },
               {
                 label: 'Toggle Tangible Time Others',
-                key: 'editTimeEntry',
+                key: 'editTimeEntryToggleTangible',
                 description:
                   'Gives the user permission to toggle the tangible check when editing a time entry of another user.',
               },
               {
                 label: 'Change Time Entry Date',
-                key: 'editTimelogDate',
+                key: 'editTimeEntryDate',
                 description:
                   'Gives the user permission to edit the date when adding an intangible time entry.',
               },
@@ -369,24 +388,6 @@ export const permissionLabels = [
       // },
     ],
   },
-  {
-    label: 'Misc/Unsorted',
-    description: 'Category for all permissions not related to other categories',
-    subperms: [
-      {
-        label: 'Edit Team 4-Digit Codes',
-        key: 'editTeamCode',
-        description:
-          'Gives the user permission to edit 4-digit team codes on profile page and weekly summaries report page.',
-      },
-      {
-        label: 'See All Users in Dashboard and Leaderboard',
-        key: 'seeUsersInDashboard',
-        description:
-          'Lets the user see all users in the dashboard as if they were on the same team. Requires "See All Users" to function',
-      },
-    ],
-  },
 ];
 
 // returns an array of all the keys for permissions
diff --git a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
index 32cb5d284b..d8934aa60d 100644
--- a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
+++ b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
@@ -7,6 +7,11 @@ import './PermissionsManagement.css';
 import axios from 'axios';
 import { ENDPOINTS } from 'utils/URL';
 import { boxStyle, boxStyleDark } from 'styles';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 import PermissionList from './PermissionList';
 import { addNewRole, getAllRoles } from '../../actions/role';
 import { cantUpdateDevAdminDetails } from '../../utils/permissions';
@@ -47,8 +52,13 @@ function UserPermissionsPopUp({ allUserProfiles, getAllUsers, roles, authUser, d
     e.preventDefault();
     const shouldPreventEdit = cantUpdateDevAdminDetails(actualUserProfile?.email, authUser.email);
     if (shouldPreventEdit) {
-      // eslint-disable-next-line no-alert
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      if (actualUserProfile?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     const userId = actualUserProfile?._id;
diff --git a/src/components/Projects/AddProject/AddProject.jsx b/src/components/Projects/AddProject/AddProject.jsx
index 1a8eae4041..241494f337 100644
--- a/src/components/Projects/AddProject/AddProject.jsx
+++ b/src/components/Projects/AddProject/AddProject.jsx
@@ -51,7 +51,7 @@ const AddProject = props => {
           <button
             className="btn btn-outline-primary"
             type="button"
-            onClick={e => props.addNewProject(newName, newCategory)}
+            onClick={() => props.onAddNewProject(newName, newCategory)}
           >
             <i className="fa fa-plus" aria-hidden="true"></i>
           </button>
diff --git a/src/components/Projects/AddProject/AddProject.test.jsx b/src/components/Projects/AddProject/AddProject.test.jsx
index 7b0cc61e32..4dfa7be4a0 100644
--- a/src/components/Projects/AddProject/AddProject.test.jsx
+++ b/src/components/Projects/AddProject/AddProject.test.jsx
@@ -55,12 +55,12 @@ describe("AddProject component structure", () => {
 
 describe('AddProject component state handlers', () => {
   
-  //mock the addNewProject function
+  //mock the onAddNewProject function
 
   const mockAddNewProject = jest.fn();
 
   beforeEach(() => {
-    render(<AddProject addNewProject={mockAddNewProject} />)
+    render(<AddProject onAddNewProject={mockAddNewProject} />)
   });
 
   test("Input change handler updates state correctly", () => {
@@ -77,7 +77,7 @@ describe('AddProject component state handlers', () => {
     expect(selectElement.value).toBe('Food');
   })
 
-  test('Button click handler calls addNewProject with correct arguments', () => {
+  test('Button click handler calls onAddNewProject with correct arguments', () => {
     const inputField = screen.getByRole('textbox');
     const selectElement = screen.getByRole('combobox');
 
diff --git a/src/components/Projects/Members/Member/Member.jsx b/src/components/Projects/Members/Member/Member.jsx
index 57612fe3b3..6284bae031 100644
--- a/src/components/Projects/Members/Member/Member.jsx
+++ b/src/components/Projects/Members/Member/Member.jsx
@@ -12,9 +12,9 @@ import PropTypes from 'prop-types';
 
 const Member = props => {
   const {darkMode} = props;
-  const canGetUserProfiles = props.hasPermission('getUserProfiles');
-  //const canAssignProjectToUsers = props.hasPermission('assignProjectToUsers');
+  const canGetProjectMembers = props.hasPermission('getProjectMembers');
   const canUnassignUserInProject = props.hasPermission('unassignUserInProject');
+ 
   return (
     <React.Fragment>
       <tr className={`members__tr ${darkMode ? 'bg-yinmn-blue' : ''}`}>
@@ -22,7 +22,7 @@ const Member = props => {
           <div>{typeof props.index === 'number' ? props.index + 1 : null}</div>
         </th>
         <td className="members__name">
-          {canGetUserProfiles ? (
+          {canGetProjectMembers ? (
             <a href={`/userprofile/${props.uid}`} className={darkMode ? 'text-azure' : ''}>{props.fullName}</a>
           ) : (
             props.fullName
diff --git a/src/components/Projects/Members/Members.jsx b/src/components/Projects/Members/Members.jsx
index f26b50fdaa..58ac5a9555 100644
--- a/src/components/Projects/Members/Members.jsx
+++ b/src/components/Projects/Members/Members.jsx
@@ -28,7 +28,6 @@ const Members = props => {
   const [membersList, setMembersList] = useState(props.state.projectMembers.members);
   const [lastTimeoutId, setLastTimeoutId] = useState(null);
 
-  const canGetProjectMembers = props.hasPermission('getProjectMembers');
   const canAssignProjectToUsers = props.hasPermission('assignProjectToUsers');
   const canUnassignUserInProject = props.hasPermission('unassignUserInProject');
 
@@ -95,7 +94,7 @@ const Members = props => {
               <div id="member_project__name">PROJECTS {props.projectId}</div>
             </ol>
           </nav>
-          {canGetProjectMembers ? (
+          {canAssignProjectToUsers ? (
             <div className="input-group" id="new_project">
               <div className="input-group-prepend">
                 <span className="input-group-text">Find user</span>
@@ -195,7 +194,7 @@ const Members = props => {
               {displayedMembers.map((member, i) => (
                 <Member
                   index={i}
-                  key={member._id}
+                  key={member._id ?? i}
                   projectId={projectId}
                   uid={member._id}
                   fullName={member.firstName + ' ' + member.lastName}
diff --git a/src/components/Projects/Overview/Overview.jsx b/src/components/Projects/Overview/Overview.jsx
index ae33a84adf..7069eba128 100644
--- a/src/components/Projects/Overview/Overview.jsx
+++ b/src/components/Projects/Overview/Overview.jsx
@@ -32,4 +32,4 @@ const Overview = props => {
   );
 };
 
-export default Overview;
+export default Overview
\ No newline at end of file
diff --git a/src/components/Projects/Overview/Overview.test.jsx b/src/components/Projects/Overview/__tests__/Overview.test.jsx
similarity index 95%
rename from src/components/Projects/Overview/Overview.test.jsx
rename to src/components/Projects/Overview/__tests__/Overview.test.jsx
index b9f6712cd9..7b544ec76f 100644
--- a/src/components/Projects/Overview/Overview.test.jsx
+++ b/src/components/Projects/Overview/__tests__/Overview.test.jsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import Overview from './Overview';
+import Overview from '../Overview';
 
 describe('Overview Component', () => {
   it('renders correctly with props', () => {
diff --git a/src/components/Projects/Project/Project.jsx b/src/components/Projects/Project/Project.jsx
index 7312700a5b..363edc3039 100644
--- a/src/components/Projects/Project/Project.jsx
+++ b/src/components/Projects/Project/Project.jsx
@@ -1,71 +1,86 @@
-import React, { useState, useEffect } from 'react';
-import { DELETE } from './../../../languages/en/ui';
+import { useState, useEffect } from 'react';
+import { ARCHIVE } from './../../../languages/en/ui';
 import './../projects.css';
 import { Link } from 'react-router-dom';
 import { NavItem } from 'reactstrap';
 import { connect } from 'react-redux';
 import hasPermission from 'utils/permissions';
 import { boxStyle } from 'styles';
+import { toast } from 'react-toastify'; 
 
 const Project = props => {
-  const {darkMode} = props;
-
-  const [originName] = useState(props.name);
-  const [originCategory, setOriginCategory] = useState(props.category);
-  const [name, setName] = useState(props.name);
-  const [category, setCategory] = useState(props.category);
-  const [active, setActive] = useState(props.active);
+  const { darkMode, index } = props;
   const [firstLoad, setFirstLoad] = useState(true);
+  const [projectData, setProjectData] = useState(props.projectData);
+  const { projectName, category, isActive, _id: projectId } = projectData;
+  const [displayName, setDisplayName] = useState(projectName);
 
   const canPutProject = props.hasPermission('putProject');
   const canDeleteProject = props.hasPermission('deleteProject');
 
-  const updateActive = () => {
-    props.onClickActive(props.projectId, name, category, active);
-    setActive(!active);
+  const updateProject = (key, value) => {
+    setProjectData({
+      ...projectData,
+      [key]: value,
+    });
   };
 
-  useEffect(() => {
-    if (!firstLoad) {
-      updateProject();
-    }
-    setFirstLoad(false);
-  }, [category]);
+  const onDisplayNameChange = (e) => {
+    setDisplayName(e.target.value);
+  }
 
-  const updateProject = () => {
-    if (name.length < 3) {
-      setName(originName);
-    } else if (originName !== name || category != originCategory) {
-      props.onUpdateProjectName(props.projectId, name, category, active);
-      setOriginCategory(category);
-    }
+  const onUpdateProjectName = () => {
+    if (displayName.length < 3) {
+      toast.error('Project name must be at least 3 characters long');
+      setDisplayName(displayName);
+    } else if (displayName !== projectName) {
+      updateProject('projectName', displayName);
+    } 
   };
 
+  const onUpdateProjectActive = () => {
+    updateProject('isActive', !isActive);
+  }
+
+  const onUpdateProjectCategory = (e) => {
+    updateProject('category', e.target.value);
+  }
+
+  const onArchiveProject = () => {
+    props.onClickArchiveBtn(projectData);
+  }
+  
+  useEffect(() => {
+    if (firstLoad) {
+      setFirstLoad(false);
+    } else {
+      props.onUpdateProject(projectData)
+    }
+  }, [projectData]);
+
   return (
-    <tr className={`projects__tr ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} id={'tr_' + props.projectId}>
+    <tr className={`projects__tr ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} id={'tr_' + projectId}>
       <th className="projects__order--input" scope="row">
-        <div>{props.index + 1}</div>
+        <div>{index + 1}</div>
       </th>
       <td className="projects__name--input">
         {(canPutProject) ? (
           <input
             type="text"
             className={`form-control ${darkMode ? 'bg-yinmn-blue border-0 text-light' : ''}`}
-            value={name}
-            onChange={e => setName(e.target.value)}
-            onBlur={updateProject}
+            value={displayName}
+            onChange={onDisplayNameChange}
+            onBlur={() => onUpdateProjectName(displayName)}
           />
         ) : (
-          name
+          projectName
         )}
       </td>
       <td className="projects__category--input">
         {(canPutProject) ? (
           <select
-            value={props.category}
-            onChange={e => {
-              setCategory(e.target.value);
-            }}
+            value={category}
+            onChange={onUpdateProjectCategory}
             className={darkMode ? 'bg-yinmn-blue border-primary text-light' : ''}
           >
             <option default value="Unspecified">Unspecified</option>
@@ -82,8 +97,8 @@ const Project = props => {
           category
         )}
       </td>
-      <td className="projects__active--input" onClick={canPutProject ? updateActive : null}>
-        {props.active ? (
+      <td className="projects__active--input" onClick={canPutProject ? onUpdateProjectActive : null}>
+        {isActive ? (
           <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
           </div>
@@ -94,7 +109,7 @@ const Project = props => {
         )}
       </td>
       <td>
-        <NavItem tag={Link} to={`/inventory/${props.projectId}`}>
+        <NavItem tag={Link} to={`/inventory/${projectId}`}>
           <button type="button" className="btn btn-outline-info" style={darkMode ? {} : boxStyle}>
             {' '}
             <i className="fa fa-archive" aria-hidden="true"></i>
@@ -102,7 +117,7 @@ const Project = props => {
         </NavItem>
       </td>
       <td>
-        <NavItem tag={Link} to={`/project/members/${props.projectId}`}>
+        <NavItem tag={Link} to={`/project/members/${projectId}`}>
           <button type="button" className="btn btn-outline-info" style={darkMode ? {} : boxStyle}>
             {' '}
             <i className="fa fa-users" aria-hidden="true"></i>
@@ -111,7 +126,7 @@ const Project = props => {
       </td>
 
       <td>
-        <NavItem tag={Link} to={`/project/wbs/${props.projectId}`}>
+        <NavItem tag={Link} to={`/project/wbs/${projectId}`}>
           <button type="button" className="btn btn-outline-info" style={darkMode ? {} : boxStyle}>
             <i className="fa fa-tasks" aria-hidden="true"></i>
           </button>
@@ -123,10 +138,10 @@ const Project = props => {
           <button
             type="button"
             className="btn btn-outline-danger"
-            onClick={e => props.onClickDelete(props.projectId, props.active, props.name, props.category)}
+            onClick={onArchiveProject}
             style={darkMode ? {} : boxStyle}
           >
-            {DELETE}
+            {ARCHIVE}
           </button>
         </td>
       ) : null}
diff --git a/src/components/Projects/ProjectTableHeader/ProjectTableHeader.jsx b/src/components/Projects/ProjectTableHeader/ProjectTableHeader.jsx
index d3315555c9..afbcfa589e 100644
--- a/src/components/Projects/ProjectTableHeader/ProjectTableHeader.jsx
+++ b/src/components/Projects/ProjectTableHeader/ProjectTableHeader.jsx
@@ -7,15 +7,16 @@ import {
   WBS,
   PROJECT_CATEGORY,
   INVENTORY,
-  DELETE,
+  ARCHIVE,
 } from './../../../languages/en/ui';
 import hasPermission from 'utils/permissions';
 import { connect } from 'react-redux';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSort, faArrowUp, faArrowDown} from '@fortawesome/free-solid-svg-icons';
-import Dropdown from 'react-bootstrap/Dropdown';
-import DropdownButton from 'react-bootstrap/DropdownButton';
+import { faArrowUp, faArrowDown} from '@fortawesome/free-solid-svg-icons';
+import { Dropdown,DropdownButton, Divider } from 'react-bootstrap';
+
+// import DropdownButton from 'react-bootstrap/DropdownButton';
 import { boxStyle } from 'styles';
 import { Button } from 'reactstrap';
 
@@ -24,6 +25,9 @@ const ProjectTableHeader = props => {
   const { role, darkMode } = props;
   const canDeleteProject = props.hasPermission('deleteProject');
 
+  const categoryList = ['Unspecified', 'Food', 'Energy', 'Housing', 'Education', 'Society', 'Economics', 'Stewardship', 'Other'];
+  const statusList = ['Active', 'Inactive'];
+
   return (
     <tr className={darkMode ? 'bg-space-cadet text-light' : ''}>
       <th scope="col" id="projects__order">
@@ -41,26 +45,22 @@ const ProjectTableHeader = props => {
       <th scope="col" id="projects__category">
          {/* This span holds the header-name and a dropDown component */}
        <span className='d-flex justify-content-between'>{PROJECT_CATEGORY}
-        <DropdownButton id="" title="" size='sm'style={darkMode ? {} : boxStyle} variant='info' value={props.selectedValue} onSelect={props.onChange} >
-            <Dropdown.Item default value="Unspecified">Unspecified</Dropdown.Item>
-            <Dropdown.Item eventKey="Food">Food</Dropdown.Item>
-            <Dropdown.Item eventKey="Energy">Energy</Dropdown.Item>
-            <Dropdown.Item eventKey="Housing">Housing</Dropdown.Item>
-            <Dropdown.Item eventKey="Education">Education</Dropdown.Item>
-            <Dropdown.Item eventKey="Society">Society</Dropdown.Item>
-            <Dropdown.Item eventKey="Economics">Economics</Dropdown.Item>
-            <Dropdown.Item eventKey="Stewardship">Stewardship</Dropdown.Item>
-            <Dropdown.Item eventKey="Other">Other</Dropdown.Item>
-
+        <DropdownButton id="" title="" size='sm'style={darkMode ? {} : boxStyle} variant='info' value={props.selectedValue} onSelect={props.onChange} menuAlign="right">
+          <Dropdown.Item default eventKey="" disabled={!props.selectedValue}>{props.selectedValue ? 'Clear filter' : 'Choose category'}</Dropdown.Item>
+          <Dropdown.Divider />
+          {categoryList.map((category, index) => 
+            <Dropdown.Item key={index} eventKey={category} active={props.selectedValue === category}>{category}</Dropdown.Item>
+          )}
         </DropdownButton>
        </span> 
       </th>
       <th scope="col" id="projects__active">
       <span className='d-flex justify-content-between'>{ACTIVE}
-        <DropdownButton className='ml-2' id="" title="" size='sm'style={darkMode ? {} : boxStyle} variant='info' value={props.showStatus} onSelect={props.selectStatus} >
-        <Dropdown.Item default value="Unspecified">Choose Status</Dropdown.Item>
-            <Dropdown.Item eventKey="Active">Active</Dropdown.Item>
-            <Dropdown.Item eventKey="Inactive">Inactive</Dropdown.Item>
+        <DropdownButton className='ml-2' id="" title="" size='sm'style={darkMode ? {} : boxStyle} variant='info' value={props.showStatus} onSelect={props.selectStatus}  menuAlign="right" >
+        <Dropdown.Item default value="" disabled={!props.showStatus}>{props.showStatus ? 'Clear filter' : 'Choose Status'}</Dropdown.Item>
+          {statusList.map((status, index) => 
+            <Dropdown.Item key={index} eventKey={status} active={props.showStatus === status}>{status}</Dropdown.Item>
+          )}
         </DropdownButton>
        </span> 
       </th>
@@ -86,7 +86,7 @@ const ProjectTableHeader = props => {
       </th>
       {canDeleteProject ? (
         <th scope="col" id="projects__delete">
-          {DELETE}
+          {ARCHIVE}
         </th>
       ) : null}
     </tr>
diff --git a/src/components/Projects/ProjectTableHeader/__tests__/ProjectTableHeader.test.jsx b/src/components/Projects/ProjectTableHeader/__tests__/ProjectTableHeader.test.jsx
index f7424b443b..d3aede3d9b 100644
--- a/src/components/Projects/ProjectTableHeader/__tests__/ProjectTableHeader.test.jsx
+++ b/src/components/Projects/ProjectTableHeader/__tests__/ProjectTableHeader.test.jsx
@@ -60,7 +60,7 @@ describe('ProjectTableHeader Component', () => {
   });
 
   // Test case to check if the delete column is shown for users with delete permission
-  it('shows delete column for users with delete permission', () => {
+  it('shows archive column for users with delete permission', () => {
     const stateWithDeletePermission = {
       ...sampleProps,
       userProfile: {
@@ -75,7 +75,7 @@ describe('ProjectTableHeader Component', () => {
     const hasPermission = jest.fn((a) => true)
     stateWithDeletePermission.hasPermission = hasPermission;
     const { getByText } = renderProjectTableHeader(stateWithDeletePermission);
-    expect(getByText('Delete')).toBeInTheDocument();
+    expect(getByText('Archive')).toBeInTheDocument();
   });
 
   // Test case to check if the delete column is not shown for users without delete permission
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
index 5d1a5f1020..cfb189adc3 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects/Projects.jsx
@@ -1,387 +1,208 @@
-/*********************************************************************************
- * Component: PROJECTS
- * Author: Henry Ng - 01/27/20
- * This component is used to build the layout of the list of projects
- * Childrens: Overview, ProjectTableHeader, Project ( List )
- * Layout: <Overview>
- *         <ProjectTableHeader>
- *         {  <Project>...  }
- *
- ********************************************************************************/
-import React, { Component } from 'react';
+import { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
 import {
   fetchAllProjects,
   postNewProject,
-  deleteProject,
   modifyProject,
+  clearError,
 } from '../../actions/projects';
 import { getPopupById } from '../../actions/popupEditorAction';
 import Overview from './Overview';
 import AddProject from './AddProject';
 import ProjectTableHeader from './ProjectTableHeader';
 import Project from './Project';
-import ModalDelete from './../common/Modal';
-import ModalMsg from './../common/Modal';
-import * as Message from './../../languages/en/messages';
-import { NOTICE } from './../../languages/en/ui';
+import ModalTemplate from './../common/Modal';
+import { CONFIRM_ARCHIVE } from './../../languages/en/messages';
 import './projects.css';
-import { connect } from 'react-redux';
 import Loading from '../common/Loading';
-import { PROJECT_DELETE_POPUP_ID } from './../../constants/popupId';
 import hasPermission from '../../utils/permissions';
 import EditableInfoModal from '../UserProfile/EditableModal/EditableInfoModal';
 
-export class Projects extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showModalDelete: false,
-      showModalMsg: false,
-      trackModelMsg: false,
-       // The property below is the state that tracks the selected category to sort the project list - Sucheta #PR1738
-       categorySelectedForSort : "",
-       showStatus: "",
-       sortBy: "",
-      projectTarget: {
-        projectName: '',
-        projectId: -1,
-        active: false,
-        category: '',
-      },
-      projectInfoModal: false,
-    };
-  }
-
-  componentDidMount() {
-    this.props.getPopupById(PROJECT_DELETE_POPUP_ID); // popup id
-    this.props.fetchAllProjects(); // Fetch to get all projects
-  }
+const Projects = function(props) {
+  const role = props.state.userProfile.role;
+  const { darkMode } = props.state.theme;
+  const numberOfProjects = props.state.allProjects.projects.length;
+  const numberOfActive = props.state.allProjects.projects.filter(project => project.isActive).length;
+  const { fetching, fetched, status, error } = props.state.allProjects;
+  const initialModalData = {
+    showModal: false,
+    modalMessage: "",
+    modalTitle: "",
+    hasConfirmBtn: false,
+    hasInactiveBtn: false,
+  };
 
-  /**
-   * Changes the number of active projects
-   */
-  onClickActive = (projectId, projectName, category, isActive) => {
-    this.props.modifyProject('setActive', projectId, projectName, category, isActive);
+  const [modalData, setModalData] = useState(initialModalData);
+  const [categorySelectedForSort, setCategorySelectedForSort] = useState("");
+  const [showStatus, setShowStatus] = useState("");
+  const [sortedByName, setSortedByName] = useState("");
+  const [projectTarget, setProjectTarget] = useState({
+    projectName: '',
+    projectId: -1,
+    active: false,
+    category: '',
+  });
+  const [projectList, setProjectList] = useState(null);
+
+  const canPostProject = props.hasPermission('postProject');
+
+  const onClickArchiveBtn = (projectData) => {
+    setProjectTarget(projectData);
+    setModalData({
+      showModal: true,
+      modalMessage: `<p>Do you want to archive ${projectData.projectName}?</p>`,
+      modalTitle: CONFIRM_ARCHIVE,
+      hasConfirmBtn: true,
+      hasInactiveBtn: true,
+    });
   };
 
-  onUpdateProjectName = (projectId, projectName, category, isActive) => {
-    this.props.modifyProject('updateName', projectId, projectName, category, isActive);
+  const onCloseModal = () => {
+    setModalData(initialModalData);
+    props.clearError();
   };
 
-  /**
-   * Changes the number of projects
-   * Also update the number of active project
-   */
-  onClickDelete = (projectId, active, projectName, category) => {
-    this.setState({
-      showModalDelete: true,
-      projectTarget: {
-        projectId,
-        projectName,
-        active,
-        category,
-      },
-    });
+  const onChangeCategory = (value) => {
+    setCategorySelectedForSort(value);
   };
 
- // sort project list by category - Sucheta
- onChangeCategory = (value) =>{
-  this.setState({
-    categorySelectedForSort: value
-  })
-}
-// sort project list by status- active / inactive - Sucheta
-onSelectStatus = (value)=>{
-  this.setState({
-    showStatus: value
-  })
-}
-// handle sort function alphabetically - Sucheta
-handleSort = (e)=>{
-  if(e.target.id === "Ascending"){
-   this.setState({
-    sortBy: "Ascending"
-   })
+  const onSelectStatus = (value) => {
+    setShowStatus(value);
+  }
 
-  }else if(e.target.id === "Descending"){
-    this.setState({
-      sortBy: "Descending"
-    })
-  }else{
-    this.setState({
-      sortBy: ""
-    })
+  const handleSort = (e) => {
+    setSortedByName(e.target.id);
   }
-}
 
-  confirmDelete = () => {
-    // get project info
-    let { projectId } = this.state.projectTarget;
-    // request delete on db
-    this.props.deleteProject(projectId);
-    // disable modal
-    this.setState({ showModalDelete: false });
+  const onUpdateProject = async (updatedProject) => {
+    await props.modifyProject(updatedProject);  
   };
 
-  setInactiveProject = () => {
-    let { projectId, projectName, category } = this.state.projectTarget;
-    this.props.modifyProject('setActive', projectId, projectName, category, true);
-    // disable modal
-    this.setState({ showModalDelete: false });
+  const confirmArchive = async () => {
+    const updatedProject = { ...projectTarget, isArchived: true };
+    await onUpdateProject(updatedProject);
+    await props.fetchAllProjects();
+    onCloseModal();
   };
 
-  postProject = (name, category) => {
-    this.props.postNewProject(name, category, true);
-    this.setState({ trackModelMsg: true });
+  const setInactiveProject = async () => {
+    const updatedProject = { ...projectTarget, isActive: !isActive };
+    await onUpdateProject(updatedProject);
+    onCloseModal();
   };
 
-  toggleProjectInfoModal = () => {
-    this.setState({
-      projectInfoModal: !this.state.projectInfoModal,
-    });
+  const postProject = async (name, category) => {
+    await props.postNewProject(name, category);
   };
 
-  render() {
-    const {darkMode} = this.props.state.theme;
-    
-    let { showModalDelete, projectTarget, trackModelMsg, projectInfoModal } = this.state;
-    let { projects, status, fetching, fetched } = this.props.state.allProjects;
-
-    let numberOfProjects = projects.length;
-    let numberOfActive = projects.filter(project => project.isActive).length;
-
-    let showModalMsg = false;
-
-    // by Sucheta
-    const {categorySelectedForSort} = this.state;
-    const {showStatus} = this.state;
-    const {sortBy} = this.state;
-
-
-    const role = this.props.state.userProfile.role;
-
-    const canPostProject = this.props.hasPermission('postProject');
-
-    if (status === 400 && trackModelMsg) {
-      showModalMsg = true;
-    }
-
-    // Display project lists
-    let ProjectsList = [];
-    if (projects.length > 0) {
-      let sortedList = ""; // If user chooses to get sorted project list, this variable stores sorted project list - Sucheta
-      if(sortBy === "Ascending"){
-        sortedList = projects.sort((a,b)=>{
-          if(a.projectName[0].toLowerCase() < b.projectName[0].toLowerCase()){
-            return -1
-          }else if(a.projectName[0].toLowerCase() > b.projectName[0].toLowerCase()){
-            return 1
-          }else{return 0}
-        })
-      }else if(sortBy === "Descending"){
-        sortedList = projects.sort((a,b)=>{
-          if(a.projectName[0].toLowerCase() < b.projectName[0].toLowerCase()){
-            return 1
-          }else if(a.projectName[0].toLowerCase() > b.projectName[0].toLowerCase()){
-            return -1
-          }else{return 0}
-        })
-
+  const generateProjectList = (categorySelectedForSort, showStatus, sortedByName) => {
+    const { projects } = props.state.allProjects;
+    const projectList = projects.filter(project => {
+      if (categorySelectedForSort && showStatus){
+        return project.category === categorySelectedForSort && project.isActive === showStatus;
+      } else if (categorySelectedForSort) {
+        return project.category === categorySelectedForSort;
+      } else if (showStatus) {
+        return project.isActive === showStatus;
+      } else {
+        return true;
       }
-      // Below mentioned if block checks if there is a selected category to sort the projects - Sucheta
-
-      if(categorySelectedForSort){
-         if(categorySelectedForSort&&showStatus=== "Active"){
-          ProjectsList =  (sortBy?sortedList: projects).map((project, index) => {
-            if(project.category === categorySelectedForSort && project.isActive){
-             return (<Project
-              key={project._id}
-              index={index}
-              projectId={project._id}
-              name={project.projectName}
-              category={project.category || 'Unspecified'}
-              active={project.isActive}
-              onClickActive={this.onClickActive}
-              onUpdateProjectName={this.onUpdateProjectName}
-              onClickDelete={this.onClickDelete}
-              confirmDelete={this.confirmDelete}
-              darkMode={darkMode}
-            />)
-            }
-          })
-         }else if(categorySelectedForSort&&showStatus=== "Inactive"){
-          ProjectsList = (sortBy?sortedList: projects).map((project, index) => {
-            if(project.category === categorySelectedForSort && !project.isActive){
-             return (<Project
-              key={project._id}
-              index={index}
-              projectId={project._id}
-              name={project.projectName}
-              category={project.category || 'Unspecified'}
-              active={project.isActive}
-              onClickActive={this.onClickActive}
-              onUpdateProjectName={this.onUpdateProjectName}
-              onClickDelete={this.onClickDelete}
-              confirmDelete={this.confirmDelete}
-              darkMode={darkMode}
-            />)
-            }
-          })
-         }
-         else{
-          ProjectsList = (sortBy?sortedList: projects).map((project, index) => {
-            if(project.category === categorySelectedForSort){
-             return (<Project
-              key={project._id}
-              index={index}
-              projectId={project._id}
-              name={project.projectName}
-              category={project.category || 'Unspecified'}
-              active={project.isActive}
-              onClickActive={this.onClickActive}
-              onUpdateProjectName={this.onUpdateProjectName}
-              onClickDelete={this.onClickDelete}
-              confirmDelete={this.confirmDelete}
-              darkMode={darkMode}
-            />)
-            }
-          })
-         }
-
-      }else if(showStatus === "Active"){
-        ProjectsList = (sortBy?sortedList: projects).map((project, index) => {
-          if(project.isActive){
-           return (<Project
-            key={project._id}
-            index={index}
-            projectId={project._id}
-            name={project.projectName}
-            category={project.category || 'Unspecified'}
-            active={project.isActive}
-            onClickActive={this.onClickActive}
-            onUpdateProjectName={this.onUpdateProjectName}
-            onClickDelete={this.onClickDelete}
-            confirmDelete={this.confirmDelete}
-            darkMode={darkMode}
-          />)
-          }
-        })
-
-      }else if(showStatus === "Inactive"){
-        ProjectsList = (sortBy?sortedList: projects).map((project, index) => {
-          if(!project.isActive){
-           return (<Project
-            key={project._id}
-            index={index}
-            projectId={project._id}
-            name={project.projectName}
-            category={project.category || 'Unspecified'}
-            active={project.isActive}
-            onClickActive={this.onClickActive}
-            onUpdateProjectName={this.onUpdateProjectName}
-            onClickDelete={this.onClickDelete}
-            confirmDelete={this.confirmDelete}
-            darkMode={darkMode}
-          />)
-          }
-        })
+    }).sort((a, b) => {
+      if (sortedByName === "Ascending") {
+        return a.projectName[0].toLowerCase() < b.projectName[0].toLowerCase() ? -1 : 1;
+      } else if (sortedByName === "Descending") {
+        return a.projectName[0].toLowerCase() < b.projectName[0].toLowerCase() ? 1 : -1;
+      } else {
+        return 0;
+      }
+    }).map((project, index) => (
+        <Project
+          key={project._id}
+          index={index}
+          projectData={project}
+          onUpdateProject={onUpdateProject}
+          onClickArchiveBtn={onClickArchiveBtn}
+          darkMode={darkMode}
+        />
+    ));
+    setProjectList(projectList);
+  }
 
-      }else{
-        ProjectsList = (sortBy?sortedList: projects).map((project, index) => (
-          <Project
-            key={project._id}
-            index={index}
-            projectId={project._id}
-            name={project.projectName}
-            category={project.category || 'Unspecified'}
-            active={project.isActive}
-            onClickActive={this.onClickActive}
-            onUpdateProjectName={this.onUpdateProjectName}
-            onClickDelete={this.onClickDelete}
-            confirmDelete={this.confirmDelete}
-            darkMode={darkMode}
+  useEffect(() => {
+    props.fetchAllProjects();
+  }, []);
+
+  useEffect(() => {
+      generateProjectList(categorySelectedForSort, showStatus, sortedByName);
+      if (status !== 200) {
+        setModalData({
+          showModal: true,
+          modalMessage: error,
+          modalTitle: 'ERROR',
+          hasConfirmBtn: false,
+          hasInactiveBtn: false,
+        });
+      }
+  }, [categorySelectedForSort, showStatus, sortedByName, props.state.allProjects]);
+
+
+  return (
+    <>
+      <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
+        <div className="container py-3">
+          {fetching || !fetched ? <Loading /> : null}
+          <div className="d-flex align-items-center">
+          <h3 style={{ display: 'inline-block', marginRight: 10 }}>Projects</h3>
+          <EditableInfoModal
+            areaName="projectsInfoModal"
+            areaTitle="Projects"
+            fontSize={30}
+            isPermissionPage={true}
+            role={role}
           />
-        ))
-        }
-    }
+        </div>
 
-    return (
-      <React.Fragment>
-        <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
-          <div className="container py-3">
-            {fetching || !fetched ? <Loading /> : null}
-            <div className="d-flex align-items-center">
-            <h3 style={{ display: 'inline-block', marginRight: 10 }}>Projects</h3>
-            <EditableInfoModal
-              areaName="projectsInfoModal"
-              areaTitle="Projects"
-              fontSize={30}
-              isPermissionPage={true}
-              role={role}
+          <Overview numberOfProjects={numberOfProjects} numberOfActive={numberOfActive} />
+          {canPostProject ? <AddProject onAddNewProject={postProject} /> : null}
+
+          <table className="table table-bordered table-responsive-sm">
+            <thead>
+            <ProjectTableHeader 
+              onChange={onChangeCategory} 
+              selectedValue={categorySelectedForSort} 
+              showStatus={showStatus} 
+              selectStatus={onSelectStatus}
+              sorted={sortedByName}
+              handleSort = {handleSort}
               darkMode={darkMode}
             />
-          </div>
-
-            <Overview numberOfProjects={numberOfProjects} numberOfActive={numberOfActive} />
-            {canPostProject ? <AddProject addNewProject={this.postProject} /> : null}
-
-            <table className="table table-bordered table-responsive-sm">
-              <thead>
-              <ProjectTableHeader 
-                onChange={this.onChangeCategory} 
-                selectedValue= {categorySelectedForSort} 
-                showStatus={showStatus} 
-                selectStatus={this.onSelectStatus} 
-                handleSort = {this.handleSort}
-                darkMode={darkMode}
-              />
-              </thead>
-              <tbody>{ProjectsList}</tbody>
-            </table>
-          </div>
-
-          <ModalDelete
-            isOpen={showModalDelete}
-            closeModal={() => {
-              this.setState({ showModalDelete: false });
-            }}
-            confirmModal={() => this.confirmDelete()}
-            setInactiveModal={() => this.setInactiveProject()}
-            modalMessage={
-              (this.props.state.popupEditor.currPopup.popupContent
-                ? this.props.state.popupEditor.currPopup.popupContent.replace(
-                    '[project_name]',
-                    this.state.projectTarget.projectName,
-                  )
-                : '') || ''
-            }
-            modalTitle={Message.CONFIRM_DELETION}
-            darkMode={darkMode}
-          />
-
-          <ModalMsg
-            isOpen={showModalMsg}
-            closeModal={() => {
-              this.setState({ showModalMsg: false, trackModelMsg: false });
-            }}
-            modalMessage={Message.THIS_PROJECT_NAME_IS_ALREADY_TAKEN}
-            modalTitle={NOTICE}
-            darkMode={darkMode}
-          />
+            </thead>
+            <tbody>{projectList}</tbody>
+          </table>
         </div>
-      </React.Fragment>
-    );
-  }
+
+        <ModalTemplate
+          isOpen={modalData.showModal}
+          closeModal={onCloseModal}
+          confirmModal={modalData.hasConfirmBtn ? confirmArchive : null}
+          setInactiveModal={modalData.hasInactiveBtn ? setInactiveProject : null}
+          modalMessage={modalData.modalMessage}
+          modalTitle={modalData.modalTitle}
+        />
+      </div>
+    </>
+  );
 }
 
 const mapStateToProps = state => {
   return { state };
 };
+
 export default connect(mapStateToProps, {
   fetchAllProjects,
   postNewProject,
-  deleteProject,
   modifyProject,
+  clearError,
   getPopupById,
   hasPermission,
 })(Projects);
diff --git a/src/components/Projects/WBS/AddWBS/AddWBS.test.jsx b/src/components/Projects/WBS/AddWBS/__tests__/AddWBS.test.jsx
similarity index 99%
rename from src/components/Projects/WBS/AddWBS/AddWBS.test.jsx
rename to src/components/Projects/WBS/AddWBS/__tests__/AddWBS.test.jsx
index 8d08ce24f1..1f23f065c3 100644
--- a/src/components/Projects/WBS/AddWBS/AddWBS.test.jsx
+++ b/src/components/Projects/WBS/AddWBS/__tests__/AddWBS.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import AddWBS from './AddWBS';
+import AddWBS from '../AddWBS';
 import userEvent from '@testing-library/user-event'
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store'
diff --git a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.css b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.css
new file mode 100644
index 0000000000..a9ff8f7f41
--- /dev/null
+++ b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.css
@@ -0,0 +1,10 @@
+.hours-label {
+  font-weight: normal;
+  width: 75px;
+}
+.hours-input {
+  width: 20%;
+}
+.form-date {
+  width: 30%;
+}
\ No newline at end of file
diff --git a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
index f267522eeb..751919b7db 100644
--- a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';
 import { connect } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
@@ -12,6 +12,7 @@ import { DUE_DATE_MUST_GREATER_THAN_START_DATE } from '../../../../../languages/
 import 'react-day-picker/lib/style.css';
 import '../../../../Header/DarkMode.css'
 import TagsSearch from '../components/TagsSearch';
+import './AddTaskModal.css';
 
 const TINY_MCE_INIT_OPTIONS = {
   license_key: 'gpl',
@@ -34,14 +35,43 @@ function AddTaskModal(props) {
   // props from store 
   const { tasks, copiedTask, allMembers, allProjects, error, darkMode } = props;
 
+  const handleBestHoursChange = (e) => {
+    setHoursBest(e.target.value);
+  };
+  const handleWorstHoursChange = (e) => {
+    setHoursWorst(e.target.value);
+  };
+  const handleMostHoursChange = (e) => {
+    setHoursMost(e.target.value);
+  };
+  const handleEstimateHoursChange = (e) => {
+    setHoursEstimate(e.target.value);
+  };
+
+  const handleBestHoursBlur = () => {
+    calHoursEstimate();
+  };
+
+  const handleWorstHoursBlur = () => {
+    calHoursEstimate('hoursWorst');
+  };
+
+  const handleMostHoursBlur = () => {
+    calHoursEstimate('hoursMost');
+  };
+
   // states from hooks
   const defaultCategory = useMemo(() => {
     if (props.taskId) {
-      return tasks.find(({ _id }) => _id === props.taskId).category;
-    } 
-      return allProjects.projects.find(({ _id }) => _id === props.projectId).category;
-      
-  }, []);
+      const task =  tasks.find(({ _id }) => _id === props.taskId);
+      return task.category? task.category : 'Unspecified';
+    } else if (props.projectId) {
+      const project = allProjects.projects.find(({ _id }) => _id === props.projectId);
+      return project.category? project.category : 'Unspecified';
+    }
+    return 'Unspecified';
+  }, [props.taskId, props.projectId, tasks, allProjects.projects]);
+
   const [taskName, setTaskName] = useState('');
   const [priority, setPriority] = useState('Primary');
   const [resourceItems, setResourceItems] = useState([]);
@@ -320,17 +350,19 @@ function AddTaskModal(props) {
           </button>
         </ModalHeader>
         <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
-          <table className={`table table-bordered responsive ${fontColor}`}>
-            <tbody>
-              <tr>
-                <td scope="col" data-tip="WBS ID">
+          <div className="table table-bordered responsive">
+            <div>
+              <div className="add_new_task_form-group">
+                <span className={`add_new_task_form-label ${fontColor}`} data-tip="WBS ID">
                   WBS #
-                </td>
-                <td scope="col">{newTaskNum}</td>
-              </tr>
-              <tr>
-                <td scope="col">Task Name</td>
-                <td scope="col">
+                </span>
+
+                <span className={`add_new_task_form-input_area ${fontColor}`}>{newTaskNum}</span>
+              </div>
+              <div className="add_new_task_form-group" >
+                <span className={`add_new_task_form-label ${fontColor}`}>Task Name</span>
+                <span className="add_new_task_form-input_area">
+                  {/* Fix Task-name formatting - by Sucheta */}
                   <textarea
                     type="text"
                     rows="2"
@@ -339,22 +371,21 @@ function AddTaskModal(props) {
                     onKeyPress={e => setTaskName(e.target.value)}
                     value={taskName}
                   />
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Priority</td>
-                <td scope="col">
+                </span>
+              </div >
+              <div className='add_new_task_form-group'>
+                <span className={`add_new_task_form-label ${fontColor}`} >Priority</span>
+                <span className='add_new_task_form-input_area'>
                   <select id="priority" onChange={e => setPriority(e.target.value)} ref={priorityRef}>
                     <option value="Primary">Primary</option>
                     <option value="Secondary">Secondary</option>
                     <option value="Tertiary">Tertiary</option>
                   </select>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Resources</td>
-                <td scope="col">
-                  <div>
+                </span>
+              </div>
+              <div className="add_new_task_form-group">
+                <span className={`add_new_task_form-label ${fontColor}`}>Resources</span>
+                <span className="add_new_task_form-input_area">
                     <TagsSearch
                       placeholder="Add resources"
                       members={allMembers.filter(user=>user.isActive)}
@@ -363,12 +394,12 @@ function AddTaskModal(props) {
                       resourceItems={resourceItems}
                       disableInput={false}
                     />
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Assigned</td>
-                <td scope="col">
+                  
+                </span>
+              </div>
+              <div className="add_new_task_form-group">
+                <span className={`add_new_task_form-label ${fontColor}`} >Assigned</span>
+                <span className="add_new_task_form-input_area">
                   <div className="flex-row d-inline align-items-center" >
                     <div className="form-check form-check-inline">
                       <input
@@ -399,13 +430,13 @@ function AddTaskModal(props) {
                       </label>
                     </div>
                   </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Status</td>
-                <td scope="col">
-                  <div className="flex-row  d-inline align-items-center" >
-                    <div className="form-check form-check-inline">
+                </span>
+              </div>
+              <div className="add_new_task_form-group">
+                <span className= {`add_new_task_form-label ${fontColor}`}>Status</span>
+                <span className="add_new_task_form-input_area">
+                 <div className="d-flex align-items-center flex-wrap"> 
+                  <span className="form-check form-check-inline mr-5">
                       <input
                         className="form-check-input"
                         type="radio"
@@ -418,8 +449,8 @@ function AddTaskModal(props) {
                       <label className={`form-check-label ${fontColor}`} htmlFor="active">
                         Active
                       </label>
-                    </div>
-                    <div className="form-check form-check-inline">
+                    </span>
+                  <span className="form-check">
                       <input
                         className="form-check-input"
                         type="radio"
@@ -432,22 +463,25 @@ function AddTaskModal(props) {
                       <label className={`form-check-label ${fontColor}`} htmlFor="notStarted">
                         Not Started
                       </label>
-                    </div>
-                    <div className="form-check form-check-inline">
-                      <input
-                        className="form-check-input"
-                        type="radio"
-                        id="paused"
-                        name="status"
-                        value="Paused"
-                        checked={status === 'Paused'}
-                        onChange={(e) => setStatus(e.target.value)}
-                      />
-                      <label className={`form-check-label ${fontColor}`} htmlFor="paused">
-                        Paused
-                      </label>
-                    </div>
-                    <div className="form-check form-check-inline">
+                  </span>
+                 </div>
+                 <div className="d-flex align-items-center flex-wrap">
+                  <span className="form-check form-check-inline mr-5">
+                        <input
+                          className="form-check-input"
+                          type="radio"
+                          id="paused"
+                          name="status"
+                          value="Paused"
+                          checked={status === 'Paused'}
+                          onChange={(e) => setStatus(e.target.value)}
+                        />
+                        <label className={`form-check-label ${fontColor}`} htmlFor="paused">
+                          Paused
+                        </label>
+                    
+                  </span>
+                  <span className="form-check form-check-inline">
                       <input
                         className="form-check-input"
                         type="radio"
@@ -460,17 +494,18 @@ function AddTaskModal(props) {
                       <label className={`form-check-label ${fontColor}`} htmlFor="complete">
                         Complete
                       </label>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col" className="w-100">
+                   
+                  </span>
+                 </div>
+                </span>
+              </div>
+              <div className="add_new_task_form-group">
+                <span className={`add_new_task_form-label ${fontColor}`}>
                   Hours
-                </td>
-                <td scope="col" className="w-100">
-                  <div className="py-2 flex-responsive">
-                    <label htmlFor="bestCase" className={`text-nowrap mr-2 w-25 mr-auto ${fontColor}`} style={{ fontWeight: 'normal' }}>
+                </span>
+                <span className="add_new_task_form-input_area">
+                  <div className="py-2 d-flex align-items-center justify-content-sm-around">
+                    <label htmlFor="bestCaseInput" className={`hours-label text-nowrap align-self-center ${fontColor}`}>
                       Best-case
                     </label>
                     <input
@@ -478,19 +513,20 @@ function AddTaskModal(props) {
                       min="0"
                       max="500"
                       value={hoursBest}
-                      onChange={e => setHoursBest(e.target.value)}
-                      onBlur={() => calHoursEstimate()}
-                      id="bestCase"
-                      className="w-25"
+                      onChange={handleBestHoursChange}
+                      onBlur={handleBestHoursBlur}
+                      id="bestCaseInput"
+                      className='hours-input'
                     />
-                    <div className="warning">
+                    
+                  </div>
+                  <div className="warning">
                       {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
+                        ? 'The number of hours must be less than other cases'
                         : ''}
-                    </div>
                   </div>
-                  <div className="py-2 flex-responsive">
-                    <label htmlFor="worstCase" className={`text-nowrap mr-2 w-25 mr-auto ${fontColor}`} style={{ fontWeight: 'normal' }}>
+                  <div className="py-2 d-flex align-items-center justify-content-sm-around">
+                    <label htmlFor="worstCaseInput" className={`hours-label text-nowrap align-self-center ${fontColor}`}>
                       Worst-case
                     </label>
                     <input
@@ -498,18 +534,21 @@ function AddTaskModal(props) {
                       min={hoursBest}
                       max="500"
                       value={hoursWorst}
-                      onChange={e => setHoursWorst(e.target.value)}
-                      onBlur={() => calHoursEstimate('hoursWorst')}
-                      className="w-25"
+                      onChange={handleWorstHoursChange}
+                      onBlur={handleWorstHoursBlur}
+                      id='worstCaseInput'
+                      className='hours-input'
                     />
-                    <div className="warning">
+                    
+                  </div>
+                        {/* Moved warning outside of the parent div so that the input field does not get affected , now the warnings should appear in a new line - Sucheta*/}
+                  <div className="warning">
                       {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
+                        ? 'The number of hours must be higher than other cases'
                         : ''}
                     </div>
-                  </div>
-                  <div className="py-2 flex-responsive">
-                    <label htmlFor="mostCase" className={`text-nowrap mr-2 w-25 mr-auto ${fontColor}`} style={{ fontWeight: 'normal' }}>
+                  <div className="py-2 d-flex align-items-center justify-content-sm-around">
+                    <label htmlFor="mostCaseInput" className={`hours-label text-nowrap align-self-center ${fontColor}`}>
                       Most-case
                     </label>
                     <input
@@ -517,18 +556,20 @@ function AddTaskModal(props) {
                       min="0"
                       max="500"
                       value={hoursMost}
-                      onChange={e => setHoursMost(e.target.value)}
-                      onBlur={() => calHoursEstimate('hoursMost')}
-                      className="w-25"
+                      onChange={handleMostHoursChange}
+                      onBlur={handleMostHoursBlur}
+                      id='mostCaseInput'
+                      className='hours-input'
                     />
-                    <div className="warning">
+                    
+                  </div>
+                  <div className="warning">
                       {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
+                        ? 'The number of hours must range between best and worst cases'
                         : ''}
                     </div>
-                  </div>
-                  <div className="py-2 flex-responsive">
-                    <label htmlFor="Estimated" className={`text-nowrap mr-2 w-25 mr-auto ${fontColor}`} style={{ fontWeight: 'normal' }}>
+                  <div className="py-2 d-flex align-items-center justify-content-sm-around">
+                    <label htmlFor="estimatedInput" className={`hours-label text-nowrap align-self-center ${fontColor}`}>
                       Estimated
                     </label>
                     <input
@@ -536,15 +577,16 @@ function AddTaskModal(props) {
                       min="0"
                       max="500"
                       value={hoursEstimate}
-                      onChange={e => setHoursEstimate(e.target.value)}
-                      className="w-25"
+                      onChange={handleEstimateHoursChange}
+                      id='estimatedInput'
+                      className='hours-input'
                     />
                   </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Links</td>
-                <td scope="col">
+                </span>
+              </div>
+              <div className="d-flex border align-items-center" >
+                <span className={`add_new_task_form-label ${fontColor}`}>Links</span>
+                <span className="add_new_task_form-input_area">
                   <div className="d-flex flex-row">
                     <input
                       type="text"
@@ -562,7 +604,7 @@ function AddTaskModal(props) {
                       onClick={addLink}
                     >
                       <i className={`fa fa-plus ${fontColor}`} aria-hidden="true" />
-                    </button>
+                    </button> 
                   </div>
                   <div>
                     {links.map((link, i) =>
@@ -576,11 +618,11 @@ function AddTaskModal(props) {
                       ) : null,
                     )}
                   </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Category</td>
-                <td scope="col">
+                </span>
+              </div>
+              <div className="d-flex border align-items-center">
+                <span  className= {`add_new_task_form-label ${fontColor}`}>Category</span>
+                <span  className="add_new_task_form-input_area">
                   <select value={category} onChange={e => setCategory(e.target.value)}>
                     {categoryOptions.map(cla => (
                       <option value={cla.value} key={cla.value}>
@@ -588,10 +630,10 @@ function AddTaskModal(props) {
                       </option>
                     ))}
                   </select>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col" colSpan="2">
+                </span>
+              </div>
+              <div >
+                <div scope="col" colSpan="2" className={`border p-1 ${fontColor}`} >
                   Why this Task is Important
                   <Editor
                     tinymceScriptSrc="/tinymce/tinymce.min.js"
@@ -602,10 +644,10 @@ function AddTaskModal(props) {
                     value={whyInfo}
                     onEditorChange={content => setWhyInfo(content)}
                   />
-                </td>
-              </tr>
-              <tr>
-                <td scope="col" colSpan="2">
+                </div>
+              </div>
+              <div>
+                <div scope="col" colSpan="2" className={`border p-1 ${fontColor}`}>
                   Design Intent
                   <Editor
                     tinymceScriptSrc="/tinymce/tinymce.min.js"
@@ -616,10 +658,10 @@ function AddTaskModal(props) {
                     value={intentInfo}
                     onEditorChange={content => setIntentInfo(content)}
                   />
-                </td>
-              </tr>
-              <tr>
-                <td scope="col" colSpan="2">
+                </div>
+              </div>
+              <div>
+                <div scope="col" colSpan="2" className={`border p-1 ${fontColor}`}> 
                   Endstate
                   <Editor
                     tinymceScriptSrc="/tinymce/tinymce.min.js"
@@ -630,11 +672,11 @@ function AddTaskModal(props) {
                     value={endstateInfo}
                     onEditorChange={content => setEndstateInfo(content)}
                   />
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">Start Date</td>
-                <td scope="col">
+                </div>
+              </div>
+              <div className="d-flex border">
+                <span scope="col" className={`form-date p-1 ${fontColor}`}>Start Date</span>
+                <span scope="col" className="border-left p-1">
                   <div>
                     <DayPickerInput
                       format={FORMAT}
@@ -647,11 +689,11 @@ function AddTaskModal(props) {
                       {dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
                     </div>
                   </div>
-                </td>
-              </tr>
-              <tr>
-                <td scope="col">End Date</td>
-                <td scope="col">
+                </span>
+              </div>
+              <div className="d-flex border align-items-center">
+                <span scope="col" className={`form-date p-1 ${fontColor}`}>End Date</span>
+                <span scope="col" className='border-left p-1'>
                   <DayPickerInput
                     format={FORMAT}
                     formatDate={formatDate}
@@ -662,10 +704,10 @@ function AddTaskModal(props) {
                   <div className="warning">
                     {dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                </span>
+              </div>
+            </div>
+          </div>
         </ModalBody>
         <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
           <Button color="primary" onClick={addNewTask} disabled={taskName === '' || hoursWarning || isLoading} style={darkMode ? boxStyleDark : boxStyle}>
diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
index 9654a43e94..aad68e1137 100644
--- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
@@ -55,6 +55,7 @@ function EditTaskModal(props) {
   const [startedDate, setStartedDate] = useState();
   const [dueDate, setDueDate] = useState();
   const [dateWarning, setDateWarning] = useState(false);
+  const [currentMode, setCurrentMode] = useState("");
 
   const res = [...(resourceItems || [])];
   const categoryOptions = [
@@ -87,6 +88,12 @@ function EditTaskModal(props) {
   * -------------------------------- functions --------------------------------
   */
   const toggle = () => setModal(!modal);
+  
+  // set different mode while show modal through different button
+  const handleModalShow = (mode) => {
+    setCurrentMode(mode);
+    toggle();
+  }
 
   const removeResource = userID => {
     const newResource = resourceItems.filter(item => item.userID !== userID);
@@ -195,11 +202,15 @@ function EditTaskModal(props) {
       endstateInfo,
       category,
     };
+
+    const updateTaskDirectly = (currentMode === "Edit");
+    console.log({canSuggestTask, canUpdateTask, updateTaskDirectly});
+
     props.setIsLoading?.(true);
     await props.updateTask(
       props.taskId,
       updatedTask,
-      canUpdateTask,
+      updateTaskDirectly,
       oldTask,
     );
     props.setTask?.(updatedTask);
@@ -268,7 +279,7 @@ function EditTaskModal(props) {
       <Modal isOpen={modal} toggle={toggle} className={darkMode ? 'dark-mode text-light' : ''}>
         <ReactTooltip delayShow={300}/>
         <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>
-          {canUpdateTask ? 'Edit' : canSuggestTask ? 'Suggest' : 'View'}
+          {currentMode}
         </ModalHeader>
         <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
           <table
@@ -440,12 +451,12 @@ function EditTaskModal(props) {
                   </td>
               </tr>
               <tr>
-                <td scope="col" data-tip="Hours - Best-case">
+                <td scope="col">
                   Hours
                 </td>
-                <td scope="col" data-tip="Hours - Best-case" className="w-100">
+                <td scope="col" className="w-100">
                   <div className="py-2 flex-responsive">
-                    <label htmlFor="bestCase" className={`text-nowrap mr-2 w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
+                    <label htmlFor="bestCase" className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
                       Best-case
                     </label>
                     {ReadOnlySectionWrapper(
@@ -457,20 +468,20 @@ function EditTaskModal(props) {
                         onChange={e => setHoursBest(e.target.value)}
                         onBlur={() => calHoursEstimate()}
                         id="bestCase"
-                        className="w-25"
+                        className="m-auto"
                       />,
                       editable,
                       hoursBest,
                       {componentOnly:true}
                     )}
-                    <div className="warning">
-                      {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
-                        : ''}
-                    </div>
+                  </div>
+                  <div className="warning">
+                    {hoursWarning
+                      ? 'The number of hours must be less than other cases'
+                      : ''}
                   </div>
                   <div className="py-2 flex-responsive">
-                    <label htmlFor="worstCase" className={`text-nowrap mr-2 w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
+                    <label htmlFor="worstCase" className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
                       Worst-case
                     </label>
                     {ReadOnlySectionWrapper(
@@ -481,20 +492,20 @@ function EditTaskModal(props) {
                         value={hoursWorst}
                         onChange={e => setHoursWorst(e.target.value)}
                         onBlur={() => calHoursEstimate('hoursWorst')}
-                        className="w-25"
+                        className="m-auto"
                       />,
                       editable,
                       hoursWorst,
                       {componentOnly:true}
                     )}
-                    <div className="warning">
-                      {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
-                        : ''}
-                    </div>
+                  </div>
+                  <div className="warning">
+                    {hoursWarning
+                      ? 'The number of hours must be higher than other cases'
+                      : ''}
                   </div>
                   <div className="py-2 flex-responsive">
-                    <label htmlFor="mostCase" className={`text-nowrap mr-2 w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
+                    <label htmlFor="mostCase" className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
                       Most-case
                     </label>
                     {ReadOnlySectionWrapper(
@@ -505,20 +516,20 @@ function EditTaskModal(props) {
                         value={hoursMost}
                         onChange={e => setHoursMost(e.target.value)}
                         onBlur={() => calHoursEstimate('hoursMost')}
-                        className="w-25"
+                        className="m-auto"
                       />,
                       editable,
                       hoursMost,
                       {componentOnly:true}
                     )}
-                    <div className="warning">
-                      {hoursWarning
-                        ? 'Hours - Best-case < Hours - Most-case < Hours - Most-case'
-                        : ''}
-                    </div>
+                  </div>
+                  <div className="warning">
+                    {hoursWarning
+                      ? 'The number of hours must range between best and worst cases'
+                      : ''}
                   </div>
                   <div className="py-2 flex-responsive">
-                    <label htmlFor="Estimated" className={`text-nowrap mr-2 w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
+                    <label htmlFor="Estimated" className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}>
                       Estimated
                     </label>
                     {ReadOnlySectionWrapper(
@@ -528,7 +539,7 @@ function EditTaskModal(props) {
                         max="500"
                         value={hoursEstimate}
                         onChange={e => setHoursEstimate(e.target.value)}
-                        className="w-25"
+                        className="m-auto"
                       />,
                       editable,
                       hoursEstimate,
@@ -714,9 +725,24 @@ function EditTaskModal(props) {
           </ModalFooter>
         ) : null}
       </Modal>
-      <Button color="primary" size="sm" onClick={toggle} style={darkMode ? boxStyleDark : boxStyle}>
-        {canUpdateTask ? 'Edit' : canSuggestTask ? 'Suggest' : 'View'}
-      </Button>
+      {
+        canUpdateTask &&
+        <Button className='mr-1' color="primary" size="sm" onClick={e => handleModalShow("Edit")} style={darkMode ? boxStyleDark : boxStyle}>
+        Edit
+        </Button>
+      }
+      {
+        canSuggestTask &&
+        <Button className='mr-1' color="primary" size="sm" onClick={e => handleModalShow("Suggest")} style={darkMode ? boxStyleDark : boxStyle}>
+        Suggest
+        </Button>
+      }
+      {
+        !canUpdateTask && !canSuggestTask &&
+        <Button className='mr-1' color="primary" size="sm" onClick={e => handleModalShow("View")} style={darkMode ? boxStyleDark : boxStyle}>
+        View
+        </Button>
+      }
     </div>
   );
 };
diff --git a/src/components/Projects/WBS/WBSDetail/wbs.css b/src/components/Projects/WBS/WBSDetail/wbs.css
index e8ca35ec2a..8c89cdbbe3 100644
--- a/src/components/Projects/WBS/WBSDetail/wbs.css
+++ b/src/components/Projects/WBS/WBSDetail/wbs.css
@@ -193,3 +193,24 @@
 
   }
 }
+
+
+.add_new_task_form-group{
+  width: 100%;
+  padding: 0;
+  display: flex;
+  border: .01em solid #cdcbcb;
+}
+
+.add_new_task_form-label{
+  width: 30%;
+  padding: .5em .25em;
+  margin-left: .25em;
+}
+.add_new_task_form-input_area{
+  width: 70%;
+  padding: 0;
+  margin: .25em;
+  border-left: 1px solid #bbb;
+  padding-left: .25em;
+}
\ No newline at end of file
diff --git a/src/components/Projects/Projects.test.jsx b/src/components/Projects/__tests__/Projects.test.jsx
similarity index 98%
rename from src/components/Projects/Projects.test.jsx
rename to src/components/Projects/__tests__/Projects.test.jsx
index f76d721e5d..118855cee7 100644
--- a/src/components/Projects/Projects.test.jsx
+++ b/src/components/Projects/__tests__/Projects.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Projects } from './Projects';
+import { Projects } from '../Projects';
 import { createMemoryHistory } from 'history';
 import {
   PROJECTS,
@@ -9,7 +9,7 @@ import {
   ACTIVE,
   MEMBERS,
   WBS,
-} from './../../languages/en/ui';
+} from '../../../languages/en/ui';
 
 import { Router } from 'react-router-dom';
 
diff --git a/src/components/Reports/LostTime/LostTimeHistory.jsx b/src/components/Reports/LostTime/LostTimeHistory.jsx
index 3ce35f9ef7..c5ab9c3ab5 100644
--- a/src/components/Reports/LostTime/LostTimeHistory.jsx
+++ b/src/components/Reports/LostTime/LostTimeHistory.jsx
@@ -19,7 +19,6 @@ function LostTimeHistory(props) {
   const toDate = props.endDate.toLocaleDateString('en-CA');
 
   const idList = props.allData.map(data => data._id);
-  const canEditTimeEntry = props.hasPermission('editTimeEntry');
 
   useEffect(() => {
     loadLostTimeEntries(type, idList, fromDate, toDate);
@@ -121,22 +120,20 @@ function LostTimeHistory(props) {
               </div>
             )}
           </td>
-          {canEditTimeEntry &&
-            <td>
-              <EditHistoryModal
-                _id={entry._id}
-                dataId={entry.dataId}
-                dateOfWork={entry.date}
-                hours={entry.hours}
-                minutes={entry.minutes}
-                isTangible={entry.isTangible}
-                entryType={entry.entryType}
-                allData={props.allData}
-                reload={reload}
-                darkMode={darkMode}
-              />
-            </td>
-          }
+          <td>
+            <EditHistoryModal
+              _id={entry._id}
+              dataId={entry.dataId}
+              dateOfWork={entry.date}
+              hours={entry.hours}
+              minutes={entry.minutes}
+              isTangible={entry.isTangible}
+              entryType={entry.entryType}
+              allData={props.allData}
+              reload={reload}
+              darkMode={darkMode}
+            />
+          </td>
         </tr>
       ));
     }
@@ -169,11 +166,9 @@ function LostTimeHistory(props) {
               <th scope="col">
                 Tangible
               </th>
-              {canEditTimeEntry && 
-                <th scope="col">
-                  Action
-                </th>
-              }
+              <th scope="col">
+                Action
+              </th>
             </tr>
           </thead>
           <tbody>{entriesRow}</tbody>
diff --git a/src/components/Reports/PeopleReport/PeopleReport.jsx b/src/components/Reports/PeopleReport/PeopleReport.jsx
index 839ad65c94..b5b1ee250c 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.jsx
+++ b/src/components/Reports/PeopleReport/PeopleReport.jsx
@@ -28,7 +28,7 @@ import { getPeopleReportData } from './selectors';
 import { PeopleTasksPieChart } from './components';
 import ToggleSwitch from '../../UserProfile/UserProfileEdit/ToggleSwitch';
 import { Checkbox } from '../../common/Checkbox';
-import {updateRehireableStatus} from '../../../actions/userManagement'
+import { updateRehireableStatus } from '../../../actions/userManagement'
 
 class PeopleReport extends Component {
   constructor(props) {
@@ -47,7 +47,7 @@ class PeopleReport extends Component {
       // eslint-disable-next-line react/no-unused-state
       isAssigned: '',
       isActive: '',
-      isRehireable: false,
+      isRehireable: true,
       // eslint-disable-next-line react/no-unused-state
       priority: '',
       // eslint-disable-next-line react/no-unused-state
@@ -441,10 +441,10 @@ class PeopleReport extends Component {
         >
           <div className={`report-stats ${darkMode ? 'text-light' : ''}`}>
             <p>
-              <Link to={`/userProfile/${_id}`} 
-                    title="View Profile" 
-                    className={darkMode ? 'text-light font-weight-bold' : ''}
-                    style={{fontSize: "24px"}}>
+              <Link to={`/userProfile/${_id}`}
+                title="View Profile"
+                className={darkMode ? 'text-light font-weight-bold' : ''}
+                style={{ fontSize: "24px" }}>
                 {firstName} {lastName}
               </Link>
             </p>
@@ -452,16 +452,16 @@ class PeopleReport extends Component {
             <p>Title: {jobTitle}</p>
 
             {/* {endDate ? ( */}
-              <div className="rehireable">
-                <Checkbox
-                  value={isRehireable}
-                  onChange={() => this.setRehireable(!isRehireable)}
-                  label="Rehireable"
-                  darkMode={darkMode}
-                  backgroundColorCN={darkMode ? "bg-yinmn-blue" : ""}
-                  textColorCN={darkMode ? "text-light" : ""}
-                />
-              </div>
+            <div className="rehireable">
+              <Checkbox
+                value={isRehireable}
+                onChange={() => this.setRehireable(!isRehireable)}
+                label="Rehireable"
+                darkMode={darkMode}
+                backgroundColorCN={darkMode ? "bg-yinmn-blue" : ""}
+                textColorCN={darkMode ? "text-light" : ""}
+              />
+            </div>
             {/* ) : (
               ''
             )} */}
@@ -516,7 +516,7 @@ class PeopleReport extends Component {
     return (
       <div className={`container-people-wrapper ${darkMode ? 'bg-oxford-blue' : ''}`}>
         <ReportPage renderProfile={renderProfileInfo} darkMode={darkMode}>
-          <div className={`people-report-time-logs-wrapper ${tangibleHoursReportedThisWeek === 0 ? "auto-width-report-time-logs-wrapper": ""}`}>
+          <div className={`people-report-time-logs-wrapper ${tangibleHoursReportedThisWeek === 0 ? "auto-width-report-time-logs-wrapper" : ""}`}>
             <ReportPage.ReportBlock
               firstColor="#ff5e82"
               secondColor="#e25cb2"
@@ -561,10 +561,10 @@ class PeopleReport extends Component {
             </ReportPage.ReportBlock>
           </div>
 
-          <PeopleTasksPieChart darkMode={darkMode}/>
+          <PeopleTasksPieChart darkMode={darkMode} />
           <div className="mobile-people-table">
             <ReportPage.ReportBlock darkMode={darkMode}>
-              <div className={`intro_date ${darkMode? 'text-light' : ''}`}>
+              <div className={`intro_date ${darkMode ? 'text-light' : ''}`}>
                 <h4>Tasks contributed</h4>
               </div>
 
@@ -580,7 +580,7 @@ class PeopleReport extends Component {
                     timeEntries={timeEntries}
                   />
                   <div className="visualizationDiv">
-                    <TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} darkMode={darkMode}/>
+                    <TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} darkMode={darkMode} />
                   </div>
                   <div className="visualizationDiv">
                     <InfringementsViz
@@ -599,7 +599,7 @@ class PeopleReport extends Component {
                       />
                     </div>
                     <div className="BadgeSummaryPreviewDiv">
-                      <BadgeSummaryPreview badges={userProfile.badgeCollection} darkMode={darkMode}/>
+                      <BadgeSummaryPreview badges={userProfile.badgeCollection} darkMode={darkMode} />
                     </div>
                   </div>
                 </div>
diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.css b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.css
index 2de6bea7cc..ed455025c3 100644
--- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.css
+++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.css
@@ -7,6 +7,20 @@
   margin-bottom: 12px;
 }
 
+.project-member-table-id-column {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.project-member-table-name-column {
+  overflow-wrap: anywhere;
+}
+
+.project-member-table-active-column {
+  text-align: center;
+}
+
 .reports-table-head-members {
   background-color: #eee7f8;  
   display: grid;
@@ -17,6 +31,7 @@
   padding: 0 16px;
   border-bottom: 3px solid #f8f7f8;
   border-radius: 4px;
+  text-align: left;
 }
 
 .project-member-table-row {
@@ -27,6 +42,7 @@
   align-items: center;
   padding: 0 16px;
   border-bottom: 3px solid #f8f7f8;
+  text-align: left;
 }
 
 
@@ -45,10 +61,6 @@
 }
 
 @media screen and (max-width: 1100px) {
-  .project-member-table {
-    max-width: 100vw;
-    margin-left: 0.5rem;
-  }
   .project-member-table-title {
     text-align: center;
     margin-bottom: 12px;
diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
index c197a156e3..a0cad893ee 100644
--- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
+++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
@@ -2,6 +2,7 @@ import { Stub } from '../../common/Stub';
 import React, { useEffect, useState } from 'react';
 import './ProjectMemberTable.css';
 import { Link } from 'react-router-dom';
+import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
 
 export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) => {
   const [allMemberList, setAllMemberList] = useState([]);
@@ -41,7 +42,7 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={darkMode ? "text-light" : ""}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={`project-member-table-name-column ${darkMode ? "text-light" : ""}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`}          
         </div>
@@ -57,7 +58,10 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div>{window.innerWidth >= 1100 ? member._id : member._id.substring(0, 10)}</div>      
+      <div className='project-member-table-id-column'>
+        <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
+        {member._id}
+      </div> 
     </div>
   ));
 
@@ -66,7 +70,7 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile" className={darkMode ? 'text-light' : ''}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile" className={`project-member-table-name-column ${darkMode ? 'text-light' : ''}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`} 
         </div>
@@ -82,7 +86,10 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div>{window.innerWidth >= 1100 ? member._id : member._id.substring(0, 10)}</div>    
+      <div className='project-member-table-id-column'>
+        <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
+        {member._id}
+      </div>     
     </div>
   ));
 
@@ -113,7 +120,7 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
       <div className={`reports-table-head-members ${darkMode ? 'bg-space-cadet' : ''}`}>
         <div className="reports-table-head-cell">#</div>
         <div className="reports-table-head-cell">Name</div>
-        <div className="reports-table-head-cell">Active</div>
+        <div className="reports-table-head-cell project-member-table-active-column">Active</div>
         <div className="reports-table-head-cell">ID</div>
       </div>
       <div>
diff --git a/src/components/Reports/ProjectReport/ProjectReport.css b/src/components/Reports/ProjectReport/ProjectReport.css
index 57e9f36922..054fd770e5 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.css
+++ b/src/components/Reports/ProjectReport/ProjectReport.css
@@ -4,10 +4,6 @@
   row-gap: 40px;
 }
 
-.wbs-and-members-blocks {
-  height: 450px;
-}
-
 @media (min-width: 1180px) {
   .wbs-and-members-blocks-wrapper {
     grid-auto-flow: column;
diff --git a/src/components/Reports/TeamReport/__tests__/TeamReport.test.js b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js
new file mode 100644
index 0000000000..cb9d5dad16
--- /dev/null
+++ b/src/components/Reports/TeamReport/__tests__/TeamReport.test.js
@@ -0,0 +1,271 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import TeamReport from '../TeamReport';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import { rolesMock } from '__tests__/mockStates';
+
+import axios from 'axios';
+
+const match = {params:{teamId:"team123"}}
+
+const mockStore = configureStore([thunk]);
+
+const auth={user: {
+  permissions: {
+    frontPermissions: [],
+    backPermissions: [],
+  },
+  role: 'Manager',
+  userid:'user123'
+}}
+
+const theme={darkMode:false}
+
+let store;
+
+const team = {
+  _id: "team2",
+  modifiedDatetime: '2024-04-04T12:00:00.000+00:00',
+  teamName: "team name 2",
+  createdDatetime: '2018-04-04T17:59:18.717+00:00',
+  __v: 0,
+  isActive: true,
+  members:[]
+}
+
+beforeEach(() => {
+  store = mockStore({
+    auth: auth,
+    theme:theme,
+    team:team,
+    role: rolesMock
+  })
+});
+
+jest.mock('axios');
+
+describe("Team Report component",()=>{
+
+  it("renders without crashing", async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+  })
+  it('check if team not found message is displaying as expected when there are no teams', async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+
+    const testStore = mockStore({
+      auth: auth,
+      theme:theme,
+      role: rolesMock
+    })
+    render(<Provider store={testStore}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Team not found!')).toBeInTheDocument();
+    })
+  })
+  it('check if the team name is getting displayed when the team is present', async ()=>{
+
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getAllByText('team name 2')[0]).toBeInTheDocument()
+    })
+  })
+  it('check if the created date and its is getting displayed when the team is present', async ()=>{
+
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Apr-04-18')).toBeInTheDocument()
+      expect(screen.getByText('Created Date')).toBeInTheDocument()
+    })
+    
+  })
+  it('check if team ID header and its value is getting displayed when the team is present',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Team ID\:\ team2')).toBeInTheDocument()
+    })
+  })
+  it('check if Last updated header and its value is getting displayed when the team is present',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Last updated\:\Apr-04-24')).toBeInTheDocument()
+    })
+  })
+  it('check if Number of Members and its value is getting displayed as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getAllByText('Number of Members')[0]).toBeInTheDocument()
+    })
+  })
+  it('check if Total Team Blue Squares, Weekly Committed Hours, Total Worked Hours This Week gets displayed as expected', async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getAllByText('Total Team Blue Squares')[0]).toBeInTheDocument()
+      expect(screen.getAllByText('Weekly Committed Hours')[0]).toBeInTheDocument()
+      expect(screen.getAllByText('Total Worked Hours This Week')[0]).toBeInTheDocument()
+    })
+  })
+  it('check if Breakdown of Weekly Hours So Far This Week header gets displayed as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Breakdown of Weekly Hours So Far This Week')).toBeInTheDocument()
+    })
+  })
+  it('check Name, Created After, Modified After header displays as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getAllByText('Name')[1]).toBeInTheDocument()
+      expect(screen.getByText('Created After')).toBeInTheDocument()
+      expect(screen.getByText('Modified After')).toBeInTheDocument()
+    })
+  })
+  it('check All, Team, Status header displays as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('All')).toBeInTheDocument()
+      expect(screen.getByText('Team')).toBeInTheDocument()
+      expect(screen.getByText('Status')).toBeInTheDocument()
+    })
+  })
+  it('check Team Members, ID, Created At header displays as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Team Members')).toBeInTheDocument()
+      expect(screen.getByText('ID')).toBeInTheDocument()
+      expect(screen.getByText('Created At')).toBeInTheDocument()
+    })
+  })
+  it('check if date picker for Created After works as expected when the correct date is given',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+    const datePickerElement = container.querySelector('[id="search-by-startDate"]')
+    fireEvent.change(datePickerElement, { target: { value: '05/29/2024' } });
+    const updatedDatePicker = container.querySelector('[id="search-by-startDate"]')
+    expect(updatedDatePicker.value).toBe('05/29/2024')
+  })
+  it('check if date picker for Created After gives updated date when invalid date is given',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+    const datePickerElement = container.querySelector('[id="search-by-startDate"]')
+    fireEvent.change(datePickerElement, { target: { value: '02/31/2024' } });
+    const updatedDatePicker = container.querySelector('[id="search-by-startDate"]')
+    expect(updatedDatePicker.value).toBe('03/02/2024')
+  })
+  it('check Active checkbox works as expected when the box is checked',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+    const activeCheckbox = container.querySelector('[id="active"]')
+    expect(activeCheckbox).not.toBeChecked()
+    fireEvent.click(activeCheckbox)
+    expect(activeCheckbox).toBeChecked()
+  })
+  it('check Inactive checkbox works as expected when the box is checked',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+    const inActiveCheckbox = container.querySelector('[id="inactive"]')
+    expect(inActiveCheckbox).not.toBeChecked()
+    fireEvent.click(inActiveCheckbox)
+    expect(inActiveCheckbox).toBeChecked()
+  })
+  it('check if loading message is getting displayed when all teams is empty',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(screen.getByText('Loading...')).toBeInTheDocument()
+    })
+  })
+  it('check if Name input element is working as expected',async ()=>{
+    axios.get.mockResolvedValue({
+      status: 200,
+      data: [],
+    });
+    const {container} = render(<Provider store={store}><TeamReport match={match}/></Provider>)
+    await waitFor(()=>{
+      expect(container.querySelector('.report-page-profile')).toBeInTheDocument()
+    })
+    const inputElement = container.querySelector('[id="search-by-name"]')
+    fireEvent.change(inputElement, { target: { value: 'team 1' } });
+    expect(inputElement.value).toBe('team 1')
+  })
+
+})
diff --git a/src/components/Reports/TeamTable.jsx b/src/components/Reports/TeamTable.jsx
index 6a6aaf0598..eaac7b4589 100644
--- a/src/components/Reports/TeamTable.jsx
+++ b/src/components/Reports/TeamTable.jsx
@@ -17,7 +17,7 @@ function TeamTable({ allTeams, auth, hasPermission, darkMode }) {
 
     const [teamCode, setTeamCode] = useState(team.teamCode);
     const [hasError, setHasError] = useState(false);
-    const fullCodeRegex = /^([a-zA-Z]-[a-zA-Z]{3}|[a-zA-Z]{5})$/;
+    const fullCodeRegex = /^([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7})$/;
 
     const handleOnChange = (value, team) => {
       updateTeam(team.teamName, team._id, team.isActive, value);
@@ -54,7 +54,7 @@ function TeamTable({ allTeams, auth, hasPermission, darkMode }) {
                 invalid={hasError}
               />
               <FormFeedback>
-              The code format must be A-AAA or AAAAA.
+                 NOT SAVED! The code must be between 5 and 7 characters long
               </FormFeedback>
             </FormGroup>
           </div>
diff --git a/src/components/Reports/TotalReport/TotalPeopleReport.jsx b/src/components/Reports/TotalReport/TotalPeopleReport.jsx
index a12ba02164..8340b77462 100644
--- a/src/components/Reports/TotalReport/TotalPeopleReport.jsx
+++ b/src/components/Reports/TotalReport/TotalPeopleReport.jsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
 import './TotalReport.css';
@@ -10,8 +10,8 @@ import Loading from '../../common/Loading';
 
 function TotalPeopleReport(props) {
   const { startDate, endDate, userProfiles, darkMode } = props;
-  const [dataLoading, setDataLoading] = useState(true);
-  const [dataRefresh, setDataRefresh] = useState(false);
+  const [totalPeopleReportDataLoading, setTotalPeopleReportDataLoading] = useState(true);
+  const [totalPeopleReportDataReady, setTotalPeopleReportDataReady] = useState(false);
   const [showTotalPeopleTable, setShowTotalPeopleTable] = useState(false);
   const [allTimeEntries, setAllTimeEntries] = useState([]);
   const [allPeople, setAllPeople] = useState([]);
@@ -20,12 +20,12 @@ function TotalPeopleReport(props) {
   const [showMonthly, setShowMonthly] = useState(false);
   const [showYearly, setShowYearly] = useState(false);
 
-  const fromDate = startDate.toLocaleDateString('en-CA');
-  const toDate = endDate.toLocaleDateString('en-CA');
+  const fromDate = useMemo(() => startDate.toLocaleDateString('en-CA'), [startDate]);
+  const toDate = useMemo(() => endDate.toLocaleDateString('en-CA'), [endDate]);
 
-  const userList = userProfiles.map(user => user._id);
+  const userList = useMemo(() => userProfiles.map(user => user._id), [userProfiles]);
 
-  const loadTimeEntriesForPeriod = async (controller) => {
+  const loadTimeEntriesForPeriod = useCallback(async (controller) => {
     try {
       const url = ENDPOINTS.TIME_ENTRIES_REPORTS;
       const res = await axios.post(url, { users: userList, fromDate, toDate }, { signal: controller.signal });
@@ -44,10 +44,9 @@ function TotalPeopleReport(props) {
         console.error("API error:", err.message);
       }
     }
-  };
-  
+  }, [fromDate, toDate, userList]);
 
-  const sumByUser = (objectArray, property) => {
+  const sumByUser = useCallback((objectArray, property) => {
     return objectArray.reduce((acc, obj) => {
       const key = obj[property];
       if (!acc[key]) {
@@ -67,16 +66,15 @@ function TotalPeopleReport(props) {
       acc[key].minutes += Number(obj.minutes);
       return acc;
     }, {});
-  };
+  }, []);
 
-  const groupByTimeRange = (objectArray, timeRange) => {
+  const groupByTimeRange = useCallback((objectArray, timeRange) => {
     let range = 0;
     if (timeRange === 'month') {
       range = 7;
     } else if (timeRange === 'year') {
       range = 4;
     } else {
-      // eslint-disable-next-line no-console
       console.log('The time range should be month or year.');
     }
     return objectArray.reduce((acc, obj) => {
@@ -86,68 +84,62 @@ function TotalPeopleReport(props) {
       acc[key] = month;
       return acc;
     }, {});
-  };
+  }, []);
 
-  const filterTenHourUser = userTimeList => {
-    const filteredUsers = [];
-    userTimeList.forEach(element => {
-      const allTimeLogged = element.hours + element.minutes / 60.0;
-      const allTangibleTimeLogged = element.tangibleHours + element.tangibleMinutes / 60.0;
-      if (allTimeLogged >= 10) {
-        const matchedUser = userProfiles.filter(user => user._id === element.userId)[0];
+  const filterTenHourUser = useCallback(userTimeList => {
+    return userTimeList
+      .filter(element => {
+        const allTimeLogged = element.hours + element.minutes / 60.0;
+        return allTimeLogged >= 10;
+      })
+      .map(element => {
+        const matchedUser = userProfiles.find(user => user._id === element.userId);
         if (matchedUser) {
-          filteredUsers.push({
+          const allTangibleTimeLogged = element.tangibleHours + element.tangibleMinutes / 60.0;
+          return {
             userId: element.userId,
             firstName: matchedUser.firstName,
             lastName: matchedUser.lastName,
-            totalTime: allTimeLogged.toFixed(2),
+            totalTime: (element.hours + element.minutes / 60.0).toFixed(2),
             tangibleTime: allTangibleTimeLogged.toFixed(2),
-          });
+          };
         }
-      }
-    });
-    return filteredUsers;
-  };
+        return null;
+      })
+      .filter(Boolean);
+  }, [userProfiles]);
 
-  const summaryOfTimeRange = timeRange => {
+  const summaryOfTimeRange = useCallback(timeRange => {
     const groupedEntries = Object.entries(groupByTimeRange(allTimeEntries, timeRange));
-    const summaryOfTime = [];
-    groupedEntries.forEach(element => {
-      const groupedUsersOfTime = Object.values(sumByUser(element[1], 'userId'));
+    return groupedEntries.map(([key, entries]) => {
+      const groupedUsersOfTime = Object.values(sumByUser(entries, 'userId'));
       const contributedUsersOfTime = filterTenHourUser(groupedUsersOfTime);
-      summaryOfTime.push({ timeRange: element[0], usersOfTime: contributedUsersOfTime });
+      return { timeRange: key, usersOfTime: contributedUsersOfTime };
     });
-    return summaryOfTime;
-  };
+  }, [allTimeEntries, groupByTimeRange, sumByUser, filterTenHourUser]);
 
-
-  const generateBarData = (groupedDate, isYear = false) => {
+  const generateBarData = useCallback((groupedDate, isYear = false) => {
     if (isYear) {
       const startMonth = startDate.getMonth();
       const endMonth = endDate.getMonth();
-      const sumData = groupedDate.map(range => {
-        return {
-          label: range.timeRange,
-          value: range.usersOfTime.length,
-          months: 12,
-        };
-      });
+      const sumData = groupedDate.map(range => ({
+        label: range.timeRange,
+        value: range.usersOfTime.length,
+        months: 12,
+      }));
       if (sumData.length > 1) {
         sumData[0].months = 12 - startMonth;
         sumData[sumData.length - 1].months = endMonth + 1;
       }
       return sumData;
     }
-    const sumData = groupedDate.map(range => {
-      return {
-        label: range.timeRange,
-        value: range.usersOfTime.length,
-      };
-    });
-    return sumData;
-  };
+    return groupedDate.map(range => ({
+      label: range.timeRange,
+      value: range.usersOfTime.length,
+    }));
+  }, [startDate, endDate]);
 
-  const checkPeriodForSummary = () => {
+  const checkPeriodForSummary = useCallback(() => {
     const oneMonth = 1000 * 60 * 60 * 24 * 31;
     const diffDate = endDate - startDate;
     if (diffDate > oneMonth) {
@@ -160,79 +152,69 @@ function TotalPeopleReport(props) {
         setShowYearly(true);
       }
     }
-  };
+  }, [endDate, startDate, generateBarData, summaryOfTimeRange]);
 
   useEffect(() => {
+    setTotalPeopleReportDataReady(false);
     const controller = new AbortController();
     loadTimeEntriesForPeriod(controller).then(() => {
-      setDataLoading(false);
-      setDataRefresh(true);
+      setTotalPeopleReportDataLoading(false);
+      setTotalPeopleReportDataReady(true);
     });
     return () => controller.abort();
-  }, [startDate, endDate]);
+  }, [loadTimeEntriesForPeriod, startDate, endDate]);
 
   useEffect(() => {
-    if (!dataLoading && dataRefresh) {
+    if (!totalPeopleReportDataLoading && totalPeopleReportDataReady) {
       setShowMonthly(false);
       setShowYearly(false);
       const groupedUsers = Object.values(sumByUser(allTimeEntries, 'userId'));
       const contributedUsers = filterTenHourUser(groupedUsers);
       setAllPeople(contributedUsers);
       checkPeriodForSummary();
-      setDataRefresh(false);
     }
-  }, [dataRefresh]);
+  }, [totalPeopleReportDataLoading, totalPeopleReportDataReady, sumByUser, filterTenHourUser, allTimeEntries, checkPeriodForSummary]);
 
   const onClickTotalPeopleDetail = () => {
-    const showDetail = showTotalPeopleTable;
-    setShowTotalPeopleTable(!showDetail);
+    setShowTotalPeopleTable(prevState => !prevState);
   };
 
-  const totalPeopleTable = totalPeople => {
-    let PeopleList = [];
-    if (totalPeople.length > 0) {
-      PeopleList = totalPeople
-        .sort((a, b) => a.firstName.localeCompare(b.firstName))
-        .map((person, index) => (
-          <tr className="teams__tr" id={`tr_${person.userId}`} key={person.userId}>
-            <th className="teams__order--input" scope="row">
-              <div>{index + 1}</div>
-            </th>
-            <td>
-              <Link to={`/userProfile/${person.userId}`} className={darkMode ? 'text-light' : ''}>
-                {person.firstName} {person.lastName}
-              </Link>
-            </td>
-            <td>{person.totalTime}</td>
-          </tr>
-        ));
-    }
-
-    return (
-      <table className="table table-bordered table-responsive-sm">
-        <thead>
-          <tr>
-            <th scope="col" id="projects__order">
-              #
-            </th>
-            <th scope="col">Person Name</th>
-            <th scope="col">Total Logged Time (Hrs) </th>
-          </tr>
-        </thead>
-        <tbody>{PeopleList}</tbody>
-      </table>
-    );
-  };
+  const totalPeopleTable = totalPeople => (
+    <table className="table table-bordered table-responsive-sm">
+      <thead>
+        <tr>
+          <th scope="col" id="projects__order">#</th>
+          <th scope="col">Person Name</th>
+          <th scope="col">Total Logged Time (Hrs)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {totalPeople
+          .sort((a, b) => a.firstName.localeCompare(b.firstName))
+          .map((person, index) => (
+            <tr className="teams__tr" id={`tr_${person.userId}`} key={person.userId}>
+              <th className="teams__order--input" scope="row">
+                <div>{index + 1}</div>
+              </th>
+              <td>
+                <Link to={`/userProfile/${person.userId}`} className={darkMode ? 'text-light' : ''}>
+                  {person.firstName} {person.lastName}
+                </Link>
+              </td>
+              <td>{person.totalTime}</td>
+            </tr>
+          ))}
+      </tbody>
+    </table>
+  );
 
   const totalPeopleInfo = totalPeople => {
-    const totalTangibleTime = totalPeople.reduce((acc, obj) => {
-      return acc + Number(obj.tangibleTime);
-    }, 0);
+    const totalTangibleTime = totalPeople.reduce((acc, obj) => acc + Number(obj.tangibleTime), 0);
     return (
       <div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
         <div className={`total-title ${darkMode ? 'text-azure' : ''}`}>Total People Report</div>
         <div className="total-period">
-          In the period from {fromDate} to {toDate}:
+        In the period from {startDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} to {endDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}:
         </div>
         <div className="total-item">
           <div className="total-number">{allPeople.length}</div>
@@ -252,7 +234,7 @@ function TotalPeopleReport(props) {
         </div>
         {allPeople.length ? (
           <div className="total-detail">
-            <Button onClick={() => onClickTotalPeopleDetail()}>
+            <Button onClick={onClickTotalPeopleDetail}>
               {showTotalPeopleTable ? 'Hide Details' : 'Show Details'}
             </Button>
             <i
@@ -275,8 +257,8 @@ function TotalPeopleReport(props) {
 
   return (
     <div>
-      {dataLoading ? (
-        <Loading align="center" darkMode={darkMode}/>
+      {!totalPeopleReportDataReady ? (
+        <Loading align="center" darkMode={darkMode} />
       ) : (
         <div>
           <div>{totalPeopleInfo(allPeople)}</div>
@@ -286,4 +268,5 @@ function TotalPeopleReport(props) {
     </div>
   );
 }
+
 export default TotalPeopleReport;
diff --git a/src/components/Reports/TotalReport/TotalProjectReport.jsx b/src/components/Reports/TotalReport/TotalProjectReport.jsx
index ade6af9bde..71ec3ec189 100644
--- a/src/components/Reports/TotalReport/TotalProjectReport.jsx
+++ b/src/components/Reports/TotalReport/TotalProjectReport.jsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
 import './TotalReport.css';
@@ -7,10 +7,13 @@ import { Button } from 'reactstrap';
 import ReactTooltip from 'react-tooltip';
 import TotalReportBarGraph from './TotalReportBarGraph';
 import Loading from '../../common/Loading';
+import { set } from 'lodash';
 
 function TotalProjectReport(props) {
-  const [dataLoading, setDataLoading] = useState(true);
-  const [dataRefresh, setDataRefresh] = useState(false);
+  const { startDate, endDate, userProfiles, projects, darkMode } = props;
+
+  const [totalProjectReportDataLoading, setTotalProjectReportDataLoading] = useState(true);
+  const [totalProjectReportDataReady, setTotalProjectReportDataReady] = useState(false);
   const [showTotalProjectTable, setShowTotalProjectTable] = useState(false);
   const [allTimeEntries, setAllTimeEntries] = useState([]);
   const [allProject, setAllProject] = useState([]);
@@ -19,54 +22,40 @@ function TotalProjectReport(props) {
   const [showMonthly, setShowMonthly] = useState(false);
   const [showYearly, setShowYearly] = useState(false);
 
-  const { startDate, endDate, userProfiles, projects, darkMode } = props;
+  const fromDate = useMemo(() => startDate.toLocaleDateString('en-CA'), [startDate]);
+  const toDate = useMemo(() => endDate.toLocaleDateString('en-CA'), [endDate]);
+  const userList = useMemo(() => userProfiles.map(user => user._id), [userProfiles]);
+  const projectList = useMemo(() => projects.map(proj => proj._id), [projects]);
 
-  const fromDate = startDate.toLocaleDateString('en-CA');
-  const toDate = endDate.toLocaleDateString('en-CA');
+  const loadTimeEntriesForPeriod = useCallback(async () => {
+    try {
+      const url = ENDPOINTS.TIME_ENTRIES_REPORTS;
+      const timeEntries = await axios.post(url, { users: userList, fromDate, toDate }).then(res => res.data.map(entry => ({
+        projectId: entry.projectId,
+        projectName: entry.projectName,
+        hours: entry.hours,
+        minutes: entry.minutes,
+        isTangible: entry.isTangible,
+        date: entry.dateOfWork,
+      })));
 
-  const userList = userProfiles.map(user => user._id);
-  const projectList = projects.map(proj => proj._id);
+      const projUrl = ENDPOINTS.TIME_ENTRIES_LOST_PROJ_LIST;
+      const projTimeEntries = await axios.post(projUrl, { projects: projectList, fromDate, toDate }).then(res => res.data.map(entry => ({
+        projectId: entry.projectId,
+        projectName: entry.projectName,
+        hours: entry.hours,
+        minutes: entry.minutes,
+        isTangible: entry.isTangible,
+        date: entry.dateOfWork,
+      })));
 
-  const loadTimeEntriesForPeriod = async () => {
-    let url = ENDPOINTS.TIME_ENTRIES_REPORTS;
-    const timeEntries = await axios
-      .post(url, { users: userList, fromDate, toDate })
-      .then(res => {
-        return res.data.map(entry => {
-          return {
-            projectId: entry.projectId,
-            projectName: entry.projectName,
-            hours: entry.hours,
-            minutes: entry.minutes,
-            isTangible: entry.isTangible,
-            date: entry.dateOfWork,
-          };
-        });
-      })
-      .catch(err => {
-        // eslint-disable-next-line no-console
-        console.log(err.message);
-      });
-
-    url = ENDPOINTS.TIME_ENTRIES_LOST_PROJ_LIST;
-    const projTimeEntries = await axios
-      .post(url, { projects: projectList, fromDate, toDate })
-      .then(res => {
-        return res.data.map(entry => {
-          return {
-            projectId: entry.projectId,
-            projectName: entry.projectName,
-            hours: entry.hours,
-            minutes: entry.minutes,
-            isTangible: entry.isTangible,
-            date: entry.dateOfWork,
-          };
-        });
-      });
-    setAllTimeEntries([...timeEntries, ...projTimeEntries]);
-  };
+      setAllTimeEntries([...timeEntries, ...projTimeEntries]);
+    } catch (err) {
+      console.error("API error:", err.message);
+    }
+  }, [fromDate, toDate, userList, projectList]);
 
-  const sumByProject = (objectArray, property) => {
+  const sumByProject = useCallback((objectArray, property) => {
     return objectArray.reduce((acc, obj) => {
       const key = obj[property];
       if (!acc[key]) {
@@ -87,153 +76,120 @@ function TotalProjectReport(props) {
       acc[key].minutes += Number(obj.minutes);
       return acc;
     }, {});
-  };
+  }, []);
 
-  const groupByTimeRange = (objectArray, timeRange) => {
-    let range = 0;
-    if (timeRange === 'month') {
-      range = 7;
-    } else if (timeRange === 'year') {
-      range = 4;
-    } else {
-      // eslint-disable-next-line no-console
-      console.log('The time range should be month or year.');
-    }
+  const groupByTimeRange = useCallback((objectArray, timeRange) => {
+    const range = timeRange === 'month' ? 7 : 4;
     return objectArray.reduce((acc, obj) => {
       const key = obj.date.substring(0, range);
-      const month = acc[key] || [];
-      month.push(obj);
-      acc[key] = month;
+      acc[key] = acc[key] || [];
+      acc[key].push(obj);
       return acc;
     }, {});
-  };
-  const filterOneHourProject = projectTimeList => {
-    const filteredProjects = [];
-    projectTimeList.forEach(element => {
-      const allTimeLogged = element.hours + element.minutes / 60.0;
-      const allTangibleTimeLogged = element.tangibleHours + element.tangibleMinutes / 60.0;
-      if (allTimeLogged >= 1) {
-        filteredProjects.push({
-          projectId: element.projectId,
-          projectName: element.projectName,
-          totalTime: allTimeLogged.toFixed(2),
-          tangibleTime: allTangibleTimeLogged.toFixed(2),
-        });
-      }
-    });
-    return filteredProjects;
-  };
-  const summaryOfTimeRange = timeRange => {
+  }, []);
+
+  const filterOneHourProject = useCallback(projectTimeList => {
+    return projectTimeList
+      .filter(element => (element.hours + element.minutes / 60.0) >= 1)
+      .map(element => ({
+        projectId: element.projectId,
+        projectName: element.projectName,
+        totalTime: (element.hours + element.minutes / 60.0).toFixed(2),
+        tangibleTime: (element.tangibleHours + element.tangibleMinutes / 60.0).toFixed(2),
+      }));
+  }, []);
+
+  const summaryOfTimeRange = useCallback(timeRange => {
     const groupedEntries = Object.entries(groupByTimeRange(allTimeEntries, timeRange));
-    const summaryOfTime = [];
-    groupedEntries.forEach(element => {
-      const groupedProjectsOfTime = Object.values(sumByProject(element[1], 'projectId'));
-      const contributedProjectsOfTime = filterOneHourProject(groupedProjectsOfTime);
-      summaryOfTime.push({ timeRange: element[0], projectsOfTime: contributedProjectsOfTime });
+    return groupedEntries.map(([key, entries]) => {
+      const groupedProjectsOfTime = Object.values(sumByProject(entries, 'projectId'));
+      return { timeRange: key, projectsOfTime: filterOneHourProject(groupedProjectsOfTime) };
     });
-    return summaryOfTime;
-  };
-  const generateBarData = (groupedDate, isYear = false) => {
+  }, [allTimeEntries, groupByTimeRange, sumByProject, filterOneHourProject]);
+
+  const generateBarData = useCallback((groupedDate, isYear = false) => {
     if (isYear) {
       const startMonth = startDate.getMonth();
       const endMonth = endDate.getMonth();
-      const sumData = groupedDate.map(range => {
-        return {
-          label: range.timeRange,
-          value: range.projectsOfTime.length,
-          months: 12,
-        };
-      });
+      const sumData = groupedDate.map(range => ({
+        label: range.timeRange,
+        value: range.projectsOfTime.length,
+        months: 12,
+      }));
       if (sumData.length > 1) {
         sumData[0].months = 12 - startMonth;
         sumData[sumData.length - 1].months = endMonth + 1;
       }
       return sumData;
     }
-    const sumData = groupedDate.map(range => {
-      return {
-        label: range.timeRange,
-        value: range.projectsOfTime.length,
-      };
-    });
-    return sumData;
-  };
-  const checkPeriodForSummary = () => {
+    return groupedDate.map(range => ({
+      label: range.timeRange,
+      value: range.projectsOfTime.length,
+    }));
+  }, [startDate, endDate]);
+
+  const checkPeriodForSummary = useCallback(() => {
     const oneMonth = 1000 * 60 * 60 * 24 * 31;
     const diffDate = endDate - startDate;
     if (diffDate > oneMonth) {
       setProjectInMonth(generateBarData(summaryOfTimeRange('month')));
       setProjectInYear(generateBarData(summaryOfTimeRange('year'), true));
-      if (diffDate <= oneMonth * 12) {
-        setShowMonthly(true);
-      }
-      if (startDate.getFullYear() !== endDate.getFullYear()) {
-        setShowYearly(true);
-      }
+      if (diffDate <= oneMonth * 12) setShowMonthly(true);
+      if (startDate.getFullYear() !== endDate.getFullYear()) setShowYearly(true);
     }
-  };
+  }, [endDate, startDate, generateBarData, summaryOfTimeRange]);
+
 
   useEffect(() => {
-    loadTimeEntriesForPeriod().then(() => {
-      setDataLoading(false);
-      setDataRefresh(true);
+    setTotalProjectReportDataReady(false);
+    const controller = new AbortController();
+    loadTimeEntriesForPeriod(controller).then(() => {
+      setTotalProjectReportDataLoading(false);
+      setTotalProjectReportDataReady(true);
     });
-  }, [startDate, endDate]);
+    return () => controller.abort();
+  }, [loadTimeEntriesForPeriod, startDate, endDate]);
 
   useEffect(() => {
-    if (!dataLoading && dataRefresh) {
+    if (!totalProjectReportDataLoading && totalProjectReportDataReady) {
       setShowMonthly(false);
       setShowYearly(false);
       const groupedProjects = Object.values(sumByProject(allTimeEntries, 'projectId'));
-      const contributedProjects = filterOneHourProject(groupedProjects);
-      setAllProject(contributedProjects);
+      setAllProject(filterOneHourProject(groupedProjects));
       checkPeriodForSummary();
-      setDataRefresh(false);
     }
-  }, [dataRefresh]);
+  }, [totalProjectReportDataLoading,totalProjectReportDataReady,sumByProject, filterOneHourProject, allTimeEntries, checkPeriodForSummary]);
 
-  const onClickTotalProjectDetail = () => {
-    const showDetail = showTotalProjectTable;
-    setShowTotalProjectTable(!showDetail);
-  };
+  const onClickTotalProjectDetail = () => setShowTotalProjectTable(prevState => !prevState);
 
-  const totalProjectTable = totalProject => {
-    let ProjectList = [];
-    if (totalProject.length > 0) {
-      ProjectList = totalProject
-        .sort((a, b) => a.projectName.localeCompare(b.projectName))
-        .map((project, index) => (
+  const totalProjectTable = totalProject => (
+    <table className="table table-bordered table-responsive-sm">
+      <thead>
+        <tr>
+          <th scope="col" id="projects__order">#</th>
+          <th scope="col">Project Name</th>
+          <th scope="col">Total Logged Time (Hrs)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {totalProject.sort((a, b) => a.projectName.localeCompare(b.projectName)).map((project, index) => (
           <tr className="teams__tr" id={`tr_${project.projectId}`} key={project.projectId}>
             <th className="teams__order--input" scope="row">
               <div>{index + 1}</div>
             </th>
             <td>
               {project.projectId ? (
-                <Link to={`/projectReport/${project.projectId}`} className={darkMode ? 'text-light' : ''}>{project.projectName}</Link>
-              ) : (
-                'Unrecorded Project'
-              )}
+                <Link to={`/projectReport/${project.projectId}`} className={darkMode ? 'text-light' : ''}>
+                  {project.projectName}
+                </Link>
+              ) : 'Unrecorded Project'}
             </td>
             <td>{project.totalTime}</td>
           </tr>
-        ));
-    }
-
-    return (
-      <table className="table table-bordered table-responsive-sm">
-        <thead>
-          <tr>
-            <th scope="col" id="projects__order">
-              #
-            </th>
-            <th scope="col">Project Name</th>
-            <th scope="col">Total Logged Time (Hrs) </th>
-          </tr>
-        </thead>
-        <tbody>{ProjectList}</tbody>
-      </table>
-    );
-  };
+        ))}
+      </tbody>
+    </table>
+  );
 
   const totalProjectInfo = totalProject => {
     const totalTangibleTime = totalProject.reduce((acc, obj) => {
@@ -243,7 +199,7 @@ function TotalProjectReport(props) {
       <div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
         <div className={`total-title ${darkMode ? 'text-azure' : ''}`}>Total Project Report</div>
         <div className="total-period">
-          In the period from {fromDate} to {toDate}:
+        In the period from {startDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} to {endDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}:
         </div>
         <div className="total-item">
           <div className="total-number">{allProject.length}</div>
@@ -287,7 +243,7 @@ function TotalProjectReport(props) {
 
   return (
     <div>
-      {dataLoading ? (
+      {!totalProjectReportDataReady ? (
         <Loading align="center" darkMode={darkMode}/>
       ) : (
         <div>
diff --git a/src/components/Reports/TotalReport/TotalTeamReport.jsx b/src/components/Reports/TotalReport/TotalTeamReport.jsx
index e3da41e2fb..4f1a50c5e3 100644
--- a/src/components/Reports/TotalReport/TotalTeamReport.jsx
+++ b/src/components/Reports/TotalReport/TotalTeamReport.jsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo} from 'react';
 import { useDispatch } from 'react-redux';
 import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
@@ -12,10 +12,8 @@ import Loading from '../../common/Loading';
 
 function TotalTeamReport(props) {
   const dispatch = useDispatch();
-  const [dataLoading, setDataLoading] = useState(true);
-  const [dataRefresh, setDataRefresh] = useState(false);
-  const [teamMemberLoaded, setTeamMemberLoaded] = useState(false);
-  const [dataReady, setDataReady] = useState(false);
+  const [totalTeamReportDataLoading, setTotalTeamReportDataLoading] = useState(true);
+  const [totalTeamReportDataReady, setTotalTeamReportDataReady] = useState(false);
   const [showTotalTeamTable, setShowTotalTeamTable] = useState(false);
   const [allTimeEntries, setAllTimeEntries] = useState([]);
   const [teamTimeEntries, setTeamTimeEntries] = useState([]);
@@ -28,11 +26,10 @@ function TotalTeamReport(props) {
   const [userNameList, setUserNameList] = useState({});
 
   const { startDate, endDate, userProfiles, allTeamsData, darkMode } = props;
-
-  const fromDate = startDate.toLocaleDateString('en-CA');
-  const toDate = endDate.toLocaleDateString('en-CA');
-  const userList = userProfiles.map(user => user._id);
-  const teamList = allTeamsData.map(team => team._id);
+  const fromDate = useMemo(() => startDate.toLocaleDateString('en-CA'), [startDate]);
+  const toDate = useMemo(() => endDate.toLocaleDateString('en-CA'), [endDate]);
+  const userList = useMemo(() => userProfiles.map(user => user._id), [userProfiles]);
+  const teamList = useMemo(() => allTeamsData.map(team => team._id), [allTeamsData]);
 
   const filterTeamByEndDate = (teams, endDateTime) => {
     const filteredTeams = teams
@@ -267,18 +264,14 @@ function TotalTeamReport(props) {
 
   useEffect(() => {
     const { savedTeamMemberList } = props;
-
     if (savedTeamMemberList.length > 0) {
       setAllTeamsMembers(savedTeamMemberList);
-      setTeamMemberLoaded(true);
     } else {
-      matchTeamUser(allTeamsData).then(() => {
-        setTeamMemberLoaded(true);
-      });
+      matchTeamUser(allTeamsData);
     }
     loadTimeEntriesForPeriod().then(() => {
-      setDataLoading(false);
-      setDataRefresh(true);
+      setTotalTeamReportDataLoading(false);
+      setTotalTeamReportDataReady(true);
     });
     const nameList = {};
     userProfiles.forEach(user => {
@@ -287,22 +280,11 @@ function TotalTeamReport(props) {
     setUserNameList(nameList);
   }, []);
 
-  useEffect(() => {
-    setDataReady(false);
-    if (teamMemberLoaded) {
-      // Re-render: reload the time entries when the date changes
-      // console.log('Refresh data');
-      loadTimeEntriesForPeriod().then(() => {
-        setDataLoading(false);
-        setDataRefresh(true);
-      });
-    }
-  }, [startDate, endDate]);
 
   useEffect(() => {
     const { savedTeamMemberList, passTeamMemberList } = props;
 
-    if (!dataLoading && teamMemberLoaded && dataRefresh) {
+    if (!totalTeamReportDataLoading && totalTeamReportDataReady) {
       if (!savedTeamMemberList.length) {
         passTeamMemberList(allTeamsMembers);
       }
@@ -314,10 +296,19 @@ function TotalTeamReport(props) {
       const contributedTeams = filterTenHourTeam(groupedTeam);
       setAllTeams(contributedTeams);
       checkPeriodForSummary();
-      setDataRefresh(false);
-      setDataReady(true);
     }
-  }, [dataRefresh]);
+  }, [totalTeamReportDataLoading, totalTeamReportDataReady, allTeamsMembers, allTimeEntries, teamTimeEntries]);
+
+  useEffect(() => {
+    setTotalTeamReportDataReady(false);
+    const controller = new AbortController();
+    loadTimeEntriesForPeriod(controller).then(() => {
+      setTotalTeamReportDataReady(true);
+    });
+    return () => {
+      controller.abort();
+    }
+  }, [startDate, endDate]);
 
   const onClickTotalTeamDetail = () => {
     const showDetail = showTotalTeamTable;
@@ -334,8 +325,6 @@ function TotalTeamReport(props) {
   };
 
   const getMemberName = (teamId, userNames) => {
-    // given a team(id) and the userid-name list,
-    // return the list of member names of the team
     const nameList = [];
     allTeamsMembers
       .filter(team => team.teamId === teamId)[0]
@@ -412,7 +401,7 @@ function TotalTeamReport(props) {
       <div className={`total-container ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}>
         <div className={`total-title ${darkMode ? 'text-azure' : ''}`}>Total Team Report</div>
         <div className="total-period">
-          In the period from {fromDate} to {toDate}:
+         In the period from {startDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} to {endDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}:
         </div>
         <div className="total-item">
           <div className="total-number">{totalTeam.length}</div>
@@ -456,7 +445,7 @@ function TotalTeamReport(props) {
 
   return (
     <div>
-      {!dataReady ? (
+      {!totalTeamReportDataReady ? (
         <div>
           <Loading align="center" darkMode={darkMode}/>
         </div>
diff --git a/src/components/Reports/WbsTable/WbsTable.css b/src/components/Reports/WbsTable/WbsTable.css
index 902663f9bd..95bcbf87a2 100644
--- a/src/components/Reports/WbsTable/WbsTable.css
+++ b/src/components/Reports/WbsTable/WbsTable.css
@@ -3,12 +3,17 @@
   margin-bottom: 12px;
 }
 
-.reports-table-head {
+.reports-table-head-wbs {
   background-color: #eee7f8;  
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr 3fr;
+  column-gap: 4px;
+  min-height: 42px;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 3px solid #f8f7f8;
   border-radius: 4px;
-  min-height: 32px;
-  padding: 8px 16px;  
-  display: flex;
+  text-align: left;
 }
 
 .wbs-table-row {
@@ -19,20 +24,39 @@
   align-items: center;
   padding: 0 16px;
   border-bottom: 3px solid #f8f7f8;
+  text-align: left;
 }
 .wbs-table-cell {
   flex: 1 !important;
 }
 
+.wbs-table-id-column {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wbs-table-name-column {
+  overflow-wrap: anywhere;
+}
+
+.wbs-table-active-column {
+  text-align: center;
+}
+
 .wbs-table {
-  max-width: 100vw;
-  margin-left: 0.5rem;
+  height: 100%;
 }
 
 @media screen and (max-width: 1100px) {
+  .reports-table-head-wbs {
+    grid-template-columns: 1fr 3fr 1fr 3fr;
+  }
   .wbs-table-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }  
+    text-align: center;
+    margin-bottom: 12px;
+  }
+  .wbs-table-row {
+    grid-template-columns: 1fr 3fr 1fr 3fr;
+  }
 }
diff --git a/src/components/Reports/WbsTable/WbsTable.jsx b/src/components/Reports/WbsTable/WbsTable.jsx
index 33c896fcb5..48c30fdf3a 100644
--- a/src/components/Reports/WbsTable/WbsTable.jsx
+++ b/src/components/Reports/WbsTable/WbsTable.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Stub } from "components/common/Stub";
 import "./WbsTable.css";
+import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
 
 // eslint-disable-next-line import/prefer-default-export
 export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
@@ -13,7 +14,7 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
         <div>{skip + index + 1}</div>
         <div>
           {canViewWBS ? (
-            <a href={`/wbs/tasks/${item._id}/${projectId}/${item.wbsName}`} className={darkMode ? "text-light" : ""}>
+            <a href={`/wbs/tasks/${item._id}/${projectId}/${item.wbsName}`} className={`wbs-table-name-column ${darkMode ? "text-light" : ""}`}>
               {item.wbsName}
             </a>
           ) : (
@@ -31,9 +32,10 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
             </div>
           )}
         </div>
-        <div>
-          {window.innerWidth >= 1100 ? item._id : item._id.substring(0, 10)}
-        </div>
+        <div className='wbs-table-id-column'>
+          <CopyToClipboard writeText={item._id} message={`Copied "${item._id}".`} />
+          {item._id}
+      </div>  
       </div>
     ));
   }
@@ -44,12 +46,11 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
         WBS
       </h5>
       <div
-        style={{ marginBottom: "0px" }}
-        className={`reports-table-head wbs-table-row ${darkMode ? 'bg-space-cadet' : ''}`}
+        className={`reports-table-head-wbs ${darkMode ? 'bg-space-cadet' : ''}`}
       >
         <div className="wbs-table-cell">#</div>
         <div className="wbs-table-cell">Name</div>
-        <div className="wbs-table-cell">Active</div>
+        <div className="wbs-table-cell wbs-table-active-column">Active</div>
         <div className="wbs-table-cell">ID</div>
       </div>
       <div>{WbsList.length > 0 ? WbsList : <Stub color={darkMode ? "white" : ""}/>}</div>
diff --git a/src/components/Reports/__tests__/TimeEntriesViz.test.js b/src/components/Reports/__tests__/TimeEntriesViz.test.js
new file mode 100644
index 0000000000..c6183449ff
--- /dev/null
+++ b/src/components/Reports/__tests__/TimeEntriesViz.test.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import TimeEntriesViz from '../TimeEntriesViz';
+
+const timeEntries = {
+  period: [
+    {
+      hours: 5,
+      minutes: 30,
+      dateOfWork: '2023-12-05T06:14:07.465+00:00',
+      _id: 'time123',
+      createdDateTime: '2023-12-05T06:14:07.465+00:00',
+      notes: 'new notes',
+      totalSeconds: 4230,
+      projectId: 'project123',
+      personId: 'person123',
+      lastModifiedDateTime: '2023-12-05T06:14:07.465+00:00',
+      isTangible: true,
+      dateOfWork: '2018-01-27',
+    },
+  ],
+};
+const fromDate = '2023-12-05T06:14:07.465+00:00';
+const toDate = '2023-12-25T06:14:07.465+00:00';
+
+describe('TimeEntriesViz component', () => {
+  it('check if component renders properly without crashing', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+  });
+  it('check if Show Time Entries Graph button is shown when show is set to false', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+    expect(screen.getByText('Show Time Entries Graph')).toBeInTheDocument();
+  });
+  it('check if Hide Time Entries Graph button is not shown when show is set to false', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+    expect(screen.queryByText('Hide Time Entries Graph')).not.toBeInTheDocument();
+  });
+  it('check if Hide Time Entries Graph button is shown when show is set to true', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+    const buttonElement = screen.getByText('Show Time Entries Graph');
+    fireEvent.click(buttonElement);
+    expect(screen.getByText('Hide Time Entries Graph')).toBeInTheDocument();
+  });
+  it('check if Show Time Entries Graph button is not shown when show is set to true', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+    const buttonElement = screen.getByText('Show Time Entries Graph');
+    fireEvent.click(buttonElement);
+    expect(screen.queryByText('Show Time Entries Graph')).not.toBeInTheDocument();
+  });
+  it('check if Total Hours displays 0 when period key is not present in timeEntries', () => {
+    const newTimeEntries = [];
+    render(<TimeEntriesViz timeEntries={newTimeEntries} fromDate={fromDate} toDate={toDate} />);
+    const buttonElement = screen.getByText('Show Time Entries Graph');
+    fireEvent.click(buttonElement);
+
+    expect(screen.getByText('Total Hours: 0.00')).toBeInTheDocument();
+  });
+  it('check if Total Hours displays as expected when period key is present', () => {
+    render(<TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />);
+    let totalHours = 0;
+
+    for (let i = 0; i < timeEntries.period.length; i += 1) {
+      const convertedHours =
+        parseInt(timeEntries.period[i].hours, 10) +
+        (timeEntries.period[i].minutes === '0'
+          ? 0
+          : parseInt(timeEntries.period[i].minutes, 10) / 60);
+      totalHours += convertedHours;
+    }
+
+    const buttonElement = screen.getByText('Show Time Entries Graph');
+    fireEvent.click(buttonElement);
+    totalHours = totalHours.toFixed(2);
+
+    expect(screen.getByText(`Total Hours: ${totalHours}`)).toBeInTheDocument();
+  });
+  it('check if Labels Off, Show Daily Hours, Show Dates button are present when show is set to false', () => {
+    render(
+      <TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />,
+    );
+    const buttonElement = screen.getByText('Show Time Entries Graph');
+    fireEvent.click(buttonElement);
+    expect(screen.getByText('Labels Off')).toBeInTheDocument();
+    expect(screen.getByText('Show Daily Hours')).toBeInTheDocument();
+    expect(screen.getByText('Show Dates')).toBeInTheDocument();
+  });
+  
+});
+
diff --git a/src/__tests__/WbsTable.test.js b/src/components/Reports/__tests__/WbsTable.test.js
similarity index 73%
rename from src/__tests__/WbsTable.test.js
rename to src/components/Reports/__tests__/WbsTable.test.js
index 467a265975..558b8497b8 100644
--- a/src/__tests__/WbsTable.test.js
+++ b/src/components/Reports/__tests__/WbsTable.test.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import { WbsTable } from 'components/Reports/WbsTable';
+import { themeMock } from '__tests__/mockStates';
+
+const mockStore = configureMockStore();
 
 describe('WbsTable Component', () => {
   const mockWbsData = {
@@ -10,9 +15,16 @@ describe('WbsTable Component', () => {
       { _id: '2', wbsName: 'WBS Item 2', isActive: false },
     ],
   };
+  const store = mockStore({
+    theme: themeMock,
+  });
 
   it('renders WbsTable component with WBS items', () => {
-    const { getByText } = render(<WbsTable wbs={mockWbsData} skip={0} take={5} />);
+    const { getByText } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsData} skip={0} take={5} />
+      </Provider>
+    );
 
     // Check if WBS items are rendered
     const wbsItem1 = getByText('WBS Item 1');
@@ -22,7 +34,11 @@ describe('WbsTable Component', () => {
   });
 
   it('renders table headers correctly', () => {
-    const { getByText } = render(<WbsTable wbs={mockWbsData} skip={0} take={5} />);
+    const { getByText } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsData} skip={0} take={5} />
+      </Provider>
+    );
 
     // Check if table headers are rendered
     const header1 = getByText('#');
@@ -50,7 +66,11 @@ describe('WbsTable Component', () => {
     const skip = 1;
     const take = 2;
 
-    const { queryByText } = render(<WbsTable wbs={mockWbsRangeData} skip={skip} take={take} />);
+    const { queryByText } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsRangeData} skip={skip} take={take} />
+      </Provider>
+    );
 
     // Ensure WBS items within specified range are rendered
     const wbsItem1 = queryByText('WBS Item 1');
@@ -75,7 +95,11 @@ describe('WbsTable Component', () => {
       ],
     };
 
-    const { queryByText } = render(<WbsTable wbs={mockWbsPaginatedData} skip={1} take={2} />);
+    const { queryByText } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsPaginatedData} skip={1} take={2} />
+      </Provider>
+    );
 
     // Check that WBS item 'WBS 1' is not rendered (as it's skipped)
     const wbsItem1 = queryByText('WBS 1');
@@ -104,7 +128,11 @@ describe('WbsTable Component', () => {
 
     global.innerWidth = 1000; // Set innerWidth to simulate smaller window
 
-    render(<WbsTable wbs={mockWbsTruncatedData} skip={0} take={5} />);
+    render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsTruncatedData} skip={0} take={5} />
+      </Provider>
+    );
 
     // Check if the IDs are truncated when window width is less than 1100
     expect(screen.getByText('1234567890')).toBeInTheDocument();
@@ -114,21 +142,33 @@ describe('WbsTable Component', () => {
   });
 
   it('renders table with WBS items', () => {
-    const { container } = render(<WbsTable wbs={mockWbsData} skip={0} take={2} />);
+    const { container } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsData} skip={0} take={2} />
+      </Provider>
+    );
     const tableRows = container.querySelectorAll('.wbs-table-row');
 
-    expect(tableRows.length).toBe(3); // Ensure all WBS items are rendered
+    expect(tableRows.length).toBe(2); // Ensure all WBS items are rendered
   });
 
   it('renders "Active" icon for active WBS item', () => {
-    const { container } = render(<WbsTable wbs={mockWbsData} skip={0} take={2} />);
+    const { container } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsData} skip={0} take={2} />
+      </Provider>
+    );
     const activeIcon = container.querySelector('.isActive');
 
     expect(activeIcon).toBeInTheDocument(); // Ensure the "Active" icon is rendered
   });
 
   it('renders "Inactive" icon for inactive WBS item', () => {
-    const { container } = render(<WbsTable wbs={mockWbsData} skip={0} take={2} />);
+    const { container } = render(
+      <Provider store={store}>
+        <WbsTable wbs={mockWbsData} skip={0} take={2} />
+      </Provider>
+    );
     const inactiveIcon = container.querySelector('.isNotActive');
 
     expect(inactiveIcon).toBeInTheDocument(); // Ensure the "Inactive" icon is rendered
diff --git a/src/components/Reports/sharedComponents/ReportPage/ReportPage.css b/src/components/Reports/sharedComponents/ReportPage/ReportPage.css
index 9c5a70ff05..d5cbd2e449 100644
--- a/src/components/Reports/sharedComponents/ReportPage/ReportPage.css
+++ b/src/components/Reports/sharedComponents/ReportPage/ReportPage.css
@@ -15,6 +15,7 @@
   flex-direction: column;
   grid-row-start: 1;
   row-gap: 32px;
+  width: 100%;
   /* padding-bottom: 24px; */
 }
 
diff --git a/src/components/SummaryBar/SummaryBar.css b/src/components/SummaryBar/SummaryBar.css
index d5b90be87c..0cda75e5c0 100644
--- a/src/components/SummaryBar/SummaryBar.css
+++ b/src/components/SummaryBar/SummaryBar.css
@@ -206,3 +206,41 @@
   display: flex;
   justify-content: center;
 }
+
+.sortable-container {
+  background-color: #333;
+  padding: 1rem;
+  margin: 1rem;
+  overflow: hidden;
+}
+
+.sortable-content {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2.5%;
+}
+
+.sortable-content p {
+  outline: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.sortable-draggable {
+  padding: 1rem;
+  background-color: white;
+  border: 1px solid black;
+  cursor: grab;
+  word-break: break-word;
+  white-space: normal;
+}
+  
+.sortable-draggable-dragging {
+  opacity: .5;
+  cursor: grabbing;
+}
+
+.edit-icon {
+  cursor: pointer;
+}
diff --git a/src/components/SummaryBar/SummaryBar.jsx b/src/components/SummaryBar/SummaryBar.jsx
index 2a1ad6e240..74f37b6dec 100644
--- a/src/components/SummaryBar/SummaryBar.jsx
+++ b/src/components/SummaryBar/SummaryBar.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Container,
   Row,
@@ -42,7 +42,8 @@ const SummaryBar = props => {
     in: false,
     information: '',
   };
-  const weeklyCommittedHours = displayUserProfile?.weeklycommittedHours + (displayUserProfile?.missedHours ?? 0);
+  const weeklyCommittedHours =
+    displayUserProfile?.weeklycommittedHours + (displayUserProfile?.missedHours ?? 0);
 
   const [userProfile, setUserProfile] = useState(undefined);
   const [infringements, setInfringements] = useState(0);
@@ -50,16 +51,118 @@ const SummaryBar = props => {
   const [totalEffort, setTotalEffort] = useState(0);
   const [weeklySummary, setWeeklySummary] = useState(null);
   const [tasks, setTasks] = useState(undefined);
+
+  const [categoryDescription, setCategoryDescription] = useState();
+  const sortableContainerRef = useRef(null);
+
+  const editRadioButtonSelected = value => {
+    // dynamic way to set description rather than using tenerary operators.
+
+    setEditType(value);
+
+    if (value === 'add') {
+      setCategoryDescription('Add Category');
+    } else if (value === 'edit') {
+      setCategoryDescription('Edit Categories');
+    } else if (value === 'delete') {
+      setCategoryDescription(
+        'Delete category (Write the suggestion category number from the dropdown to delete it).',
+      );
+    } else {
+      setCategoryDescription('');
+    }
+  };
+
+  const closeSuggestionModal = () => {
+    editRadioButtonSelected('');
+    setExtraFieldForSuggestionForm('');
+  };
+
+  const onDragToggleDraggingClass = event => {
+    event.currentTarget.classList.toggle('sortable-draggable-dragging');
+  };
+
+  const onSortableDragOver = event => {
+    event.preventDefault();
+    const draggedElement = event.currentTarget.querySelector('.sortable-draggable-dragging');
+    const nextElement = getDraggedNextElement(sortableContainerRef.current, event.clientY);
+
+    if (nextElement == null && draggedElement) {
+      sortableContainerRef.current.appendChild(draggedElement);
+    } else {
+      sortableContainerRef.current.insertBefore(draggedElement, nextElement);
+    }
+  };
+
+  const getDraggedNextElement = (container, yMouse) => {
+    // grab all draggable elements that are not being dragged.
+    const draggableElements = [
+      ...container.querySelectorAll('.sortable-draggable:not(.sortable-dragging)'),
+    ];
+
+    // below uses the array of draggable elements and uses the offset to find the closest draggable element after
+    // the element is dragged
+    if (draggableElements) {
+      return draggableElements.reduce(
+        (closest, child) => {
+          const box = child.getBoundingClientRect();
+          const offset = yMouse - box.top - box.height / 2;
+
+          if (offset < 0 && offset > closest.offset) {
+            return { offset: offset, element: child };
+          } else {
+            return closest;
+          }
+        },
+        { offset: Number.NEGATIVE_INFINITY },
+      ).element;
+    }
+  };
+
+  const handleEditClick = event => {
+    let currentTarget = event.currentTarget;
+
+    if (currentTarget) {
+      const textNode = currentTarget.parentNode.querySelector('p');
+
+      if (currentTarget.classList.contains('fa-edit') && textNode) {
+        // Going to edit mode
+        textNode.contentEditable = true;
+        currentTarget.parentNode.draggable = false;
+        currentTarget.parentNode.style.cursor = 'default';
+
+        const range = document.createRange();
+        const selection = window.getSelection();
+
+        range.selectNodeContents(textNode);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        textNode.style.cursor = 'text';
+        textNode.focus();
+      } else if (textNode) {
+        // Going to draggable mode
+        textNode.style.cursor = 'grab';
+        currentTarget.parentNode.draggable = true;
+        currentTarget.parentNode.style.cursor = 'grab';
+      }
+
+      currentTarget.classList.toggle('fa-edit');
+      currentTarget.classList.toggle('fa-check');
+    }
+  };
+
   const [suggestionCategory, setSuggestionCategory] = useState([]);
   const [inputFiled, setInputField] = useState([]);
   const [takeInput, setTakeInput] = useState(false);
   const [extraFieldForSuggestionForm, setExtraFieldForSuggestionForm] = useState('');
-  const [editType, seteditType] = useState('');
+  const [editType, setEditType] = useState('');
   const [showSuggestionModal, setShowSuggestionModal] = useState(false);
   const [report, setBugReport] = useState(initialInfo);
 
   const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo');
-  const [weeklySummaryNotReq, setweeklySummaryNotReq] = useState(displayUserProfile?.role === "Mentor" || displayUserProfile?.weeklySummaryOption === "Not Required");
+  const [weeklySummaryNotReq, setweeklySummaryNotReq] = useState(displayUserProfile?.weeklySummaryOption === "Not Required");
 
   // Similar to UserProfile component function
   // Loads component depending on displayUserId passed as prop
@@ -89,7 +192,9 @@ const SummaryBar = props => {
 
   //Get infringement count from userProfile
   const getInfringements = () => {
-    return displayUserProfile && displayUserProfile.infringements ? displayUserProfile.infringements.length : 0;
+    return displayUserProfile && displayUserProfile.infringements
+      ? displayUserProfile.infringements.length
+      : 0;
   };
 
   //Get badges count from userProfile
@@ -102,7 +207,8 @@ const SummaryBar = props => {
       if (badge?.badge?.badgeName === 'Personal Max' || badge?.badge?.type === 'Personal Max') {
         totalBadges += 1;
       } else {
-        totalBadges += Math.round(Number(badge.count));
+        const badgeCount = badge?.count ? Number(badge.count) : 0;
+        totalBadges += Math.round(badgeCount);
       }
     });
 
@@ -123,6 +229,22 @@ const SummaryBar = props => {
       }
     });
 
+    if (data && data.action && data.action == 'edit') {
+      const updatedSuggestionCategory = Array.from(sortableContainerRef.current.children).map(
+        child => {
+          return child.textContent;
+        },
+      );
+
+      updatedSuggestionCategory.forEach(function(value, key) {
+        if (value.trim() === '') {
+          isvalid = false;
+        }
+      });
+
+      data.updatedSuggestionCategory = updatedSuggestionCategory;
+    }
+
     return isvalid ? data : null;
   };
 
@@ -141,21 +263,29 @@ const SummaryBar = props => {
     data['firstName'] = displayUserProfile.firstName;
     data['lastName'] = displayUserProfile.lastName;
     data['email'] = displayUserProfile.email;
-    httpService.post(`${ApiEndpoint}/dashboard/bugreport/${displayUserProfile._id}`, data).catch(e => {});
+    httpService
+      .post(`${ApiEndpoint}/dashboard/bugreport/${displayUserProfile._id}`, data)
+      .catch(e => {});
     openReport();
   };
 
   const setnewfields = (fielddata, setfield) => {
-    setfield(prev => {
-      let newarr = prev;
-      if (fielddata.action === 'add') newarr.unshift(fielddata.newField);
-      if (fielddata.action === 'delete') {
-        newarr = newarr.filter((item, index) => {
-          return fielddata.field ? fielddata.newField !== item : +fielddata.newField !== index + 1;
-        });
-      }
-      return newarr;
-    });
+    if (fielddata?.action == 'edit' && fielddata?.updatedSuggestionCategory) {
+      setfield(fielddata.updatedSuggestionCategory);
+    } else {
+      setfield(prev => {
+        let newarr = [...prev];
+        if (fielddata.action === 'add') newarr.unshift(fielddata.newField);
+        if (fielddata.action === 'delete') {
+          newarr = newarr.filter((item, index) => {
+            return fielddata.field
+              ? fielddata.newField !== item
+              : +fielddata.newField !== index + 1;
+          });
+        }
+        return newarr;
+      });
+    }
   };
   //add new text field or suggestion category by owner class and update the backend
   const editField = async event => {
@@ -172,7 +302,7 @@ const SummaryBar = props => {
         setnewfields(data, setInputField);
       }
       setExtraFieldForSuggestionForm('');
-      seteditType('');
+      setEditType('');
       httpService
         .post(`${ApiEndpoint}/dashboard/suggestionoption/${displayUserProfile._id}`, data)
         .catch(e => {});
@@ -205,7 +335,9 @@ const SummaryBar = props => {
   const openSuggestionModal = async () => {
     if (!showSuggestionModal) {
       try {
-        let res = await httpService.get(`${ApiEndpoint}/dashboard/suggestionoption/${displayUserProfile._id}`);
+        let res = await httpService.get(
+          `${ApiEndpoint}/dashboard/suggestionoption/${displayUserProfile._id}`,
+        );
         if (res && res.status === 200) {
           setSuggestionCategory(res.data.suggestion);
           setInputField(res.data.field);
@@ -236,10 +368,12 @@ const SummaryBar = props => {
       : '';
   };
 
-  const canEditData = () => !(displayUserProfile.role === 'Owner' && authUser.role !== 'Owner') && canPutUserProfileImportantInfo;
+  const canEditData = () =>
+    !(displayUserProfile.role === 'Owner' && authUser.role !== 'Owner') &&
+    canPutUserProfileImportantInfo;
 
   useEffect(() => {
-    setUserProfile(userProfile);
+   setUserProfile(userProfile);
   }, [userProfile]);
 
   useEffect(() => {
@@ -259,7 +393,7 @@ const SummaryBar = props => {
       setBadges(getBadges());
       setTotalEffort(summaryBarData.tangibletime);
       setWeeklySummary(getWeeklySummary(displayUserProfile));
-      setweeklySummaryNotReq(displayUserProfile?.role === "Mentor" || displayUserProfile?.weeklySummaryOption === "Not Required");
+      setweeklySummaryNotReq(displayUserProfile?.weeklySummaryOption === "Not Required");
     }
   }, [displayUserProfile, summaryBarData]);
 
@@ -289,8 +423,8 @@ const SummaryBar = props => {
                 </font>
                 <CardTitle className={`align-middle ${darkMode ? 'text-light' : 'text-dark'}`} tag="h3">
                   <div className='font-weight-bold'>
-                    {displayUserProfile.firstName + ' '}
-                    {displayUserProfile.lastName}
+                    {userProfile?.firstName ||displayUserProfile.firstName + ' '}
+                    {userProfile?.lastName || displayUserProfile.lastName}
                   </div>
                 </CardTitle>
               </div>
@@ -410,178 +544,216 @@ const SummaryBar = props => {
               </Row>
             </Col>
 
-            <Col className={`m-auto mt-2 col-lg-4 col-12 badge-list ${darkMode ? "bg-space-cadet" : ""}`}>
-              <div className={"d-flex justify-content-around no-gutters"}>
-                &nbsp;&nbsp;
-                <div className="image_frame">
+        <Col className={`m-auto mt-2 col-lg-4 col-12 badge-list ${darkMode ? "bg-space-cadet" : ""}`}>
+          <div className={"d-flex justify-content-around no-gutters"}>
+            &nbsp;&nbsp;
+            <div className="image_frame">
+              <div className="redBackgroup">
+                <span>{tasks}</span>
+              </div>
+              {isAuthUser || canEditData() ? (
+                <img className="sum_img" src={task_icon} alt="" onClick={onTaskClick}></img>
+              ) : (
+                <img className="sum_img" src={task_icon} alt=""></img>
+              )}
+            </div>
+            &nbsp;&nbsp;
+            <div className="image_frame">
+              {isAuthUser || canEditData() ? (
+                <img className="sum_img" src={badges_icon} alt="" onClick={onBadgeClick} />
+              ) : (
+                <img className="sum_img" src={badges_icon} alt="" />
+              )}
+              <div className="redBackgroup">
+                <span>{badges}</span>
+              </div>
+            </div>
+            &nbsp;&nbsp;
+            <div className="image_frame">
+              {isAuthUser || canEditData() ? (
+                <Link to={`/userprofile/${displayUserProfile._id}#bluesquare`}>
+                  <img className="sum_img" src={bluesquare_icon} alt="" />
                   <div className="redBackgroup">
-                    <span>{tasks}</span>
+                    <span>{infringements}</span>
                   </div>
-                  {isAuthUser || canEditData() ? (
-                    <img className="sum_img" src={task_icon} alt="" onClick={onTaskClick}></img>
-                  ) : (
-                    <img className="sum_img" src={task_icon} alt=""></img>
-                  )}
-                </div>
-                &nbsp;&nbsp;
-                <div className="image_frame">
-                  {isAuthUser || canEditData() ? (
-                    <img className="sum_img" src={badges_icon} alt="" onClick={onBadgeClick} />
-                  ) : (
-                    <img className="sum_img" src={badges_icon} alt="" />
-                  )}
+                </Link>
+              ) : (
+                <div>
+                  <img className="sum_img" src={bluesquare_icon} alt="" />
                   <div className="redBackgroup">
-                    <span>{badges}</span>
+                    <span>{infringements}</span>
                   </div>
                 </div>
-                &nbsp;&nbsp;
-                <div className="image_frame">
-                  {isAuthUser || canEditData() ? (
-                    <Link to={`/userprofile/${displayUserProfile._id}#bluesquare`}>
-                      <img className="sum_img" src={bluesquare_icon} alt="" />
-                      <div className="redBackgroup">
-                        <span>{infringements}</span>
-                      </div>
-                    </Link>
-                  ) : (
-                    <div>
-                      <img className="sum_img" src={bluesquare_icon} alt="" />
-                      <div className="redBackgroup">
-                        <span>{infringements}</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-                &nbsp;&nbsp;
-                <div className="image_frame">
-                  {isAuthUser || canEditData() ? (
-                    <img className="sum_img" src={report_icon} alt="" onClick={openReport} />
-                  ) : (
-                    <img className="sum_img" src={report_icon} alt="" />
-                  )}
-                </div>
-                &nbsp;&nbsp;
-                <div className="image_frame">
-                  {isAuthUser || canEditData() ? (
-                    <img
-                      className="sum_img"
-                      src={suggestions_icon}
-                      alt=""
-                      onClick={openSuggestionModal}
-                    />
-                  ) : (
-                    <img className="sum_img" src={suggestions_icon} alt="" />
-                  )}
-                </div>
-              </div>
-            </Col>
-            <Modal isOpen={showSuggestionModal} toggle={openSuggestionModal} className={darkMode ? 'text-light' : ''}>
-              <ModalHeader className={headerBg}>User Suggestion</ModalHeader>
-              <ModalBody className={bodyBg}>
-                {displayUserProfile.role === 'Owner' && !extraFieldForSuggestionForm && (
-                  <FormGroup>
-                    <Button
-                      onClick={() => setExtraFieldForSuggestionForm('suggestion')}
-                      type="button"
-                      color="success"
-                      size="md"
-                    >
-                      Edit Category
-                    </Button>{' '}
-                    &nbsp;&nbsp;&nbsp;
-                    <Button
-                      onClick={() => setExtraFieldForSuggestionForm('field')}
-                      type="button"
-                      color="success"
-                      size="md"
-                    >
-                      Edit Field
-                    </Button>
+              )}
+            </div>
+            &nbsp;&nbsp;
+            <div className="image_frame">
+              {isAuthUser || canEditData() ? (
+                <img className="sum_img" src={report_icon} alt="" onClick={openReport} />
+              ) : (
+                <img className="sum_img" src={report_icon} alt="" />
+              )}
+            </div>
+            &nbsp;&nbsp;
+            <div className="image_frame">
+              {isAuthUser || canEditData() ? (
+                <img
+                  className="sum_img"
+                  src={suggestions_icon}
+                  alt=""
+                  onClick={openSuggestionModal}
+                />
+              ) : (
+                <img className="sum_img" src={suggestions_icon} alt="" />
+              )}
+            </div>
+          </div>
+        </Col>
+        <Modal
+          isOpen={showSuggestionModal}
+          onClosed={() => closeSuggestionModal()}
+          toggle={openSuggestionModal} className={darkMode ? 'text-light' : ''}
+        >
+          <ModalHeader className={headerBg}>User Suggestion</ModalHeader>
+          <ModalBody className={bodyBg}>
+            {displayUserProfile.role === 'Owner' && !extraFieldForSuggestionForm && (
+              <FormGroup>
+                <Button
+                  onClick={() => setExtraFieldForSuggestionForm('suggestion')}
+                  type="button"
+                  color="success"
+                  size="md"
+                >
+                  Edit Category
+                </Button>{' '}
+                &nbsp;&nbsp;&nbsp;
+                <Button
+                  onClick={() => setExtraFieldForSuggestionForm('field')}
+                  type="button"
+                  color="success"
+                  size="md"
+                >
+                  Edit Field
+                </Button>
+              </FormGroup>
+            )}
+
+            {extraFieldForSuggestionForm && (
+              <Form
+                onSubmit={editField}
+                id="newFieldForm"
+                style={{ border: '1px solid gray', padding: '5px 10px', margin: '5px 10px' }}
+              >
+                <FormGroup tag="fieldset" id="fieldsetinner">
+                  <legend style={{ fontSize: '16px' }}>Select Action type:</legend>
+                  <FormGroup check>
+                    <Label check className={fontColor}>
+                      <Input
+                        onChange={e => editRadioButtonSelected(e.target.value)}
+                        type="radio"
+                        name="action"
+                        value={'add'}
+                        required
+                      />{' '}
+                      Add
+                    </Label>
                   </FormGroup>
-                )}
-
-                {extraFieldForSuggestionForm && (
-                  <Form
-                    onSubmit={editField}
-                    id="newFieldForm"
-                    style={{ border: '1px solid gray', padding: '5px 10px', margin: '5px 10px' }}
-                  >
-                    <FormGroup tag="fieldset" id="fieldsetinner">
-                      <legend style={{ fontSize: '16px' }}>Select Action type:</legend>
-                      <FormGroup check>
-                        <Label check className={fontColor}>
-                          <Input
-                            onChange={() => seteditType('add')}
-                            type="radio"
-                            name="action"
-                            value={'add'}
-                            required
-                          />{' '}
-                          Add
-                        </Label>
-                      </FormGroup>
-                      <FormGroup check>
-                        <Label check className={fontColor}>
-                          <Input
-                            onChange={() => seteditType('delete')}
-                            type="radio"
-                            name="action"
-                            value={'delete'}
-                            required
-                            disabled={
-                              extraFieldForSuggestionForm === 'field' && inputFiled.length === 0
-                            }
-                          />{' '}
-                          Delete
-                        </Label>
-                      </FormGroup>
-                    </FormGroup>
-                    {editType !== '' && (
-                      <FormGroup>
-                        <Label for="newField" className={fontColor}>
-                          {extraFieldForSuggestionForm === 'suggestion'
-                            ? editType === 'delete'
-                              ? 'Delete category (Write the suggestion category number from the dropdown to delete it).'
-                              : 'Add category'
-                            : editType === 'add'
-                            ? 'Add Field'
-                            : 'Delete field (Copy the field name to delete it).'}
-                        </Label>
+                  {extraFieldForSuggestionForm === 'suggestion' && (
+                    <FormGroup check>
+                      <Label check className={fontColor}>
                         <Input
-                          type="textarea"
-                          name="newField"
-                          id="newField"
-                          placeholder={
-                            extraFieldForSuggestionForm === 'suggestion'
-                              ? editType === 'delete'
-                                ? 'write the category number, like 1 or 2 etc'
-                                : 'write the category name'
-                              : 'write the field name'
-                          }
+                          onChange={e => editRadioButtonSelected(e.target.value)}
+                          type="radio"
+                          name="action"
+                          value={'edit'}
                           required
-                        />
-                      </FormGroup>
+                        />{' '}
+                        Edit
+                      </Label>
+                    </FormGroup>
+                  )}
+                  <FormGroup check>
+                    <Label check className={fontColor}>
+                      <Input
+                        onChange={e => editRadioButtonSelected(e.target.value)}
+                        type="radio"
+                        name="action"
+                        value={'delete'}
+                        required
+                        disabled={
+                          extraFieldForSuggestionForm === 'field' && inputFiled.length === 0
+                        }
+                      />{' '}
+                      Delete
+                    </Label>
+                  </FormGroup>
+                </FormGroup>
+                {editType !== '' && (
+                  <FormGroup>
+                    <Label for="newField" className={fontColor}>
+                      {extraFieldForSuggestionForm === 'suggestion' && categoryDescription}
+                    </Label>
+                    {editType !== 'edit' && (
+                      <Input
+                        type="textarea"
+                        name="newField"
+                        id="newField"
+                        placeholder={
+                          extraFieldForSuggestionForm === 'suggestion'
+                            ? editType === 'delete'
+                              ? 'write the category number, like 1 or 2 etc'
+                              : 'write the category name'
+                            : 'write the field name'
+                        }
+                        required
+                      />
                     )}
-                    <Button id="add" type="submit" color="success" size="md">
-                      Submit
-                    </Button>{' '}
-                    &nbsp;&nbsp;&nbsp;
-                    <Button
-                      onClick={() => {
-                        seteditType('');
-                        setExtraFieldForSuggestionForm('');
-                      }}
-                      type="button"
-                      color="danger"
-                      size="md"
-                    >
-                      Cancel
-                    </Button>
-                  </Form>
+                    {editType === 'edit' && (
+                      <div
+                        className="sortable-container"
+                        ref={sortableContainerRef}
+                        onDragOver={e => onSortableDragOver(e)}
+                      >
+                        {suggestionCategory.map((value, index) => (
+                          <div
+                            className={`sortable-content ${bodyBg} sortable-draggable`}
+                            key={index}
+                            draggable="true"
+                            onDragStart={event => onDragToggleDraggingClass(event)}
+                            onDragEnd={event => onDragToggleDraggingClass(event)}
+                          >
+                            <p>{value}</p>
+                            <button
+                              type="button"
+                              className="edit-icon fa fa-edit"
+                              onClick={event => handleEditClick(event)}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </FormGroup>
                 )}
-                <Form onSubmit={sendUserSuggestion} id="suggestionForm">
-                  <FormGroup>
-                    <Label for="suggestioncate" className={fontColor}>Please select a category of your suggestion:</Label>
+                <Button id="add" type="submit" color="success" size="md">
+                  Submit
+                </Button>{' '}
+                &nbsp;&nbsp;&nbsp;
+                <Button
+                  onClick={() => {
+                    setEditType('');
+                    setExtraFieldForSuggestionForm('');
+                  }}
+                  type="button"
+                  color="danger"
+                  size="md"
+                >
+                  Cancel
+                </Button>
+              </Form>
+            )}
+            <Form onSubmit={sendUserSuggestion} id="suggestionForm">
+              <FormGroup>
+                <Label for="suggestioncate" className={fontColor}>Please select a category of your suggestion:</Label>
 
                     <Input
                       onChange={() => setTakeInput(true)}
diff --git a/src/components/TaskEditSuggestions/thunks.js b/src/components/TaskEditSuggestions/thunks.js
index e464525399..d110530b38 100644
--- a/src/components/TaskEditSuggestions/thunks.js
+++ b/src/components/TaskEditSuggestions/thunks.js
@@ -20,7 +20,7 @@ export const fetchTaskEditSuggestions = () => async (dispatch, getState) => {
   try {
     dispatch(fetchTaskEditSuggestionsBegin());
     const response = await getTaskEditSuggestionsHTTP();
-    dispatch(fetchTaskEditSuggestionsSuccess(response.data));
+    dispatch(fetchTaskEditSuggestionsSuccess(response));
   } catch (error) {
     dispatch(fetchTaskEditSuggestionsError());
   }
diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
index 0fcde32495..08b22bd372 100644
--- a/src/components/TeamMemberTasks/TeamMemberTask.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -306,7 +306,7 @@ const TeamMemberTask = React.memo(
                     );
                   })}
                 {canTruncate && (
-                  <tr key="truncate-button-row" className="task-break">=
+                  <tr key="truncate-button-row" className="task-break">
                     <td className={`task-align  ${darkMode ? "bg-yinmn-blue" : ""}`}>
                       <button type="button" onClick={handleTruncateTasksButtonClick} className={darkMode ? 'text-light' : ''}>
                         {isTruncated ? `Show All (${activeTasks.length}) Tasks` : 'Truncate Tasks'}
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 0bbf3a3354..cad25d2d41 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
-import { Table } from 'reactstrap';
+import { Table, Row, Col } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchTeamMembersTask, deleteTaskNotification } from 'actions/task';
 import React, { useEffect, useState, useCallback } from 'react';
@@ -20,6 +20,7 @@ import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { fetchAllFollowUps } from '../../actions/followUpActions';
+import { MultiSelect } from 'react-multi-select-component';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store
@@ -42,6 +43,12 @@ const TeamMemberTasks = React.memo(props => {
   const [showWhoHasTimeOff, setShowWhoHasTimeOff] = useState(true);
   const userOnTimeOff = useSelector(state => state.timeOffRequests.onTimeOff);
   const userGoingOnTimeOff = useSelector(state => state.timeOffRequests.goingOnTimeOff);
+  const [teamNames, setTeamNames] = useState([]);
+  const [teamCodes, setTeamCodes] = useState([]);
+  const [colors, setColors] = useState([]);
+  const [selectedTeamNames, setSelectedTeamNames] = useState([]);
+  const [selectedCodes, setSelectedCodes] = useState([]);
+  const [selectedColors, setSelectedColors] = useState([]);
 
   const dispatch = useDispatch();
 
@@ -193,6 +200,72 @@ const TeamMemberTasks = React.memo(props => {
     }
   };
 
+  const renderFilters = () => {
+    const teamGroup = {};
+    const teamCodeGroup = {};
+    const colorGroup = {};
+    const teamOptions = [];
+    const teamCodeOptions = [];
+    const colorOptions = [];
+
+    if(usersWithTasks.length > 0) {
+      usersWithTasks.forEach(user => {
+        const teamNames = user.teams.map(team => team.teamName);
+        const code = user.teamCode || 'noCodeLabel';
+        const color = user.weeklySummaryOption || 'noColorLabel';
+
+        teamNames.forEach(name => {
+          if(teamGroup[name]) {
+            teamGroup[name].push(user.personId);
+          } else {
+            teamGroup[name] = [user.personId];
+          }
+        });
+
+        if (teamCodeGroup[code]) {
+          teamCodeGroup[code].push(user.personId);
+        } else {
+          teamCodeGroup[code] = [user.personId];
+        }
+
+        if (colorGroup[color]) {
+          colorGroup[color].push(user.personId);
+        } else {
+          colorGroup[color] = [user.personId];
+        }
+      });
+
+      Object.keys(teamGroup).sort((a,b) => a.localeCompare(b)).forEach(name => {
+        teamOptions.push({
+          value: name,
+          label: `${name}`
+        });
+      })
+
+      Object.keys(teamCodeGroup).sort((a,b) => a.localeCompare(b)).forEach(code => {
+        if (code !== 'noCodeLabel') {
+          teamCodeOptions.push({
+            value: code,
+            label: `${code}`
+          });
+        }
+      });
+
+      Object.keys(colorGroup).sort((a,b) => a.localeCompare(b)).forEach(color => {
+        if (color !== 'noColorLabel') {
+          colorOptions.push({
+            value: color,
+            label: `${color}`
+          });
+        }
+      });
+
+      setTeamNames(teamOptions);
+      setTeamCodes(teamCodeOptions);
+      setColors(colorOptions);
+    }
+  }
+
   useEffect(() => {
     // TeamMemberTasks is only imported in TimeLog component, in which userId is already definitive
     const initialFetching = async () => {
@@ -211,6 +284,9 @@ const TeamMemberTasks = React.memo(props => {
     if (!isLoading) {
       renderTeamsList();
       closeMarkAsDone();
+      if(['Administrator', 'Owner', 'Manager', 'Mentor'].some( role => role === displayUser.role)) {
+        renderFilters();
+      }
     }
   }, [usersWithTasks]);
 
@@ -222,6 +298,46 @@ const TeamMemberTasks = React.memo(props => {
     setShowWhoHasTimeOff(prev => !prev);
   };
 
+  const handleSelectTeamNames = event => {
+    setSelectedTeamNames(event);
+  }
+
+  const handleSelectCodeChange = event => {
+    setSelectedCodes(event);
+  }
+
+  const handleSelectColorChange = event => {
+    setSelectedColors(event);
+  }
+
+  const filterByUserFeatures = (user) => {
+    if(selectedTeamNames.length === 0 && selectedCodes.length === 0 && selectedColors.length === 0) return true;
+
+    return filterByTeamCodes(user.teamCode) && filterByColors(user.weeklySummaryOption) && filterByTeams(user.teams);
+  }
+
+  const filterByTeams = (teams) => {
+    if(selectedTeamNames.length === 0) return true;
+    let match = false;
+    teams.forEach(team => match = match || filterByTeamName(team.teamName));
+    return match;
+  }
+
+  const filterByTeamName = (name) => {
+    return selectedTeamNames.some(option => option.value === name);
+  }
+
+  const filterByTeamCodes = (code) => {
+    if(selectedCodes.length === 0) return true;
+    return selectedCodes.some(option => option.value === code);
+  }
+
+  const filterByColors = (color) => {
+    if(selectedColors.length === 0) return true;
+    return selectedColors.some(option => option.value === color);
+  }
+
+
   return (
     <div className={"container " + (darkMode ? "team-member-tasks bg-space-cadet" : "team-member-tasks")}>
       <header className="header-box">
@@ -320,6 +436,50 @@ const TeamMemberTasks = React.memo(props => {
           darkMode={darkMode}
         />
       )}
+      {
+        ['Administrator', 'Owner', 'Manager', 'Mentor'].some( role => role === displayUser.role) &&
+        <Row style={{ marginBottom: '10px' }}>
+          <Col lg={{ size: 4}} xs={{ size: 12}}>
+            <span className={darkMode ? "text-light" : ""}>
+              Select Team
+            </span>
+            <MultiSelect
+              className="multi-select-filter"
+              options={teamNames}
+              value={selectedTeamNames}
+              onChange={e => {
+                handleSelectTeamNames(e);
+              }}
+            />
+          </Col>
+          <Col lg={{ size: 4}} xs={{ size: 12}}>
+            <span className={darkMode ? "text-light" : ""}>
+            Select Team Code
+            </span>
+            <MultiSelect
+              className="multi-select-filter"
+              options={teamCodes}
+              value={selectedCodes}
+              onChange={e => {
+                handleSelectCodeChange(e);
+              }}
+            />
+          </Col>
+          <Col lg={{ size: 4 }} xs={{ size: 12 }}>
+            <span className={darkMode ? "text-light" : ""}>
+            Select Color
+            </span>
+            <MultiSelect
+              className="multi-select-filter"
+              options={colors}
+              value={selectedColors}
+              onChange={e => {
+                handleSelectColorChange(e);
+              }}
+            />
+          </Col>
+        </Row>
+      }
       <div className="task_table-container">
         <Table>
           <thead className={`pc-component ${darkMode ? "bg-space-cadet" : ""}`} style={{ position: 'sticky', top: 0 }}>
@@ -372,7 +532,7 @@ const TeamMemberTasks = React.memo(props => {
             {isLoading ? (
               <SkeletonLoading template="TeamMemberTasks" />
             ) : (
-              teamList.map(user => {
+              teamList.filter((user) => filterByUserFeatures(user)).map(user => {
                 if (!isTimeFilterActive) {
                   return (
                     <TeamMemberTask
diff --git a/src/components/TeamMemberTasks/__tests__/reducer.test.js b/src/components/TeamMemberTasks/__tests__/reducer.test.js
new file mode 100644
index 0000000000..1e500064e3
--- /dev/null
+++ b/src/components/TeamMemberTasks/__tests__/reducer.test.js
@@ -0,0 +1,105 @@
+import { teamMemberTasksReducer } from '../reducer';
+describe('teamMemberTasksReducer', () => {
+  const initialState = {
+    isLoading: false,
+    usersWithTasks: [],
+    usersWithTimeEntries: [],
+  };
+
+  it('should return the initial state when no action is provided', () => {
+    expect(teamMemberTasksReducer(undefined, {})).toEqual(initialState);
+  });
+
+  it('should handle FETCH_TEAM_MEMBERS_DATA_BEGIN', () => {
+    const action = { type: 'FETCH_TEAM_MEMBERS_DATA_BEGIN' };
+    const expectedState = { ...initialState, isLoading: true };
+    expect(teamMemberTasksReducer(initialState, action)).toEqual(expectedState);
+  });
+
+  it('should handle FETCH_TEAM_MEMBERS_DATA_ERROR', () => {
+    const action = { type: 'FETCH_TEAM_MEMBERS_DATA_ERROR' };
+    const expectedState = { ...initialState, isLoading: false };
+    expect(teamMemberTasksReducer({ ...initialState, isLoading: true }, action)).toEqual(expectedState);
+  });
+
+  it('should handle FETCH_TEAM_MEMBERS_TASK_SUCCESS', () => {
+    const action = {
+      type: 'FETCH_TEAM_MEMBERS_TASK_SUCCESS',
+      payload: { usersWithTasks: [{ id: 1, name: 'John Doe' }] },
+    };
+    const expectedState = { ...initialState, isLoading: false, usersWithTasks: [{ id: 1, name: 'John Doe' }] };
+    expect(teamMemberTasksReducer(initialState, action)).toEqual(expectedState);
+  });
+
+  it('should handle FETCH_TEAM_MEMBERS_TIMEENTRIES_SUCCESS', () => {
+    const action = {
+      type: 'FETCH_TEAM_MEMBERS_TIMEENTRIES_SUCCESS',
+      payload: { usersWithTimeEntries: [{ _id: 1, hours: 10 }] },
+    };
+    const expectedState = { ...initialState, isLoading: false, usersWithTimeEntries: [{ _id: 1, hours: 10 }] };
+    expect(teamMemberTasksReducer(initialState, action)).toEqual(expectedState);
+  });
+
+  it('should handle UPDATE_TEAM_MEMBERS_TIMEENTRY_SUCCESS', () => {
+    const action = {
+      type: 'UPDATE_TEAM_MEMBERS_TIMEENTRY_SUCCESS',
+      payload: { _id: 1, hours: 15 },
+    };
+    const initialStateWithEntries = {
+      ...initialState,
+      usersWithTimeEntries: [{ _id: 1, hours: 10 }],
+    };
+    const expectedState = {
+      ...initialState,
+      usersWithTimeEntries: [{ _id: 1, hours: 15 }],
+    };
+    expect(teamMemberTasksReducer(initialStateWithEntries, action)).toEqual(expectedState);
+  });
+
+  it('should handle DELETE_TASK_NOTIFICATION_SUCCESS', () => {
+    const action = {
+      type: 'DELETE_TASK_NOTIFICATION_SUCCESS',
+      payload: {
+        userId: 1,
+        taskId: 1,
+        taskNotificationId: 1,
+      },
+    };
+    const initialStateWithTasks = {
+      ...initialState,
+      usersWithTasks: [
+        {
+          personId: 1,
+          tasks: [
+            {
+              _id: 1,
+              taskNotifications: [{ _id: 1 }, { _id: 2 }],
+            },
+          ],
+        },
+      ],
+    };
+    const expectedState = {
+      ...initialState,
+      usersWithTasks: [
+        {
+          personId: 1,
+          tasks: [
+            {
+              _id: 1,
+              taskNotifications: [{ _id: 2 }],
+            },
+          ],
+        },
+      ],
+      isLoading: false,
+    };
+    expect(teamMemberTasksReducer(initialStateWithTasks, action)).toEqual(expectedState);
+  });
+
+  it('should handle DELETE_TASK_NOTIFICATION_BEGIN', () => {
+    const action = { type: 'DELETE_TASK_NOTIFICATION_BEGIN' };
+    const expectedState = { ...initialState, isLoading: true };
+    expect(teamMemberTasksReducer(initialState, action)).toEqual(expectedState);
+  });
+});
diff --git a/src/components/Teams/Teams.jsx b/src/components/Teams/Teams.jsx
index 4443bb091a..6cd5421fbf 100644
--- a/src/components/Teams/Teams.jsx
+++ b/src/components/Teams/Teams.jsx
@@ -23,6 +23,7 @@ import TeamMembersPopup from './TeamMembersPopup';
 import CreateNewTeamPopup from './CreateNewTeamPopup';
 import DeleteTeamPopup from './DeleteTeamPopup';
 import TeamStatusPopup from './TeamStatusPopup';
+import lo from 'lodash';
 
 class Teams extends React.PureComponent {
   constructor(props) {
@@ -40,7 +41,6 @@ class Teams extends React.PureComponent {
       selectedTeamCode: '',
       teams: [],
       sortedTeams: [],
-      teamsTable: [],
       sortTeamNameState: 'none', // 'none', 'ascending', 'descending'
       sortTeamActiveState: 'none', // 'none', 'ascending', 'descending'
     };
@@ -48,29 +48,26 @@ class Teams extends React.PureComponent {
 
   componentDidMount() {
     // Initiating the teams fetch action.
-
+    this.setState({ teams: this.teamTableElements(this.props.state.allTeamsData.allTeams)});
     this.props.getAllUserTeams();
     this.props.getAllUserProfile();
-    this.sortTeamsByModifiedDate();
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.sortedTeams !== this.state.sortedTeams) {
-      // This will run whenever sortedTeams changes
-      const teamsTable = this.state.sortedTeams.map(team => {
-        return team;
-      });
-
-      this.setState({ teamsTable });
+    if (
+      !lo.isEqual(prevProps.state.allTeamsData.allTeams, this.props.state.allTeamsData.allTeams) || 
+      prevState.teamNameSearchText !== this.state.teamNameSearchText || 
+      prevState.wildCardSearchText !== this.state.wildCardSearchText
+    ) {
+     this.setState({ teams: this.teamTableElements(this.props.state.allTeamsData.allTeams) });
+    }
+    if (
+      prevState.teams !== this.state.teams || 
+      prevState.sortTeamNameState !== this.state.sortTeamNameState || 
+      prevState.sortTeamActiveState !== this.state.sortTeamActiveState
+    ) {
+      this.sortTeams();
     }
-
-    // if (prevProps.state.allTeamsData.allTeams !== this.props.state.allTeamsData.allTeams) {
-    //   // Teams have changed, update or re-fetch them
-
-    //   this.props.getAllUserTeams();
-    //   this.props.getAllUserProfile();
-    // }
-
     if (
       prevProps.state.allTeamsData.allTeams.length !== this.props.state.allTeamsData.allTeams.length
     ) {
@@ -101,7 +98,6 @@ class Teams extends React.PureComponent {
     const { allTeams, fetching } = this.props.state.allTeamsData;
     const { darkMode } = this.props.state.theme;
 
-    this.state.teams = this.teamTableElements(allTeams, darkMode);
     const numberOfTeams = allTeams.length;
     const numberOfActiveTeams = numberOfTeams ? allTeams.filter(team => team.isActive).length : 0;
 
@@ -133,13 +129,9 @@ class Teams extends React.PureComponent {
                     darkMode={darkMode}
                     />
                 </thead>
-                {
-                  this.state.teamNameSearchText === '' && this.state.wildCardSearchText === '' ? (
-                    <tbody className={darkMode ? 'bg-yinmn-blue text-light' : ''}>{this.state.teamsTable}</tbody>
-                  ) : (
-                    <tbody className={darkMode ? 'bg-yinmn-blue text-light' : ''}>{this.state.teams}</tbody>
-                  )
-                }
+                  <tbody className={darkMode ? 'bg-yinmn-blue text-light' : ''}> 
+                    {this.state.sortedTeams}
+                  </tbody>
               </table>
               </div>
           </React.Fragment>
@@ -199,7 +191,6 @@ class Teams extends React.PureComponent {
       }
       return false;
     });
-
     return filteredList;
   };
   /**
@@ -452,93 +443,68 @@ class Teams extends React.PureComponent {
     this.props.deleteTeamMember(this.state.selectedTeamId, deletedUserId);
   };
 
-  sortTeamsByModifiedDate = () => {
-    const { teams } = this.state;
-
+  sortTeams = () => {
+    const { teams, sortTeamNameState, sortTeamActiveState } = this.state;
     const sortedTeams = [...teams].sort((a, b) => {
       const dateA = new Date(a.props.team.modifiedDatetime);
       const dateB = new Date(b.props.team.modifiedDatetime);
-
-      if (dateA < dateB) {
-        return 1;
-      }
-      if (dateA > dateB) {
-        return -1;
+      const nameA = a.props.name;
+      const nameB = b.props.name;
+      const activeA = a.props.active;
+      const activeB = b.props.active;
+      if (sortTeamNameState === 'ascending') {
+        return nameA.localeCompare(nameB);
+      } else if (sortTeamNameState === 'descending') {
+        return nameB.localeCompare(nameA);
+      } else if (sortTeamActiveState === 'ascending') {
+        return activeA - activeB;
+      } else if (sortTeamActiveState === 'descending') {
+        return activeB - activeA;
+      } else {
+        return dateB - dateA;
       }
-      return 0; // Sort in descending order
-    });
-
+    })
+    .map((team, index) => ({
+      ...team,
+      props: { ...team.props, index },
+    }));
     this.setState({ sortedTeams });
   };
 
   toggleTeamNameSort = () => {
-    const { teams, sortTeamNameState } = this.state;
-
-    let sortedTeams;
     let newSortState;
-
-    switch (sortTeamNameState) {
+    switch(this.state.sortTeamNameState) {
       case 'none':
-        sortedTeams = [...teams].sort((a, b) => a.props.name.localeCompare(b.props.name));
         newSortState = 'ascending';
         break;
       case 'ascending':
-        sortedTeams = [...teams].sort((a, b) => b.props.name.localeCompare(a.props.name));
         newSortState = 'descending';
         break;
-      default:
-        sortedTeams = [...teams].sort((a, b) => {
-          const dateA = new Date(a.props.team.modifiedDatetime);
-          const dateB = new Date(b.props.team.modifiedDatetime);
-          return dateB - dateA;
-        });
+      case 'descending':
         newSortState = 'none';
         break;
+      default:
+        throw new Error('Invalid sort state');
     }
-
-    if (sortedTeams) {
-      sortedTeams = sortedTeams.map((team, index) => ({
-        ...team,
-        props: { ...team.props, index },
-      }));
-    }
-
-    this.setState({ sortedTeams, sortTeamNameState: newSortState, sortTeamActiveState: 'none' });
+    this.setState({ sortTeamNameState: newSortState, sortTeamActiveState: 'none' });
   };
 
   toggleTeamActiveSort = () => {
-    const { teams, sortTeamActiveState } = this.state;
-
-    let sortedTeams;
     let newSortState;
-
-    switch (sortTeamActiveState) {
+    switch (this.state.sortTeamActiveState) {
       case 'none':
-        sortedTeams = [...teams].sort((a, b) => a.props.active - b.props.active);
         newSortState = 'ascending';
         break;
       case 'ascending':
-        sortedTeams = [...teams].sort((a, b) => b.props.active - a.props.active);
         newSortState = 'descending';
         break;
-      default:
-        sortedTeams = [...teams].sort((a, b) => {
-          const dateA = new Date(a.props.team.modifiedDatetime);
-          const dateB = new Date(b.props.team.modifiedDatetime);
-          return dateB - dateA;
-        });
+      case 'descending':
         newSortState = 'none';
         break;
+      default:
+        throw new Error('Invalid sort state');
     }
-
-    if (sortedTeams) {
-      sortedTeams = sortedTeams.map((team, index) => ({
-        ...team,
-        props: { ...team.props, index },
-      }));
-    }
-
-    this.setState({ sortedTeams, sortTeamActiveState: newSortState, sortTeamNameState: 'none' });
+    this.setState({ sortTeamActiveState: newSortState, sortTeamNameState: 'none' });
   };
 }
 const mapStateToProps = state => ({ state });
diff --git a/src/__tests__/TeamTable.test.js b/src/components/Teams/__tests__/TeamTable.test.js
similarity index 97%
rename from src/__tests__/TeamTable.test.js
rename to src/components/Teams/__tests__/TeamTable.test.js
index 68c71bde61..a9a0186b16 100644
--- a/src/__tests__/TeamTable.test.js
+++ b/src/components/Teams/__tests__/TeamTable.test.js
@@ -2,7 +2,7 @@ import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import configureMockStore from 'redux-mock-store';
-import TeamTable from '../components/Reports/TeamTable.jsx';
+import TeamTable from '../../Reports/TeamTable.jsx';
 import thunk from 'redux-thunk';
 
 const middlewares = [thunk];
diff --git a/src/components/Timelog/TimeEntry.jsx b/src/components/Timelog/TimeEntry.jsx
index 3b795fa346..4fa498810a 100644
--- a/src/components/Timelog/TimeEntry.jsx
+++ b/src/components/Timelog/TimeEntry.jsx
@@ -10,7 +10,6 @@ import TimeEntryForm from './TimeEntryForm';
 import DeleteModal from './DeleteModal';
 
 import { editTimeEntry, getTimeEntriesForWeek } from '../../actions/timeEntries';
-import { getUserProfile, updateUserProfile } from '../../actions/userProfile';
 import { editTeamMemberTimeEntry } from '../../actions/task';
 import hasPermission from 'utils/permissions';
 import { hrsFilterBtnColorMap } from 'constants/colors';
@@ -42,89 +41,34 @@ const TimeEntry = (props) => {
     isTangible, 
     hours,
     minutes,
-    projectId,
+    projectName,
+    taskName,
     taskId,
     notes,
   } = data;
-  const projectDetailsSetup =()=>{
-     try {
-         if(from === 'TaskTab' && data){
-             return {
-               projectName: data?.projectName||"",
-               projectCategory: data?.projectCategory||"",
-               taskName:data?.taskName||"",
-               taskClassification : data?.taskClassification || ""
-             }
-         }
-         else
-         {
-          const timeEntryProject = displayUserProjects.find(project => project.projectId === projectId);
-          let returnObj = {}
-           if(timeEntryProject!=undefined){
-               returnObj ={
-                projectName: timeEntryProject?.projectName || "",
-                projectCategory: timeEntryProject?.projectCategory || "",
-               }
-           }
-           if (taskId) {
-            const timeEntryTask = displayUserTasks.find(task => task._id === taskId);
-            if (timeEntryTask){
-               returnObj ={...returnObj,taskName:timeEntryTask?.taskName||"",taskClassification:""}
-            }    
-          }
-          return returnObj;
-         }
-     } catch (error) {
-       console.log(error);
-     }
-  }
+
   const [timeEntryFormModal, setTimeEntryFormModal] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [filteredColor,setFilteredColor] = useState(hrsFilterBtnColorMap[7]);
-  const [projectDetails,setProjectDetails] = useState(projectDetailsSetup())
   const dispatch = useDispatch();
 
- 
-
-
   const cantEditJaeRelatedRecord = cantUpdateDevAdminDetails(timeEntryUserProfile?.email ? timeEntryUserProfile.email : '', authUser.email);
 
-  //moved below code to another function 
-  // if (from === 'TaskTab') {
-  //   // Time Entry rendered under Tasks tab
-  //   ({ projectName, projectCategory, taskName, taskClassification } = data)
-  // } else {
-  //   // Time Entry rendered under weekly tabs
-  //   try {
-  //     const timeEntryProject = displayUserProjects.find(project => project.projectId === projectId);
-  //     console.log(timeEntryProject);
-  //   if(timeEntryProject!=undefined){  
-  //     ({ projectName, projectCategory } = timeEntryProject);
-  //   }
-  //   if (taskId) {
-  //     const timeEntryTask = displayUserTasks.find(task => task._id === taskId);
-  //     console.log('timeEntryTask', timeEntryTask)
-  //     if (timeEntryTask) ({ taskName, taskClassification = '' } = timeEntryTask); // temporary fix for timeentry of tasks not have current user as resource
-  //   }
-  //   } catch (error) {
-  //     console.log(error)
-  //   }
-    
-  // }
-  
   const toggle = () => setTimeEntryFormModal(modal => !modal);
 
   const isAuthUser = timeEntryUserId === authUser.userid;
   const isSameDay = moment().tz('America/Los_Angeles').format('YYYY-MM-DD') === dateOfWork;
-      
+
   //default permission: auth use can edit own sameday timelog entry, but not tangibility
   const isAuthUserAndSameDayEntry = isAuthUser && isSameDay;
 
   //permission to edit any time log entry (from other user's Dashboard
     // For Administrator/Owner role, hasPermission('editTimelogInfo') should be true by default
-  const canEdit = (dispatch(hasPermission('editTimelogInfo')) 
-    //permission to edit any time entry on their own time logs tab
-    || dispatch(hasPermission('editTimeEntry'))) && !cantEditJaeRelatedRecord;
+  const canEditTangibility = (
+    isAuthUser ?
+      dispatch(hasPermission('toggleTangibleTime')):
+      dispatch(hasPermission('editTimeEntryToggleTangible'))
+    ) && !cantEditJaeRelatedRecord;
 
   //permission to Delete time entry from other user's Dashboard
   const canDelete = (dispatch(hasPermission('deleteTimeEntryOthers')) && !cantEditJaeRelatedRecord) ||
@@ -152,40 +96,36 @@ const TimeEntry = (props) => {
     setIsProcessing(false);
   };
 
-  const editFilteredColor = ()=>{
+  const editFilteredColor = () => {
     try {
-    const daysPast = moment().diff(dateOfWork, 'days');
-     let choosenColor ="";
-     switch (daysPast) {
-      case 0:
-         choosenColor = hrsFilterBtnColorMap[1]
-         break;
-      case 1:
-          choosenColor = hrsFilterBtnColorMap[2];
-          break;
-      case 2:
-          choosenColor = hrsFilterBtnColorMap[3];
-          break;
-      case 3:
-          choosenColor = hrsFilterBtnColorMap[4];
-          break;
-      default:
-          choosenColor = hrsFilterBtnColorMap[7];
-     }
-     setFilteredColor(choosenColor);
+      const daysPast = moment().diff(dateOfWork, 'days');
+      let choosenColor = "";
+      switch (daysPast) {
+        case 0:
+            choosenColor = hrsFilterBtnColorMap[1]
+            break;
+        case 1:
+            choosenColor = hrsFilterBtnColorMap[2];
+            break;
+        case 2:
+            choosenColor = hrsFilterBtnColorMap[3];
+            break;
+        case 3:
+            choosenColor = hrsFilterBtnColorMap[4];
+            break;
+        default:
+            choosenColor = hrsFilterBtnColorMap[7];
+      }
+      setFilteredColor(choosenColor);
     } catch (error) {
       console.log(error);
     }
   }
   
   
-  useEffect(()=>{
-     editFilteredColor();
-  },[])
-
-  useEffect(()=>{
-     setProjectDetails(projectDetailsSetup());
-  },[from])
+  useEffect(() => {
+    editFilteredColor();
+  }, [])
 
   return (
     <div style={{ display: "flex" }}>
@@ -193,7 +133,7 @@ const TimeEntry = (props) => {
         style={{
           width: '12px',
           marginBottom: '4px',
-          border: `5px solid ${filteredColor}` ,
+          border: `5px solid ${filteredColor}`,
           backgroundColor: taskId ? filteredColor : 'white',
         }}
       ></div>
@@ -214,13 +154,13 @@ const TimeEntry = (props) => {
             </h4>
             <div className="text-muted">Project/Task:</div>
             <p> 
-              {projectDetails?.projectName} 
+              {projectName} 
               <br />
-              {projectDetails?.taskName && `\u2003 ↳ ${projectDetails?.taskName}`} 
+              {taskName && `\u2003 ↳ ${taskName}`} 
             </p>
             <div className='mb-3'>
             {
-              canEdit 
+              canEditTangibility
                 ? ( 
                     <>
                       <span className="text-muted">Tangible:&nbsp;</span>
@@ -228,27 +168,27 @@ const TimeEntry = (props) => {
                           type="checkbox"
                           name="isTangible"
                           checked={isTangible}
-                          disabled={!canEdit || isProcessing}
+                          disabled={isProcessing}
                           onChange={toggleTangibility}
                       />
-                      { isProcessing ? <span> Processing... </span> : null }
+                      {isProcessing ? <span> Processing... </span> : null}
                     </>
                   )
-                : <span className="font-italic">{isTangible ? 'Tangible' : 'Intangible'}</span> 
-            }
+                  : <span className="font-italic">{isTangible ? 'Tangible' : 'Intangible'}</span>
+              }
             </div>
           </Col>
           <Col md={5} className="pl-2 pr-0">
             <div className="text-muted">Notes:</div>
             {ReactHtmlParser(notes)}
             <div className="buttons">
-              {((canEdit || isAuthUserAndSameDayEntry )&& !cantEditJaeRelatedRecord) 
+              {((true || isAuthUserAndSameDayEntry )&& !cantEditJaeRelatedRecord) 
                 && from === 'WeeklyTab' 
                 && (
                   <button className="mr-3 text-primary">
                     <FontAwesomeIcon icon={faEdit} size="lg" onClick={toggle} />
                   </button>
-              )}
+                )}
               {canDelete && from === 'WeeklyTab' && (
                 <button className='text-primary'>
                   <DeleteModal timeEntry={data} />
diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
index 4c3e194005..13bf3c5cf1 100644
--- a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
+++ b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
@@ -20,8 +20,7 @@ import { Editor } from '@tinymce/tinymce-react';
 import { toast } from 'react-toastify';
 import ReactTooltip from 'react-tooltip';
 import { postTimeEntry, editTimeEntry, getTimeEntriesForWeek } from '../../../actions/timeEntries';
-import { getUserProjects, getUserWBSs } from '../../../actions/userProjects';
-import { getUserProfile, updateUserProfile } from 'actions/userProfile';
+import { getUserProfile } from 'actions/userProfile';
 
 import AboutModal from './AboutModal';
 import TangibleInfoModal from './TangibleInfoModal';
@@ -71,7 +70,7 @@ const TINY_MCE_INIT_OPTIONS = {
 const TimeEntryForm = props => {
   /*---------------- variables -------------- */
   // props from parent
-  const { from, sendStop, edit, data, toggle, isOpen, tab, userProfile, darkMode } = props;
+  const { from, sendStop, edit, data, toggle, isOpen, tab, darkMode } = props;
   // props from store
   const { authUser } = props;
 
@@ -137,13 +136,16 @@ const TimeEntryForm = props => {
   const isForAuthUser = timeEntryUserId === authUser.userid;
   const isSameDayTimeEntry = moment().tz('America/Los_Angeles').format('YYYY-MM-DD') === formValues.dateOfWork;
   const isSameDayAuthUserEdit = isForAuthUser && isSameDayTimeEntry;
-  const canEditTimeEntry =
-    props.hasPermission('editTimelogInfo') || props.hasPermission('editTimeEntry');
+  const canEditTimeEntryTime = props.hasPermission('editTimeEntryTime');
+  const canEditTimeEntryDescription = props.hasPermission('editTimeEntryDescription');
+  const canEditTimeEntryToggleTangible = isForAuthUser ?
+    props.hasPermission('toggleTangibleTime'):
+    props.hasPermission('editTimeEntryToggleTangible');
+  const canEditTimeEntryDate = props.hasPermission('editTimeEntryDate');
   const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo');
 
 // Administrator/Owner can add time entries for any dates, and other roles can only edit their own time entry in the same day.
-  const canUserEditDate = canEditTimeEntry && canPutUserProfileImportantInfo;
-  const canChangeTime = from !== 'Timer' && (from === 'TimeLog' || canEditTimeEntry || isSameDayAuthUserEdit) ;
+  const canChangeTime = from !== 'Timer' && (from === 'TimeLog' || canEditTimeEntryTime || isSameDayAuthUserEdit) ;
 
   /*---------------- methods -------------- */
   const toggleRemainder = () =>
@@ -224,7 +226,7 @@ const TimeEntryForm = props => {
 
     if (!formValues.dateOfWork) errorObj.dateOfWork = 'Date is required';
     if (!isDateValid) errorObj.dateOfWork = 'Invalid date';
-    if (from !== 'Timer' && !canChangeTime) errorObj.dateOfWork = 'Invalid date. Please refresh the page.';
+    if (from !== 'Timer' && from !== 'WeeklyTab' && !canChangeTime) errorObj.dateOfWork = 'Invalid date. Please refresh the page.';
     if (!formValues.hours && !formValues.minutes)
       errorObj.time = 'Time should be greater than 0 minutes';
     if (!formValues.projectId) errorObj.projectId = 'Project/Task is required';
@@ -372,27 +374,30 @@ const TimeEntryForm = props => {
       project.WBSObject = {};
       projectsObject[projectId] = project;
     });
-    timeEntryFormUserWBSs.forEach(WBS => {
-      const { projectId, _id: wbsId } = WBS;
-      WBS.taskObject = {};
-      if(projectsObject[projectId]){
-        projectsObject[projectId].WBSObject[wbsId] = WBS;
-      }
-    });
     timeEntryFormUserTasks.forEach(task => {
-      const { projectId, wbsId, _id: taskId, resources } = task;
-      const isTaskCompletedForTimeEntryUser = resources.find(
-        resource => resource.userID === timeEntryUserId,
-      ).completedTask;
-      if (!isTaskCompletedForTimeEntryUser && projectsObject[projectId]) {
-        if (!projectsObject[projectId].WBSObject) {
-          projectsObject[projectId].WBSObject = {};
-        }
-        if (!projectsObject[projectId].WBSObject[wbsId]) {
-          projectsObject[projectId].WBSObject[wbsId] = { taskObject: {} };
-        }
+      const { projectId, wbsId, _id: taskId, wbsName, projectName } = task;
+      if (!projectsObject[projectId]) {
+        projectsObject[projectId] = {
+          projectName,
+          WBSObject: {
+            [wbsId]: {
+              wbsName,
+              taskObject: {
+                [taskId]: task,
+              },
+            },
+          },
+        };
+      } else if (!projectsObject[projectId].WBSObject[wbsId]) {
+        projectsObject[projectId].WBSObject[wbsId] = {
+          wbsName,
+          taskObject: {
+            [taskId]: task,
+          },
+        };
+      } else {
         projectsObject[projectId].WBSObject[wbsId].taskObject[taskId] = task;
-      }   
+      }
     });
 
     for (const [projectId, project] of Object.entries(projectsObject)) {
@@ -432,23 +437,19 @@ const TimeEntryForm = props => {
     try {
       const profileURL = ENDPOINTS.USER_PROFILE(timeEntryUserId);
       const projectURL = ENDPOINTS.USER_PROJECTS(timeEntryUserId);
-      const wbsURL = ENDPOINTS.WBS_USER(timeEntryUserId);
       const taskURL = ENDPOINTS.TASKS_BY_USERID(timeEntryUserId);
 
       const profilePromise = axios.get(profileURL);
       const projectPromise = axios.get(projectURL);
-      const wbsPromise = axios.get(wbsURL);
       const taskPromise = axios.get(taskURL);
 
-      const [userProfileRes, userProjectsRes, userWBSsRes, userTasksRes] = await Promise.all([
+      const [userProfileRes, userProjectsRes, userTasksRes] = await Promise.all([
         profilePromise,
         projectPromise,
-        wbsPromise,
         taskPromise,
       ]);
       setTimeEntryFormUserProfile(userProfileRes.data);
       setTimeEntryFormUserProjects(userProjectsRes.data);
-      setTimeEntryFormUserWBSs(userWBSsRes.data);
       setTimeEntryFormUserTasks(userTasksRes.data);
       setIsAsyncDataLoaded(true);
     } catch (e) {
@@ -516,8 +517,8 @@ const TimeEntryForm = props => {
                 id="dateOfWork"
                 value={formValues.dateOfWork}
                 onChange={handleInputChange}
-                // min={userProfile?.isFirstTimelog === true ? moment().toISOString().split('T')[0] : userProfile?.startDate ? userProfile?.startDate.split('T')[0] : null} 
-                disabled={!canEditTimeEntry}
+                // min={userProfile?.isFirstTimelog === true ? moment().toISOString().split('T')[0] : userProfile?.startDate.split('T')[0]} 
+                disabled={!canEditTimeEntryDate}
               />
               {'dateOfWork' in errors && (
                 <div className="text-danger">
@@ -588,6 +589,7 @@ const TimeEntryForm = props => {
                 className="form-control"
                 value={formValues.notes}
                 onEditorChange={handleEditorChange}
+                disabled={!(isSameDayAuthUserEdit || canEditTimeEntryDescription)}
               />
 
               {'notes' in errors && (
@@ -603,7 +605,7 @@ const TimeEntryForm = props => {
                   name="isTangible"
                   checked={formValues.isTangible}
                   onChange={handleInputChange}
-                  disabled={!(canEditTimeEntry || from === 'Timer')}
+                  disabled={!canEditTimeEntryToggleTangible || from === 'Timer'}
                 />
                 Tangible&nbsp;
                 <i
@@ -661,16 +663,12 @@ TimeEntryForm.propTypes = {
 
 const mapStateToProps = state => ({
   authUser: state.auth.user,
-  userProfile: state.userProfile,
   darkMode: state.theme.darkMode,
 });
 
 export default connect(mapStateToProps, {
   hasPermission,
   getUserProfile,
-  updateUserProfile,
-  getUserProjects,
-  getUserWBSs,
   editTimeEntry,
   postTimeEntry,
   getTimeEntriesForWeek,
diff --git a/src/components/Timelog/TimeEntryForm/__tests__/TimeEntryForm_edit.test.js b/src/components/Timelog/TimeEntryForm/__tests__/TimeEntryForm_edit.test.js
index 0d3d939bd8..77c58103da 100644
--- a/src/components/Timelog/TimeEntryForm/__tests__/TimeEntryForm_edit.test.js
+++ b/src/components/Timelog/TimeEntryForm/__tests__/TimeEntryForm_edit.test.js
@@ -116,4 +116,4 @@ xdescribe('<TimeEntryForm edit/>', () => {
     // Save button is now disabled when you don't make any edits to the time.
     // That needs to be taken into account to fix these two tests.
   });
-});
+});
\ No newline at end of file
diff --git a/src/components/Timelog/Timelog.jsx b/src/components/Timelog/Timelog.jsx
index c6c7b7da4c..5e9d103a36 100644
--- a/src/components/Timelog/Timelog.jsx
+++ b/src/components/Timelog/Timelog.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import {
   Container,
   Row,
@@ -34,7 +34,7 @@ import { ProfileNavDot } from 'components/UserManagement/ProfileNavDot';
 import TeamMemberTasks from 'components/TeamMemberTasks';
 import { getTimeEntriesForWeek, getTimeEntriesForPeriod } from '../../actions/timeEntries';
 import { getUserProfile, updateUserProfile, getUserTasks } from '../../actions/userProfile';
-import { getUserProjects, getUserWBSs } from '../../actions/userProjects';
+import { getUserProjects } from '../../actions/userProjects';
 import { getAllRoles } from '../../actions/role';
 import TimeEntryForm from './TimeEntryForm';
 import TimeEntry from './TimeEntry';
@@ -48,6 +48,11 @@ import { boxStyle, boxStyleDark } from 'styles';
 import { formatDate } from 'utils/formatDate';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import { cantUpdateDevAdminDetails } from 'utils/permissions';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 
 const doesUserHaveTaskWithWBS = (tasks = [], userId) => {
   if (!Array.isArray(tasks)) return false;
@@ -84,10 +89,14 @@ const endOfWeek = offset => {
 
 const Timelog = props => {
   const darkMode = useSelector(state => state.theme.darkMode)
-
+  const location = useLocation();
+  function displayUserIdRoute() {
+   const path =  location.pathname
+   const id = path.split('/').pop()
+   return id;
+  }
   // Main Function component
   const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo');
-  const canEditTimeEntry = props.hasPermission('editTimeEntry');
 
   // access the store states
   const {
@@ -96,7 +105,6 @@ const Timelog = props => {
     timeEntries,
     roles,
     displayUserProjects,
-    displayUserWBSs,
     disPlayUserTasks,
   } = props;
 
@@ -132,7 +140,7 @@ const Timelog = props => {
   const checkSessionStorage = () => JSON.parse(sessionStorage.getItem('viewingUser')) ?? false;
   const [viewingUser, setViewingUser] = useState(checkSessionStorage());
   const [displayUserId, setDisplayUserId] = useState(
-    viewingUser ? viewingUser.userId : userId,
+    viewingUser ? viewingUser.userId : displayUserIdRoute()||userId
   );
 
   const isAuthUser = authUser.userid === displayUserId;
@@ -216,7 +224,6 @@ const Timelog = props => {
         props.getTimeEntriesForPeriod(userId, timeLogState.fromDate, timeLogState.toDate),
         props.getAllRoles(),
         props.getUserProjects(userId),
-        props.getUserWBSs(userId),
         props.getUserTasks(userId),
       ]);
       setTimeLogState({ ...timeLogState, isTimeEntriesLoading: false });
@@ -228,8 +235,12 @@ const Timelog = props => {
   };
 
   const toggle = () => {
-    if(isNotAllowedToEdit){
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+    if (isNotAllowedToEdit) {
+      if (displayUserProfile?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     setTimeLogState({ ...timeLogState, timeEntryFormModal: !timeLogState.timeEntryFormModal });
@@ -333,25 +344,30 @@ const Timelog = props => {
       project.WBSObject = {};
       projectsObject[projectId] = project;
     });
-    displayUserWBSs.forEach(WBS => {
-      const { projectId, _id: wbsId } = WBS;
-      WBS.taskObject = [];
-      if(projectsObject[projectId]){
-        projectsObject[projectId].WBSObject[wbsId] = WBS;
-      }
-    })
     disPlayUserTasks.forEach(task => {
-      const { projectId, wbsId, _id: taskId, resources } = task;
-      const isTaskCompletedForTimeEntryUser = resources.find(resource => resource.userID === displayUserProfile._id)?.completedTask;
-      if (!isTaskCompletedForTimeEntryUser && projectsObject[projectId]) {
-        if (!projectsObject[projectId].WBSObject) {
-          projectsObject[projectId].WBSObject = {};
-        }
-        if (!projectsObject[projectId].WBSObject[wbsId]) {
-          projectsObject[projectId].WBSObject[wbsId] = { taskObject: {} };
+      const { projectId, wbsId, _id: taskId, wbsName, projectName } = task;
+      if (!projectsObject[projectId]) {
+        projectsObject[projectId] = { 
+          projectName, 
+          WBSObject: {
+            [wbsId]: { 
+              wbsName, 
+              taskObject: {
+                [taskId]: task
+              } 
+            }
+          }
+        } 
+      } else if (!projectsObject[projectId].WBSObject[wbsId]) {
+        projectsObject[projectId].WBSObject[wbsId] = {
+          wbsName, 
+          taskObject: {
+            [taskId]: task
+          } 
         }
+      } else {
         projectsObject[projectId].WBSObject[wbsId].taskObject[taskId] = task;
-      }     
+      }
     });
     
     for (const [projectId, project] of Object.entries(projectsObject)) {
@@ -421,6 +437,8 @@ const Timelog = props => {
   }, [timeLogState.projectsSelected]);
   
   useEffect(() => {
+
+    setDisplayUserId( viewingUser ? viewingUser.userId : displayUserIdRoute()||userId);
     // Listens to sessionStorage changes, when setting viewingUser in leaderboard, an event is dispatched called storage. This listener will catch it and update the state.
     window.addEventListener('storage', handleStorageEvent);
     return () => {
@@ -585,11 +603,9 @@ const Timelog = props => {
                           <Button onClick={openInfo} color="primary" style={darkMode ? boxStyleDark : boxStyle}>
                             Close
                           </Button>
-                          {canEditTimeEntry ? (
-                            <Button onClick={openInfo} color="secondary" style={darkMode ? boxStyleDark : boxStyle}>
-                              Edit
-                            </Button>
-                          ) : null}
+                          <Button onClick={openInfo} color="secondary">
+                            Edit
+                          </Button>
                         </ModalFooter>
                       </Modal>
                       {/* This TimeEntryForm is for adding intangible time throught the add intangible time enty button */}
@@ -788,7 +804,6 @@ const mapStateToProps = state => ({
   displayUserProfile: state.userProfile,
   timeEntries: state.timeEntries,
   displayUserProjects: state.userProjects.projects,
-  displayUserWBSs: state.userProjects.wbs,
   disPlayUserTasks: state.userTask,
   roles: state.role.roles,
 });
@@ -799,7 +814,6 @@ export default connect(mapStateToProps, {
   getTimeEntriesForPeriod,
   getUserProfile,
   getUserProjects,
-  getUserWBSs,
   getUserTasks,
   updateUserProfile,
   getAllRoles,
diff --git a/src/components/Timelog/__tests__/TimeEntry.test.js b/src/components/Timelog/__tests__/TimeEntry.test.js
index ec3e841831..667fed599b 100644
--- a/src/components/Timelog/__tests__/TimeEntry.test.js
+++ b/src/components/Timelog/__tests__/TimeEntry.test.js
@@ -34,7 +34,7 @@ xdescribe('<TimeEntry />', () => {
       store,
     });
   });
-  it('should render <TimeEntry /> without crashing', () => {});
+  it('should render <TimeEntry /> without crashing', () => { });
   it('should render the correct date, year, and the day of the week', () => {
     const date = screen.getByRole('heading', { name: dateRegex });
     expect(date.textContent).toMatch(moment(timeEntryMock.weeks[0][0].dateOfWork).format('MMM D'));
diff --git a/src/components/UserManagement/ProfileNavDot.jsx b/src/components/UserManagement/ProfileNavDot.jsx
index b119cf372d..4f62a263f5 100644
--- a/src/components/UserManagement/ProfileNavDot.jsx
+++ b/src/components/UserManagement/ProfileNavDot.jsx
@@ -1,18 +1,30 @@
 import { React } from 'react';
 import { useHistory } from 'react-router';
 
-// pass userId of an account to navigate to user profile onClick of icon
+// pass userId of an account to navigate to user profile onClick of icon and open in new tab if Command or Control key is pressed
 export const ProfileNavDot = ({ userId }) => {
   const history = useHistory();
+
+  const handleClick = (event) => {
+    const url = `/userprofile/${userId}`;
+
+    // Check if Command key (metaKey) or Control key (ctrlKey) is pressed
+    if (event.metaKey || event.ctrlKey) {
+      // Open the URL in a new tab
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } else {
+      // Navigate to the URL in the current tab
+      history.push(url);
+    }
+  };
+
   return (
     <span
-      style={{ fontSize: '1.5rem' }}
-      onClick={() => {
-        history.push(`/userprofile/${userId}`);
-      }}
+      style={{ fontSize: '1.5rem', cursor: 'pointer' }}
+      onClick={handleClick}
       title="Click here to go to the user's profile."
     >
       <i className="fa fa-user"/>
     </span>
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/UserManagement/UserManagement.jsx b/src/components/UserManagement/UserManagement.jsx
index 50e797a281..f40f5cac31 100644
--- a/src/components/UserManagement/UserManagement.jsx
+++ b/src/components/UserManagement/UserManagement.jsx
@@ -36,6 +36,11 @@ import SetupNewUserPopup from './setupNewUserPopup';
 import { cantUpdateDevAdminDetails } from 'utils/permissions';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { toast } from 'react-toastify';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 
 class UserManagement extends React.PureComponent {
   filteredUserDataCount = 0;
@@ -316,8 +321,12 @@ class UserManagement extends React.PureComponent {
    */
   onLogTimeOffClick = user => {
     // Check if target user is Jae's related user and authroized to manage time off requests
-    if(cantUpdateDevAdminDetails(user.email , this.authEmail)){
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+    if (cantUpdateDevAdminDetails(user.email, this.authEmail)) {
+      if (user?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     const canManageTimeOffRequests = this.props.hasPermission('manageTimeOffRequests')
@@ -340,7 +349,11 @@ class UserManagement extends React.PureComponent {
 
   onFinalDayClick = (user, status) => {
     if(cantUpdateDevAdminDetails(user.email , this.authEmail)) {
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      if (user?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     if (status === FinalDay.NotSetFinalDay) {
diff --git a/src/components/UserManagement/UserTableData.jsx b/src/components/UserManagement/UserTableData.jsx
index 7515aa6bb6..9fbdd7e842 100644
--- a/src/components/UserManagement/UserTableData.jsx
+++ b/src/components/UserManagement/UserTableData.jsx
@@ -11,6 +11,11 @@ import { boxStyle, boxStyleDark } from 'styles';
 import { connect } from 'react-redux';
 import { formatDate } from 'utils/formatDate';
 import { cantUpdateDevAdminDetails } from 'utils/permissions';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 /**
  * The body row of the user table
  */
@@ -93,8 +98,12 @@ const UserTableData = React.memo(props => {
           type="button"
           className={`btn btn-outline-${props.isActive ? 'warning' : 'success'} btn-sm`}
           onClick={e => {
-            if(cantUpdateDevAdminDetails(props.user.email , props.authEmail)){
-              alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+            if(cantUpdateDevAdminDetails(props.user?.email , props.authEmail)){
+              if (props.user?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+                alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+              } else {
+                alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+              }
               return;
             }
             onReset(true);
@@ -146,8 +155,12 @@ const UserTableData = React.memo(props => {
           type="button"
           className={`btn btn-outline-${props.isSet ? 'warning' : 'success'} btn-sm`}
           onClick={e => {
-            if(cantUpdateDevAdminDetails(props.user.email , props.authEmail)){
-              alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+            if(cantUpdateDevAdminDetails(props.user?.email , props.authEmail)){
+              if (props.user?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+                alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+              } else {
+                alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+              }
               return;
             }
             props.onFinalDayClick(
diff --git a/src/components/UserManagement/__test__/UserSearchPanel.test.js b/src/components/UserManagement/__test__/UserSearchPanel.test.js
deleted file mode 100644
index 13399bcc3a..0000000000
--- a/src/components/UserManagement/__test__/UserSearchPanel.test.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { screen, render} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import UserSearchPanel from '../UserSearchPanel';
-import thunk from 'redux-thunk';
-import configureStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../__tests__/utils';
-import { rolesMock } from '../../../__tests__/mockStates';
-const mockStore = configureStore([thunk]);
-const adminAccountMock = {
-  _id: '5edf141c78f1380017b829a6',
-  isAdmin: true,
-  user: {
-    expiryTimestamp: '2023-08-22T22:51:06.544Z',
-    iat: 1597272666,
-    userid: '5edf141c78f1380017b829a6',
-    role: 'Administrator',
-    email: 'non_jae@hgn.net'
-  },
-  firstName: 'Non',
-  lastName: 'Petterson',
-  role: 'Administrator',
-  weeklycommittedHours: 10,
-  email: 'non_jae@hgn.net'
-}
-
-
-describe('user search panel', () => {
-  let onNewUserClick;
-  let onSearch;
-  let onActiveFilter;
-  let store;
-  beforeEach(() => {
-    store = mockStore({
-      auth: adminAccountMock,
-      userProfile: adminAccountMock,
-      role: rolesMock.role
-    });
-    onNewUserClick = jest.fn();
-    onSearch = jest.fn();
-    onActiveFilter = jest.fn();
-    renderWithProvider(
-      <UserSearchPanel
-        onSearch={onSearch}
-        onActiveFiter={onActiveFilter}
-        onNewUserClick={onNewUserClick}
-      />,
-      { store, }
-    );
-  });
-
-  describe('Structure', () => {
-    it('should render one `create new user` button', () => {
-      expect(screen.getByRole('button', { name: /create new user/i })).toBeInTheDocument();
-    });
-    it('should render one textbox', () => {
-      expect(screen.getByRole('textbox')).toBeInTheDocument();
-    });
-    it('should render one combo box for selection', () => {
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-    });
-  });
-  describe('Behavior', () => {
-    it('should call onNewUserClick() when the user clicks `create new user` button', () => {
-      userEvent.click(screen.getByRole('button', { name: /create new user/i }));
-      expect(onNewUserClick).toHaveBeenCalled();
-    });
-    it('should call onSearch each time the user types one letter', async () => {
-      await userEvent.type(screen.getByRole('textbox'), 'test', { allAtOnce: false });
-      expect(onSearch).toHaveBeenCalledTimes(4);
-    });
-    it('should change value when user types something', async () => {
-      await userEvent.type(screen.getByRole('textbox'), 'test', { allAtOnce: false });
-      expect(screen.getByRole('textbox')).toHaveValue('test');
-    });
-    it('should change value when user select different option on the combobox', () => {
-      userEvent.selectOptions(screen.getByRole('combobox'), 'active');
-      expect(screen.getByRole('combobox')).toHaveValue('active');
-      userEvent.selectOptions(screen.getByRole('combobox'), 'inactive');
-      expect(screen.getByRole('combobox')).toHaveValue('inactive');
-    });
-    it('should fire onActiveFilter() once the user change the value on combobox', () => {
-      userEvent.selectOptions(screen.getByRole('combobox'), 'active');
-      expect(onActiveFilter).toHaveBeenCalled();
-      userEvent.selectOptions(screen.getByRole('combobox'), 'inactive');
-      expect(onActiveFilter).toHaveBeenCalledTimes(2);
-    });
-  });
-  describe('More Behaviors', () => {
-    it('should not call onSearch when no user input', async () => {
-      await userEvent.type(screen.getByRole('textbox'), '');
-      expect(onSearch).toHaveBeenCalledTimes(0);
-    });
-    it('should change value when user types something', async () => {
-      await userEvent.type(screen.getByRole('textbox'), 'test all at once', { allAtOnce: true });
-      expect(screen.getByRole('textbox')).toHaveValue('test all at once');
-    });
-    it('should change value when user select different option on the combobox', () => {
-      userEvent.selectOptions(screen.getByRole('combobox'), 'paused');
-      expect(screen.getByRole('combobox')).toHaveValue('paused');
-      userEvent.selectOptions(screen.getByRole('combobox'), 'all');
-      expect(screen.getByRole('combobox')).toHaveValue('all');
-    });
-    it('should fire onActiveFilter() once the user change the value on combobox', () => {
-      userEvent.selectOptions(screen.getByRole('combobox'), 'paused');
-      expect(onActiveFilter).toHaveBeenCalled();
-      userEvent.selectOptions(screen.getByRole('combobox'), 'all');
-      expect(onActiveFilter).toHaveBeenCalledTimes(2);
-    });
-  });
-});
diff --git a/src/components/UserManagement/__test__/ActivationDatePopup.test.js b/src/components/UserManagement/__tests__/ActivationDatePopup.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/ActivationDatePopup.test.js
rename to src/components/UserManagement/__tests__/ActivationDatePopup.test.js
diff --git a/src/components/UserManagement/__test__/ActiveInactiveConfirmationPopup.test.js b/src/components/UserManagement/__tests__/ActiveInactiveConfirmationPopup.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/ActiveInactiveConfirmationPopup.test.js
rename to src/components/UserManagement/__tests__/ActiveInactiveConfirmationPopup.test.js
diff --git a/src/components/UserManagement/__test__/DeleteUserPopup.test.js b/src/components/UserManagement/__tests__/DeleteUserPopup.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/DeleteUserPopup.test.js
rename to src/components/UserManagement/__tests__/DeleteUserPopup.test.js
diff --git a/src/components/UserManagement/__test__/DuplicateNamePopup.test.js b/src/components/UserManagement/__tests__/DuplicateNamePopup.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/DuplicateNamePopup.test.js
rename to src/components/UserManagement/__tests__/DuplicateNamePopup.test.js
diff --git a/src/components/UserManagement/__test__/NewUserPopup.test.js b/src/components/UserManagement/__tests__/NewUserPopup.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/NewUserPopup.test.js
rename to src/components/UserManagement/__tests__/NewUserPopup.test.js
diff --git a/src/components/UserManagement/__test__/TextSearchBox.test.js b/src/components/UserManagement/__tests__/TextSearchBox.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/TextSearchBox.test.js
rename to src/components/UserManagement/__tests__/TextSearchBox.test.js
diff --git a/src/components/UserManagement/__test__/UserTableData.test.js b/src/components/UserManagement/__tests__/UserTableData.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/UserTableData.test.js
rename to src/components/UserManagement/__tests__/UserTableData.test.js
diff --git a/src/components/UserManagement/__test__/UserTableFooter.test.js b/src/components/UserManagement/__tests__/UserTableFooter.test.js
similarity index 64%
rename from src/components/UserManagement/__test__/UserTableFooter.test.js
rename to src/components/UserManagement/__tests__/UserTableFooter.test.js
index 9880e06f46..78ca5a2158 100644
--- a/src/components/UserManagement/__test__/UserTableFooter.test.js
+++ b/src/components/UserManagement/__tests__/UserTableFooter.test.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { screen, render, cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { authMock, userProfileMock, timeEntryMock, userProjectMock } from '../../../__tests__/mockStates';
-import { renderWithProvider, renderWithRouterMatch } from '../../../__tests__/utils';
 import UserTableFooter from '../UserTableFooter';
+
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -31,6 +30,15 @@ describe('user table footer', () => {
     );
   });
   describe('structure', () => {
+    const pageSize = 10;
+    const selectedPage = 1;
+    const datacount = 60;
+    it('should render a page summary info', () => {
+      let right_num = pageSize * selectedPage;
+      let left_num = 1 + (selectedPage-1) * pageSize;
+      let page_summ = `Showing ${left_num} - ${right_num} of ${datacount}`;
+      expect(screen.getByText(page_summ)).toBeInTheDocument();
+    });
     it('should render a dropdown', () => {
       expect(screen.getByRole('combobox')).toBeInTheDocument();
     });
@@ -98,3 +106,47 @@ describe('user table footer', () => {
     });
   });
 });
+
+describe('user table footer tests', () => {
+  let onSelectPageSize;
+  let onPageSelect;
+  beforeEach(() => {
+    onSelectPageSize = jest.fn();
+    onPageSelect = jest.fn();
+    const pageSize = 10;
+    const selectedPage = 4;
+    const datacount = 60;
+    const isSelected = true;
+    const pageNo = 1;
+    render(
+      <UserTableFooter
+        onSelectPageSize={onSelectPageSize}
+        onPageSelect={onPageSelect}
+        pageSize={pageSize}
+        selectedPage={selectedPage}
+        datacount={datacount}
+        isSelected={isSelected}
+        pageNo={pageNo}
+      />,
+    );
+  });
+  describe('more tests for the summary', () => {
+    const pageSize = 10;
+    const selectedPage = 4;
+    const datacount = 60;
+    it('should render a page summary info', () => {
+      let right_num = pageSize * selectedPage;
+      let left_num = 1 + (selectedPage-1) * pageSize;
+      let page_summ = `Showing ${left_num} - ${right_num} of ${datacount}`;
+      expect(screen.getByText(page_summ)).toBeInTheDocument();
+    });
+    it('should display correct summary info', async () => {
+      userEvent.click(screen.getByRole('button', { name: /4/i }));
+      expect(onPageSelect).toHaveBeenCalledWith(4);
+      let right_num = pageSize * selectedPage;
+      let left_num = 1 + (selectedPage-1) * pageSize;
+      let page_summ = `Showing ${left_num} - ${right_num} of ${datacount}`;
+      expect(screen.getByText(page_summ)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/UserManagement/__test__/UserTableSearchHeader.test.js b/src/components/UserManagement/__tests__/UserTableSearchHeader.test.js
similarity index 100%
rename from src/components/UserManagement/__test__/UserTableSearchHeader.test.js
rename to src/components/UserManagement/__tests__/UserTableSearchHeader.test.js
diff --git a/src/components/UserProfile/AddNewTeamModal.jsx b/src/components/UserProfile/AddNewTeamModal.jsx
index 9d923f811f..f9e68038a5 100644
--- a/src/components/UserProfile/AddNewTeamModal.jsx
+++ b/src/components/UserProfile/AddNewTeamModal.jsx
@@ -11,8 +11,11 @@ import {
   Label,
   Input,
 } from 'reactstrap';
+import { useSelector } from 'react-redux';
 
 const AddNewTeamModal = props => {
+  const darkMode = useSelector(state => state.theme.darkMode)
+
   const { isOpen, toggle, teams, submitHandler } = props;
   const [newTeam, setTeam] = useState('');
   const handleSelectionChange = e => {
@@ -27,12 +30,12 @@ const AddNewTeamModal = props => {
   };
   return (
     <React.Fragment>
-      <Modal isOpen={isOpen} toggle={toggle}>
-        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
-        <ModalBody>
+      <Modal isOpen={isOpen} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+        <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Modal title</ModalHeader>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
           <Form>
             <FormGroup>
-              <Label>Choose a Team: </Label>
+              <Label className={darkMode ? 'text-light' : ''}>Choose a Team: </Label>
               <Input
                 type="select"
                 name="select"
@@ -49,7 +52,7 @@ const AddNewTeamModal = props => {
             </FormGroup>
           </Form>
         </ModalBody>
-        <ModalFooter>
+        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
           <Button color="primary" onClick={handleSubmit}>
             Add Team
           </Button>
diff --git a/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx b/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
index 33e232ffcf..45f09f635c 100644
--- a/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
+++ b/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
@@ -93,6 +93,7 @@ class UserProfileAdd extends Component {
         actualEmail: 'Actual Email is required',
         actualPassword: 'Actual Password is required',
         actualConfirmedPassword: 'Actual Confirmed Password is required',
+        jobTitle: 'Job Title is required',
       },
       timeZoneFilter: '',
       formSubmitted: false,
@@ -200,7 +201,9 @@ class UserProfileAdd extends Component {
                         value={jobTitle}
                         onChange={(e) => this.handleUserProfile(e)}
                         placeholder="Job Title"
+                        invalid={!!this.state.formErrors.jobTitle}
                       />
+                      <FormFeedback className={fontWeight}>{this.state.formErrors.jobTitle}</FormFeedback>
                     </FormGroup>
                   </Col>
                 </Row>
@@ -1032,6 +1035,14 @@ class UserProfileAdd extends Component {
             ...this.state.userProfile,
             jobTitle: event.target.value,
           },
+          formValid: {
+            ...formValid,
+            [event.target.id]: event.target.value.length > 0,
+          },
+          formErrors: {
+            ...formErrors,
+            jobTitle: event.target.value.length > 0 ? '' : 'Job Title is required',
+          },
         });
         break;
       case 'weeklyCommittedHours':
diff --git a/src/components/UserProfile/AssignBadgePopup.jsx b/src/components/UserProfile/AssignBadgePopup.jsx
index 2549684db2..d1d68bb03f 100644
--- a/src/components/UserProfile/AssignBadgePopup.jsx
+++ b/src/components/UserProfile/AssignBadgePopup.jsx
@@ -5,10 +5,12 @@ import axios from 'axios';
 import AssignTableRow from '../Badge/AssignTableRow';
 import { assignBadgesByUserID, clearNameAndSelected } from '../../actions/badgeManagement';
 import { ENDPOINTS } from '../../utils/URL';
-import { boxStyle } from '../../styles';
+import { boxStyle, boxStyleDark } from '../../styles';
 import { toast } from 'react-toastify';
+import { PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE } from 'utils/constants';
 
 function AssignBadgePopup(props) {
+  const {darkMode} = props;
   const [searchedName, setSearchedName] = useState('');
   const [badgeList, setBadgeList] = useState([]);
   // Added state to disable confirm button while updating.
@@ -21,7 +23,7 @@ function AssignBadgePopup(props) {
   // Update: Added toast message effect for success and error. Added restriction: Jae's badges only editable by Jae or Owner
   const assignBadges = async () => {
     if(props.isRecordBelongsToJaeAndUneditable){
-      alert("STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.");
+      alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
       return;
     }
     try {
@@ -76,7 +78,7 @@ function AssignBadgePopup(props) {
         }}
       />
       <div style={{ overflowY: 'scroll', height: '75vh' }}>
-        <Table data-testid="test-badgeResults">
+        <Table data-testid="test-badgeResults" className={darkMode ? 'text-light' : ''}>
           <thead>
             <tr>
               <th>Badge</th>
@@ -111,7 +113,7 @@ function AssignBadgePopup(props) {
       </div>
       <Button
         className="btn--dark-sea-green float-right"
-        style={{ ...boxStyle, margin: 5 }}
+        style={darkMode ? {...boxStyleDark, margin: 5 } : { ...boxStyle, margin: 5 }}
         onClick={assignBadges}
         disabled={shouldConfirmButtonDisable}
         data-testid="test-button"
@@ -124,6 +126,7 @@ function AssignBadgePopup(props) {
 
 const mapStateToProps = state => ({
   selectedBadges: state.badge.selectedBadges,
+  darkMode: state.theme.darkMode,
 });
 
 const mapDispatchToProps = dispatch => {
diff --git a/src/components/UserProfile/BadgeImage/__test__/BadgeImage.test.js b/src/components/UserProfile/BadgeImage/__tests__/BadgeImage.test.js
similarity index 100%
rename from src/components/UserProfile/BadgeImage/__test__/BadgeImage.test.js
rename to src/components/UserProfile/BadgeImage/__tests__/BadgeImage.test.js
diff --git a/src/components/UserProfile/Badges.jsx b/src/components/UserProfile/Badges.jsx
index ee3aef2486..5d20bfa106 100644
--- a/src/components/UserProfile/Badges.jsx
+++ b/src/components/UserProfile/Badges.jsx
@@ -75,6 +75,7 @@ export const Badges = props => {
                 fontSize={20}
                 isPermissionPage={true}
                 role={props.role}
+                darkMode={darkMode}
               />
             </span>
 
@@ -84,9 +85,9 @@ export const Badges = props => {
                   <Button className="btn--dark-sea-green" onClick={toggle} style={darkMode ? boxStyleDark : boxStyle}>
                     Select Featured
                   </Button>
-                  <Modal size="lg" isOpen={isOpen} toggle={toggle}>
-                    <ModalHeader toggle={toggle}>Full View of Badge History</ModalHeader>
-                    <ModalBody>
+                  <Modal size="lg" isOpen={isOpen} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                    <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Full View of Badge History</ModalHeader>
+                    <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                       <BadgeReport
                         badges={props.userProfile.badgeCollection}
                         userId={props.userProfile._id}
@@ -99,6 +100,7 @@ export const Badges = props => {
                         handleSubmit={props.handleSubmit}
                         isUserSelf={props.isUserSelf}
                         isRecordBelongsToJaeAndUneditable={isRecordBelongsToJaeAndUneditable}
+                        darkMode={darkMode}
                       />
                     </ModalBody>
                   </Modal>
@@ -113,9 +115,9 @@ export const Badges = props => {
                   >
                     Assign Badges
                   </Button>
-                  <Modal size="lg" isOpen={isAssignOpen} toggle={assignToggle}>
-                    <ModalHeader toggle={assignToggle}>Assign Badges</ModalHeader>
-                    <ModalBody>
+                  <Modal size="lg" isOpen={isAssignOpen} toggle={assignToggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                    <ModalHeader className={darkMode ? 'bg-space-cadet' : ''} toggle={assignToggle}>Assign Badges</ModalHeader>
+                    <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                       <AssignBadgePopup
                         allBadgeData={props.allBadgeData}
                         userProfile={props.userProfile}
@@ -151,6 +153,7 @@ export const Badges = props => {
               role={props.role}
               fontSize={20}
               isPermissionPage={true}
+              darkMode={darkMode}
             />
           </span>
         </CardFooter>
diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
index 2c0fc06c59..d4d967adf8 100644
--- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
+++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
@@ -131,7 +131,7 @@ const Email = props => {
 
             <ToggleSwitch
               switchType="email-subcription"
-              state={emailSubscriptions? emailSubscriptions : false}
+              state={emailSubscriptions ? emailSubscriptions : false}
               handleUserProfile={props.handleUserProfile}
               darkMode={darkMode}
             />
@@ -196,7 +196,7 @@ const formatPhoneNumber = str => {
   return str;
 };
 const Phone = props => {
-  const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode} = props;
+  const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode } = props;
   const { phoneNumber, privacySettings } = userProfile;
   if (canEdit) {
     return (
@@ -335,10 +335,10 @@ const BasicInformationTab = props => {
 
     axios.get(ENDPOINTS.TIMEZONE_LOCATION(userProfile.location.userProvided)).then(res => {
       if (res.status === 200) {
-        const {timezone, currentLocation } = res.data;
+        const { timezone, currentLocation } = res.data;
         setTimeZoneFilter(timezone);
         setUserProfile({ ...userProfile, timeZone: timezone, location: currentLocation });
-      } 
+      }
     }).catch(err => {
       toast.error(`An error occurred : ${err.response.data}`);
       if (errorOccurred) setErrorOccurred(false);
@@ -545,7 +545,7 @@ const BasicInformationTab = props => {
       {desktopDisplay ? (
         <Col md="1">
           <div style={{ marginTop: topMargin, marginLeft: '-20px' }}>
-            <EditableInfoModal role={role} areaName={'roleInfo'} areaTitle="Roles" fontSize={20}/>
+            <EditableInfoModal role={role} areaName={'roleInfo'} areaTitle="Roles" fontSize={20} darkMode={darkMode}/>
           </div>
         </Col>
       ) : (
@@ -676,13 +676,13 @@ const BasicInformationTab = props => {
           <Col md="8" className="mr-5">
             <Label className={darkMode ? 'text-light' : ''}>Status</Label>
           </Col>
-          <Col md="6">
+          <Col>
             <Label className={darkMode ? 'text-light' : ''}>
               {userProfile.isActive
                 ? 'Active'
                 : userProfile.reactivationDate
-                ? 'Paused until ' + formatDate(userProfile.reactivationDate)
-                : 'Inactive'}
+                  ? 'Paused until ' + formatDate(userProfile.reactivationDate)
+                  : 'Inactive'}
             </Label>
             &nbsp;
             {canEdit && (
@@ -705,8 +705,8 @@ const BasicInformationTab = props => {
                 {userProfile.isActive
                   ? 'Active'
                   : userProfile.reactivationDate
-                  ? 'Paused until ' + formatDate(userProfile.reactivationDate)
-                  : 'Inactive'}
+                    ? 'Paused until ' + formatDate(userProfile.reactivationDate)
+                    : 'Inactive'}
               </Label>
               &nbsp;
               {canEdit && (
diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx
index f2d550a0fb..daa55221d2 100644
--- a/src/components/UserProfile/BlueSquareLayout.jsx
+++ b/src/components/UserProfile/BlueSquareLayout.jsx
@@ -7,10 +7,19 @@ import ScheduleReasonModal from './ScheduleReasonModal/ScheduleReasonModal';
 import TimeOffRequestsTable from './TimeOffRequestsTable/TimeOffRequestsTable';
 import hasPermission from '../../utils/permissions';
 import BlueSquaresTable from './BlueSquaresTable/BlueSquaresTable';
+import BluequareEmailAssignmentPopUp from './BluequareEmailBBCPopUp';
 import './UserProfile.scss';
 import './UserProfileEdit/UserProfileEdit.scss';
 
-const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, canEdit, user, darkMode }) => {
+
+const BlueSquareLayout = ({
+  userProfile,
+  handleUserProfile,
+  handleBlueSquare,
+  canEdit,
+  user,
+  darkMode,
+}) => {
   const dispatch = useDispatch();
   const allRequests = useSelector(state => state.timeOffRequests.requests);
   const canManageTimeOffRequests = dispatch(hasPermission('manageTimeOffRequests'));
@@ -18,6 +27,8 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
   const { privacySettings } = userProfile;
   const [show, setShow] = useState(false);
   const [showExplanation, setShowExplanation] = useState(false);
+  const [showEmailBCCModal, setShowEmailBCCModal] = useState(false);
+  const hasBlueSquareEmailBCCRolePermission = user.role === 'Owner';
 
   const handleOpen = () => {
     setShow(true);
@@ -36,6 +47,8 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
     setShowExplanation(false);
   };
 
+  const toggleEmailBCCModal = () => setShowEmailBCCModal(false);
+
   const checkIfUserCanScheduleTimeOff = () => {
     let scheduledVacation = 0;
     allRequests[userProfile._id]?.forEach(element => {
@@ -62,7 +75,11 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
           handleBlueSquare={handleBlueSquare}
           darkMode={darkMode}
         />
-        <TimeOffRequestsTable requests={allRequests[userProfile._id]} openModal={handleOpen} darkMode={darkMode}/>
+        <TimeOffRequestsTable
+          requests={allRequests[userProfile._id]}
+          openModal={handleOpen}
+          darkMode={darkMode}
+        />
         {/* Replaces Schedule Blue Square button when there are more than 5 blue squares or scheduled reasons - by Sucheta */}
         <div className="mt-4 w-100">
           {!checkIfUserCanScheduleTimeOff() ? (
@@ -93,17 +110,43 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
               )}
             </>
           ) : (
-            <Button
-              variant="primary"
-              onClick={handleOpen}
-              className="w-100"
-              size="md"
-              style={darkMode ? boxStyleDark : boxStyle}
-            >
-              Schedule Blue Square Reason
-            </Button>
+            <>
+              <Button
+                variant="primary"
+                onClick={handleOpen}
+                className="w-100"
+                size="md"
+                style={darkMode ? boxStyleDark : boxStyle}
+              >
+                Schedule Blue Square Reason
+              </Button>
+              {hasBlueSquareEmailBCCRolePermission && (
+                <div className="Blue-Square-Email-BCC-div">
+                  <Button
+                    variant="primary"
+                    onClick={() => setShowEmailBCCModal(true)}
+                    className="mt-3 w-100 Blue-Square-Email-BCC-button"
+                    size="md"
+                    style={darkMode ? boxStyleDark : boxStyle}
+                  >
+                    Blue Square Email BCCs
+                  </Button>
+                  <div className="Blue-Square-Email-BCC-tooltip">
+                    This designates who gets a copy of the blue square emails. It includes ONLY
+                    sending to active team members, so we don’t have to remove people from the list
+                    if they are made inactive. It doesn’t include getting copies of the time-off
+                    requests, those already go to any Managers for the teams they are on.
+                  </div>
+                </div>
+              )}
+            </>
           )}
         </div>
+        <BluequareEmailAssignmentPopUp
+          isOpen={showEmailBCCModal}
+          onClose={toggleEmailBCCModal}
+          darkMode={darkMode}
+        />
         <Modal show={showExplanation} onHide={closeExplanationModal}>
           <ScheduleExplanationModal
             onHide={closeExplanationModal}
@@ -111,10 +154,11 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
             infringementsNum={userProfile.infringements?.length || 0}
             timeOffRequests={allRequests[userProfile._id]}
             infringements={userProfile.infringements}
+            darkMode={darkMode}
           />
         </Modal>
         {show && (
-          <Modal show={show} onHide={handleClose}>
+          <Modal show={show} onHide={handleClose} className={darkMode ? 'text-light dark-mode' : ''}>
             <ScheduleReasonModal
               handleClose={handleClose}
               userId={userProfile._id}
@@ -122,24 +166,26 @@ const BlueSquareLayout = ({ userProfile, handleUserProfile, handleBlueSquare, ca
               infringements={userProfile.infringements}
               canManageTimeOffRequests={canManageTimeOffRequests}
               checkIfUserCanScheduleTimeOff={checkIfUserCanScheduleTimeOff}
+              darkMode={darkMode}
             />
           </Modal>
         )}
       </div>
     );
+
   }
   return (
     <div data-testid="blueSqaure-field" className="user-profile-blue-square-time-off-section">
-       <BlueSquaresTable
-          userProfile={userProfile}
-          canEdit={canEdit}
-          isPrivate={privacySettings?.blueSquares}
-          handleUserProfile={handleUserProfile}
-          handleBlueSquare={handleBlueSquare}
-        />
+      <BlueSquaresTable
+        userProfile={userProfile}
+        canEdit={canEdit}
+        isPrivate={privacySettings?.blueSquares}
+        handleUserProfile={handleUserProfile}
+        handleBlueSquare={handleBlueSquare}
+      />
       <TimeOffRequestsTable requests={allRequests[userProfile._id]} />
     </div>
-  ) 
+  );
 };
 
 export default BlueSquareLayout;
diff --git a/src/components/UserProfile/BlueSquares/BlueSquare.jsx b/src/components/UserProfile/BlueSquares/BlueSquare.jsx
index 36fe6f798b..c431121529 100644
--- a/src/components/UserProfile/BlueSquares/BlueSquare.jsx
+++ b/src/components/UserProfile/BlueSquares/BlueSquare.jsx
@@ -44,7 +44,7 @@ const BlueSquare = props => {
                     {blueSquare.description !== undefined && (
                       <div className="summary">
                         {blueSquare.createdDate !== undefined && blueSquare.createdDate !== null
-                          ? `${formatCreatedDate(blueSquare.createdDate)}: ${
+                          ? `Added on ${formatCreatedDate(blueSquare.createdDate)}: ${
                               blueSquare.description
                             }`
                           : blueSquare.description}
diff --git a/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.css b/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.css
index f2bef32074..5077c1bec5 100644
--- a/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.css
+++ b/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.css
@@ -14,8 +14,8 @@
 }
 
 .user-profile-blue-square-div-header-title {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 1fr auto;
   padding: 5px;
   border-bottom: 1px solid #007bff;
   font-size: 1rem;
diff --git a/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.jsx b/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.jsx
index 45dc6827ce..1123f6069a 100644
--- a/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.jsx
+++ b/src/components/UserProfile/BlueSquaresTable/BlueSquaresTable.jsx
@@ -1,12 +1,24 @@
-import ToggleSwitch from '../UserProfileEdit/ToggleSwitch'
-import BlueSquare from '../BlueSquares/BlueSquare'
+import ToggleSwitch from '../UserProfileEdit/ToggleSwitch';
+import BlueSquare from '../BlueSquares/BlueSquare';
+import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import './BlueSquaresTable.css';
 
 const BlueSquaresTable = ({ userProfile ,canEdit, isPrivate , handleUserProfile , handleBlueSquare, darkMode}) => {
   return (
     <div className="user-profile-blue-square-section">
       <div className={`user-profile-blue-square-div-header ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div className="user-profile-blue-square-div-header-title">BLUE SQUARES</div>
+        <div className="user-profile-blue-square-div-header-title">
+          <div>BLUE SQUARES</div>
+          <div>
+            <EditableInfoModal
+              areaName="blueSquares_info"
+              areaTitle="Blue Squares"
+              fontSize={20}
+              isPermissionPage
+              role={userProfile.role}
+            />
+          </div>
+        </div>
         {canEdit && (
           <ToggleSwitch
             toggleClass="user-profile-blue-square-header-toggle"
diff --git a/src/components/UserProfile/BluequareEmailBBCPopUp.jsx b/src/components/UserProfile/BluequareEmailBBCPopUp.jsx
new file mode 100644
index 0000000000..6e6877f76d
--- /dev/null
+++ b/src/components/UserProfile/BluequareEmailBBCPopUp.jsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {getAllBlueSquareEmailAssignements , setBlueSquareEmailAssignement ,deleteBlueSquareEmailAssignement} from '../../actions/blueSquareEmailBCCAction'
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Input,
+  InputGroup,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Container
+} from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { boxStyle, boxStyleDark } from 'styles';
+
+const BluequareEmailAssignmentPopUp = React.memo(props => {
+  const dispatch = useDispatch();
+  const [searchWord, setSearchWord] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [addUser, setAddUser] = useState({});
+  const allUsers = useSelector(state => state.allUserProfiles.userProfiles);
+  const blueSquareEmailAssignments = useSelector(state => state.blueSquareEmailAssignment.emailAssignment);
+  const activeUsers = allUsers.filter(user => user.isActive === true);
+
+  const closePopup = () => {
+    props.onClose();
+  };
+
+  const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
+
+  const filteredUsers = activeUsers.filter(user => {
+    if (searchWord.includes(' ')) {
+      const splitWords = searchWord.split(' ');
+      const searchWordFirst = splitWords[0];
+      const searchWordLast = splitWords[1];
+      return (
+        user.firstName.toLowerCase().includes(searchWordFirst.toLowerCase()) &&
+        user.lastName.toLowerCase().includes(searchWordLast.toLowerCase())
+      );
+    } else {
+      return (
+        user.firstName.toLowerCase().includes(searchWord.toLowerCase()) ||
+        user.lastName.toLowerCase().includes(searchWord.toLowerCase())
+      );
+    }
+  });
+
+  
+  
+  const handleAddBCC = (e) =>{
+    e.preventDefault()
+    dispatch(setBlueSquareEmailAssignement(addUser.email))
+  }
+
+  const handleAssignementDelete =(id)=>{
+    dispatch(deleteBlueSquareEmailAssignement(id))
+  }
+
+  useEffect(()=>{
+    dispatch(getAllBlueSquareEmailAssignements())
+  },[])
+
+  return (
+    <Modal isOpen={props.isOpen} toggle={closePopup} size='lg'>
+      <ModalHeader toggle={closePopup}>Set blue square email recipients</ModalHeader>
+      <ModalBody>
+        <Container>
+        <InputGroup>
+          <Input
+            type="text"
+            placeholder="Type to filter..."
+            value={searchWord}
+            onChange={e => {
+              setSearchWord(e.target.value);
+              setDropdownOpen(true);
+            }}
+          />
+          <Button color="primary" type="button" onClick={handleAddBCC}>
+            Add
+          </Button>
+        </InputGroup>
+        {dropdownOpen && (
+          <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
+            <DropdownToggle tag="div" data-toggle="dropdown" aria-expanded={dropdownOpen} />
+            <DropdownMenu
+              style={{
+                position: 'absolute',
+                zIndex: 1000,
+                width: '100%',
+                maxHeight: '300px',
+                overflow: 'auto',
+              }}
+            >
+              {filteredUsers.map((user, index) => (
+                <DropdownItem
+                  key={index}
+                  onClick={() => {
+                    setAddUser(user);
+                    setSearchWord(`${user.firstName} ${user.lastName}`);
+                  }}
+                >
+                  {user.firstName} {user.lastName}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+        
+        <table className="table table-bordered table-responsive-lg mt-3">
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {blueSquareEmailAssignments.length > 0 &&
+              blueSquareEmailAssignments.map((assignment, index) => {
+                return (
+                  <tr key={assignment._id}>
+                    <td>
+                      <span className={assignment.assignedTo?.isActive ? "isActive" : "isNotActive"}>
+                        <i className="fa fa-circle" aria-hidden="true" />
+                      </span>
+                    </td>
+                    <td>
+                        {assignment.assignedTo?.firstName} {assignment.assignedTo?.lastName} ({assignment.assignedTo?.role})
+                    </td>
+                    <td style={{overflow:'auto'}}>
+                        {assignment.email}
+                    </td>
+                    <td className='d-flex justify-content-center align-items-center'>
+                      <Button
+                        color="danger"
+                        onClick={()=>handleAssignementDelete(assignment._id)}
+                        style={props.darkMode ? boxStyleDark : boxStyle}
+                      >
+                        <FontAwesomeIcon icon={faTrashAlt} />
+                      </Button>
+                    </td>
+                  </tr>
+                );
+              })}
+          </tbody>
+        </table>
+        </Container>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          color="secondary"
+          onClick={closePopup}
+          style={props.darkMode ? boxStyleDark : boxStyle}
+        >
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+});
+export default BluequareEmailAssignmentPopUp;
diff --git a/src/components/UserProfile/EditableModal/EditableInfoModal.jsx b/src/components/UserProfile/EditableModal/EditableInfoModal.jsx
index 6d3253e33a..0750183b0e 100644
--- a/src/components/UserProfile/EditableModal/EditableInfoModal.jsx
+++ b/src/components/UserProfile/EditableModal/EditableInfoModal.jsx
@@ -10,32 +10,11 @@ import {
   Col,
 } from 'reactstrap';
 import Select from 'react-select'
-import { Editor } from '@tinymce/tinymce-react';
 import { toast } from 'react-toastify';
 import { connect } from 'react-redux';
 import { getInfoCollections, addInfoCollection, updateInfoCollection, deleteInfoCollectionById } from '../../../actions/information';
 import { boxStyle, boxStyleDark } from 'styles';
-
-// New RichTextEditor component
-const RichTextEditor = ({ disabled, value, onEditorChange }) => (
-  <Editor
-    tinymceScriptSrc="/tinymce/tinymce.min.js"
-    init={{
-      license_key: 'gpl',
-      menubar: false,
-      placeholder: 'Please input infos',
-      plugins: 'advlist autolink autoresize lists link charmap table paste help wordcount',
-      toolbar: 'bold italic underline link removeformat | bullist numlist outdent indent | styleselect fontsizeselect | table| strikethrough forecolor backcolor | subscript superscript charmap | help',
-      branding: false,
-      min_height: 180,
-      max_height: 500,
-      autoresize_bottom_margin: 1,
-    }}
-    disabled={disabled}
-    value={value}
-    onEditorChange={onEditorChange}
-  />
-);
+import RichTextEditor from './RichTextEditor';
 
 const options = [
   { value: '0', label: 'All (default)' },
diff --git a/src/components/UserProfile/EditableModal/RichTextEditor.jsx b/src/components/UserProfile/EditableModal/RichTextEditor.jsx
new file mode 100644
index 0000000000..854ee48434
--- /dev/null
+++ b/src/components/UserProfile/EditableModal/RichTextEditor.jsx
@@ -0,0 +1,23 @@
+import { Editor } from '@tinymce/tinymce-react';
+
+const RichTextEditor = ({ disabled, value, onEditorChange }) => (
+  <Editor
+    tinymceScriptSrc="/tinymce/tinymce.min.js"
+    init={{
+      license_key: 'gpl',
+      menubar: false,
+      placeholder: 'Please input infos',
+      plugins: 'advlist autolink autoresize lists link charmap table paste help wordcount',
+      toolbar: 'bold italic underline link removeformat | bullist numlist outdent indent | styleselect fontsizeselect | table| strikethrough forecolor backcolor | subscript superscript charmap | help',
+      branding: false,
+      min_height: 180,
+      max_height: 500,
+      autoresize_bottom_margin: 1,
+    }}
+    disabled={disabled}
+    value={value}
+    onEditorChange={onEditorChange}
+  />
+);
+
+export default RichTextEditor;
\ No newline at end of file
diff --git a/src/components/UserProfile/EditableModal/RoleInfoModal.jsx b/src/components/UserProfile/EditableModal/RoleInfoModal.jsx
new file mode 100644
index 0000000000..6d7ee47140
--- /dev/null
+++ b/src/components/UserProfile/EditableModal/RoleInfoModal.jsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector, connect } from 'react-redux';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Col, Row} from 'reactstrap';
+import { updateInfoCollection } from '../../../actions/information'
+import { boxStyle, boxStyleDark } from 'styles';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import RichTextEditor from './RichTextEditor';
+
+const RoleInfoModal = ({ info, auth}) => {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [isOpen, setOpen] = useState(false);
+  const [canEditInfoModal, setCanEditInfoModal] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const { infoContent, CanRead } = { ...info };
+  const [infoContentModal, setInfoContentModal] = useState('');
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    setInfoContentModal(infoContent);
+  }, [infoContent]);
+  
+  const handleSaveSuccess = async () => {
+    toast.success('✔ The info was saved successfully!', {
+      pauseOnFocusLoss: false,
+      autoClose: 3000,
+    });
+  };
+
+  const handleSaveError = () => {
+    toast.error('✘ The info could not be saved!', {
+      pauseOnFocusLoss: false,
+      autoClose: 3000,
+    });
+  };
+
+  const handleMouseOver = () => {
+    setOpen(true);
+
+    if(auth?.user.role === "Owner"){
+      setCanEditInfoModal(true);
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleInputChange = (content) => {
+    setInfoContentModal(content);
+  };
+
+  const handleSave = async (e) => {
+    setIsEditing(false);
+
+    if (e) {
+      e.preventDefault();
+    }
+
+    const updateInfo = {infoContent: infoContentModal}
+    
+    let saveResult = await dispatch(updateInfoCollection(info._id, updateInfo));
+    setInfoContentModal(infoContentModal);
+
+    if (saveResult === 200 || saveResult === 201) {
+      await handleSaveSuccess();
+    } else {
+      handleSaveError();
+    }
+
+  }
+
+  if (CanRead) {
+    return (
+      <span>
+        <i
+          data-toggle="tooltip"
+          data-placement="right"
+          title="Click for user class information"
+          style={{ fontSize: 24, cursor: 'pointer', color: '#00CCFF', marginLeft: '12px'}}
+          aria-hidden="true"
+          className="fa fa-info-circle"
+          onClick={handleMouseOver}
+        />
+        {isOpen && (
+          <Modal isOpen={isOpen} size="lg" className={darkMode ? 'text-light' : ''}>
+            <ModalHeader className={darkMode ? 'bg-space-cadet' : ''}>Welcome to Information Page!</ModalHeader>
+            <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+              {canEditInfoModal && isEditing ? 
+                <RichTextEditor disabled={!isEditing} value={infoContentModal} onEditorChange={handleInputChange} /> : 
+                <div
+                style={{ paddingLeft: '20px' }}
+                dangerouslySetInnerHTML={{ __html: infoContentModal }}
+                onClick={() => setIsEditing(true)}
+              />}
+            </ModalBody>
+            <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+              <Row className="no-gutters" style={{ gap: '10px', justifyContent: 'flex-end' }}>
+                {canEditInfoModal && isEditing && (
+                  <Col xs="auto">
+                    <Button className="saveBtn" onClick={handleSave} style={darkMode ? boxStyleDark : boxStyle}>
+                      Save
+                    </Button>
+                  </Col>
+                )}
+                <Col xs="auto">
+                  <Button onClick={handleClose} style={darkMode ? boxStyleDark : boxStyle}>
+                    Close
+                  </Button>
+                </Col>
+              </Row>
+            </ModalFooter>
+          </Modal>
+        )}
+      </span>
+    );
+  }
+  return <></>;
+};
+
+RoleInfoModal.propTypes = {
+  fetchError: PropTypes.any,
+  updateInfoCollection: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = ({ infoCollections }) => ({
+  loading: infoCollections?.loading,
+  fetchError: infoCollections?.error,
+  infoCollections: infoCollections?.infos,
+});
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateInfoCollection: (infoId, updatedInfo) => dispatch(updateInfoCollection(infoId, updatedInfo)),
+  };
+};
+
+export default connect(mapDispatchToProps, mapStateToProps)(RoleInfoModal);
diff --git a/src/components/UserProfile/EditableModal/__tests__/roleInfoModal.test.js b/src/components/UserProfile/EditableModal/__tests__/roleInfoModal.test.js
index e565a4eff6..7ba6ceee31 100644
--- a/src/components/UserProfile/EditableModal/__tests__/roleInfoModal.test.js
+++ b/src/components/UserProfile/EditableModal/__tests__/roleInfoModal.test.js
@@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux'; 
 import configureStore from 'redux-mock-store';
 import { themeMock } from '__tests__/mockStates';
-import RoleInfoModal from '../roleInfoModal';
+import RoleInfoModal from '../RoleInfoModal';
 
 const mockStore = configureStore([]);
 
diff --git a/src/components/UserProfile/EditableModal/roleInfoModal.jsx b/src/components/UserProfile/EditableModal/roleInfoModal.jsx
deleted file mode 100644
index de382505e2..0000000000
--- a/src/components/UserProfile/EditableModal/roleInfoModal.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-
-const RoleInfoModal = ({ info }) => {
-  const darkMode = useSelector(state => state.theme.darkMode)
-
-  const [isOpen, setOpen] = useState(false);
-  const { infoContent, CanRead } = { ...info };
-  const handleMouseOver = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-  if (CanRead) {
-    return (
-      <span>
-        <i
-          data-toggle="tooltip"
-          data-placement="right"
-          title="Click for user class information"
-          style={{ fontSize: 24, cursor: 'pointer', color: '#00CCFF', marginLeft: '5px' }}
-          aria-hidden="true"
-          className="fa fa-info-circle"
-          onClick={handleMouseOver}
-        />
-        {isOpen && (
-          <Modal isOpen={isOpen} size="lg" className={darkMode ? 'text-light' : ''}>
-            <ModalHeader className={darkMode ? 'bg-space-cadet' : ''}>Welcome to Information Page!</ModalHeader>
-            <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
-              <div
-                style={{ paddingLeft: '20px' }}
-                dangerouslySetInnerHTML={{ __html: infoContent }}
-              />
-            </ModalBody>
-            <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
-              <Button onClick={handleClose}>Close</Button>
-            </ModalFooter>
-          </Modal>
-        )}
-      </span>
-    );
-  }
-  return <></>;
-};
-
-export default RoleInfoModal;
diff --git a/src/components/UserProfile/FeaturedBadges/__test__/mockData.js b/src/components/UserProfile/FeaturedBadges/__mocks__/mockData.js
similarity index 100%
rename from src/components/UserProfile/FeaturedBadges/__test__/mockData.js
rename to src/components/UserProfile/FeaturedBadges/__mocks__/mockData.js
diff --git a/src/components/UserProfile/FeaturedBadges/__test__/FeaturedBadges.test.js b/src/components/UserProfile/FeaturedBadges/__tests__/FeaturedBadges.test.js
similarity index 94%
rename from src/components/UserProfile/FeaturedBadges/__test__/FeaturedBadges.test.js
rename to src/components/UserProfile/FeaturedBadges/__tests__/FeaturedBadges.test.js
index 281811dd13..091aeea019 100644
--- a/src/components/UserProfile/FeaturedBadges/__test__/FeaturedBadges.test.js
+++ b/src/components/UserProfile/FeaturedBadges/__tests__/FeaturedBadges.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import FeaturedBadges from '../FeaturedBadges';
-import mockProps from './mockData'
+import mockProps from '../__mocks__/mockData'
 
 describe('FeaturedBadges Component', () => {
   it('renders correctly with badges data', () => {
diff --git a/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx b/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx
index 334d9df360..ba801b269d 100644
--- a/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx
+++ b/src/components/UserProfile/QuickSetupModal/AddNewTitleModal.jsx
@@ -13,8 +13,12 @@ import {
 import { addTitle } from '../../../actions/title';
 import AssignProjectField from './AssignProjectField';
 import AssignTeamField from './AssignTeamField';
+import { useSelector } from 'react-redux';
+import "../../Header/DarkMode.css"
 
 function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, projectsData, setWarningMessage, setShowMessage }) {
+  const darkMode = useSelector(state => state.theme.darkMode)
+
   const [titleData, setTitleData] = useState({
     titleName: '',
     mediaFolder: '',
@@ -95,16 +99,16 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
       });
   };
 
-
+  const fontColor = darkMode ? 'text-light' : '';
 
 
   return (
-    <Modal isOpen={isOpen} toggle={() => setIsOpen(false)}>
-      <ModalHeader toggle={() => setIsOpen(false)}>Add A New Title</ModalHeader>
-      <ModalBody>
+    <Modal isOpen={isOpen} toggle={() => setIsOpen(false)} className={darkMode ? 'text-light dark-mode' : ''}>
+      <ModalHeader toggle={() => setIsOpen(false)} className={darkMode ? "bg-space-cadet" : ""}>Add A New Title</ModalHeader>
+      <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
         <Form>
           <FormGroup>
-            <Label>Title Name<span className='qsm-modal-required'>*</span>: </Label>
+            <Label className={fontColor}>Title Name<span className='qsm-modal-required'>*</span>: </Label>
             <Input
               type="text"
               name="text"
@@ -115,7 +119,7 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
               }}
             />
 
-            <Label>Media Folder<span className='qsm-modal-required'>*</span>: </Label>
+            <Label className={fontColor}>Media Folder<span className='qsm-modal-required'>*</span>: </Label>
             <Input
               type="text"
               name="text"
@@ -125,7 +129,7 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
                 setTitleData(prev => ({ ...prev, mediaFolder: e.target.value }));
               }}
             />
-            <Label>Team Code<span className='qsm-modal-required'>*</span>:</Label>
+            <Label className={fontColor}>Team Code<span className='qsm-modal-required'>*</span>:</Label>
             <Input
               type="text"
               placeholder="X-XXX"
@@ -134,7 +138,7 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
                 setTitleData(prev => ({ ...prev, teamCode: e.target.value }));
               }}
             />
-            <Label>Project Assignment<span className='qsm-modal-required'>*</span>:</Label>
+            <Label className={fontColor}>Project Assignment<span className='qsm-modal-required'>*</span>:</Label>
             <AssignProjectField
               projectsData={projectsData}
               onDropDownSelect={selectProject}
@@ -142,7 +146,7 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
               cleanProjectAssign={cleanProjectAssign}
               onSelectProject={onSelectProject}
             />
-            <Label>Team Assignment:</Label>
+            <Label className={fontColor}>Team Assignment:</Label>
             <AssignTeamField
               teamsData={teamsData}
               onDropDownSelect={selectTeam}
@@ -157,7 +161,7 @@ function AddNewTitleModal({ isOpen, setIsOpen, refreshModalTitles, teamsData, pr
         </Form>
       </ModalBody>
 
-      <ModalFooter>
+      <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
         <Button color="primary" onClick={() => confirmOnClick()}>
           Confirm
         </Button>
diff --git a/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx b/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx
index 768b72a10c..c64fbb967c 100644
--- a/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx
+++ b/src/components/UserProfile/QuickSetupModal/AssignSetupModal.jsx
@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, Input } from 'reactstrap';
 import { deleteTitleById } from 'actions/title';
+import { useSelector } from 'react-redux';
+import "../../Header/DarkMode.css"
 
 function AssignSetUpModal({ isOpen, setIsOpen, title, userProfile, setUserProfile, setTitleOnSet, refreshModalTitles}) {
+  const darkMode = useSelector(state => state.theme.darkMode)
   const [validation, setValid] = useState({
     volunteerAgree: false,
   });
@@ -57,14 +60,16 @@ function AssignSetUpModal({ isOpen, setIsOpen, title, userProfile, setUserProfil
       });
   }
 
+  const fontColor = darkMode ? 'text-light' : '';
+
   return (
-    <Modal isOpen={isOpen} toggle={() => setIsOpen(false)} >
-      <ModalHeader toggle={() => setIsOpen(false)}>
+    <Modal isOpen={isOpen} toggle={() => setIsOpen(false)} className={darkMode ? 'text-light dark-mode' : ''}>
+      <ModalHeader toggle={() => setIsOpen(false)} className={darkMode ? 'bg-space-cadet' : ''}>
         Assign {userProfile?.firstName} as {title?.titleName}
       </ModalHeader>
-      <ModalBody>
-        <div className="">
-          <Label>
+      <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+        <div className={fontColor}>
+          <Label className={fontColor}>
             <h6>Google Doc: </h6>
           </Label>
           <Input type="text" onChange={e => setGoogleDoc(e.target.value)}></Input>
@@ -82,14 +87,14 @@ function AssignSetUpModal({ isOpen, setIsOpen, title, userProfile, setUserProfil
               value="true"
               onClick={() => checkboxOnClick()}
             />
-            <Label for="agreement" className="">
+            <Label for="agreement" className={fontColor}>
               Volunteer Agreement Confirmed
             </Label>
           </div>
           {validation.volunteerAgree ? '' : <p className="text-danger">{warning.checkbox}</p>}
         </div>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
         <div className="col text-center">
           <Button className="bg-success m-3" onClick={() => setAssignedOnClick()}>
             Yes
diff --git a/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx b/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx
index b2f02d2697..5686dcd60e 100644
--- a/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx
+++ b/src/components/UserProfile/QuickSetupModal/QuickSetupModal.jsx
@@ -7,6 +7,9 @@ import { getAllTitle } from '../../../actions/title';
 
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import './QuickSetupModal.css';
+import '../../Header/DarkMode.css'
+import { useSelector } from 'react-redux';
+import { boxStyle, boxStyleDark } from 'styles';
 
 function QuickSetupModal({
   canAddTitle,
@@ -18,6 +21,8 @@ function QuickSetupModal({
   handleSubmit,
   setSaved,
 }) {
+  const darkMode = useSelector(state => state.theme.darkMode)
+
   const [showAddTitle, setShowAddTitle] = useState(false);
   const [showAssignModal, setShowAssignModal] = useState(false);
   const [titles, setTitles] = useState([]);
@@ -70,7 +75,7 @@ function QuickSetupModal({
 
       <div className="col text-center mt-3">
         {canAddTitle ? (
-          <Button color="primary" onClick={() => setShowAddTitle(true)}>
+          <Button color="primary" onClick={() => setShowAddTitle(true)} style={darkMode ? boxStyleDark : boxStyle}>
             Add A New Title
           </Button>
         ) : (
@@ -84,6 +89,7 @@ function QuickSetupModal({
             userProfile={userProfile}
             disabled={titleOnSet}
             setSaved={() => setSaved(true)}
+            darkMode={darkMode}
           />
         ) : (
           ''
@@ -119,10 +125,10 @@ function QuickSetupModal({
         ''
       )}
       {showMessage && (
-        <Modal isOpen={showMessage} toggle={() => setShowMessage(false)}>
-          <ModalHeader toggle={() => setShowMessage(false)}>{warningMessage.title}</ModalHeader>
-          <ModalBody>{warningMessage.content}</ModalBody>
-          <ModalFooter>
+        <Modal isOpen={showMessage} toggle={() => setShowMessage(false)} className={darkMode ? 'text-light dark-mode' : ''}>
+          <ModalHeader toggle={() => setShowMessage(false)} className={darkMode ? 'bg-space-cadet' : ''}>{warningMessage.title}</ModalHeader>
+          <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>{warningMessage.content}</ModalBody>
+          <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
             <Button color="primary" onClick={() => setShowMessage(false)}>
               Close
             </Button>
diff --git a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx
index 9bcd19d5ef..0863663f0c 100644
--- a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx
+++ b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx
@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Form from 'react-bootstrap/Form';
 import moment from 'moment-timezone';
 import DatePicker from 'react-datepicker';
-import { boxStyle } from 'styles';
+import { boxStyle, boxStyleDark } from 'styles';
 import ScheduleReasonModalCard from './ScheduleReasonModalCard';
 import {
   addTimeOffRequestThunk,
@@ -21,6 +21,7 @@ const ScheduleReasonModal = ({
   user,
   canManageTimeOffRequests,
   checkIfUserCanScheduleTimeOff,
+  darkMode,
 }) => {
   const dispatch = useDispatch();
   const allRequests = useSelector(state => state.timeOffRequests.requests);
@@ -324,21 +325,21 @@ const ScheduleReasonModal = ({
     <>
       {checkIfUserCanScheduleTimeOff() && (
         <>
-          <Modal.Header closeButton={true}>
+          <Modal.Header closeButton={true} className={darkMode ? 'bg-space-cadet' : ''}>
             <Modal.Title className="centered-container">
               <div className="centered-text mt-0 p1">Choose to Use a Blue Square</div>
             </Modal.Title>
           </Modal.Header>
           <Form onSubmit={handleSaveReason}>
-            <Modal.Body>
+            <Modal.Body className={darkMode ? 'bg-yinmn-blue' : ''}>
               <Form.Group className="mb-0" controlId="exampleForm.ControlTextarea1">
-                <Form.Label className="mb-3">
+                <Form.Label className={`mb-3 ${darkMode ? 'text-light' : ''}`}>
                  {` Need to take time off for an emergency or vacation? That's no problem. The system
                   will still issue you a blue square but scheduling here will note this reason on it
                   so it's clear you chose to use one (vs receiving one for missing something) and
                   let us know in advance. Blue squares are meant for situations like this and we allow the use and scheduling of 4 a year.`}
                 </Form.Label>
-                <Form.Label>
+                <Form.Label className={darkMode ? 'text-light' : ''}>
                   {`Select the Sunday of the week you'll be leaving (If you'll be absent this week,
                   choose the Sunday of current week):`}
                 </Form.Label>
@@ -360,7 +361,7 @@ const ScheduleReasonModal = ({
                 <Form.Text className="text-danger pl-1">
                   {requestDataErrors.dateOfLeaveError}
                 </Form.Text>
-                <Form.Label>Enter the duration of your absence (In Weeks):</Form.Label>
+                <Form.Label className={darkMode ? 'text-light' : ''}>Enter the duration of your absence (In Weeks):</Form.Label>
                 <Form.Control
                   type="number"
                   placeholder="Enter duration in weeks"
@@ -371,7 +372,7 @@ const ScheduleReasonModal = ({
                 <Form.Text className="text-danger pl-1">
                   {requestDataErrors.numberOfWeeksError}
                 </Form.Text>
-                <Form.Label className="mt-1">
+                <Form.Label className={`mt-1 ${darkMode ? 'text-light' : ''}`}>
                   What is your reason for requesting this time off?
                 </Form.Label>
                 <Form.Control
@@ -389,8 +390,8 @@ const ScheduleReasonModal = ({
                 </Form.Text>
               </Form.Group>
             </Modal.Body>
-            <Modal.Footer>
-              <Button variant="secondary" onClick={handleClose} style={boxStyle}>
+            <Modal.Footer className={darkMode ? 'bg-yinmn-blue' : ''}>
+              <Button variant="secondary" onClick={handleClose} style={darkMode ? boxStyleDark : boxStyle}>
                 Close
               </Button>
               <Button
@@ -398,12 +399,12 @@ const ScheduleReasonModal = ({
                 type="submit"
                 title="To Save - add a new reason or edit an existing reason. 
           Clicking 'Save' will generate an email to you and One Community as a record of this request."
-                style={boxStyle}
+                style={darkMode ? boxStyleDark : boxStyle}
               >
                 Save
               </Button>
-              <NestedModal isOpen={confirmationModal} toggle={toggleConfirmationModal}>
-                <ModalBody>
+              <NestedModal isOpen={confirmationModal} toggle={toggleConfirmationModal} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <Container>
                     <Row>
                       <Col className="mb-1">
@@ -453,7 +454,7 @@ const ScheduleReasonModal = ({
                     </Row>
                   </Container>
                 </ModalBody>
-                <ModalFooter>
+                <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <Button variant="primary" onClick={handelConfirmReason}>
                     Confirm
                   </Button>
@@ -462,13 +463,13 @@ const ScheduleReasonModal = ({
                   </Button>
                 </ModalFooter>
               </NestedModal>
-              <NestedModal isOpen={allowedDurationModal} toggle={toggleDurationInfoModal}>
-                <ModalBody>
+              <NestedModal isOpen={allowedDurationModal} toggle={toggleDurationInfoModal} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <Container>
                     <Row>{durationExplanationText(allowedDurationData)}</Row>
                   </Container>
                 </ModalBody>
-                <ModalFooter>
+                <ModalFooter className={darkMode ? 'text-light' : ''}>
                   <Button variant="secondary" onClick={toggleDurationInfoModal}>
                     Close
                   </Button>
diff --git a/src/components/UserProfile/TeamWeeklySummaries/TeamWeeklySummaries.jsx b/src/components/UserProfile/TeamWeeklySummaries/TeamWeeklySummaries.jsx
index 83a3cc7d4f..953a37b9d1 100644
--- a/src/components/UserProfile/TeamWeeklySummaries/TeamWeeklySummaries.jsx
+++ b/src/components/UserProfile/TeamWeeklySummaries/TeamWeeklySummaries.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import './TeamWeeklySummaries.css';
 import moment from 'moment';
 import parse from 'html-react-parser';
diff --git a/src/components/UserProfile/TeamsAndProjects/TeamsAndProjects.css b/src/components/UserProfile/TeamsAndProjects/TeamsAndProjects.css
index f8c3bbc6f5..266226051d 100644
--- a/src/components/UserProfile/TeamsAndProjects/TeamsAndProjects.css
+++ b/src/components/UserProfile/TeamsAndProjects/TeamsAndProjects.css
@@ -45,7 +45,7 @@
 }
 
 .project-auto-complete:hover {
-  background: #1d62f0;
+  background: #DDEBFF;
 }
 
 .team-auto-complete {
@@ -54,16 +54,18 @@
 }
 
 .team-auto-complete:hover {
-  background: #1d62f0;
+  background: #DDEBFF;
 }
+
 #myTabContent {
   margin-top: 20px;
   padding-top: 4px;
-  border-color: #dee2e6 
+  border-color: #dee2e6
 }
+
 @media (max-width: 1024px) {
   #myTabContent {
     padding-top: 0px;
-    border-color: #fff #dee2e6 #dee2e6 
+    border-color: #fff #dee2e6 #dee2e6
   }
 }
\ No newline at end of file
diff --git a/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx b/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
index d032c0c583..dba8779b37 100644
--- a/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
+++ b/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
@@ -31,11 +31,11 @@ const TeamsTab = props => {
   const [removedTeams, setRemovedTeams] = useState([]);
 
   useEffect(() => {
-    if(saved && removedTeams.length > 0){
+    if (saved && removedTeams.length > 0) {
       removedTeams.forEach(teamId => {
         deleteTeamMember(teamId, userProfile._id);
         setRemovedTeams([]);
-      })
+      });
     }
   }, [saved]);
 
@@ -49,13 +49,13 @@ const TeamsTab = props => {
   const onSelectDeleteTeam = teamId => {
     setRemovedTeams([...removedTeams, teamId]);
     onDeleteTeam(teamId);
-    if(isTeamSaved) isTeamSaved(false);
+    if (isTeamSaved) isTeamSaved(false);
   };
 
   const onSelectAssignTeam = team => {
-    if(userProfile._id){
+    if (userProfile._id) {
       addTeamMember(team._id, userProfile._id, userProfile.firstName, userProfile.lastName);
-      if(isTeamSaved) isTeamSaved(true);
+      if (isTeamSaved) isTeamSaved(false);
     }
     onAssignTeam(team);
     setRenderedOn(Date.now());
@@ -94,4 +94,4 @@ const TeamsTab = props => {
     </React.Fragment>
   );
 };
-export default TeamsTab;
\ No newline at end of file
+export default TeamsTab;
diff --git a/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx b/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx
index 1cbf13c31e..00e3dce669 100644
--- a/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx
+++ b/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx
@@ -8,18 +8,19 @@ import { boxStyle, boxStyleDark } from 'styles';
 import { connect } from 'react-redux';
 
 const UserTeamsTable = props => {
-  const {darkMode} = props;
+  const { darkMode } = props;
 
   const [tooltipOpen, setTooltip] = useState(false);
-  const [teamCode, setTeamCode] = useState(props.userProfile? props.userProfile.teamCode: props.teamCode);
+  const [teamCode, setTeamCode] = useState(props.userProfile ? props.userProfile.teamCode : props.teamCode);
 
   const canAssignTeamToUsers = props.hasPermission('assignTeamToUsers');
-  const fullCodeRegex = /^([a-zA-Z]-[a-zA-Z]{3}|[a-zA-Z]{5})$/;
+  const fullCodeRegex = /^([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7})$/;
   const toggleTooltip = () => setTooltip(!tooltipOpen);
 
   const handleCodeChange = e => {
     let value = e.target.value;
-    
+
+
     const regexTest = fullCodeRegex.test(value);
     if (regexTest) {
       props.setCodeValid(true);
@@ -38,7 +39,7 @@ const UserTeamsTable = props => {
   return (
     <div>
       <div className={`teamtable-container desktop ${darkMode ? 'bg-yinmn-blue' : ''}`}>
-        <div className="container" style={{paddingLeft: '4px', paddingRight: '4px'}}>
+        <div className="container" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
           {props.canEditVisibility && (
             <div className="row" >
               <Col md="7">
@@ -54,11 +55,12 @@ const UserTeamsTable = props => {
               </Col>
             </div>
           )}
-          <div className="row" style={{ margin: '0 auto'}}>
+          <div className="row" style={{ margin: '0 auto' }}>
             <Col
               md={canAssignTeamToUsers ? '7' : '10'}
               style={{
-                backgroundColor:  darkMode ? '#1C2541' : '#e9ecef',
+                backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
+                backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
                 border: '1px solid #ced4da',
                 marginBottom: '10px',
               }}
@@ -66,7 +68,7 @@ const UserTeamsTable = props => {
               <span className="teams-span">Teams</span>
             </Col>
             {props.edit && props.role && canAssignTeamToUsers && (
-              <Col md="3" style={{padding: '0'}}>
+              <Col md="3" style={{ padding: '0' }}>
                 {props.disabled ? (
                   <>
                     <Tooltip placement="bottom" isOpen={tooltipOpen} target="btn-assignteam" toggle={toggleTooltip}>
@@ -84,23 +86,23 @@ const UserTeamsTable = props => {
                       props.onButtonClick();
                     }}
                     style={darkMode ? {} : boxStyle}
-                   >
+                  >
                     Assign Team
                   </Button>
                 )}
               </Col>
             )}
-            <Col md="2" style={{padding: '0'}}>
+            <Col md="2" style={{ padding: '0' }}>
               {props.canEditTeamCode ? (
                 <Input
                   id="teamCode"
                   value={teamCode}
                   onChange={handleCodeChange}
-                  placeholder="X-XXX"
+                  placeholder="X-XXXXX"
                 />
               ) : (
-                <div style={{fontSize: "12px" ,textAlign: 'center'}}>
-                  {teamCode == ''? "No assigned team code": teamCode}
+                <div style={{ fontSize: "12px", textAlign: 'center' }}>
+                  {teamCode == '' ? "No assigned team code" : teamCode}
                 </div>
               )}
             </Col>
@@ -110,8 +112,8 @@ const UserTeamsTable = props => {
           <table className={`table table-bordered table-responsive-sm ${darkMode ? 'text-light' : ''}`}>
             <thead className={darkMode ? 'bg-space-cadet' : ''}>
               {props.role && (
-                <tr>
-                  <th className={darkMode ? 'bg-space-cadet' : ''}>#</th>
+                <tr style={{ textAlign: 'center' }}>
+                  <th className={darkMode ? 'bg-space-cadet' : ''} style={{ width: '10%' }} >#</th>
                   {canAssignTeamToUsers ? <th className={darkMode ? 'bg-space-cadet' : ''} style={{ width: '100px' }}>Team Name</th> : null}
                   {props.userTeamsById.length > 0 ? <th className={darkMode ? 'bg-space-cadet' : ''}></th> : null}
                 </tr>
@@ -150,17 +152,17 @@ const UserTeamsTable = props => {
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           {props.canEditVisibility && (
             <>
-              <Col 
-                md='12' 
+              <Col
+                md='12'
                 style={{
                   backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
                   border: '1px solid #ced4da',
                   marginBottom: '10px',
                 }}
               >
-              <span className="teams-span">Visibility</span>
+                <span className="teams-span">Visibility</span>
               </Col>
-              <Col md='12' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+              <Col md='12' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <ToggleSwitch
                   switchType="visible"
                   state={props.isVisible}
@@ -183,18 +185,18 @@ const UserTeamsTable = props => {
               <span className="teams-span">Teams</span>
             </Col>
             <Col md="3" xs="12" style={{ padding: '0', marginBottom: '10px' }}>
-                {props.canEditTeamCode ? (
-                  <Input
-                    id="teamCode"
-                    value={teamCode}
-                    onChange={handleCodeChange}
-                    placeholder="X-XXX"
-                  />
-                ) : (
-                  <div style={{paddingTop: '6px', textAlign: 'center'}}>
-                    {teamCode == ''? "No assigned team code": teamCode}
-                  </div>
-                )}
+              {props.canEditTeamCode ? (
+                <Input
+                  id="teamCode"
+                  value={teamCode}
+                  onChange={handleCodeChange}
+                  placeholder="X-XXX"
+                />
+              ) : (
+                <div style={{ paddingTop: '6px', textAlign: 'center' }}>
+                  {teamCode == '' ? "No assigned team code" : teamCode}
+                </div>
+              )}
             </Col>
           </div>
           {props.edit && props.role && (
@@ -231,7 +233,7 @@ const UserTeamsTable = props => {
                 <tr>
                   <th className={darkMode ? 'bg-space-cadet' : ''}>#</th>
                   <th className={darkMode ? 'bg-space-cadet' : ''}>Team Name</th>
-                  {canAssignTeamToUsers ? <th style={{ flex: 2 }} className={darkMode ? 'bg-space-cadet' : ''}>{}</th> : null}
+                  {canAssignTeamToUsers ? <th style={{ flex: 2 }} className={darkMode ? 'bg-space-cadet' : ''}>{ }</th> : null}
                 </tr>
               )}
             </thead>
diff --git a/src/components/UserProfile/TimeEntryEditHistory.jsx b/src/components/UserProfile/TimeEntryEditHistory.jsx
index 95c6cf99df..ced6bfd6cc 100644
--- a/src/components/UserProfile/TimeEntryEditHistory.jsx
+++ b/src/components/UserProfile/TimeEntryEditHistory.jsx
@@ -40,7 +40,7 @@ const TimeEntryEditHistory = props => {
 
   return (
     <>
-      <p className='text-azure'>Time Entry Edit History</p>
+      <p className={darkMode ? 'text-light' : ''}>Time Entry Edit History</p>
       <table className={`table table-bordered ${darkMode ? 'text-light' : ''}`} width="100%">
         <thead>
           <tr style={tabletView ? {fontSize: "10px"} : {}}>
diff --git a/src/components/UserProfile/TimeZoneDropDown/__test__/TimeZoneDropDown.test.js b/src/components/UserProfile/TimeZoneDropDown/__tests__/TimeZoneDropDown.test.js
similarity index 100%
rename from src/components/UserProfile/TimeZoneDropDown/__test__/TimeZoneDropDown.test.js
rename to src/components/UserProfile/TimeZoneDropDown/__tests__/TimeZoneDropDown.test.js
diff --git a/src/components/UserProfile/UserLinkLayout/__test__/UserLinkLayout.test.js b/src/components/UserProfile/UserLinkLayout/__tests__/UserLinkLayout.test.js
similarity index 100%
rename from src/components/UserProfile/UserLinkLayout/__test__/UserLinkLayout.test.js
rename to src/components/UserProfile/UserLinkLayout/__tests__/UserLinkLayout.test.js
diff --git a/src/components/UserProfile/UserLinks/UserLinks.jsx b/src/components/UserProfile/UserLinks/UserLinks.jsx
index f9a4db3cb6..18bdd3aac2 100644
--- a/src/components/UserProfile/UserLinks/UserLinks.jsx
+++ b/src/components/UserProfile/UserLinks/UserLinks.jsx
@@ -1,7 +1,10 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-const UserLinks = ({ links = [] }) => (
+const UserLinks = ({ links = [] }) => {
+  const darkMode = useSelector(state => state.theme.darkMode)
+  return (
   <>
     <div className="linkContainer" data-testid="testLinkContainer">
       {links.map((item, index) => {
@@ -10,7 +13,7 @@ const UserLinks = ({ links = [] }) => (
           if (item.Link.trim() !== '') {
             return (
               <React.Fragment key={item.Name}>
-                <a key={item.link} href={item.Link} target="_blank" rel="noreferrer" data-testid="testHyperLink">
+                <a className={darkMode ? 'text-light' : ''} key={item.link} href={item.Link} target="_blank" rel="noreferrer" data-testid="testHyperLink">
                   {item.Name.toUpperCase()}
                 </a>
                 <br />
@@ -22,7 +25,7 @@ const UserLinks = ({ links = [] }) => (
           if (item.Link.trim() !== '') {
             return (
               <React.Fragment key={item.Name}>
-                <Link key={item.link} to={item.Link} target="_blank" data-testid="testLink">
+                <Link className={darkMode ? 'text-light' : ''} key={item.link} to={item.Link} target="_blank" data-testid="testLink">
                   {item.Name.toUpperCase()}
                 </Link>
                 <br />
@@ -33,6 +36,6 @@ const UserLinks = ({ links = [] }) => (
       })}
     </div>
   </>
-);
+)};
 
 export default UserLinks;
diff --git a/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.js b/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.js
index d66b896a03..6a657f63ec 100644
--- a/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.js
+++ b/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.js
@@ -1,16 +1,32 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import { userProfileMock } from '../../../../__tests__/mockStates';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { userProfileMock, themeMock } from '../../../../__tests__/mockStates';
 import { renderWithRouter } from '../../../../__tests__/utils';
 import UserLinks from '../UserLinks';
 
+const mockStore = configureMockStore();
+const initialState = { theme: themeMock };
+const store = mockStore(initialState);
+
+const renderWithProviders = (ui, { store }) => {
+  return renderWithRouter(
+    <Provider store={store}>
+      {ui}
+    </Provider>
+  );
+};
+
 describe('user links tests', () => {
   beforeEach(() => {
-    renderWithRouter(<UserLinks links={userProfileMock.personalLinks} />);
+    renderWithProviders(<UserLinks links={userProfileMock.personalLinks} />, { store });
   });
+
   it('should render links', () => {
     expect(screen.getAllByRole('link')).toHaveLength(userProfileMock.personalLinks.length);
   });
+
   it('should render links with the correct href', () => {
     const links = screen.getAllByRole('link');
     expect(links[0]).toHaveAttribute('href', `/${userProfileMock.personalLinks[0].Link}`);
diff --git a/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.jsx b/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.jsx
index 701c0e1f10..9499e9f335 100644
--- a/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.jsx
+++ b/src/components/UserProfile/UserLinks/__tests__/UserLinks.test.jsx
@@ -1,112 +1,115 @@
-import {render,screen} from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
 import UserLinks from '../UserLinks.jsx';
 import { BrowserRouter as Router } from 'react-router-dom';
-
-let links=[];
-
-function renderComponent(props)
-{
-  render (
-    <Router>
-      <UserLinks links={props}/>
-     </Router>);
+import { themeMock } from '../../../../__tests__/mockStates.js'
+
+let links = [];
+
+const mockStore = configureMockStore();
+const initialState = { theme: themeMock };
+const store = mockStore(initialState);
+
+function renderComponent(props) {
+  render(
+    <Provider store={store}>
+      <Router>
+        <UserLinks links={props} />
+      </Router>
+    </Provider>
+  );
 }
 
-describe("Test suite for UserLinks components ",()=>{
- 
-  it("Test Case 1 : Component renders without crashing ",()=>{
-    renderComponent (links);
-    const userLinkContainer= screen.getByTestId("testLinkContainer");
-    expect(userLinkContainer).toBeInTheDocument();
+describe("Test suite for UserLinks components", () => {
 
+  it("Test Case 1: Component renders without crashing", () => {
+    renderComponent(links);
+    const userLinkContainer = screen.getByTestId("testLinkContainer");
+    expect(userLinkContainer).toBeInTheDocument();
   });
-  it("Test Case 2 : Assert if the link name is not rendered when  empty string is passed ",()=>{
-    links=[{Link:'',name: ''}];
-    renderComponent (links);
-    const userLinkContainer= screen.getByTestId("testLinkContainer");
+
+  it("Test Case 2: Assert if the link name is not rendered when an empty string is passed", () => {
+    links = [{ Link: '', Name: '' }];
+    renderComponent(links);
+    const userLinkContainer = screen.getByTestId("testLinkContainer");
     expect(userLinkContainer).toBeInTheDocument();
-    const linkObject=screen.queryByTestId("testLink");
+    const linkObject = screen.queryByTestId("testLink");
     expect(linkObject).not.toBeInTheDocument();
-    const hyperLinkObj=screen.queryByTestId("testHyperLink");
+    const hyperLinkObj = screen.queryByTestId("testHyperLink");
     expect(hyperLinkObj).not.toBeInTheDocument();
   });
-  it("Test Case 3 : Assert if the link name is rendered  for a valid external link " , ()=>
-  {
-    links=[{Link:'https',Name: 'Test'}];
-    renderComponent (links);
-    const hyperLinkObj=screen.getByTestId("testHyperLink");
+
+  it("Test Case 3: Assert if the link name is rendered for a valid external link", () => {
+    links = [{ Link: 'https', Name: 'Test' }];
+    renderComponent(links);
+    const hyperLinkObj = screen.getByTestId("testHyperLink");
     expect(hyperLinkObj).toBeInTheDocument();
 
-    let linkObj=screen.queryByTestId("testLink");
+    let linkObj = screen.queryByTestId("testLink");
     expect(linkObj).not.toBeInTheDocument();
-   
-
   });
-  it("Test Case 4 : Assert if the link name is not rendered  for an invalid external link " , ()=>
-  {
+
+  it("Test Case 4: Assert if the link name is not rendered for an invalid external link", () => {
     // Test Data 1
-    links=[{Link:'', Name: 'Test'}];
-    renderComponent (links);
-    let hyperLinkObj=screen.queryByTestId("testHyperLink");
+    links = [{ Link: '', Name: 'Test' }];
+    renderComponent(links);
+    let hyperLinkObj = screen.queryByTestId("testHyperLink");
     expect(hyperLinkObj).not.toBeInTheDocument();
 
-
-    //Test Data 2
-    links=[{Link:'externalLink', Name: 'Test'}];
-    renderComponent (links);
-    hyperLinkObj=screen.queryByTestId("testHyperLink");
+    // Test Data 2
+    links = [{ Link: 'externalLink', Name: 'Test' }];
+    renderComponent(links);
+    hyperLinkObj = screen.queryByTestId("testHyperLink");
     expect(hyperLinkObj).not.toBeInTheDocument();
 
-     //Test Data 3
-     links=[{Link:'htt://externalLink.com', Name: 'Test'}];
-     renderComponent (links);
-     hyperLinkObj=screen.queryByTestId("testHyperLink");
-     expect(hyperLinkObj).not.toBeInTheDocument();
-
+    // Test Data 3
+    links = [{ Link: 'htt://externalLink.com', Name: 'Test' }];
+    renderComponent(links);
+    hyperLinkObj = screen.queryByTestId("testHyperLink");
+    expect(hyperLinkObj).not.toBeInTheDocument();
   });
-  it("Test Case 5 : Assert if link is rendered for a valid internal link ",()=>{
-    links=[{Link:'internalLink', Name: 'Test'}];
-    renderComponent (links);
-    const linkObj=screen.getByTestId("testLink");
-    expect(linkObj).toBeInTheDocument();
 
+  it("Test Case 5: Assert if link is rendered for a valid internal link", () => {
+    links = [{ Link: 'internalLink', Name: 'Test' }];
+    renderComponent(links);
+    const linkObj = screen.getByTestId("testLink");
+    expect(linkObj).toBeInTheDocument();
   });
 
-  it("Test Case 6 : Assert if link is not rendered for an  empty internal link ",()=>{
-    links=[{Link:'', Name: 'Test'}];
-    renderComponent (links);
-    const linkObj=screen.queryByTestId("testLink");
+  it("Test Case 6: Assert if link is not rendered for an empty internal link", () => {
+    links = [{ Link: '', Name: 'Test' }];
+    renderComponent(links);
+    const linkObj = screen.queryByTestId("testLink");
     expect(linkObj).not.toBeInTheDocument();
-
   });
 
-  it("Test Case 7 : Assert if both the internal & extenal link Name is displayed in upper case",()=>{
-    // external link validation 
-    links=[{Link:'http://sampleTest.com', Name: 'externallink'}];
-    renderComponent (links);
-    let hyperLinkObj=screen.getByText("EXTERNALLINK");
+  it("Test Case 7: Assert if both the internal & external link Name is displayed in upper case", () => {
+    // external link validation
+    links = [{ Link: 'http://sampleTest.com', Name: 'externallink' }];
+    renderComponent(links);
+    let hyperLinkObj = screen.getByText("EXTERNALLINK");
     expect(hyperLinkObj).toBeInTheDocument();
-    hyperLinkObj=screen.queryByText(links[0].Name);
+    hyperLinkObj = screen.queryByText(links[0].Name);
     expect(hyperLinkObj).not.toBeInTheDocument();
 
-    // internal link validation 
-    links=[{Link:'sampleTest.com', Name: 'internallink'}];
-    renderComponent (links);
-    let linkObj=screen.getByText("INTERNALLINK");
+    // internal link validation
+    links = [{ Link: 'sampleTest.com', Name: 'internallink' }];
+    renderComponent(links);
+    let linkObj = screen.getByText("INTERNALLINK");
     expect(linkObj).toBeInTheDocument();
-    linkObj=screen.queryByText(links[0].Name);
+    linkObj = screen.queryByText(links[0].Name);
     expect(linkObj).not.toBeInTheDocument();
-
   });
 
-  it("Test Case 8 : Assert if the component is able to render multiple links for a user ",()=>{
-  links=[{Link:'internalLink', Name: 'InternalLink'},{Link:'http://externalLink.com',Name:'ExternalLink'}];
-  renderComponent (links);
-  const linkObj=screen.getByText(links[0].Name.toUpperCase());
-  expect(linkObj).toBeInTheDocument();
-  const hyperLinkObj=screen.getByText(links[1].Name.toUpperCase());
-  expect(hyperLinkObj).toBeInTheDocument();
-
+  it("Test Case 8: Assert if the component is able to render multiple links for a user", () => {
+    links = [{ Link: 'internalLink', Name: 'InternalLink' }, { Link: 'http://externalLink.com', Name: 'ExternalLink' }];
+    renderComponent(links);
+    const linkObj = screen.getByText(links[0].Name.toUpperCase());
+    expect(linkObj).toBeInTheDocument();
+    const hyperLinkObj = screen.getByText(links[1].Name.toUpperCase());
+    expect(hyperLinkObj).toBeInTheDocument();
   });
 
-});
\ No newline at end of file
+});
diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx
index 7e6e658f13..fde93bad4e 100644
--- a/src/components/UserProfile/UserProfile.jsx
+++ b/src/components/UserProfile/UserProfile.jsx
@@ -59,6 +59,12 @@ import { GiConsoleController } from 'react-icons/gi';
 import { setCurrentUser } from '../../actions/authActions'
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import QuickSetupModal from './QuickSetupModal/QuickSetupModal';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
+
 
 function UserProfile(props) {
   const darkMode = useSelector(state => state.theme.darkMode);
@@ -107,7 +113,7 @@ function UserProfile(props) {
   const [summaryIntro, setSummaryIntro] = useState('');
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [pendingRehireableStatus, setPendingRehireableStatus] = useState(null);
-  const [isRehireable, setIsRehireable] = useState(null); 
+  const [isRehireable, setIsRehireable] = useState(null);
 
   const userProfileRef = useRef();
 
@@ -262,37 +268,6 @@ function UserProfile(props) {
       .catch(err => console.log(err));
   };
 
-  // const loadSummaryIntroDetails = async teamId => {
-  //   const res = await axios.get(ENDPOINTS.TEAM_USERS(teamId));
-  //   const { data } = res;
-
-  //   const memberSubmitted = [];
-  //   const memberNotSubmitted = [];
-  //   let manager = '';
-
-  //   data.forEach(member => {
-  //     if (member.role === 'Manager') {
-  //       manager = `${member.firstName} ${member.lastName}`;
-  //     }
-  //     member.weeklySummaries[0].summary !== ''
-  //       ? memberSubmitted.push(`${member.firstName} ${member.lastName}`)
-  //       : memberNotSubmitted.push(`${member.firstName} ${member.lastName}`);
-  //   });
-
-  //   manager = manager === '' ? '<Your Name>' : manager;
-  //   const memberSubmittedString =
-  //     memberSubmitted.length !== 0
-  //       ? memberSubmitted.join(', ')
-  //       : '<list all team members names included in the summary>.';
-  //   const memberDidntSubmitString =
-  //     memberNotSubmitted.length !== 0
-  //       ? memberSubmitted.join(', ')
-  //       : '<list all team members names NOT included in the summary>';
-
-  //   const summaryIntroString = `This week’s summary was managed by ${manager} and includes ${memberSubmittedString} These people did NOT provide a summary ${memberDidntSubmitString}. <Insert the proofread and single-paragraph summary created by ChatGPT>`;
-
-  //   setSummaryIntro(summaryIntroString);
-  // };
 
   const getCurretLoggedinUserEmail = async () => {
     const userId = props?.auth?.user?.userid;
@@ -466,8 +441,12 @@ function UserProfile(props) {
   };
 
   const handleBlueSquare = (status = true, type = 'message', blueSquareID = '') => {
-    if (targetIsDevAdminUneditable){
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+    if (targetIsDevAdminUneditable) {
+      if (userProfile?.email === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     setType(type);
@@ -534,7 +513,7 @@ function UserProfile(props) {
     }
     try {
       await props.updateUserProfile(userProfileRef.current);
-      
+
       if (userProfile._id === props.auth.user.userid && props.auth.user.role !== userProfile.role) {
         await props.refreshToken(userProfile._id);
       }
@@ -547,9 +526,9 @@ function UserProfile(props) {
       return err.message;
     }
   };
- 
-  // Changing onSubmit for Badges component from handleSubmit to handleBadgeSubmit. 
-  // AssignBadgePopup already has onSubmit action to call an API to update the user badges. 
+
+  // Changing onSubmit for Badges component from handleSubmit to handleBadgeSubmit.
+  // AssignBadgePopup already has onSubmit action to call an API to update the user badges.
   // Using handleSubmit will trigger actopms to call the assignBadge API and updateUserProfile API, which is redundant.
   const handleBadgeSubmit = async () => {
     try {
@@ -614,7 +593,7 @@ function UserProfile(props) {
   };
 
   useEffect(() => {
-    getTeamMembersWeeklySummary(); 
+    getTeamMembersWeeklySummary();
     loadUserProfile();
   }, []);
 
@@ -702,11 +681,12 @@ function UserProfile(props) {
   const canUpdatePassword = props.hasPermission('updatePassword');
   const canGetProjectMembers = props.hasPermission('getProjectMembers');
   const canChangeRehireableStatus = props.hasPermission('changeUserRehireableStatus');
+  const canUpdateSummaryRequirements = props.hasPermission('updateSummaryRequirements');
   const canManageAdminLinks = props.hasPermission('manageAdminLinks');;
   const canSeeQSC = props.hasPermission('seeQSC');
 
   const targetIsDevAdminUneditable = cantUpdateDevAdminDetails(userProfile.email, authEmail);
- 
+
   const canEditUserProfile = targetIsDevAdminUneditable
     ? false
     : userProfile.role === 'Owner'
@@ -777,6 +757,8 @@ function UserProfile(props) {
                 alt="Profile Picture"
                 roundedCircle
                 className="profilePicture bg-white"
+                //this line below should fix the image formatting issue
+                style={profilePic ? {} : { width: '240px', height: '240px' }}
               />
               {canEdit ? (
                 <div className="image-button file btn btn-lg btn-primary" style={darkMode ? boxStyleDark : boxStyle}>
@@ -814,7 +796,7 @@ function UserProfile(props) {
               </Alert>
             ) : null}
             {!codeValid ? (
-              <Alert color="danger">The code format should be A-AAA or AAAAA.</Alert>
+              <Alert color="danger">NOT SAVED! The code must be between 5 and 7 characters long</Alert>
             ) : null}
             <div className="profile-head">
               <h5 className={`mr-2 ${darkMode ? 'text-light' : ''}`}>{`${firstName} ${lastName}`}</h5>
@@ -825,6 +807,7 @@ function UserProfile(props) {
                 fontSize={24}
                 isPermissionPage={true}
                 role={requestorRole} // Pass the 'role' prop to EditableInfoModal
+                darkMode={darkMode}
               />
               </div>
               <span className="mr-2">
@@ -863,11 +846,11 @@ function UserProfile(props) {
               )}
               {canChangeRehireableStatus && (
                 <span className='mr-2'>
-                  <i 
+                  <i
                     className={isRehireable ? "fa fa-check-square-o": "fa fa-square-o"}
                     aria-hidden="true"
-                    style={{ fontSize: 24, cursor: 'pointer', marginTop: '6px' }} 
-                    title="Click to change rehirable status" 
+                    style={{ fontSize: 24, cursor: 'pointer', marginTop: '6px' }}
+                    title="Click to change rehirable status"
                     onClick={handleRehireableChange}
                   />
                 </span>
@@ -1055,6 +1038,7 @@ function UserProfile(props) {
                     onEndDate={handleEndDate}
                     loadUserProfile={loadUserProfile}
                     canEdit={canEditUserProfile}
+                    canUpdateSummaryRequirements={canUpdateSummaryRequirements}
                     onStartDate={handleStartDate}
                     darkMode={darkMode}
                   />
@@ -1090,7 +1074,7 @@ function UserProfile(props) {
                 />
               </TabPane>
               <TabPane tabId="4">
-                <ProjectsTab 
+                <ProjectsTab
                   userProjects={userProfile.projects || []}
                   userTasks={tasks}
                   projectsData={props?.allProjects?.projects || []}
@@ -1120,6 +1104,70 @@ function UserProfile(props) {
                 />
               </TabPane>
             </TabContent>
+            <div className="profileEditButtonContainer">
+              {canUpdatePassword && canEdit && !isUserSelf && (
+                <ResetPasswordButton
+                  className="mr-1 btn-bottom"
+                  user={userProfile}
+                  authEmail={authEmail}
+                />
+              )}
+              {isUserSelf && (activeTab === '1' || canPutUserProfile) && (
+                <Link
+                  to={targetIsDevAdminUneditable ? `#` : `/updatepassword/${userProfile._id}`}
+                  onClick={() => {
+                    if (targetIsDevAdminUneditable) {
+                      alert(
+                        'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
+                          'You shouldn’t even be using this account except to create your own accounts to use. ' +
+                          'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
+                      );
+                      return `#`;
+                    }
+                  }}
+                >
+                  <Button className="mr-1 btn-bottom" color="primary" style={darkMode ? boxStyleDark : boxStyle}>
+                    {' '}
+                    Update Password
+                  </Button>
+                </Link>
+              )}
+              {canEdit && (activeTab) && (
+                <>
+                  <SaveButton
+                    className="mr-1 btn-bottom"
+                    handleSubmit={async () => await handleSubmit()}
+                    disabled={
+                      !formValid.firstName ||
+                      !formValid.lastName ||
+                      !formValid.email ||
+                      !codeValid ||
+                      (userStartDate > userEndDate && userEndDate !== '') ||
+                      (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual) ||
+                      isTeamSaved
+                    }
+                    userProfile={userProfile}
+                    setSaved={() => setSaved(true)}
+                    darkMode={darkMode}
+                  />
+                  {activeTab !== '3' && (
+                    <span
+                      onClick={() => {
+                        setUserProfile(originalUserProfile);
+                        setTasks(originalTasks);
+                        setTeams(originalTeams);
+                        setProjects(resetProjects);
+                      }}
+                      className="btn btn-outline-danger mr-1 btn-bottom"
+                      style={darkMode ? boxStyleDark : boxStyle}
+                    >
+                      Cancel
+                    </span>
+                  )}
+                </>
+              )}
+            </div>
+
           </Col>
           <Col md="8" className="profile-functions-tablet">
             <List className="profile-functions-list">
@@ -1131,18 +1179,18 @@ function UserProfile(props) {
               >
                 Basic Information
               </Button>
-              <Modal isOpen={showConfirmDialog} toggle={handleCancelChange}>
-                <ModalHeader toggle={handleCancelChange}>Confirm Status Change</ModalHeader>
-                <ModalBody>
+              <Modal isOpen={showConfirmDialog} toggle={handleCancelChange} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={handleCancelChange} className={darkMode ? 'bg-space-cadet' : ''}>Confirm Status Change</ModalHeader>
+                <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   {`Are you sure you want to change the user status to ${pendingRehireableStatus ? 'Rehireable' : 'Unrehireable'}?`}
                 </ModalBody>
-                <ModalFooter>
+                <ModalFooter  className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <Button color="primary" onClick={handleConfirmChange}>Confirm</Button>{' '}
                   <Button color="secondary" onClick={handleCancelChange}>Cancel</Button>
                 </ModalFooter>
               </Modal>
-              <Modal isOpen={menuModalTabletScreen === 'Basic Information'} toggle={toggle}>
-                <ModalHeader toggle={toggle} className={darkMode ? 'bg-azure text-light' : ''}>Basic Information</ModalHeader>
+              <Modal isOpen={menuModalTabletScreen === 'Basic Information'} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Basic Information</ModalHeader>
                 <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <BasicInformationTab
                   role={requestorRole}
@@ -1233,8 +1281,8 @@ function UserProfile(props) {
               >
                 Volunteering Times
               </Button>
-              <Modal isOpen={menuModalTabletScreen === 'Volunteering Times'} toggle={toggle}>
-                <ModalHeader toggle={toggle} className={darkMode ? 'bg-azure text-light' : ''}>Volunteering Times</ModalHeader>
+              <Modal isOpen={menuModalTabletScreen === 'Volunteering Times'} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Volunteering Times</ModalHeader>
                 <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <VolunteeringTimeTab
                     userProfile={userProfile}
@@ -1242,7 +1290,8 @@ function UserProfile(props) {
                     isUserSelf={isUserSelf}
                     role={requestorRole}
                     onEndDate={handleEndDate}
-                    canEdit={canEdit}
+                    canEdit={canEditUserProfile}
+                    canUpdateSummaryRequirements={canUpdateSummaryRequirements}
                     onStartDate={handleStartDate}
                     darkMode={darkMode}
                   />
@@ -1289,8 +1338,8 @@ function UserProfile(props) {
               <Button className="list-button" onClick={() => toggle('Teams')} color="secondary" style={darkMode ? boxStyleDark : boxStyle}>
                 Teams
               </Button>
-              <Modal isOpen={menuModalTabletScreen === 'Teams'} toggle={toggle}>
-                <ModalHeader toggle={toggle} className={darkMode ? 'bg-azure text-light' : ''}>Teams</ModalHeader>
+              <Modal isOpen={menuModalTabletScreen === 'Teams'} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Teams</ModalHeader>
                 <ModalBody className={darkMode ? 'bg-yinmn-blue text-light' : ''}>
                   <TeamsTab
                     userTeams={userProfile?.teams || []}
@@ -1361,8 +1410,8 @@ function UserProfile(props) {
               <Button className="list-button" onClick={() => toggle('Projects')} color="secondary" style={darkMode ? boxStyleDark : boxStyle}>
                 Projects
               </Button>
-              <Modal isOpen={menuModalTabletScreen === 'Projects'} toggle={toggle}>
-                <ModalHeader toggle={toggle} className={darkMode ? 'bg-azure text-light' : ''}>Projects</ModalHeader>
+              <Modal isOpen={menuModalTabletScreen === 'Projects'} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Projects</ModalHeader>
                 <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <ProjectsTab
                     userProjects={userProfile.projects || []}
@@ -1431,8 +1480,8 @@ function UserProfile(props) {
               >
                 Edit History
               </Button>
-              <Modal isOpen={menuModalTabletScreen === 'Edit History'} toggle={toggle}>
-                <ModalHeader toggle={toggle} className={darkMode ? 'bg-azure text-light' : ''}>Edit History</ModalHeader>
+              <Modal isOpen={menuModalTabletScreen === 'Edit History'} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+                <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Edit History</ModalHeader>
                 <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                   <TimeEntryEditHistory userProfile={userProfile} setUserProfile={setUserProfile} darkMode={darkMode} tabletView={true}/>
                 </ModalBody>
@@ -1480,71 +1529,8 @@ function UserProfile(props) {
         </Row>
         <Row>
           <Col md="4"></Col>
-          <Col md="8" className="desktop-panel">
-            <div className="profileEditButtonContainer">
-              {canUpdatePassword && canEdit && !isUserSelf && (
-                <ResetPasswordButton
-                  className="mr-1 btn-bottom"
-                  user={userProfile}
-                  authEmail={authEmail}
-                />
-              )}
-              {isUserSelf && (activeTab === '1' || canPutUserProfile) && (
-                <Link
-                  to={targetIsDevAdminUneditable ? `#` : `/updatepassword/${userProfile._id}`}
-                  onClick={() => {
-                    if (targetIsDevAdminUneditable) {
-                      alert(
-                        'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
-                          'You shouldn’t even be using this account except to create your own accounts to use. ' +
-                          'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
-                      );
-                      return `#`;
-                    }
-                  }}
-                >
-                  <Button className="mr-1 btn-bottom" color="primary" style={darkMode ? boxStyleDark : boxStyle}>
-                    {' '}
-                    Update Password
-                  </Button>
-                </Link>
-              )}
-              {canEdit && (activeTab) && (
-                <>
-                  <SaveButton
-                    className="mr-1 btn-bottom"
-                    handleSubmit={async () => await handleSubmit()}
-                    disabled={
-                      !formValid.firstName ||
-                      !formValid.lastName ||
-                      !formValid.email ||
-                      !codeValid ||
-                      (userStartDate > userEndDate && userEndDate !== '') ||
-                      (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual) ||
-                      isTeamSaved
-                    }
-                    userProfile={userProfile}
-                    setSaved={() => setSaved(true)}
-                    darkMode={darkMode}
-                  />
-                  {activeTab !== '3' && (
-                    <span
-                      onClick={() => {
-                        setUserProfile(originalUserProfile);
-                        setTasks(originalTasks);
-                        setTeams(originalTeams);
-                        setProjects(resetProjects);
-                      }}
-                      className="btn btn-outline-danger mr-1 btn-bottom"
-                      style={darkMode ? boxStyleDark : boxStyle}
-                    >
-                      Cancel
-                    </span>
-                  )}
-                </>
-              )}
-            </div>
-          </Col>
+          {/* <Col md="8" className="desktop-panel">
+          </Col> */}
         </Row>
       </Container>
     </div>
diff --git a/src/components/UserProfile/UserProfile.scss b/src/components/UserProfile/UserProfile.scss
index 8793031503..b87301959c 100644
--- a/src/components/UserProfile/UserProfile.scss
+++ b/src/components/UserProfile/UserProfile.scss
@@ -44,11 +44,6 @@
   text-align: center;
 }
 
-.profile-img img {
-  width: 70%;
-  height: 100%;
-}
-
 .profile-img .file {
   position: relative;
   overflow: hidden;
@@ -167,6 +162,10 @@
   padding-right: 10px;
 }
 
+.profileEditButtonContainer {
+  margin-top: 20px;
+}
+
 .profileEditButton {
   border: none;
   border-radius: 1.5rem;
@@ -183,8 +182,13 @@
 }
 
 .profilePicture {
-  width: 150px;
-  height: 150px;
+  //this should fix the image formatting issue
+  display: flex;
+  max-width: 240px;
+  max-height: 240px;
+  width: auto;
+  height: auto;
+  margin: auto;
 }
 
 .whoSection {
@@ -253,6 +257,64 @@
 }
 
 
+.isActive {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.isActive i {
+  color: lawngreen;
+  margin-top: 10px;
+}
+
+.isNotActive i {
+  color: #dee2e6;
+  margin-top: 10px;
+
+}
+
+.isNotActive {
+  color: #dee2e6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.Blue-Square-Email-BCC-tooltip::before {
+  content: '';
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+.Blue-Square-Email-BCC-tooltip {
+  visibility: hidden;
+  background-color: white;
+  color: black;
+  text-align: center;
+  border: 1px solid black;
+  padding: 5px;
+  border-radius: 5px;
+  position: relative;
+  z-index: 1;
+  font-size: 0.8rem;
+  top: 10px;
+}
+.Blue-Square-Email-BCC-div{
+  height:6em;
+}
+
+.Blue-Square-Email-BCC-div:hover div {
+  visibility: visible;
+}
+
 @media only screen and (max-width: 1024px) {
   .profileContainer {
     justify-content: space-around;
@@ -329,3 +391,11 @@
     width: 240px;
   }
 }
+
+.btn-outline-primary:disabled {
+  margin-right:5px;
+}
+
+button.btn.btn-outline-primary {
+  margin-right:5px;
+}
diff --git a/src/components/UserProfile/UserProfileEdit/SaveButton.jsx b/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
index edcfc305d2..50dc7db8ab 100644
--- a/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
+++ b/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
@@ -19,7 +19,7 @@ const getRandomMessage = () => {
 };
 
 const invalidCodemessage = 'Nice save! It seems you do not have a valid team code. It would be a lot cooler if you did. You can add one in the teams tab';
-const validTeamCodeRegex = /^([a-zA-Z]-[a-zA-Z]{3}|[a-zA-Z]{5})$/;
+const validTeamCodeRegex = /^([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7})$/;
 const stillSavingMessage = 'Saving, will take just a second...';
 
 /**
@@ -94,12 +94,14 @@ const SaveButton = props => {
         modalTitle={getMessage('title')}
         modalMessage={getMessage('message')}
         disabled={isLoading}
+        darkMode={darkMode}
       />
       <Button
         outline
         color='primary'
         // to={`/userprofile/${this.state.userProfile._id}`}
-        className='btn btn-outline-primary mr-1 bg-white'
+        //the line below caused the mouse over issue, so I commented it out
+        //className='btn btn-outline-primary mr-1 bg-white'
         onClick={handleSave}
         disabled={disabled}
         style={darkMode ? boxStyleDark : boxStyle}
diff --git a/src/components/UserProfile/UserProfileEdit/__test__/LinkModButton.test.js b/src/components/UserProfile/UserProfileEdit/__tests__/LinkModButton.test.js
similarity index 100%
rename from src/components/UserProfile/UserProfileEdit/__test__/LinkModButton.test.js
rename to src/components/UserProfile/UserProfileEdit/__tests__/LinkModButton.test.js
diff --git a/src/components/UserProfile/UserProfileEdit/__test__/SaveButton.test.js b/src/components/UserProfile/UserProfileEdit/__tests__/SaveButton.test.js
similarity index 96%
rename from src/components/UserProfile/UserProfileEdit/__test__/SaveButton.test.js
rename to src/components/UserProfile/UserProfileEdit/__tests__/SaveButton.test.js
index b2a3d3ce18..08d60e8850 100644
--- a/src/components/UserProfile/UserProfileEdit/__test__/SaveButton.test.js
+++ b/src/components/UserProfile/UserProfileEdit/__tests__/SaveButton.test.js
@@ -12,6 +12,7 @@ describe('<SaveButton />', () => {
       disabled: true,
       userProfile: userProfileMock,
       setSaved:jest.fn(),
+      darkMode: true,
       }
     render(<SaveButton {...props} />);
     const button = screen.getByRole('button', { name: /save changes/i });
@@ -26,6 +27,7 @@ describe('<SaveButton />', () => {
         disabled: true,
         userProfile: userProfileMock,
         setSaved:jest.fn(),
+        darkMode: true,
         } 
       render(<SaveButton {...props} />);
       const button = screen.getByRole('button', { name: /save changes/i });
@@ -40,6 +42,7 @@ describe('<SaveButton />', () => {
         disabled: false,
         userProfile: userProfileMock,
         setSaved:jest.fn(),
+        darkMode: true,
         } 
       render(<SaveButton {...props} />);
       const button = screen.getByRole('button', { name: /save changes/i });
diff --git a/src/components/UserProfile/UserProfileModal/EditConfirmModal.jsx b/src/components/UserProfile/UserProfileModal/EditConfirmModal.jsx
index baea7f450d..c8ee6c0320 100644
--- a/src/components/UserProfile/UserProfileModal/EditConfirmModal.jsx
+++ b/src/components/UserProfile/UserProfileModal/EditConfirmModal.jsx
@@ -2,21 +2,22 @@ import React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { boxStyle } from 'styles';
+import { boxStyle, boxStyleDark } from 'styles';
+import { useSelector } from 'react-redux';
 
 const EditConfirmModal = props => {
-  const { isOpen, closeModal, modalTitle, modalMessage, userProfile, disabled } = props;
+  const { isOpen, closeModal, modalTitle, modalMessage, userProfile, disabled, darkMode } = props;
   const history = useHistory();
   const toggle = () => {
     closeModal();
   };
   return (
     <React.Fragment>
-      <Modal isOpen={isOpen} toggle={closeModal}>
-        <ModalHeader toggle={disabled ? () => false : closeModal}>{modalTitle}</ModalHeader>
-        <ModalBody>{modalMessage}</ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={toggle} style={boxStyle} disabled={disabled}>
+      <Modal isOpen={isOpen} toggle={closeModal} className={darkMode ? 'text-light dark-mode' : ''}>
+        <ModalHeader toggle={disabled ? () => false : closeModal} className={darkMode ? 'bg-space-cadet' : ''}>{modalTitle}</ModalHeader>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>{modalMessage}</ModalBody>
+        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+          <Button color="primary" onClick={toggle} style={darkMode ? boxStyleDark : boxStyle} disabled={disabled}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/components/UserProfile/UserProfileModal/EditLinkModal.jsx b/src/components/UserProfile/UserProfileModal/EditLinkModal.jsx
index 42abc1a9be..129dc57c55 100644
--- a/src/components/UserProfile/UserProfileModal/EditLinkModal.jsx
+++ b/src/components/UserProfile/UserProfileModal/EditLinkModal.jsx
@@ -12,11 +12,13 @@ import {
 import PropTypes from 'prop-types';
 import hasPermission from '../../../utils/permissions';
 import './EditLinkModal.css';
-import { boxStyle } from 'styles';
-import { connect } from 'react-redux';
+import { boxStyle, boxStyleDark } from 'styles';
+import { connect, useSelector } from 'react-redux';
 import { isValidGoogleDocsUrl, isValidMediaUrl } from 'utils/checkValidURL';
 
 const EditLinkModal = props => {
+  const darkMode = useSelector(state => state.theme.darkMode)
+
   const { isOpen, closeModal, updateLink, userProfile, handleSubmit } = props;
   const canManageAdminLinks = props.hasPermission('manageAdminLinks');
 
@@ -167,14 +169,14 @@ const EditLinkModal = props => {
 
   return (
     <React.Fragment>
-      <Modal isOpen={isOpen} toggle={closeModal}>
-        <ModalHeader toggle={closeModal}>Edit Links</ModalHeader>
-        <ModalBody>
+      <Modal isOpen={isOpen} toggle={closeModal} className={darkMode ? 'text-light dark-mode' : ''}>
+        <ModalHeader className={darkMode ? 'bg-space-cadet' : ''} toggle={closeModal}>Edit Links</ModalHeader>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
           <div>
             {canManageAdminLinks && (
               <CardBody>
-                <Card style={{ padding: '16px' }}>
-                  <Label style={{ display: 'flex', margin: '5px' }}>Admin Links:</Label>
+                <Card style={{ padding: '16px' }} className={darkMode ? 'bg-yinmn-blue' : ''}>
+                  <Label style={{ display: 'flex', margin: '5px' }} className={darkMode ? 'text-light' : ''}>Admin Links:</Label>
                   {mediaFolderDiffWarning && (
                     <span className="warning-help-context" data-testid="diff-media-url-warning" >
                       <strong>Media Folder link must be a working DropBox link</strong>
@@ -185,7 +187,7 @@ const EditLinkModal = props => {
                   )}
                   <div>
                     <div style={{ display: 'flex', margin: '5px' }} className="link-fields">
-                      <label className='custom-label' htmlFor='google-doc-link' >Google Doc</label>
+                      <label className={`custom-label ${darkMode ? 'text-light' : ''}`} htmlFor='google-doc-link' >Google Doc</label>
                       <input
                         id='google-doc-link'
                         className="customEdit"
@@ -199,7 +201,7 @@ const EditLinkModal = props => {
                     </div>
                     <div style={{ display: 'flex', margin: '5px' }} className="link-fields">
 
-                      <label className='custom-label' htmlFor='media-folder-link' >Media Folder</label>
+                      <label className={`custom-label ${darkMode ? 'text-light' : ''}`} htmlFor='media-folder-link' >Media Folder</label>
                       <input
                         className="customEdit"
                         id="media-folder-link"
@@ -287,8 +289,8 @@ const EditLinkModal = props => {
               </CardBody>
             )}
             <CardBody>
-              <Card style={{ padding: '16px' }}>
-                <Label style={{ display: 'flex', margin: '5px' }}>Personal Links:</Label>
+              <Card style={{ padding: '16px' }} className={darkMode ? 'bg-yinmn-blue' : ''}>
+                <Label style={{ display: 'flex', margin: '5px' }} className={darkMode ? 'text-light' : ''}>Personal Links:</Label>
                 <div>
                   {personalLinks.map((link, index) => (
                     <div
@@ -370,14 +372,14 @@ const EditLinkModal = props => {
             </CardBody>
           </div>
         </ModalBody>
-        <ModalFooter>
+        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
           <Button
             color="info"
             disabled={!isChanged}
             onClick={() => {
               handleUpdate();
             }}
-            style={boxStyle}
+            style={darkMode ? boxStyleDark : boxStyle}
           >
             Update
           </Button>
@@ -389,17 +391,17 @@ const EditLinkModal = props => {
               closeModal();
             }
             }
-            style={boxStyle}>
+            style={darkMode ? boxStyleDark : boxStyle}>
             Cancel
           </Button>
         </ModalFooter>
 
-        <Modal data-testid='popup-warning' isOpen={isWarningPopupOpen} toggle={() => setIsWarningPopupOpen(!isWarningPopupOpen)}  >
-          <ModalHeader>Warning!</ModalHeader>
-          <ModalBody>
+        <Modal data-testid='popup-warning' isOpen={isWarningPopupOpen} toggle={() => setIsWarningPopupOpen(!isWarningPopupOpen)} className={darkMode ? 'text-light dark-mode' : ''}>
+          <ModalHeader className={darkMode ? 'bg-space-cadet' : ''}>Warning!</ModalHeader>
+          <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
             Whoa Tiger, don’t do this! This link was added by an Admin when you were set up in the system. It is used by the Admin Team and your Manager(s) for reviewing your work. You should only change it if you are ABSOLUTELY SURE the one you are changing it to is more correct than the one here already.
           </ModalBody>
-          <ModalFooter>
+          <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
             <Button color='primary' onClick={() => { setIsWarningPopupOpen(!isWarningPopupOpen) }}>Confirm</Button>
             {/* Cancel button put original Media Folder link into the input */}
             <Button onClick={() => {
diff --git a/src/components/UserProfile/UserProfileModal/EditLinkModal.test.js b/src/components/UserProfile/UserProfileModal/EditLinkModal.test.js
index 3de8b6c20a..bc4c072f16 100644
--- a/src/components/UserProfile/UserProfileModal/EditLinkModal.test.js
+++ b/src/components/UserProfile/UserProfileModal/EditLinkModal.test.js
@@ -3,7 +3,7 @@ import { fireEvent, within } from "@testing-library/react";
 import EditLinkModal from "components/UserProfile/UserProfileModal/EditLinkModal";
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { rolesMock, authMock, userProfileMock, userProjectMock } from "__tests__/mockStates";
+import { rolesMock, authMock, userProfileMock, userProjectMock, themeMock } from "__tests__/mockStates";
 import { renderWithProvider } from "__tests__/utils";
 
 
@@ -44,7 +44,8 @@ describe('EditLinkModal permission checks', () =>{
       auth: {...authMock,isAdmin:false,user:{...authMock.user, role:'Volunteer'}},
       userProjects: userProjectMock,
       userProfile: userProfileMock,
-      role: rolesMock.role
+      role: rolesMock.role,
+      theme: themeMock,
     });
 
     component = renderWithProvider(<EditLinkModal {...props} />, {store})
@@ -73,7 +74,8 @@ describe('EditLinkModal with admin links and personal links', () => {
       auth: authMock,
       userProjects: userProjectMock,
       userProfile: userProfileMock,
-      role: rolesMock.role
+      role: rolesMock.role,
+      theme: themeMock,
     });
 
     component = renderWithProvider(<EditLinkModal {...props} />, {store})
@@ -159,7 +161,8 @@ describe('Edit Link Modal with empty links', () =>{
       auth: authMock,
       userProjects: userProjectMock,
       userProfile: userProfileMock,
-      role: rolesMock.role
+      role: rolesMock.role,
+      theme: themeMock,
     });
 
     component = renderWithProvider(<EditLinkModal {...props} />, {store})
diff --git a/src/components/UserProfile/UserProfileModal/UserProfileModal.jsx b/src/components/UserProfile/UserProfileModal/UserProfileModal.jsx
index e08eaed35a..c1d4c8205a 100644
--- a/src/components/UserProfile/UserProfileModal/UserProfileModal.jsx
+++ b/src/components/UserProfile/UserProfileModal/UserProfileModal.jsx
@@ -12,9 +12,10 @@ import {
   Card,
   Col,
 } from 'reactstrap';
-import { boxStyle } from 'styles';
+import { boxStyle, boxStyleDark } from 'styles';
+import '../../Header/DarkMode.css'
 import hasPermission from 'utils/permissions';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 
 const UserProfileModal = props => {
   const {
@@ -42,6 +43,8 @@ const UserProfileModal = props => {
     }
   }
 
+  const darkMode = useSelector(state=>state.theme.darkMode);
+
   const canPutUserProfile = props.hasPermission('putUserProfile');
 
   const [linkName, setLinkName] = useState('');
@@ -122,6 +125,7 @@ const UserProfileModal = props => {
     } else if (event.target.id === 'summary') {
       setSummary(event.target.value);
       checkFields(dateStamp, summary);
+      adjustTextareaHeight(event.target);
     } else if (event.target.id === 'date') {
       setDateStamp(event.target.value);
       setSummaryFieldView(false);
@@ -139,16 +143,24 @@ const UserProfileModal = props => {
     }
   }
 
+  const adjustTextareaHeight = (textarea) => {
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
+  const boxStyling = darkMode ? boxStyleDark : boxStyle;
+  const fontColor = darkMode ? 'text-light' : '';
+
   return (
-    <Modal isOpen={isOpen} toggle={closeModal}>
-      <ModalHeader toggle={closeModal}>{modalTitle}</ModalHeader>
-      <ModalBody>
+    <Modal isOpen={isOpen} toggle={closeModal} className={darkMode ? 'text-light dark-mode' : ''}>
+      <ModalHeader toggle={closeModal} className={darkMode ? 'bg-space-cadet' : ''}>{modalTitle}</ModalHeader>
+      <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
         {type === 'updateLink' && (
           <div>
             {canPutUserProfile && (
               <CardBody>
                 <Card>
-                  <Label style={{ display: 'flex', margin: '5px' }}>Admin Links:</Label>
+                  <Label className={fontColor} style={{ display: 'flex', margin: '5px' }}>Admin Links:</Label>
                   <Col>
                     <div style={{ display: 'flex', margin: '5px' }}>
                       <div className="customTitle">Name</div>
@@ -223,7 +235,7 @@ const UserProfileModal = props => {
             )}
             <CardBody>
               <Card>
-                <Label style={{ display: 'flex', margin: '5px' }}>Personal Links:</Label>
+                <Label className={fontColor} style={{ display: 'flex', margin: '5px' }}>Personal Links:</Label>
                 <Col>
                   <div style={{ display: 'flex', margin: '5px' }}>
                     <div className="customTitle">Name</div>
@@ -303,13 +315,20 @@ const UserProfileModal = props => {
         {type === 'addBlueSquare' && (
           <>
             <FormGroup>
-              <Label for="date">Date</Label>
+              <Label className={fontColor} for="date">Date</Label>
               <Input type="date" name="date" id="date" onChange={handleChange} />
             </FormGroup>
 
             <FormGroup hidden={summaryFieldView}>
-              <Label for="report">Summary</Label>
-              <Input type="textarea" id="summary" onChange={handleChange} />
+              <Label className={fontColor} for="report">Summary</Label>
+              <Input 
+                type="textarea" 
+                id="summary" 
+                onChange={handleChange} 
+                value={summary} 
+                style={{ minHeight: '200px', overflow: 'hidden'}} 
+                onInput={e => adjustTextareaHeight(e.target)} 
+              />
             </FormGroup>
           </>
         )}
@@ -317,18 +336,25 @@ const UserProfileModal = props => {
         {type === 'modBlueSquare' && (
           <>
             <FormGroup>
-              <Label for="date">Date</Label>
+              <Label className={fontColor} for="date">Date</Label>
               <Input type="date" onChange={e => setDateStamp(e.target.value)} value={dateStamp} />
             </FormGroup>
             <FormGroup>
-              <Label for="createdDate">
+              <Label className={fontColor} for="createdDate">
                 Created Date:
                 {blueSquare[0]?.createdDate}
               </Label>
             </FormGroup>
             <FormGroup>
-              <Label for="report">Summary</Label>
-              <Input type="textarea" onChange={e => setSummary(e.target.value)} value={summary} />
+              <Label className={fontColor} for="report">Summary</Label>
+              <Input 
+                type="textarea" 
+                id="summary" 
+                onChange={handleChange} 
+                value={summary} 
+                style={{ minHeight: '200px', overflow: 'hidden'}} // 4x taller than usual
+                onInput={e => adjustTextareaHeight(e.target)} // auto-adjust height
+              />
             </FormGroup>
           </>
         )}
@@ -336,20 +362,20 @@ const UserProfileModal = props => {
         {type === 'viewBlueSquare' && (
           <>
             <FormGroup>
-              <Label for="date">
+              <Label className={fontColor} for="date">
                 Date:
                 {blueSquare[0]?.date}
               </Label>
             </FormGroup>
             <FormGroup>
-              <Label for="createdDate">
+              <Label className={fontColor} for="createdDate">
                 Created Date:
                 {blueSquare[0]?.createdDate}
               </Label>
             </FormGroup>
             <FormGroup>
-              <Label for="description">Summary</Label>
-              <Label>{blueSquare[0]?.description}</Label>
+              <Label className={fontColor} for="description">Summary</Label>
+              <Label className={fontColor}>{blueSquare[0]?.description}</Label>
             </FormGroup>
           </>
         )}
@@ -361,7 +387,7 @@ const UserProfileModal = props => {
         {type === 'image' && modalMessage}
       </ModalBody>
 
-      <ModalFooter>
+      <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
         {type === 'addBlueSquare' && (
           <Button
             color="danger"
@@ -370,7 +396,7 @@ const UserProfileModal = props => {
             onClick={() => {
               modifyBlueSquares('', dateStamp, summary, 'add');
             }}
-            style={boxStyle}
+            style={boxStyling}
           >
             Submit
           </Button>
@@ -383,7 +409,7 @@ const UserProfileModal = props => {
               onClick={() => {
                 modifyBlueSquares(id, dateStamp, summary, 'update');
               }}
-              style={boxStyle}
+              style={boxStyling}
             >
               Update
             </Button>
@@ -392,7 +418,7 @@ const UserProfileModal = props => {
               onClick={() => {
                 modifyBlueSquares(id, dateStamp, summary, 'delete');
               }}
-              style={boxStyle}
+              style={boxStyling}
             >
               Delete
             </Button>
@@ -412,7 +438,7 @@ const UserProfileModal = props => {
 
         {type === 'image' && (
           <>
-            <Button color="primary" onClick={closeModal} style={boxStyle}>
+            <Button color="primary" onClick={closeModal} style={boxStyling}>
               {' '}
               Close{' '}
             </Button>
@@ -421,7 +447,7 @@ const UserProfileModal = props => {
               onClick={() => {
                 window.open('https://picresize.com/');
               }}
-              style={boxStyle}
+              style={boxStyling}
             >
               {' '}
               Resize{' '}
@@ -430,11 +456,11 @@ const UserProfileModal = props => {
         )}
 
         {type === 'save' ? (
-          <Button color="primary" onClick={closeModal} style={boxStyle}>
+          <Button color="primary" onClick={closeModal} style={boxStyling}>
             Close
           </Button>
         ) : (
-          <Button color="primary" onClick={closeModal} style={boxStyle}>
+          <Button color="primary" onClick={closeModal} style={boxStyling}>
             Cancel
           </Button>
         )}
diff --git a/src/components/UserProfile/VolunteeringTimeTab/HistoryModal.jsx b/src/components/UserProfile/VolunteeringTimeTab/HistoryModal.jsx
index f5d367a292..b31c7e7552 100644
--- a/src/components/UserProfile/VolunteeringTimeTab/HistoryModal.jsx
+++ b/src/components/UserProfile/VolunteeringTimeTab/HistoryModal.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Modal, ModalBody, ModalHeader, ModalFooter, Button, Table } from 'reactstrap';
 
 const HistoryModal = ({ isOpen, toggle, userName, userHistory }) => {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   return (
     <div>
-      <Modal isOpen={isOpen} toggle={toggle}>
-        <ModalHeader toggle={toggle}>Past Promised Hours</ModalHeader>
-        <ModalBody>
+      <Modal isOpen={isOpen} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
+        <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>Past Promised Hours</ModalHeader>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
           {!userHistory || userHistory?.length <= 1 ? (
             <p>{userName} has never made any changes to the promised hours.</p>
           ) : (
@@ -32,7 +35,7 @@ const HistoryModal = ({ isOpen, toggle, userName, userHistory }) => {
             </Table>
           )}
         </ModalBody>
-        <ModalFooter>
+        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
           <Button onClick={toggle} color="secondary" className="float-left">
             {' '}
             Ok{' '}
diff --git a/src/components/UserProfile/VolunteeringTimeTab/VolunteeringTimeTab.jsx b/src/components/UserProfile/VolunteeringTimeTab/VolunteeringTimeTab.jsx
index 6809a605a3..5597dd10c5 100644
--- a/src/components/UserProfile/VolunteeringTimeTab/VolunteeringTimeTab.jsx
+++ b/src/components/UserProfile/VolunteeringTimeTab/VolunteeringTimeTab.jsx
@@ -243,7 +243,7 @@ const TotalIntangibleHours = props => {
  * @returns
  */
 const ViewTab = props => {
-  const { userProfile, setUserProfile, role, canEdit, darkMode } = props;
+  const { userProfile, setUserProfile, role, canEdit, canUpdateSummaryRequirements, darkMode } = props;
   const [totalTangibleHoursThisWeek, setTotalTangibleHoursThisWeek] = useState(0);
   const [totalTangibleHours, setTotalTangibleHours] = useState(0);
   const { hoursByCategory, totalIntangibleHrs } = userProfile;
@@ -348,10 +348,10 @@ const ViewTab = props => {
     <div data-testid="volunteering-time-tab">
       <Row className="volunteering-time-row">
         <Col md="6">
-          <Label className="hours-label">Account Created Date</Label>
+          <Label className={`hours-label ${darkMode ? 'text-light' : ''}`}>Account Created Date</Label>
         </Col>
         <Col md="6">
-        <p>{formatDateMMDDYYYY(userProfile.createdDate)}</p>
+        <p className={darkMode ? 'text-azure' : ''}>{formatDateMMDDYYYY(userProfile.createdDate)}</p>
         </Col>
       </Row>
       <Row className="volunteering-time-row">
@@ -404,7 +404,7 @@ const ViewTab = props => {
             role={role}
             userProfile={userProfile}
             setUserProfile={setUserProfile}
-            canEdit={canEdit}
+            canEdit={canEdit && canUpdateSummaryRequirements}
             darkMode={darkMode}
           />
         </Col>
diff --git a/src/components/UserProfile/VolunteeringTimeTab/__tests__/HistoryModal.test.js b/src/components/UserProfile/VolunteeringTimeTab/__tests__/HistoryModal.test.js
index eefa78f53c..322b902b2a 100644
--- a/src/components/UserProfile/VolunteeringTimeTab/__tests__/HistoryModal.test.js
+++ b/src/components/UserProfile/VolunteeringTimeTab/__tests__/HistoryModal.test.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import HistoryModal from '../HistoryModal';
+import { themeMock } from '__tests__/mockStates';
+
+const mockStore = configureMockStore();
+const initialState = {
+  theme: themeMock,
+};
+const store = mockStore(initialState);
 
 describe('HistoryModal Component', () => {
   const mockToggle = jest.fn();
@@ -13,7 +22,9 @@ describe('HistoryModal Component', () => {
 
   test('renders modal when isOpen is true', () => {
     render(
-      <HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={userHistory} />,
+      <Provider store={store}>
+        <HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={userHistory} />
+      </Provider>,
     );
 
     expect(screen.getByText('Past Promised Hours')).toBeInTheDocument();
@@ -23,19 +34,21 @@ describe('HistoryModal Component', () => {
 
   test('does not render modal when isOpen is false', () => {
     render(
-      <HistoryModal
-        isOpen={false}
-        toggle={mockToggle}
-        userName={userName}
-        userHistory={userHistory}
-      />,
+      <Provider store={store}>
+        <HistoryModal
+          isOpen={false}
+          toggle={mockToggle}
+          userName={userName}
+          userHistory={userHistory}
+        />
+      </Provider>,
     );
 
     expect(screen.queryByText('Past Promised Hours')).not.toBeInTheDocument();
   });
 
   test('shows message when there is no user history', () => {
-    render(<HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={[]} />);
+    render(<Provider store={store}><HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={[]} /></Provider>);
 
     expect(
       screen.getByText(`${userName} has never made any changes to the promised hours.`),
@@ -44,7 +57,7 @@ describe('HistoryModal Component', () => {
 
   test('toggle button closes the modal', () => {
     render(
-      <HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={userHistory} />,
+      <Provider store={store}><HistoryModal isOpen toggle={mockToggle} userName={userName} userHistory={userHistory} /></Provider>,
     );
 
     // Use a regular expression to match the button text more flexibly
diff --git a/src/components/UserProfile/__tests__/AddNewTeamModal.test.js b/src/components/UserProfile/__tests__/AddNewTeamModal.test.js
index 3728a6efc1..b47c1857a3 100644
--- a/src/components/UserProfile/__tests__/AddNewTeamModal.test.js
+++ b/src/components/UserProfile/__tests__/AddNewTeamModal.test.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import AddNewTeamModal from '../AddNewTeamModal';
+import { themeMock } from '__tests__/mockStates';
+
+const mockStore = configureMockStore();
+const initialState = {
+  theme: themeMock,
+};
+const store = mockStore(initialState);
 
 const remainedTeams = [
   {
@@ -32,46 +41,54 @@ const submitHandler = jest.fn();
 describe('AddNewTeamModal component', () => {
   it('renders modal when isOpen is true', () => {
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Modal title')).toBeInTheDocument();
   });
   it('renders modal when isOpen is false', () => {
     render(
-      <AddNewTeamModal
-        isOpen={false}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={false}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Modal title')).not.toBeInTheDocument();
   });
   it('check modal title and its label', () => {
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Modal title')).toBeInTheDocument();
     expect(screen.getByText('Choose a Team:')).toBeInTheDocument();
   });
   it('check team name option', () => {
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
 
     expect(screen.queryByText('team11')).toBeInTheDocument();
@@ -81,12 +98,14 @@ describe('AddNewTeamModal component', () => {
   });
   it('check click on one of the options', () => {
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     const team11Element = screen.getByText('team11');
     fireEvent.click(team11Element);
@@ -102,12 +121,14 @@ describe('AddNewTeamModal component', () => {
       },
     ];
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     const selectElement = screen.getByRole('combobox');
     fireEvent.change(selectElement, { target: { value: 'aaa478' } });
@@ -118,12 +139,14 @@ describe('AddNewTeamModal component', () => {
   });
   it('check cancel button', () => {
     render(
-      <AddNewTeamModal
-        isOpen={true}
-        toggle={toggle}
-        teams={remainedTeams}
-        submitHandler={submitHandler}
-      />,
+      <Provider store={store}>
+        <AddNewTeamModal
+          isOpen={true}
+          toggle={toggle}
+          teams={remainedTeams}
+          submitHandler={submitHandler}
+        />
+      </Provider>,
     );
     const cancelButton = screen.getByText('Cancel');
     fireEvent.click(cancelButton);
diff --git a/src/components/UserProfile/__tests__/AssignBadgePopup.test.jsx b/src/components/UserProfile/__tests__/AssignBadgePopup.test.jsx
index c01ca9ff68..72d29d44cf 100644
--- a/src/components/UserProfile/__tests__/AssignBadgePopup.test.jsx
+++ b/src/components/UserProfile/__tests__/AssignBadgePopup.test.jsx
@@ -3,6 +3,7 @@ import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store'; // If using Redux
 import MockAssignTableRow from '../MockData/MockAssignTableRow';
 import AssignBadgePopup from '../AssignBadgePopup';
+import { themeMock } from '__tests__/mockStates';
 
 /** ********************************TEST PRE-REQUISITE*************************************** */
 // Mock Redux store
@@ -11,6 +12,7 @@ const initialState = {
   badge: {
     selectedBadges: [],
   },
+  theme: themeMock,
 };
 const store = mockStore(initialState);
 
diff --git a/src/components/UserProfile/__tests__/Teamsview.test.js b/src/components/UserProfile/__tests__/Teamsview.test.js
index 5723bcf857..e03502f76e 100644
--- a/src/components/UserProfile/__tests__/Teamsview.test.js
+++ b/src/components/UserProfile/__tests__/Teamsview.test.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
 import Teams from '../Teamsview';
+import { themeMock } from '__tests__/mockStates';
+
+const mockStore = configureMockStore();
+const initialState = {
+  theme: themeMock,
+};
+const store = mockStore(initialState);
 
 const mockallTeams = [
   {
@@ -38,24 +47,28 @@ describe('Team Table Data component', () => {
       },
     ];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('team11')).toBeInTheDocument();
   });
   it('check if team name not getting displayed when user is not assigned to a team', () => {
     const teamsData = [];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Delete')).not.toBeInTheDocument();
   });
@@ -73,12 +86,14 @@ describe('Team Table Data component', () => {
       },
     ];
     const { container } = render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     const deleteElement = container.querySelector('[data-item="aaa123"]');
     fireEvent.click(deleteElement);
@@ -98,12 +113,14 @@ describe('Team Table Data component', () => {
       },
     ];
     const { container } = render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     expect(mockhandleTeam).not.toHaveBeenCalled();
   });
@@ -112,35 +129,41 @@ describe('Teams component', () => {
   it('renders without crashing', () => {
     const teamsData = [];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
   });
   it('Teams header appears as expected', () => {
     const teamsData = [];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Teams')).toBeInTheDocument();
   });
   it('check modal opens when add a team button is clicked', () => {
     const teamsData = [];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     const buttonElement = screen.getByText('Add a Team');
     fireEvent.click(buttonElement);
@@ -149,12 +172,14 @@ describe('Teams component', () => {
   it('check if modal does not open when add a team button is not clicked', () => {
     const teamsData = [];
     render(
-      <Teams
-        teamsdata={teamsData}
-        allTeams={mockallTeams}
-        handleTeam={mockhandleTeam}
-        edit={true}
-      />,
+      <Provider store={store}>
+        <Teams
+          teamsdata={teamsData}
+          allTeams={mockallTeams}
+          handleTeam={mockhandleTeam}
+          edit={true}
+        />
+      </Provider>,
     );
     expect(screen.queryByText('Modal title')).not.toBeInTheDocument();
   });
diff --git a/src/components/WeeklySummariesReport/FormattedReport.jsx b/src/components/WeeklySummariesReport/FormattedReport.jsx
index cbb4c790e8..232e080308 100644
--- a/src/components/WeeklySummariesReport/FormattedReport.jsx
+++ b/src/components/WeeklySummariesReport/FormattedReport.jsx
@@ -14,7 +14,7 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons';
 
 import { assignStarDotColors, showStar } from 'utils/leaderboardPermissions';
 import { updateOneSummaryReport } from 'actions/weeklySummariesReport';
-import RoleInfoModal from 'components/UserProfile/EditableModal/roleInfoModal';
+import RoleInfoModal from 'components/UserProfile/EditableModal/RoleInfoModal';
 import {
   Input,
   ListGroup,
@@ -69,7 +69,6 @@ function FormattedReport({
   darkMode,
   handleTeamCodeChange,
 }) {
-  // if (auth?.user?.role){console.log(auth.user.role)}
   const loggedInUserEmail = auth?.user?.email ? auth.user.email : '';
 
   const dispatch = useDispatch();
@@ -93,6 +92,7 @@ function FormattedReport({
             canSeeBioHighlight={canSeeBioHighlight}
             darkMode={darkMode}
             handleTeamCodeChange={handleTeamCodeChange}
+            auth={auth}
           />
         ))}
       </ListGroup>
@@ -181,6 +181,18 @@ function EmailsList({ summaries, auth }) {
   return null;
 }
 
+function getTextColorForHoursLogged(hoursLogged, promisedHours) {
+  const percentage = (hoursLogged / promisedHours) * 100;
+
+  if (percentage < 50) {
+    return 'red';
+  }
+  if (percentage < 100) {
+    return '#0B6623';
+  }
+  return 'black';
+}
+
 function ReportDetails({
   summary,
   weekIndex,
@@ -194,6 +206,7 @@ function ReportDetails({
   loggedInUserEmail,
   darkMode,
   handleTeamCodeChange,
+  auth,
 }) {
   const [filteredBadges, setFilteredBadges] = useState([]);
   const ref = useRef(null);
@@ -214,7 +227,7 @@ function ReportDetails({
     <li className={`list-group-item px-0 ${darkMode ? 'bg-yinmn-blue' : ''}`} ref={ref}>
       <ListGroup className="px-0" flush>
         <ListGroupItem darkMode={darkMode}>
-          <Index summary={summary} weekIndex={weekIndex} allRoleInfo={allRoleInfo} />
+          <Index summary={summary} weekIndex={weekIndex} allRoleInfo={allRoleInfo} auth={auth} />
         </ListGroupItem>
         <Row className="flex-nowrap">
           <Col xs="6" className="flex-grow-0">
@@ -242,18 +255,17 @@ function ReportDetails({
               />
             </ListGroupItem>
             <ListGroupItem darkMode={darkMode}>
-              {hoursLogged < summary.promisedHoursByWeek[weekIndex] && (
-                <p style={{ color: 'red' }}>
-                  Hours logged: {''}
-                  {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]}
-                </p>
-              )}
-              {hoursLogged >= summary.promisedHoursByWeek[weekIndex] && (
-                <p>
-                  Hours logged: {''}
-                  {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]}
-                </p>
-              )}
+              <p
+                style={{
+                  color: getTextColorForHoursLogged(
+                    hoursLogged,
+                    summary.promisedHoursByWeek[weekIndex],
+                  ),
+                  fontWeight: 'bold',
+                }}
+              >
+                Hours logged: {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]}
+              </p>
             </ListGroupItem>
             <ListGroupItem darkMode={darkMode}>
               <WeeklySummaryMessage summary={summary} weekIndex={weekIndex} />
@@ -334,7 +346,7 @@ function WeeklySummaryMessage({ summary, weekIndex }) {
 function TeamCodeRow({ canEditTeamCode, summary, handleTeamCodeChange }) {
   const [teamCode, setTeamCode] = useState(summary.teamCode);
   const [hasError, setHasError] = useState(false);
-  const fullCodeRegex = /^([a-zA-Z]-[a-zA-Z]{3}|[a-zA-Z]{5})$/;
+  const fullCodeRegex = /^([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7})$/;
 
   const handleOnChange = async (userProfileSummary, newStatus) => {
     const url = ENDPOINTS.USER_PROFILE_PROPERTY(userProfileSummary._id);
@@ -351,8 +363,7 @@ function TeamCodeRow({ canEditTeamCode, summary, handleTeamCodeChange }) {
 
   const handleCodeChange = e => {
     const { value } = e.target;
-
-    if (value.length <= 5) {
+    if (value.length <= 7) {
       const regexTest = fullCodeRegex.test(value);
       if (regexTest) {
         setHasError(false);
@@ -391,7 +402,7 @@ function TeamCodeRow({ canEditTeamCode, summary, handleTeamCodeChange }) {
       </div>
       {hasError ? (
         <Alert className="code-alert" color="danger">
-          NOT SAVED! The code format must be A-AAA or AAAAA.
+          NOT SAVED! The code must be between 5 and 7 characters long.
         </Alert>
       ) : null}
     </>
@@ -615,7 +626,7 @@ function WeeklyBadge({ summary, weekIndex, badges }) {
   );
 }
 
-function Index({ summary, weekIndex, allRoleInfo }) {
+function Index({ summary, weekIndex, allRoleInfo, auth }) {
   const hoursLogged = (summary.totalSeconds[weekIndex] || 0) / 3600;
   const currentDate = moment.tz('America/Los_Angeles').startOf('day');
 
@@ -645,13 +656,21 @@ function Index({ summary, weekIndex, allRoleInfo }) {
         {summary.firstName} {summary.lastName}
       </Link>
 
-      <GoogleDocIcon link={googleDocLink} />
-      <span>
-        <b>&nbsp;&nbsp;{summary.role !== 'Volunteer' && `(${summary.role})`}</b>
-      </span>
-      {summary.role !== 'Volunteer' && (
-        <RoleInfoModal info={allRoleInfo.find(item => item.infoName === `${summary.role}Info`)} />
-      )}
+      <div style={{ display: 'inline-block' }}>
+        <div style={{ display: 'flex' }}>
+          <GoogleDocIcon link={googleDocLink} />
+          <span>
+            <b>&nbsp;&nbsp;{summary.role !== 'Volunteer' && `(${summary.role})`}</b>
+          </span>
+          {summary.role !== 'Volunteer' && (
+            <RoleInfoModal
+              info={allRoleInfo.find(item => item.infoName === `${summary.role}Info`)}
+              auth={auth}
+            />
+          )}
+        </div>
+      </div>
+
       {showStar(hoursLogged, summary.promisedHoursByWeek[weekIndex]) && (
         <i
           className="fa fa-star"
diff --git a/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx b/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx
index 55358f25b5..41153954ca 100644
--- a/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx
+++ b/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx
@@ -23,6 +23,7 @@ import moment from 'moment';
 import 'moment-timezone';
 import { boxStyle, boxStyleDark } from 'styles';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
+import { toast } from 'react-toastify';
 import SkeletonLoading from '../common/SkeletonLoading';
 import { getWeeklySummariesReport } from '../../actions/weeklySummariesReport';
 import FormattedReport from './FormattedReport';
@@ -327,6 +328,34 @@ export class WeeklySummariesReport extends Component {
     return 0;
   };
 
+  handleRefresh = async () => {
+    this.setState({ loading: true });
+
+    try {
+      const res = await this.props.getWeeklySummariesReport();
+      const summaries = res?.data ?? this.props.summaries;
+
+      const summariesCopy = this.alphabetize(summaries);
+      const updatedSummaries = summariesCopy.map(summary => {
+        const promisedHoursByWeek = this.weekDates.map(weekDate =>
+          this.getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory),
+        );
+        return { ...summary, promisedHoursByWeek };
+      });
+
+      this.setState({
+        loading: false,
+        summaries: updatedSummaries,
+        filteredSummaries: updatedSummaries,
+      });
+
+      toast.success('Successfully Updated Weekly Summaries Report');
+    } catch (error) {
+      this.setState({ loading: false });
+      toast.error('Failed to update Weekly Summaries Report');
+    }
+  };
+
   toggleTab = tab => {
     const { activeTab } = this.state;
     if (activeTab !== tab) {
@@ -403,54 +432,55 @@ export class WeeklySummariesReport extends Component {
   };
 
   handleTeamCodeChange = (oldTeamCode, newTeamCode, userId) => {
-    this.setState(prevState => {
-      let { teamCodes, summaries, selectedCodes } = prevState;
-
-      // Find and update the user's team code in summaries
-      summaries = summaries.map(summary => {
-        if (summary._id === userId) {
-          return { ...summary, teamCode: newTeamCode };
-        }
-        return summary;
-      });
-
-      // Count the occurrences of each team code
-      const teamCodeCounts = summaries.reduce((acc, { teamCode }) => {
-        acc[teamCode] = (acc[teamCode] || 0) + 1;
-        return acc;
-      }, {});
-
-      // Update teamCodes by filtering out those with zero count
-      teamCodes = Object.entries(teamCodeCounts)
-        .filter(([count]) => count > 0)
-        .map(([code, count]) => ({
-          label: `${code} (${count})`,
-          value: code,
-        }));
-
-      // Update selectedCodes labels and filter out those with zero count
-      selectedCodes = selectedCodes
-        .map(selected => {
-          const count = teamCodeCounts[selected.value];
-          if (count !== undefined && count > 0) {
-            return { ...selected, label: `${selected.value} (${count})` };
+    try {
+      this.setState(prevState => {
+        let { teamCodes, summaries, selectedCodes } = prevState;
+        // Find and update the user's team code in summaries
+        summaries = summaries.map(summary => {
+          if (summary._id === userId) {
+            return { ...summary, teamCode: newTeamCode };
           }
-          return null;
-        })
-        .filter(Boolean);
-
-      if (!selectedCodes.find(code => code.value === newTeamCode)) {
-        selectedCodes.push({
-          label: `${newTeamCode} (${teamCodeCounts[newTeamCode]})`,
-          value: newTeamCode,
+          return summary;
         });
-      }
-
-      // Sort teamCodes by label
-      teamCodes.sort((a, b) => a.label.localeCompare(b.label));
+        // Count the occurrences of each team code
+        const teamCodeCounts = summaries.reduce((acc, { teamCode }) => {
+          acc[teamCode] = (acc[teamCode] || 0) + 1;
+          return acc;
+        }, {});
+        // console.log(Object.entries(teamCodeCounts), 'teamCodecounts');
+        // Update teamCodes by filtering out those with zero count
+        teamCodes = Object.entries(teamCodeCounts)
+          .filter(([code, count]) => code.length > 0 && count > 0)
+          .map(([code, count]) => ({
+            label: `${code} (${count})`,
+            value: code,
+          }));
+
+        // Update selectedCodes labels and filter out those with zero count
+        selectedCodes = selectedCodes
+          .map(selected => {
+            const count = teamCodeCounts[selected.value];
+            if (count !== undefined && count > 0) {
+              return { ...selected, label: `${selected.value} (${count})` };
+            }
+            return null;
+          })
+          .filter(Boolean);
+
+        if (!selectedCodes.find(code => code.value === newTeamCode)) {
+          selectedCodes.push({
+            label: `${newTeamCode} (${teamCodeCounts[newTeamCode]})`,
+            value: newTeamCode,
+          });
+        }
 
-      return { summaries, teamCodes, selectedCodes };
-    });
+        // Sort teamCodes by label
+        teamCodes.sort((a, b) => a.label.localeCompare(b.label));
+        return { summaries, teamCodes, selectedCodes };
+      });
+    } catch (error) {
+      // console.log(error);
+    }
   };
 
   render() {
@@ -503,6 +533,7 @@ export class WeeklySummariesReport extends Component {
         </Container>
       );
     }
+
     return (
       <Container
         fluid
@@ -517,6 +548,15 @@ export class WeeklySummariesReport extends Component {
             <h3 className="mt-3 mb-5">
               <div className="d-flex align-items-center">
                 <span className="mr-2">Weekly Summaries Reports page</span>
+                <i
+                  data-toggle="tooltip"
+                  data-placement="right"
+                  title="Click to refresh the report"
+                  style={{ fontSize: 24, cursor: 'pointer' }}
+                  aria-hidden="true"
+                  className={`fa fa-refresh ${this.state.loading ? 'animation' : ''} mr-2`}
+                  onClick={this.handleRefresh}
+                />
                 <EditableInfoModal
                   areaName="WeeklySummariesReport"
                   areaTitle="Weekly Summaries Report"
@@ -554,6 +594,7 @@ export class WeeklySummariesReport extends Component {
               onChange={e => {
                 this.handleSelectCodeChange(e);
               }}
+              labelledBy="Select"
             />
           </Col>
           <Col lg={{ size: 5 }} xs={{ size: 5 }}>
diff --git a/src/components/WeeklySummary/WeeklySummary.jsx b/src/components/WeeklySummary/WeeklySummary.jsx
index 28226164c2..5dee844735 100644
--- a/src/components/WeeklySummary/WeeklySummary.jsx
+++ b/src/components/WeeklySummary/WeeklySummary.jsx
@@ -37,6 +37,11 @@ import { toast } from 'react-toastify';
 import classnames from 'classnames';
 import { getUserProfile } from 'actions/userProfile';
 import { boxStyle, boxStyleDark } from 'styles';
+import {
+  DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY,
+  DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY,
+  PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE,
+} from 'utils/constants';
 import { WeeklySummaryContentTooltip, MediaURLTooltip } from './WeeklySummaryTooltips';
 import SkeletonLoading from '../common/SkeletonLoading';
 import DueDateTime from './DueDateTime';
@@ -176,7 +181,6 @@ export class WeeklySummary extends Component {
       fetchError,
       loading,
     } = this.props;
-
     await getWeeklySummaries(displayUserId || currentUser.userid);
 
     const { mediaUrl, weeklySummaries, weeklySummariesCount } = summaries;
@@ -319,7 +323,7 @@ export class WeeklySummary extends Component {
     const { isNotAllowedToEdit } = this.props;
     if (isNotAllowedToEdit) {
       // eslint-disable-next-line no-alert
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
       return;
     }
     const { moveSelect, formElements, activeTab, movePopup } = this.state;
@@ -592,10 +596,15 @@ export class WeeklySummary extends Component {
   };
 
   handleMoveSave = async event => {
-    const { isNotAllowedToEdit } = this.props;
+    const { isNotAllowedToEdit, displayUserEmail } = this.props;
     if (isNotAllowedToEdit) {
-      // eslint-disable-next-line no-alert
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      if (displayUserEmail === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     if (event) {
@@ -610,10 +619,15 @@ export class WeeklySummary extends Component {
   };
 
   handleSave = async event => {
-    const { isNotAllowedToEdit } = this.props;
+    const { isNotAllowedToEdit, displayUserEmail } = this.props;
     if (isNotAllowedToEdit) {
-      // eslint-disable-next-line no-alert
-      alert('STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.');
+      if (displayUserEmail === DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY) {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY);
+      } else {
+        // eslint-disable-next-line no-alert, prettier/prettier
+        alert(PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE);
+      }
       return;
     }
     if (event) {
diff --git a/src/components/WeeklySummary/__test__/DueDateTime.test.js b/src/components/WeeklySummary/__tests__/DueDateTime.test.js
similarity index 100%
rename from src/components/WeeklySummary/__test__/DueDateTime.test.js
rename to src/components/WeeklySummary/__tests__/DueDateTime.test.js
diff --git a/src/components/WeeklySummary/__test__/WeeklySummary.test.js b/src/components/WeeklySummary/__tests__/WeeklySummary.test.js
similarity index 100%
rename from src/components/WeeklySummary/__test__/WeeklySummary.test.js
rename to src/components/WeeklySummary/__tests__/WeeklySummary.test.js
diff --git a/src/components/WeeklySummary/__test__/WeeklySummary.test.jsx b/src/components/WeeklySummary/__tests__/WeeklySummary.test.jsx
similarity index 100%
rename from src/components/WeeklySummary/__test__/WeeklySummary.test.jsx
rename to src/components/WeeklySummary/__tests__/WeeklySummary.test.jsx
diff --git a/src/__tests__/WeeklySummary/WeeklySummaryContentTooltip.test.js b/src/components/WeeklySummary/__tests__/WeeklySummaryContentTooltip.test.js
similarity index 89%
rename from src/__tests__/WeeklySummary/WeeklySummaryContentTooltip.test.js
rename to src/components/WeeklySummary/__tests__/WeeklySummaryContentTooltip.test.js
index 7f36fed6ce..30ef8992f1 100644
--- a/src/__tests__/WeeklySummary/WeeklySummaryContentTooltip.test.js
+++ b/src/components/WeeklySummary/__tests__/WeeklySummaryContentTooltip.test.js
@@ -1,5 +1,5 @@
 import { render, fireEvent, screen } from '@testing-library/react';
-import { WeeklySummaryContentTooltip, MediaURLTooltip } from '../../components/WeeklySummary/WeeklySummaryTooltips'; // Adjust the import path as needed
+import { WeeklySummaryContentTooltip, MediaURLTooltip } from '../WeeklySummaryTooltips'; // Adjust the import path as needed
 
 describe('WeeklySummaryContentTooltip Component Tests', () => {
   it('renders without crashing', () => {
@@ -10,7 +10,7 @@ describe('WeeklySummaryContentTooltip Component Tests', () => {
   it('toggles tooltip on icon click', () => {
     render(<WeeklySummaryContentTooltip tabId="testId" />);
     const icon = screen.getByTestId('summary-content-tooltip-icon');
-    fireEvent.mouseOver(icon)
+    fireEvent.mouseOver(icon);
   });
 });
 
diff --git a/src/components/common/Paging/Paging.css b/src/components/common/Paging/Paging.css
index 5f3e80e641..f10f2a7b13 100644
--- a/src/components/common/Paging/Paging.css
+++ b/src/components/common/Paging/Paging.css
@@ -1,14 +1,15 @@
 .paging-wrapper {
-  height: calc(100% - 40px);
+  height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .pagination-buttons-wrapper {
   display: flex;
   align-items: center;
-
-  position: absolute;
-  bottom: -40px;
+  margin: auto;
 }
 
 .pagination-buttons {
@@ -22,7 +23,7 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  margin: 8px;
+  margin: 4px;
   cursor: pointer;
   border-radius: 4px;
   color: #a1a1a1;
diff --git a/src/constants/BluequareEmailBccConstants.js b/src/constants/BluequareEmailBccConstants.js
new file mode 100644
index 0000000000..c711689ff2
--- /dev/null
+++ b/src/constants/BluequareEmailBccConstants.js
@@ -0,0 +1,4 @@
+export const GET_BLUE_SQUARE_EMAIL_ASSIGNMENTS = 'GET_BLUE_SQUARE_ASSIGNMENTS';
+export const SET_BLUE_SQUARE_EMAIL_ASSIGNMENT = 'SET_BLUE_SQUARE_ASSIGNMENT';
+export const DELETE_BLUE_SQUARE_EMAIL_ASSIGNMENT = 'DELETE_BLUE_SQUARE_ASSIGNMENT';
+export const BLUE_SQUARE_EMAIL_ASSIGNMENT_ERROR = 'BLUE_SQUARE_EMAIL_ASSIGNMENT_ERROR';
diff --git a/src/constants/bmdashboard/inventoryTypeConstants.js b/src/constants/bmdashboard/inventoryTypeConstants.js
index 846f6ae325..142e8fae9f 100644
--- a/src/constants/bmdashboard/inventoryTypeConstants.js
+++ b/src/constants/bmdashboard/inventoryTypeConstants.js
@@ -1,4 +1,5 @@
 const GET_MATERIAL_TYPES = 'GET_MATERIAL_TYPES';
+export const GET_EQUIPMENT_TYPES = 'GET_EQUIPMENT_TYPES';
 export const GET_REUSABLE_TYPES = 'GET_REUSABLE_TYPES';
 export const GET_TOOL_TYPES = 'GET_TOOL_TYPES';
 export const GET_CONSUMABLE_TYPES = 'GET_CONSUMABLE_TYPES';
diff --git a/src/constants/bmdashboard/toolsConstants.js b/src/constants/bmdashboard/toolsConstants.js
index 49448246ea..290c660b9c 100644
--- a/src/constants/bmdashboard/toolsConstants.js
+++ b/src/constants/bmdashboard/toolsConstants.js
@@ -2,5 +2,8 @@ export const GET_TOOLS = 'GET_TOOLS';
 export const GET_TOOL_BY_ID = 'GET_TOOL_BY_ID';
 export const SET_TOOLS = 'SET_TOOLS';
 export const GET_TOOL_TYPES = 'GET_TOOL_TYPES';
+export const POST_TOOLS_LOG = 'POST_TOOLS_LOG';
+export const POST_ERROR_TOOLS_LOG = 'POST_ERROR_TOOLS_LOG';
+export const RESET_POST_TOOLS_LOG = 'RESET_POST_TOOLS_LOGG';
 
 export default GET_TOOL_BY_ID;
diff --git a/src/constants/projects.js b/src/constants/projects.js
index d138ed7adb..32f3d0cdf0 100644
--- a/src/constants/projects.js
+++ b/src/constants/projects.js
@@ -5,7 +5,7 @@
 
 // INIT PROJECTS
 export const FETCH_PROJECTS_START = 'FETCH_PROJECTS_START';
-export const RECEIVE_PROJECTS = 'RECIVES_PROJECTS';
+export const FETCH_PROJECTS_SUCCESS = 'FETCH_PROJECTS_SUCCESS';
 export const FETCH_PROJECTS_ERROR = 'FETCH_PROJECTS_ERROR';
 
 // ADD NEW PROJECTS
@@ -17,3 +17,6 @@ export const UPDATE_PROJECT = 'UPDATE_PROJECT';
 
 // DELETE PROJECT
 export const DELETE_PROJECT = 'DELETE_PROJECT';
+
+// CLEAR ERROR
+export const CLEAR_ERROR = 'CLEAR_ERROR';
diff --git a/src/constants/userProjects.js b/src/constants/userProjects.js
index 448c0e9289..3132ea6d19 100644
--- a/src/constants/userProjects.js
+++ b/src/constants/userProjects.js
@@ -1,2 +1,4 @@
-export const GET_USER_PROJECTS = 'GET_USER_PROJECTS';
-export const GET_USER_WBS = 'GET_USER_WBS';
+const GET_USER_PROJECTS = 'GET_USER_PROJECTS';
+export default {
+  GET_USER_PROJECTS,
+};
diff --git a/src/languages/en/messages.js b/src/languages/en/messages.js
index a79fcc619d..61748c6f5f 100644
--- a/src/languages/en/messages.js
+++ b/src/languages/en/messages.js
@@ -1,4 +1,5 @@
 export const CONFIRM_DELETION = 'Confirm Deletion';
+export const CONFIRM_ARCHIVE = 'Confirm Archive';
 export const DELETE = 'delete';
 export const ARE_YOU_SURE_YOU_WANT_TO = 'Are you sure you want to ';
 export const THIS_PROJECT_NAME_IS_ALREADY_TAKEN = 'This project name is already taken';
diff --git a/src/languages/en/ui.js b/src/languages/en/ui.js
index ed3c74b1c1..ad9b56eccf 100644
--- a/src/languages/en/ui.js
+++ b/src/languages/en/ui.js
@@ -18,6 +18,7 @@ export const ISSUE = 'Issue';
 export const LESSON = 'Lesson';
 export const DASHBOARD = 'Dashboard';
 export const DELETE = 'Delete';
+export const ARCHIVE = 'Archive';
 export const LOGO = 'Time Tracking Tool';
 export const LOGOUT = 'Logout';
 export const MEMBERS = 'Members';
diff --git a/src/reducers/allProjectsReducer.js b/src/reducers/allProjectsReducer.js
index 541b02c248..8249786df1 100644
--- a/src/reducers/allProjectsReducer.js
+++ b/src/reducers/allProjectsReducer.js
@@ -4,60 +4,59 @@ const allProjectsInital = {
   fetching: false,
   fetched: false,
   projects: [],
-  status: 404,
-};
-
-export const updateObject = (oldObject, updatedProperties) => {
-  return {
-    ...oldObject,
-    ...updatedProperties,
-  };
+  status: 200,
+  error: null,
 };
 
 export const allProjectsReducer = (allProjects = allProjectsInital, action) => {
+  const updateState = (updatedProperties) => {
+    return {
+      ...allProjects,
+      ...updatedProperties,
+    };
+  };
+  const { status, error = null } = action;
+  let index, projects;
   switch (action.type) {
     case types.FETCH_PROJECTS_START:
-      return { ...allProjects, fetching: true, status: '200' };
+      return updateState({ fetching: true });
     case types.FETCH_PROJECTS_ERROR:
-      return { ...allProjects, fetching: false, status: action.payload };
-    case types.RECEIVE_PROJECTS:
-      return updateObject(allProjects, {
-        projects: action.payload,
+      return updateState({ fetching: false, status, error });
+    case types.FETCH_PROJECTS_SUCCESS:
+      return updateState({
         fetching: false,
         fetched: true,
-        status: '200',
+        projects: action.projects,
+        status,
       });
     case types.ADD_NEW_PROJECT:
-      allProjects.status = action.status;
-      if (action.status === 201) {
-        return { ...allProjects, projects: [action.payload, ...allProjects.projects], status: action.status };
-      } 
-        return { ...allProjects, status: action.status };
-      
-    case types.DELETE_PROJECT:
-      if (action.status === 200) {
-        const index = allProjects.projects.findIndex(project => project._id === action.projectId);
-        return updateObject(allProjects, {
-          projects: Object.assign([
-            ...allProjects.projects.slice(0, index),
-            ...allProjects.projects.slice(index + 1),
-          ]),
-        });
-      }
-    case types.UPDATE_PROJECT:
-      const index = allProjects.projects.findIndex(project => project._id === action.projectId);
-      return updateObject(allProjects, {
-        projects: Object.assign([
-          ...allProjects.projects.slice(0, index),
-          {
-            category: action.category,
-            _id: action.projectId,
-            isActive: action.isActive,
-            projectName: action.projectName,
-          },
-          ...allProjects.projects.slice(index + 1),
-        ]),
+      if (status !== 201) return updateState({ status, error });
+      const { newProject } = action;
+      return updateState({
+        projects: [...allProjects.projects, newProject],
+        status,
       });
+    case types.UPDATE_PROJECT:
+      if (status !== 200) return updateState({ status, error });
+      const { updatedProject } = action;
+      index = allProjects.projects.findIndex(project => project._id === action.projectId);
+      projects = Object.assign([
+        ...allProjects.projects.slice(0, index),
+        updatedProject,
+        ...allProjects.projects.slice(index + 1),
+      ]);
+      return updateState({ projects, status });
+    case types.DELETE_PROJECT:
+      if (status !== 200) return updateState({ status, error });
+      const { projectId } = action;
+      index = allProjects.projects.findIndex(project => project._id === projectId);
+      projects = Object.assign([
+        ...allProjects.projects.slice(0, index),
+        ...allProjects.projects.slice(index + 1),
+      ]);
+      return updateState({ projects, status });
+    case types.CLEAR_ERROR:
+      return updateState({ status: 200, error: null });
     default:
       return allProjects;
   }
diff --git a/src/reducers/blueSquareEmailBcc.js b/src/reducers/blueSquareEmailBcc.js
new file mode 100644
index 0000000000..2c40227803
--- /dev/null
+++ b/src/reducers/blueSquareEmailBcc.js
@@ -0,0 +1,35 @@
+import * as types from '../constants/BluequareEmailBccConstants';
+
+const initialState = {
+  emailAssignment: [],
+  error: null,
+};
+
+export const BlueSquareEmailAssignment = (state = initialState, action) => {
+  switch (action.type) {
+    case types.GET_BLUE_SQUARE_EMAIL_ASSIGNMENTS:
+      return { ...state, emailAssignment: action.payload, error: null };
+    case types.SET_BLUE_SQUARE_EMAIL_ASSIGNMENT:
+      return {
+        ...state,
+        emailAssignment: [
+          ...state.emailAssignment,
+          action.payload 
+        ],
+        error: null,
+      };
+    case types.DELETE_BLUE_SQUARE_EMAIL_ASSIGNMENT:
+      return {
+        ...state,
+        emailAssignment: state.emailAssignment.filter(ele => ele._id !== action.payload),
+        error: null,
+      };
+      case types.BLUE_SQUARE_EMAIL_ASSIGNMENT_ERROR:
+        return {
+          ...state,
+          error: action.payload,
+        };
+    default:
+      return state;
+  }
+};
\ No newline at end of file
diff --git a/src/reducers/bmdashboard/inventoryTypeReducer.js b/src/reducers/bmdashboard/inventoryTypeReducer.js
index 1e9644914c..403e72bc7d 100644
--- a/src/reducers/bmdashboard/inventoryTypeReducer.js
+++ b/src/reducers/bmdashboard/inventoryTypeReducer.js
@@ -1,6 +1,7 @@
 
 import GET_MATERIAL_TYPES, {
   GET_REUSABLE_TYPES,
+  GET_EQUIPMENT_TYPES,
   POST_BUILDING_MATERIAL_INVENTORY_TYPE,
   POST_ERROR_BUILDING_MATERIAL_INVENTORY_TYPE,
   RESET_POST_BUILDING_MATERIAL_INVENTORY_TYPE,
@@ -11,6 +12,8 @@ import GET_MATERIAL_TYPES, {
   GET_TOOL_TYPES,
   GET_CONSUMABLE_TYPES,
 } from '../../constants/bmdashboard/inventoryTypeConstants';
+import { POST_TOOLS_LOG, POST_ERROR_TOOLS_LOG, RESET_POST_TOOLS_LOG } from '../../constants/bmdashboard/toolsConstants'
+
 
 const defaultState = {
   list: [],
@@ -25,6 +28,7 @@ const defaultState = {
   }
 }
 
+// eslint-disable-next-line import/prefer-default-export
 export const bmInvTypeReducer = (state = defaultState, action) => {
 
   switch (action.type) {
@@ -47,6 +51,11 @@ export const bmInvTypeReducer = (state = defaultState, action) => {
       return {
         ...state
       };
+    case GET_EQUIPMENT_TYPES:
+      state.list = action.payload;
+      return {
+        ...state
+      };
     case GET_TOOL_TYPES:
       state.list = action.payload;
       return {
@@ -106,6 +115,37 @@ export const bmInvTypeReducer = (state = defaultState, action) => {
       state.invTypeList[action.payload.type] = [...action.payload.data]
       return { ...state }
     }
+    // 
+    case POST_TOOLS_LOG:
+      return {
+        // eslint-disable-next-line no-undef
+        ...state,
+        postedResult: {
+          result: action.payload,
+          success: true,
+          error: false,
+        },
+      };
+    case POST_ERROR_TOOLS_LOG:
+      return {
+        // eslint-disable-next-line no-undef
+        ...state,
+        postedResult: {
+          result: action.payload,
+          success: false,
+          error: true,
+        },
+      };
+    case RESET_POST_TOOLS_LOG:
+      return {
+        // eslint-disable-next-line no-undef
+        ...state,
+        postedResult: {
+          result: null,
+          success: null,
+          error: null,
+        },
+      };
     default: {
       return state;
     }
diff --git a/src/reducers/bmdashboard/toolReducer.js b/src/reducers/bmdashboard/toolReducer.js
index 1292463253..3c331edc17 100644
--- a/src/reducers/bmdashboard/toolReducer.js
+++ b/src/reducers/bmdashboard/toolReducer.js
@@ -1,4 +1,9 @@
-import { GET_TOOL_BY_ID, GET_TOOLS, SET_TOOLS, GET_TOOL_TYPES } from "constants/bmdashboard/toolsConstants";
+import {
+  GET_TOOL_BY_ID,
+  GET_TOOLS,
+  SET_TOOLS,
+  GET_TOOL_TYPES,
+} from '../../constants/bmdashboard/toolsConstants';
 
 const defaultState = {
   toolslist: [],
@@ -31,6 +36,6 @@ export const toolReducer = (tools = defaultState, action) => {
     case SET_TOOLS:
       return action.payload;
     default:
-      return tools; // Return the current state for unknown actions
+      return tools;
   }
 };
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6230293a90..28df965e34 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -32,6 +32,7 @@ import { mouseoverTextReducer } from './mouseoverTextReducer';
 import notificationReducer from './notificationReducer';
 import { weeklySummaryRecipientsReducer } from "./weeklySummaryRecipientsReducer";
 import { followUpReducer } from "./followUpReducer";
+import { BlueSquareEmailAssignment } from './blueSquareEmailBcc';
 
 // bm dashboard
 import { materialsReducer } from './bmdashboard/materialsReducer';
@@ -73,6 +74,7 @@ const localReducers = {
   weeklySummaryRecipients:weeklySummaryRecipientsReducer,
   notification: notificationReducer,
   userFollowUp : followUpReducer,
+  blueSquareEmailAssignment : BlueSquareEmailAssignment,
 
   // bmdashboard
   materials: materialsReducer,
@@ -101,4 +103,4 @@ const sessionReducers = {
   warning: warningsByUserIdReducer,
 };
 
-export { localReducers, sessionReducers };
+export { localReducers, sessionReducers };
\ No newline at end of file
diff --git a/src/reducers/userProjectsReducer.js b/src/reducers/userProjectsReducer.js
index a9531bb9d6..4bd6c3e864 100644
--- a/src/reducers/userProjectsReducer.js
+++ b/src/reducers/userProjectsReducer.js
@@ -1,4 +1,4 @@
-import { GET_USER_PROJECTS, GET_USER_WBS } from '../constants/userProjects';
+import types from '../constants/userProjects';
 
 const initialState = {
   projects: [],
@@ -7,16 +7,11 @@ const initialState = {
 
 export const userProjectsReducer = (state = initialState, action) => {
   switch (action.type) {
-    case GET_USER_PROJECTS:
+    case types.GET_USER_PROJECTS:
       return {
         ...state,
         projects: action.payload,
       };
-    case GET_USER_WBS:
-      return {
-        ...state,
-        wbs: action.payload,
-      };
     default:
       return state;
   }
diff --git a/src/routes.js b/src/routes.js
index 8d86124ec1..4c01ff7fae 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -6,7 +6,7 @@ import AutoUpdate from 'components/AutoUpdate';
 import { TaskEditSuggestions } from 'components/TaskEditSuggestions/TaskEditSuggestions';
 import { RoutePermissions } from 'utils/routePermissions';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
-import RoleInfoCollections from 'components/UserProfile/EditableModal/roleInfoModal';
+import RoleInfoCollections from 'components/UserProfile/EditableModal/RoleInfoModal';
 import LessonList from 'components/BMDashboard/LessonList/LessonListForm';
 import AddEquipmentType from 'components/BMDashboard/Equipment/Add/AddEquipmentType';
 import Announcements from 'components/Announcements';
@@ -21,7 +21,6 @@ import ProtectedRoute from './components/common/ProtectedRoute';
 import UpdatePassword from './components/UpdatePassword';
 import Header from './components/Header';
 import TeamLocations from './components/TeamLocations';
-import Admin from './components/Admin';
 import 'react-toastify/dist/ReactToastify.css';
 import { UserRole } from './utils/enums';
 import ForgotPassword from './components/Login/ForgotPassword';
@@ -40,6 +39,8 @@ import ToolDetailPage from './components/BMDashboard/Tools/ToolDetailPage';
 import CheckTypes from './components/BMDashboard/shared/CheckTypes';
 import Toolslist from './components/BMDashboard/Tools/ToolsList';
 import AddTool from './components/BMDashboard/Tools/AddTool';
+// eslint-disable-next-line import/order, import/no-unresolved
+import LogTools from './components/BMDashboard/LogTools/LogTools';
 
 const ReusableListView = lazy(() => import('./components/BMDashboard/ReusableList'));
 const ConsumableListView = lazy(() => import('./components/BMDashboard/ConsumableList'));
@@ -50,6 +51,9 @@ const PurchaseMaterials = lazy(() =>
 const PurchaseReusables = lazy(() =>
   import('./components/BMDashboard/PurchaseRequests/ReusablePurchaseRequest'),
 );
+// const PurchaseEquipment = lazy(() =>
+//   import('./components/BMDashboard/PurchaseRequests/EquipmentPurchaseRequest'),
+// );
 const ProjectDetails = lazy(() =>
   import('./components/BMDashboard/Projects/ProjectDetails/ProjectDetails'),
 );
@@ -59,6 +63,8 @@ const UpdateMaterialsBulk = lazy(() =>
 const PurchaseConsumable = lazy(() => import('./components/BMDashboard/ConsumablePurchaseRequest'));
 const InventoryTypesList = lazy(() => import('./components/BMDashboard/InventoryTypesList'));
 const PurchaseTools = lazy(() => import('./components/BMDashboard/ToolPurchaseRequest'));
+const PurchaseEquipment = lazy(() => import('./components/BMDashboard/EquipmentPurchaseRequest'));
+
 const AddMaterial = lazy(() => import('./components/BMDashboard/AddMaterial/AddMaterial'));
 const AddConsumable = lazy(() => import('./components/BMDashboard/AddConsumable/AddConsumable'));
 // Code-Splitting
@@ -96,7 +102,6 @@ export default (
         <ProtectedRoute path="/dashboard" exact component={Dashboard} />
         <ProtectedRoute path="/dashboard/:userId" exact component={Dashboard} />
         <ProtectedRoute path="/project/members/:projectId" fallback component={Members} />
-        <ProtectedRoute path="/popupmanagement" component={Admin} />
         <ProtectedRoute path="/timelog/" exact component={Timelog} />
         <ProtectedRoute path="/timelog/:userId" exact component={Timelog} />
         <ProtectedRoute path="/peoplereport/:userId" component={PeopleReport} fallback />
@@ -244,6 +249,11 @@ export default (
           fallback
           component={PurchaseReusables}
         />
+        <BMProtectedRoute
+          path="/bmdashboard/equipment/purchase"
+          fallback
+          component={PurchaseEquipment}
+        />
         <BMProtectedRoute path="/bmdashboard/tools/purchase" fallback component={PurchaseTools} />
         <BMProtectedRoute
           path="/bmdashboard/projects/:projectId"
@@ -283,6 +293,7 @@ export default (
         />
         <BMProtectedRoute path="/bmdashboard/tools" exact component={Toolslist} />
         <BMProtectedRoute path="/bmdashboard/tools/add" exact component={AddTool} />
+        <BMProtectedRoute path="/bmdashboard/tools/log" exact component={LogTools} />
         <BMProtectedRoute path="/bmdashboard/tools/:toolId" component={ToolDetailPage} />
         <BMProtectedRoute path="/bmdashboard/lessonform/:projectId" component={LessonForm} />
         <BMProtectedRoute path="/bmdashboard/lessonform/" component={LessonForm} />
diff --git a/src/styles.js b/src/styles.js
index 602900cd0a..128ca65eec 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -4,5 +4,5 @@ export const boxStyle = {
 };
 
 export const boxStyleDark = {
-  boxShadow: '2px 2px 4px 1px black',
+  boxShadow: '0.5px 0.5px 5px black',
 };
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 3b4efec2cf..d7ee313386 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -1,3 +1,4 @@
+
 const APIEndpoint =
   process.env.REACT_APP_APIENDPOINT || 'https://hgn-rest-beta.azurewebsites.net/api';
 
@@ -40,7 +41,6 @@ export const ENDPOINTS = {
   TIME_ENTRY_CHANGE: timeEntryId => `${APIEndpoint}/TimeEntry/${timeEntryId}`,
   WBS_ALL: `${APIEndpoint}/wbs`,
   WBS: projectId => `${APIEndpoint}/wbs/${projectId}`,
-  WBS_USER: userId => `${APIEndpoint}/wbs/user/${userId}`,
   GET_WBS: wbsId => `${APIEndpoint}/wbsId/${wbsId}`,
   TASKS: (wbsId, level, mother) => `${APIEndpoint}/tasks/${wbsId}/${level}/${mother || '0'}`,
   TASK: wbsId => `${APIEndpoint}/task/${wbsId}`,
@@ -181,6 +181,9 @@ export const ENDPOINTS = {
   BM_REUSABLE_TYPES: `${APIEndpoint}/bm/invtypes/reusables`,
   BM_REUSABLES: `${APIEndpoint}/bm/reusables`,
   BM_PURCHASE_REUSABLES: `${APIEndpoint}/bm/reusables/purchase`,
+  BM_EQUIPMENTS: `${APIEndpoint}/bm/equipments`,
+  BM_EQUIPMENT_TYPES : `${APIEndpoint}/bm/invtypes/equipments`,
+  BM_EQUIPMENT_PURCHASE: `${APIEndpoint}/bm/equipment/purchase`,
   BM_PROJECTS: `${APIEndpoint}/bm/projects`,
   BM_PROJECT_BY_ID: projectId => `${APIEndpoint}/project/${projectId}`,
   BM_UPDATE_MATERIAL: `${APIEndpoint}/bm/updateMaterialRecord`,
@@ -195,6 +198,7 @@ export const ENDPOINTS = {
   BM_INVTYPE_ROOT: `${APIEndpoint}/bm/invtypes`,
   BM_TOOLS: `${APIEndpoint}/bm/tools/`,
   BM_TOOL_BY_ID: singleToolId => `${APIEndpoint}/bm/tools/${singleToolId}`,
+  BM_LOG_TOOLS: `${APIEndpoint}/bm/tools/log`,
   BM_EQUIPMENT_BY_ID: singleEquipmentId => `${APIEndpoint}/bm/equipment/${singleEquipmentId}`,
   BM_INVTYPE_TYPE: type => `${APIEndpoint}/bm/invtypes/${type}`,
   BM_UPDATE_MATERIAL_BULK: `${APIEndpoint}/bm/updateMaterialRecordBulk`,
@@ -203,6 +207,8 @@ export const ENDPOINTS = {
   ADD_TIME_OFF_REQUEST: () => `${APIEndpoint}/setTimeOffRequest`,
   UPDATE_TIME_OFF_REQUEST: id => `${APIEndpoint}/updateTimeOffRequest/${id}`,
   DELETE_TIME_OFF_REQUEST: id => `${APIEndpoint}/deleteTimeOffRequest/${id}`,
+  BLUE_SQUARE_EMAIL_BCC : () => `${APIEndpoint}/AssignBlueSquareEmail`,
+  DELETE_BLUE_SQUARE_EMAIL_BCC : id => `${APIEndpoint}/AssignBlueSquareEmail/${id}`,
 };
 
 export const ApiEndpoint = APIEndpoint;
diff --git a/src/utils/constants.js b/src/utils/constants.js
index e69de29bb2..95beb1654a 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -0,0 +1,6 @@
+// Custom account modification wanring messages as required by Jae in DEV env only
+export const DEV_ADMIN_ACCOUNT_EMAIL_DEV_ENV_ONLY = "devadmin@hgn.net";
+export const DEV_ADMIN_ACCOUNT_CUSTOM_WARNING_MESSAGE_DEV_ENV_ONLY = "STOP! YOU SHOULDN’T BE TRYING TO DO THIS WITH THIS ACCOUNT. Please use Other Links>User Management>Create New User to create your own account(s) for testing. This account should only be used for creating YOUR OWN testing account(s), not doing testing. \n\nBe sure to include your actual name in any account you create. Accounts that aren’t clearly linked by name to a recognized team member will be deleted.";
+
+// General protected accounts modification warning message
+export const PROTECTED_ACCOUNT_MODIFICATION_WARNING_MESSAGE = "STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS. Please reconsider your choices.";
\ No newline at end of file
diff --git a/src/utils/permissions.js b/src/utils/permissions.js
index bac27fc932..b754574708 100644
--- a/src/utils/permissions.js
+++ b/src/utils/permissions.js
@@ -19,9 +19,9 @@ const hasPermission = (action) => {
   }
 };
 
-// others cannot change the details for devadmin@hgn.net
+
 /**
- * 
+ * Return true if the user is not allowed to update the protected accounts
  * @param {String} devAdminEmail target user email
  * @param {String} authEmail logged in user email
  * @returns {boolean} true if the user is not allowed to update the devadmin details
@@ -34,7 +34,7 @@ export const cantUpdateDevAdminDetails = (devAdminEmail, authEmail) => {
   const protectedEmails = ['jae@onecommunityglobal.org',
                            'one.community@me.com',
                            'jsabol@me.com',
-                           'devadmin@hgn.net'
+                           'devadmin@hgn.net',
                           ]
   return protectedEmails.includes(devAdminEmail) && !allowedEmails.includes(authEmail);
 };
diff --git a/src/utils/routePermissions.js b/src/utils/routePermissions.js
index 22323c587e..66c644bfe7 100644
--- a/src/utils/routePermissions.js
+++ b/src/utils/routePermissions.js
@@ -49,6 +49,7 @@ export const RoutePermissions = {
     'updateTask',
     'deleteTask',
     'resolveTask',
-    'putReviewStatus'
+    'putReviewStatus',
+    'suggestTask'
   ]
 };