diff --git a/src/__tests__/TaskTable/Selectors.test.js b/src/__tests__/TaskTable/Selectors.test.js
index ef80bd975b..6bc8b99970 100644
--- a/src/__tests__/TaskTable/Selectors.test.js
+++ b/src/__tests__/TaskTable/Selectors.test.js
@@ -12,7 +12,7 @@ describe('get_task_by_wbsId', () => {
     };
     const WbsTasksID = ['A','B'];
     const result = get_task_by_wbsId(WbsTasksID, mockTasks);
-    expect(result).toEqual([{ id: 2, wbsId: 'B' }]);
+    expect(result).toEqual([ { id: 1, wbsId: 'A' }, { id: 3, wbsId: 'A' }, { id: 2, wbsId: 'B' } ]);
   });
 
   it('returns the correct tasks based on WbsTasksID', () => {
@@ -26,7 +26,23 @@ describe('get_task_by_wbsId', () => {
     };
     const WbsTasksID = ['A'];
     const result = get_task_by_wbsId(WbsTasksID, mockTasks);
-    expect(result).toEqual(undefined);
+    console.log("RESULT: ");
+    console.log(result)
+    expect(result).toEqual([{"id": 1, "wbsId": "A"}, {"id": 3, "wbsId": "A"}]);
+  });
+
+  it('returns an empty array when WbsTasksID is not found', () => {
+    const mockTasks = {
+      fetched: true,
+      taskItems: [
+        { id: 1, wbsId: 'A' },
+        { id: 2, wbsId: 'B' },
+        { id: 3, wbsId: 'A' }
+      ]
+    };
+    const WbsTasksID = ['C']; // WbsTasksID not found
+    const result = get_task_by_wbsId(WbsTasksID, mockTasks);
+    expect(result).toEqual([]);
   });
 });
 
