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>