diff --git a/src/__tests__/TaskTable/TasksTable.test.js b/src/__tests__/TaskTable/TasksTable.test.js
index 505115a596..e86f124f35 100644
--- a/src/__tests__/TaskTable/TasksTable.test.js
+++ b/src/__tests__/TaskTable/TasksTable.test.js
@@ -16,7 +16,7 @@ describe('TasksTable component', () => {
 
   const renderComponent = () => render(
     <Provider store={store}>
-      <TasksTable WbsTasksID={['someId']} />
+      <TasksTable tasks={[]} />
     </Provider>
   );
 
diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
index 6edbc2c1e5..aad68e1137 100644
--- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
@@ -275,7 +275,7 @@ function EditTaskModal(props) {
   }, [links]);
 
   return (
-    <div className="controlBtn">
+    <div className="text-center">
       <Modal isOpen={modal} toggle={toggle} className={darkMode ? 'dark-mode text-light' : ''}>
         <ReactTooltip delayShow={300}/>
         <ModalHeader toggle={toggle} className={darkMode ? 'bg-space-cadet' : ''}>
@@ -296,34 +296,38 @@ function EditTaskModal(props) {
               </tr>
               <tr>
                 <td scope="col">Task Name</td>
-                {ReadOnlySectionWrapper(
-                  <textarea
-                    rows="2"
-                    type="text"
-                    className="task-name border border-dark rounded"
-                    onChange={e => setTaskName(e.target.value)}
-                    onKeyPress={e => setTaskName(e.target.value)}
-                    value={taskName}
-                  />, 
-                  editable,
-                  taskName
-                )}
+                <td>
+                  {ReadOnlySectionWrapper(
+                    <textarea
+                      rows="2"
+                      type="text"
+                      className="task-name border border-dark rounded"
+                      onChange={e => setTaskName(e.target.value)}
+                      onKeyPress={e => setTaskName(e.target.value)}
+                      value={taskName}
+                    />, 
+                    editable,
+                    taskName
+                  )}
+                </td>
               </tr>
               <tr>
                 <td scope="col">Priority</td>
-                {ReadOnlySectionWrapper(
-                  <select
-                    id="priority"
-                    onChange={e => setPriority(e.target.value)}
-                    value={priority}
-                  >
-                    <option value="Primary">Primary</option>
-                    <option value="Secondary">Secondary</option>
-                    <option value="Tertiary">Tertiary</option>
-                  </select>,
-                  editable,
-                  priority
-                )}
+                <td>
+                  {ReadOnlySectionWrapper(
+                    <select
+                      id="priority"
+                      onChange={e => setPriority(e.target.value)}
+                      value={priority}
+                    >
+                      <option value="Primary">Primary</option>
+                      <option value="Secondary">Secondary</option>
+                      <option value="Tertiary">Tertiary</option>
+                    </select>,
+                    editable,
+                    priority
+                  )}
+                </td>
               </tr>
               <tr>
                 <td scope="col">Resources</td>
@@ -342,105 +346,109 @@ function EditTaskModal(props) {
               </tr>
               <tr>
                 <td scope="col">Assigned</td>
-                {ReadOnlySectionWrapper(
-                  <div className="flex-row d-inline align-items-center">
-                    <div className="form-check form-check-inline">
-                      <input
-                        className="form-check-input"
-                        type="radio"
-                        id="true"
-                        name="Assigned"
-                        value="true"
-                        onChange={e => setAssigned(true)}
-                        checked={assigned}
-                      />
-                      <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="true">
-                        Yes
-                      </label>
-                    </div>
-                    <div className="form-check form-check-inline">
-                      <input
-                        className="form-check-input"
-                        type="radio"
-                        id="false"
-                        name="Assigned"
-                        value="false"
-                        onChange={e => setAssigned(false)}
-                        checked={!assigned}
-                      />
-                      <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="false">
-                        No
-                      </label>
-                    </div>
-                  </div>,
-                  editable,
-                  assigned? 'Yes' : 'No'
-                )}
+                  <td>
+                    {ReadOnlySectionWrapper(
+                      <div className="flex-row d-inline align-items-center">
+                        <div className="form-check form-check-inline">
+                          <input
+                            className="form-check-input"
+                            type="radio"
+                            id="true"
+                            name="Assigned"
+                            value="true"
+                            onChange={e => setAssigned(true)}
+                            checked={assigned}
+                          />
+                          <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="true">
+                            Yes
+                          </label>
+                        </div>
+                        <div className="form-check form-check-inline">
+                          <input
+                            className="form-check-input"
+                            type="radio"
+                            id="false"
+                            name="Assigned"
+                            value="false"
+                            onChange={e => setAssigned(false)}
+                            checked={!assigned}
+                          />
+                          <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="false">
+                            No
+                          </label>
+                        </div>
+                      </div>,
+                      editable,
+                      assigned? 'Yes' : 'No'
+                    )}
+                  </td>
               </tr>
               <tr>
                 <td scope="col">Status</td>
-                {ReadOnlySectionWrapper(
-                  <div className="flex-row  d-inline align-items-center">
-                    <div className="form-check form-check-inline">
-                        <input
-                          className="form-check-input"
-                          type="radio"
-                          id="active"
-                          name="status"
-                          value="Active"
-                          checked={status === 'Active' || status === 'Started'}
-                          onChange={(e) => setStatus(e.target.value)}
-                        />
-                        <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="active">
-                          Active
-                        </label>
-                      </div>
-                      <div className="form-check form-check-inline">
-                        <input
-                          className="form-check-input"
-                          type="radio"
-                          id="notStarted"
-                          name="status"
-                          value="Not Started"
-                          checked={status === 'Not Started'}
-                          onChange={(e) => setStatus(e.target.value)}
-                        />
-                        <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} 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 ${darkMode ? 'text-light' : ''}`} htmlFor="paused">
-                          Paused
-                        </label>
-                      </div>
-                      <div className="form-check form-check-inline">
-                        <input
-                          className="form-check-input"
-                          type="radio"
-                          id="complete"
-                          name="status"
-                          value="Complete"
-                          checked={status === 'Complete'}
-                          onChange={(e) => setStatus(e.target.value)}
-                        />
-                        <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="complete">
-                          Complete
-                        </label>
-                      </div>
-                  </div>,
-                  editable,
-                  status
-                )}
+                  <td>
+                    {ReadOnlySectionWrapper(
+                      <div className="flex-row  d-inline align-items-center">
+                        <div className="form-check form-check-inline">
+                            <input
+                              className="form-check-input"
+                              type="radio"
+                              id="active"
+                              name="status"
+                              value="Active"
+                              checked={status === 'Active' || status === 'Started'}
+                              onChange={(e) => setStatus(e.target.value)}
+                            />
+                            <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="active">
+                              Active
+                            </label>
+                          </div>
+                          <div className="form-check form-check-inline">
+                            <input
+                              className="form-check-input"
+                              type="radio"
+                              id="notStarted"
+                              name="status"
+                              value="Not Started"
+                              checked={status === 'Not Started'}
+                              onChange={(e) => setStatus(e.target.value)}
+                            />
+                            <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} 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 ${darkMode ? 'text-light' : ''}`} htmlFor="paused">
+                              Paused
+                            </label>
+                          </div>
+                          <div className="form-check form-check-inline">
+                            <input
+                              className="form-check-input"
+                              type="radio"
+                              id="complete"
+                              name="status"
+                              value="Complete"
+                              checked={status === 'Complete'}
+                              onChange={(e) => setStatus(e.target.value)}
+                            />
+                            <label className={`form-check-label ${darkMode ? 'text-light' : ''}`} htmlFor="complete">
+                              Complete
+                            </label>
+                          </div>
+                      </div>,
+                      editable,
+                      status
+                    )}
+                  </td>
               </tr>
               <tr>
                 <td scope="col">
@@ -584,17 +592,19 @@ function EditTaskModal(props) {
               </tr>
               <tr>
                 <td scope="col">Category</td>
-                {ReadOnlySectionWrapper(
-                  <select value={category} onChange={e => setCategory(e.target.value)}>
-                    {categoryOptions.map(cla => (
-                      <option value={cla.value} key={cla.value}>
-                        {cla.label}
-                      </option>
-                    ))}
-                  </select>,
-                  editable,
-                  category
-                )}
+                  <td>
+                  {ReadOnlySectionWrapper(
+                    <select value={category} onChange={e => setCategory(e.target.value)}>
+                      {categoryOptions.map(cla => (
+                        <option value={cla.value} key={cla.value}>
+                          {cla.label}
+                        </option>
+                      ))}
+                    </select>,
+                    editable,
+                    category
+                  )}
+                </td>
               </tr>
 
               <tr>
@@ -659,8 +669,9 @@ function EditTaskModal(props) {
               </tr>
               <tr>
                 <td scope="col">Start Date</td>
+                <td>
                 {ReadOnlySectionWrapper(
-                  <div>
+                  <div className='text-dark'>
                     <DayPickerInput
                       format={FORMAT}
                       formatDate={formatDate}
@@ -668,31 +679,35 @@ function EditTaskModal(props) {
                       onDayChange={(day, mod, input) => changeDateStart(input.state.value)}
                       value={startedDate}
                     />
-                    <div className="warning">
+                    <div className='warning text-danger'>
                       {dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
                     </div>
                   </div>,
                   editable,
                   convertDate(startedDate)
                 )}
+                </td>
               </tr>
               <tr>
                 <td scope="col">End Date</td>
-                  {ReadOnlySectionWrapper(
-                    <div>
-                    <DayPickerInput
-                      format={FORMAT}
-                      formatDate={formatDate}
-                      placeholder={`${dateFnsFormat(new Date(), FORMAT)}`}
-                      onDayChange={(day, mod, input) => changeDateEnd(input.state.value)}
-                    />
-                    <div className="warning">
-                      {dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
-                    </div>
-                    </div>,
-                    editable,
-                    convertDate(dueDate)
-                  )}
+                  <td>
+                    {ReadOnlySectionWrapper(
+                      <div className='text-dark'>
+                        <DayPickerInput
+                          format={FORMAT}
+                          formatDate={formatDate}
+                          placeholder={`${dateFnsFormat(new Date(), FORMAT)}`}
+                          onDayChange={(day, mod, input) => changeDateEnd(input.state.value)}
+                          
+                        />
+                        <div className='warning text-danger'>
+                          {dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
+                        </div>
+                      </div>,
+                      editable,
+                      convertDate(dueDate)
+                    )}
+                </td>               
               </tr>
             </tbody>
           </table>
diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
index c378513538..a0cad893ee 100644
--- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
+++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
@@ -4,7 +4,7 @@ import './ProjectMemberTable.css';
 import { Link } from 'react-router-dom';
 import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
 
-export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCount, darkMode }) => {
+export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) => {
   const [allMemberList, setAllMemberList] = useState([]);
   const [activeMemberList, setActiveMemberList] = useState([]);
   const [memberFilter, setMemberFilter] = useState('active');
@@ -109,11 +109,11 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
       >
         <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
         <label htmlFor="active" id="project-active-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ACTIVE: {foundUsers.length}
+          ACTIVE: {counts.activeMemberCount}
         </label>
         <input type="radio" name="memberFilter" value="all-time" id="all-time" />
         <label htmlFor="all-time" id="project-all-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ALL-TIME: {members.length}
+          ALL-TIME: {counts.memberCount}
         </label>
       </div>
       </div>
diff --git a/src/components/Reports/ProjectReport/ProjectReport.css b/src/components/Reports/ProjectReport/ProjectReport.css
index 5b691f3000..054fd770e5 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.css
+++ b/src/components/Reports/ProjectReport/ProjectReport.css
@@ -12,31 +12,6 @@
   }
 }
 
-@media (max-width: 321px) {
-  .tasks-block {
-    width: 50rem;
-    margin-left: 30rem;
-  }
-}
-@media (min-width: 322px) and ( max-width: 366px) {
-  .tasks-block {
-    width: 50rem;
-    margin-left: 26rem;
-  }
-}
-@media (min-width: 367px) and ( max-width: 426px) {
-  .tasks-block {
-    width: 50rem;
-    margin-left: 25rem;
-  }
-}
-@media (min-width: 427px) and ( max-width: 769px) {
-  .tasks-block {
-    width: 50rem;
-    margin-left: 23rem;
-  }
-}
-
 .container-project-wrapper {
   min-height: 100%;
   background-color: #faf7fc;
diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx
index a13a0547d3..3c9fc327a1 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.jsx
+++ b/src/components/Reports/ProjectReport/ProjectReport.jsx
@@ -24,11 +24,11 @@ import { PieChartByProject } from './PiechartByProject/PieChartByProject';
 
 // eslint-disable-next-line import/prefer-default-export
 export function ProjectReport({ match }) {
-  const darkMode = useSelector(state => state.theme.darkMode);
   const [memberCount, setMemberCount] = useState(0);
   const [activeMemberCount, setActiveMemberCount] = useState(0);
   const [nonActiveMemberCount, setNonActiveMemberCount] = useState(0);
   const [hoursCommitted, setHoursCommitted] = useState(0);
+  const [tasks, setTasks] = useState([]);
   const dispatch = useDispatch();
 
   const isAdmin = useSelector(state => state.auth.user.role) === 'Administrator';
@@ -40,7 +40,8 @@ export function ProjectReport({ match }) {
   const { wbs, projectMembers, isActive, projectName, wbsTasksID } = useSelector(
     projectReportViewData
   );
-  const tasks = useSelector(state => state.tasks);
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const tasksState = useSelector(state => state.tasks);
 
   let projectId = '';
   if (match && match.params) {
@@ -83,26 +84,28 @@ export function ProjectReport({ match }) {
 
   useEffect(() => {
     if (match) {
+      const { projectId } = match.params;
       dispatch(getProjectDetail(projectId));
       dispatch(fetchAllWBS(projectId));
       dispatch(fetchAllMembers(projectId));
+      setTasks([]);
     }
-  }, [dispatch, projectId]);
-
+  }, [dispatch, match]);
 
   useEffect(() => {
     if (wbs.fetching === false) {
-      wbs.WBSItems.forEach(wbs => {
-        dispatch(fetchAllTasks(wbs._id));
+      wbs.WBSItems.forEach(wbsItem => {
+        dispatch(fetchAllTasks(wbsItem._id));
       });
     }
-  }, [wbs]);
+  }, [dispatch, wbs]);
 
   useEffect(() => {
-    if (tasks.taskItems.length > 0) {
-      setHoursCommitted(tasks.taskItems.reduce((total, task) => total + task.hoursLogged, 0));
+    if (tasksState.taskItems.length > 0) {
+      setTasks(tasksState.taskItems);
+      setHoursCommitted(tasksState.taskItems.reduce((total, task) => total + task.estimatedHours, 0));
     }
-  }, [tasks]);
+  }, [tasksState]);
 
   useEffect(() => {
     if (projectMembers.members) {
@@ -115,7 +118,7 @@ export function ProjectReport({ match }) {
       setActiveMemberCount(activeCount);
       setNonActiveMemberCount(nonActiveCount);
     }
-  }, [projectMembers.members]);
+  }, [dispatch, projectMembers.members]);
 
   const handleMemberCount = elementCount => {
     setMemberCount(elementCount);
@@ -123,38 +126,39 @@ export function ProjectReport({ match }) {
 
   return (
     <div className={`container-project-wrapper ${darkMode ? 'bg-oxford-blue' : ''}`}>
-      <ReportPage
-        renderProfile={() => (
-          <ReportPage.ReportHeader
-            isActive={isActive}
-            avatar={<FiBox />}
-            name={projectName}
-            counts={{ activeMemberCount: activeMemberCount, memberCount: nonActiveMemberCount + activeMemberCount }}
-            hoursCommitted={hoursCommitted.toFixed(0)}
-            darkMode={darkMode}
-          />
-        )}
-        darkMode={darkMode}
-      >
-        <div className={`project-header ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div>
-        <div className="wbs-and-members-blocks-wrapper">
-          <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
-            <Paging totalElementsCount={wbs.WBSItems.length} darkMode={darkMode}>
-              <WbsTable wbs={wbs} match={match} canViewWBS={canViewWBS} darkMode={darkMode}/>
-            </Paging>
-          </ReportPage.ReportBlock>
-          <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
-            <Paging totalElementsCount={memberCount} darkMode={darkMode}>
-              <ProjectMemberTable
-                projectMembers={projectMembers}
-                handleMemberCount={handleMemberCount}
-                darkMode={darkMode}
-              />
-            </Paging>
-          </ReportPage.ReportBlock>
-        </div>
+    <ReportPage
+      renderProfile={() => (
+        <ReportPage.ReportHeader
+          isActive={isActive}
+          avatar={<FiBox />}
+          name={projectName}
+          counts={{ activeMemberCount: activeMemberCount, memberCount: nonActiveMemberCount + activeMemberCount }}
+          hoursCommitted={hoursCommitted.toFixed(0)}
+          darkMode={darkMode}
+        />
+      )}
+      darkMode={darkMode}
+    >
+      <div className={`project-header ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div> 
+      <div className="wbs-and-members-blocks-wrapper">
+        <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
+          <Paging totalElementsCount={wbs.WBSItems.length} darkMode={darkMode}>
+            <WbsTable wbs={wbs} match={match} canViewWBS={canViewWBS} darkMode={darkMode}/>
+          </Paging>
+        </ReportPage.ReportBlock>
+        <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
+          <Paging totalElementsCount={memberCount} darkMode={darkMode}>
+            <ProjectMemberTable
+              projectMembers={projectMembers}
+              handleMemberCount={handleMemberCount}
+              darkMode={darkMode}
+              counts={{ activeMemberCount: activeMemberCount, memberCount: nonActiveMemberCount + activeMemberCount }}
+            />
+          </Paging>
+        </ReportPage.ReportBlock>
+      </div>
         <ReportPage.ReportBlock darkMode={darkMode}>
-            <TasksTable WbsTasksID={wbsTasksID} darkMode={darkMode}/>
+          <TasksTable darkMode={darkMode} tasks={tasks}/>
         </ReportPage.ReportBlock>
         <ReportPage.ReportBlock darkMode={darkMode}>
           <PieChartByProject mergedProjectUsersArray={mergedProjectUsersArray} projectName={projectName} darkMode={darkMode}/>
@@ -164,4 +168,4 @@ export function ProjectReport({ match }) {
       </ReportPage>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Reports/TasksDetail/TasksDetail.css b/src/components/Reports/TasksDetail/TasksDetail.css
index 6e40af817f..881c70709a 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.css
+++ b/src/components/Reports/TasksDetail/TasksDetail.css
@@ -1,40 +1,87 @@
-.tasks-detail-table-row {
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(2, minmax(0, 1fr)) 3fr repeat(9, minmax(0, 2fr));
-  column-gap: 4px;
-  min-height: 42px;
-  align-items: center;
-  justify-items: start;
-  padding: 0 16px;
-  border-bottom: 3px solid #f8f7f8;
+/* TasksTable.css */
+.tasks-block {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.tasks-detail-total{
+  float: left;
+}
+
+.tasks-detail-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 800px; /* Minimum width to maintain table layout on smaller screens */
+}
+
+.tasks-detail-table th, .tasks-detail-table td {
+  padding: 5px;
+  border: 1px solid #ddd;
+  text-align: left;
 }
 
 .tasks-detail-table-head {
-  background-color: #eee7f8;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  min-height: 32px;
-  padding: 8px 16px;
+  background-color: #f8f9fa;
+  font-weight: bold;
 }
 
 .tasks-detail-center-cells {
-  justify-self: center;
+  text-align: center;
 }
 
 .tasks-detail-task-name {
-  word-break: break-all;
+  flex: 2;
 }
 
-.tasks-detail-total {
-  text-align: left;
-  margin-bottom: 12px;
-  font-size: 18px;
-  color: #acacac;
+.isActive i {
+  color: green;
+}
+
+.isNotActive i {
+  color: red;
+}
+
+.dark-mode-row {
+  background-color: #3A506B ;
+  color: #fff;
+}
+/* Responsive design */
+@media screen and (max-width: 1100px) {
+  .collapse-column {
+    display: none;
+  }
 }
 
-@media (max-width: 1100px) {
-  .tasks-detail-table-row {
-    grid-template-columns: repeat(1, minmax(0, 1fr)) 2fr repeat(9, minmax(0, 2fr));
+@media screen and (max-width: 1100px) {
+  .tasks-detail-table {
+    min-width: 600px;
+  }
+
+  .tasks-detail-table th, .tasks-detail-table td {
+    padding: 5px;
+    font-size: 12px;
+  }
+
+  .tasks-detail-total {
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 645px) {
+  .tasks-detail-table {
+    min-width: 400px;
+  }
+
+  .tasks-detail-table th, .tasks-detail-table td {
+    padding: 2px;
+    font-size: 10px;
+  }
+
+  .tasks-detail-total {
+    font-size: 12px;
+  }
+
+  .tasks-detail-center-cells {
+    font-size: 10px;
   }
 }
\ No newline at end of file
diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx
index f21dac0d4c..f649fa54d5 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.jsx
+++ b/src/components/Reports/TasksDetail/TasksDetail.jsx
@@ -1,90 +1,79 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from 'react-bootstrap';
 import EditTaskModal from '../../Projects/WBS/WBSDetail/EditTask/EditTaskModal';
 import 'react-table/react-table.css';
 import Collapse from 'react-bootstrap/Collapse';
 import './TasksDetail.css';
 
-const ShowCollapse = props => {
+const ShowCollapse = (props) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
-      <Button onClick={() => setOpen(!open)} aria-expanded={open}>
-        {props.resources.length} ➤
-      </Button>
-
+    <>
       <div>{props.resources[0].name}</div>
-
-      {props.resources.slice(1).map(resource => (
+      {props.resources.slice(1).map((resource) => (
         <Collapse in={open} key={resource._id}>
-          <div key={resource._id} className="new-line">
-            {resource.name}
-          </div>
+          <div>{resource.name}</div>
         </Collapse>
       ))}
-    </div>
+      <Button onClick={() => setOpen(!open)} aria-expanded={open} size='sm'>
+        {props.resources.length} ➤
+      </Button>
+    </>
   );
 };
 
-export const TasksDetail = props => {
+const formatDate = (datetime) => {
+  if(datetime){
+    const options = { year: 'numeric', month: 'short', day: 'numeric' };
+    return new Date(datetime).toLocaleDateString(undefined, options);
+  }
+  return 'N/A'
+};
+
+const truncate = (str, n) => {
+  return str.length > n ? str.substring(0, n - 1) + '...' : str;
+};
+
+export const TasksDetail = (props) => {
+  const [filteredTasks, setFilteredTasks] = useState(props.tasks_filter);
   const darkMode = props.darkMode;
-  let tasksList = [];
-  let tasks = [];
-  tasks = props.tasks_filter;
 
-  if (props.tasks_filter.length > 0) {
-    tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce(
-      (filteredTask, filter) => {
-        return props[filter]
-          ? filteredTask.filter(item => item[filter] === props[filter])
-          : filteredTask;
-      },
-      tasks,
-    );
+  useEffect(() => {
+    let tasks = props.tasks_filter;
 
-    if (props.users) {
-      let test = [];
-      for (var i = 0; i < tasks.length; i++) {
-        for (var j = 0; j < tasks[i].resources.length; j++) {
-          if (tasks[i].resources[j].name === props.users) {
-            test.push(tasks[i]);
-          }
-        }
+    if (tasks.length > 0) {
+      tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce(
+        (filteredTask, filter) => {
+          return props[filter]
+            ? filteredTask.filter(item => item[filter] === props[filter])
+            : filteredTask;
+        },
+        tasks
+      );
+
+      if (props.users) {
+        tasks = tasks.filter(task => task.resources.some(resource => resource.name === props.users));
       }
-      tasks = test;
     }
-  }
 
-  tasksList = tasks.map((task, index) => (
-    <div key={task._id} className="tasks-detail-table-row">
-      <div>
-        <EditTaskModal
-          key={`updateTask_${task._id}`}
-          parentNum={task.num}
-          taskId={task._id}
-          wbsId={task.wbsId}
-          parentId1={task.parentId1}
-          parentId2={task.parentId2}
-          parentId3={task.parentId3}
-          mother={task.mother}
-          level={task.level}
-        />
-      </div>
-      <div>
-        <div>{index + 1}</div>
-      </div>
-      <div className="tasks-detail-task-name">{task.taskName}</div>
-      <div>{task.priority}</div>
-      <div>{task.status}</div>
-      <div className="tasks-detail-center-cells">
+    setFilteredTasks(tasks);
+  }, [props.tasks_filter, props.priority, props.status, props.classification, props.isActive, props.isAssigned, props.users]);
+
+
+  const tasksList = filteredTasks.map((task, index) => (
+    <tr key={task._id} className={darkMode ? 'dark-mode-row' : ''}>
+      <td>{index + 1}</td>
+      <td className="tasks-detail-task-name">{truncate(task.taskName, 20)}</td>
+      <td className="collapse-column">{task.priority}</td>
+      <td>{task.status}</td>
+      <td className="tasks-detail-center-cells">
         {task.resources.length <= 2 ? (
-          task.resources.map(resource => <div key={resource._id}>{resource.name}</div>)
+          task.resources.map((resource) => <div key={resource._id}>{resource.name}</div>)
         ) : (
           <ShowCollapse resources={task.resources} />
         )}
-      </div>
-
-      <div className="tasks-detail-center-cells">
+      </td>
+      <td className="tasks-detail-center-cells">
         {task.isActive ? (
           <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
@@ -94,35 +83,54 @@ export const TasksDetail = props => {
             <i className="fa fa-circle-o" aria-hidden="true"></i>
           </div>
         )}
-      </div>
-
-      <div className="tasks-detail-center-cells">
+      </td>
+      <td className="tasks-detail-center-cells collapse-column">
         {task.isAssigned ? <div>Assign</div> : <div>Not Assign</div>}
-      </div>
-      <div className="tasks-detail-center-cells">{task.classification}</div>
-      <div className="tasks-detail-center-cells">{task.estimatedHours.toFixed(2)}</div>
-      <div>{task.startedDatetime}</div>
-      <div>{task.dueDatetime}</div>
-    </div>
+      </td>
+      <td className="tasks-detail-center-cells collapse-column">{task.classification}</td>
+      <td className="tasks-detail-center-cells">{task.estimatedHours.toFixed(2)}</td>
+      <td className="collapse-column">{formatDate(task.startedDatetime)}</td>
+      <td className="collapse-column">{formatDate(task.dueDatetime)}</td>
+      <td>
+        {props.toggleEditTasks && (
+          <EditTaskModal
+            key={`updateTask_${task._id}`}
+            parentNum={task.num}
+            taskId={task._id}
+            wbsId={task.wbsId}
+            parentId1={task.parentId1}
+            parentId2={task.parentId2}
+            parentId3={task.parentId3}
+            mother={task.mother}
+            level={task.level}
+          />
+        )}
+      </td>
+    </tr>
   ));
 
   return (
     <div>
-      <div className="tasks-detail-total">Total: {tasksList.length}</div>
-      <div className={`tasks-detail-table-row tasks-detail-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div>#</div>
-        <div>Task</div>
-        <div>Priority</div>
-        <div>Status</div>
-        <div className="tasks-detail-center-cells">Resources</div>
-        <div className="tasks-detail-center-cells">Active</div>
-        <div className="tasks-detail-center-cells">Assign</div>
-        <div className="tasks-detail-center-cells">Class</div>
-        <div className="tasks-detail-center-cells">Estimated Hours</div>
-        <div>Start Date</div>
-        <div>End Date</div>
-      </div>
-      <div>{tasksList}</div>
+      <div className={`tasks-detail-total ${darkMode ? 'text-light' : ''}`}>Total: {tasksList.length}</div>
+      <table className={`tasks-detail-table ${darkMode ? 'dark-mode-table' : ''}`}>
+        <thead className='tasks-detail-table-head'>
+          <tr className={darkMode ? 'bg-space-cadet text-light' : ''}>
+            <th>#</th>
+            <th>Task</th>
+            <th className="collapse-column">Priority</th>
+            <th>Status</th>
+            <th className="tasks-detail-center-cells">Resources</th>
+            <th className="tasks-detail-center-cells">Active</th>
+            <th className="tasks-detail-center-cells collapse-column">Assign</th>
+            <th className="tasks-detail-center-cells collapse-column">Class</th>
+            <th className="tasks-detail-center-cells">Estimated Hours</th>
+            <th className="collapse-column">Start Date</th>
+            <th className="collapse-column">End Date</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody className={darkMode ? 'dark-mode' : ''}>{tasksList}</tbody>
+      </table>
     </div>
   );
 };
diff --git a/src/components/Reports/TasksTable/TasksTable.css b/src/components/Reports/TasksTable/TasksTable.css
index 8e432e8ace..c02a87ee2f 100644
--- a/src/components/Reports/TasksTable/TasksTable.css
+++ b/src/components/Reports/TasksTable/TasksTable.css
@@ -82,7 +82,21 @@
   outline-color: #e7b1ef;
   color: #ca50db;
   border-radius: 4px;
-  margin-left: 40px;
+  margin-left: 20px;
+  width: 100px;
+  min-width: 100px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.tasks-table-edit-tasks-button{
+  display: block;
+  background-color: white;
+  border: 2px solid #007bff;
+  outline-color: #007bff;
+  color: #5750db;
+  border-radius: 4px;
+  margin-left: 0px;
   width: 100px;
   min-width: 100px;
   height: 30px;
@@ -95,3 +109,10 @@
   border-color: #ca50db;
   outline-color: #ca50db;
 }
+
+.tasks-table-edit-tasks-button:hover,
+.tasks-table-edit-tasks-button:focus,
+.tasks-table-edit-tasks-button:active {
+  border-color: #5750db;
+  outline-color: #5750db;
+}
\ No newline at end of file
diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx
index b3b9273325..26cb7d17bf 100644
--- a/src/components/Reports/TasksTable/TasksTable.jsx
+++ b/src/components/Reports/TasksTable/TasksTable.jsx
@@ -15,11 +15,10 @@ import TextSearchBox from 'components/UserManagement/TextSearchBox';
 import { boxStyle, boxStyleDark } from 'styles';
 import { TasksDetail } from '../TasksDetail';
 
-export function TasksTable({ WbsTasksID, darkMode }) {
-  const { get_tasks } = useSelector(state => getTasksTableData(state, { WbsTasksID }));
-
+export function TasksTable({ darkMode, tasks }) {
   const [isActive, setActive] = useState(true);
   const [isAssigned, setAssigned] = useState(true);
+  const [toggleEditTasks, setToggleEditTasks] = useState(false);
   const [filters, setFilters] = useState({
     status: '',
     priority: '',
@@ -51,13 +50,13 @@ export function TasksTable({ WbsTasksID, darkMode }) {
   };
 
   const getOptions = (filterName) => {
-    const options = [...Array.from(new Set(get_tasks.map(item => item[filterName]))).sort()];
+    const options = [...Array.from(new Set(tasks.map(item => item[filterName]))).sort()];
     return options.map(option => ({ value: option, label: option }));
   };
 
   const getUserOptions = () => {
     let users = [];
-    get_tasks.forEach(task => task.resources?.forEach(resource => users.push(resource.name)));
+    tasks.forEach(task => task.resources?.forEach(resource => users.push(resource.name)));
     users = Array.from(new Set(users)).sort();
     return users.map(user => ({ value: user, label: user }));
   };
@@ -72,7 +71,7 @@ export function TasksTable({ WbsTasksID, darkMode }) {
         <h4 className="tasks-table-header">Tasks</h4>
       </div>
       <div className="tasks-table-filters-wrapper">
-        <div className="tasks-table-filters">
+        <div className={`tasks-table-filters ${darkMode ? 'text-dark' : ''}`}>
           <Select
             ref={userRef}
             options={getUserOptions()}
@@ -123,24 +122,36 @@ export function TasksTable({ WbsTasksID, darkMode }) {
           />
         </div>
 
-        <button
-          className="tasks-table-clear-filter-button"
-          onClick={() => resetAllFilters()}
-          style={darkMode ? boxStyleDark : boxStyle}
-        >
-          Clear filters
-        </button>
+        <div className='d-flex'>
+          <button
+            className="tasks-table-edit-tasks-button"
+            onClick={() => setToggleEditTasks(!toggleEditTasks)}
+            style={darkMode ? boxStyleDark : boxStyle}
+          >
+            Edit Tasks
+          </button>
+
+          <button
+            className="tasks-table-clear-filter-button"
+            onClick={() => resetAllFilters()}
+            style={darkMode ? boxStyleDark : boxStyle}
+          >
+            Clear filters
+          </button>
+        </div>
+        
       </div>
 
       <TasksDetail
-        tasks_filter={get_tasks}
+        tasks_filter={tasks}
+        toggleEditTasks={toggleEditTasks}
+        darkMode={darkMode}
         isAssigned={isAssigned}
         isActive={isActive}
         priority={filters.priority}
         status={filters.status}
         classification={filters.classification}
         users={filters.users}
-        darkMode={darkMode}
       />
     </div>
   );
diff --git a/src/components/Reports/TasksTable/selectors.js b/src/components/Reports/TasksTable/selectors.js
index 54fea0099e..446214777d 100644
--- a/src/components/Reports/TasksTable/selectors.js
+++ b/src/components/Reports/TasksTable/selectors.js
@@ -4,14 +4,14 @@ export const get_task_by_wbsId = (WbsTasksID, tasks) => {
     let i = 0;
     while (i < WbsTasksID.length && tasks.fetched) {
       const result = tasks.taskItems.filter(task => task.wbsId === WbsTasksID[i]);
-      get_tasks.push(result);
+      get_tasks.push(...result);
       i += 1;
     }
   }
 
-  return get_tasks[1];
+  return get_tasks;
 };
 
-export const getTasksTableData = (state, { WbsTasksID }) => ({
-  get_tasks: get_task_by_wbsId(WbsTasksID, state.tasks) || [],
+export const getTasksTableData = (tasks, { WbsTasksID }) => ({
+  get_tasks: get_task_by_wbsId(WbsTasksID, tasks) || [],
 });