diff --git a/package-lock.json b/package-lock.json
index 1fbf4e722a..c620e14021 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25195,4 +25195,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bae1f5fd03..b45ed0a2ea 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -160,7 +160,6 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-   const [isAckLoading, setIsAckLoading] = useState(false);
   const unreadNotifications = props.notification?.unreadNotifications; // List of unread notifications
   const dispatch = useDispatch();
   const history = useHistory();
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 5166d2fded..89534c25e3 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -672,7 +672,7 @@ function LeaderBoard({
               </div>
             </Alert>
           )}
-          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y mb-5">
             <div className="search-container mx-1">
               <input
                 className={`form-control col-12 mb-2 ${
@@ -689,6 +689,7 @@ function LeaderBoard({
               className={`leaderboard table-fixed ${
                 darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
               } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
+              style={{ minWidth: '500px' }}
             >
               <thead className="responsive-font-size">
                 <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
diff --git a/src/components/Projects/AddProject/AddProject.jsx b/src/components/Projects/AddProject/AddProject.jsx
index 2e235e7387..e04dc2a26e 100644
--- a/src/components/Projects/AddProject/AddProject.jsx
+++ b/src/components/Projects/AddProject/AddProject.jsx
@@ -151,12 +151,13 @@ const AddProject = (props) => {
     <div>
       <button
         type="button"
-        className="btn btn-outline-success"
+        className="btn btn-outline-success m-2"
         onClick={toggleModal}
         style={{
           borderColor: '#8ec233',
           color: '#8ec233',
           borderWidth: '1px',
+          marginBottom: '10px'
         }}
       >
         <i className="fa fa-plus" aria-hidden="true"></i> Add New Project
diff --git a/src/components/Projects/Overview/Overview.jsx b/src/components/Projects/Overview/Overview.jsx
index bbe54af68b..9fd80d29ce 100644
--- a/src/components/Projects/Overview/Overview.jsx
+++ b/src/components/Projects/Overview/Overview.jsx
@@ -5,22 +5,22 @@
  ********************************************************************************/
 import React from 'react';
 import { TOTAL_PROJECTS, ACTIVE_PROJECTS } from './../../../languages/en/ui';
-import "./Overview.css"
+import styles from "./Overview.module.css"
 
 const Overview = props => {
   return (
     <div className="projects__overview--top">
-      <div className="card" id="card_project">
-        <div className="card-body">
-          <h6 className='card-text ml-3'>
+      <div className={`${styles["card_project"]} m-2`} id="card_project">
+        <div className={`${styles["card-body"]} card-body`}>
+          <h6 className={`${styles["card-text"]} card-text ml-3`}>
             <i className="fa fa-folder" aria-hidden="true"></i> {TOTAL_PROJECTS}: {props.numberOfProjects}
           </h6>
         </div>
       </div>
 
-      <div className="card" id="card_active">
-        <div className="card-body">
-          <h6 className='card-text ml-3'>
+      <div className={`${styles["card_active"]} m-2`} id="card_active">
+        <div className={`${styles["card-body"]} card-body`}>
+          <h6 className={`${styles["card-text"]} card-text ml-3`}>
             <i className="fa fa-circle fa-circle-isActive" aria-hidden="true"></i> {ACTIVE_PROJECTS}: {props.numberOfActive}
           </h6>
         </div>
diff --git a/src/components/Projects/Overview/Overview.css b/src/components/Projects/Overview/Overview.module.css
similarity index 84%
rename from src/components/Projects/Overview/Overview.css
rename to src/components/Projects/Overview/Overview.module.css
index 49723e7512..9a17905496 100644
--- a/src/components/Projects/Overview/Overview.css
+++ b/src/components/Projects/Overview/Overview.module.css
@@ -1,26 +1,27 @@
-.card#card_project {
+.card_project {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(to bottom, #87CEEB, #1E90FF, #4169E1);
+    background: linear-gradient(to bottom, #87CEEB, #1E90FF, #4169E1) !important;
     border-radius: 8px;
     height: 40px;
     width: 300px;
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
+    float: left;
   }
   
-  .card#card_active {
+  .card_active {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(to bottom, #FFD700, #FFA500, #FF8C00);
+    background: linear-gradient(to bottom, #FFD700, #FFA500, #FF8C00) !important;
     border-radius: 8px;
     height: 40px;
     width: 300px;
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
   }
 
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
index 79a779e977..fe7071ec3b 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects/Projects.jsx
@@ -283,9 +283,9 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
   return (
     <>
       <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
-        <div className="container py-3 border border-secondary rounded" style={darkMode ? { backgroundColor: '#1B2A41' } : {}}>
+        <div className="container py-3 mb-5 border border-secondary rounded" style={darkMode ? { backgroundColor: '#1B2A41' } : {}}>
           {fetching || !fetched ? <Loading align="center" /> : null}
-          <div className="d-flex justify-content-center align-items-center">
+          <div className="d-flex align-items-center flex-wrap w-100">
             <h3 style={{ display: 'inline-block', marginRight: 10 }}>Projects</h3>
             <EditableInfoModal
               areaName="projectsInfoModal"
@@ -300,7 +300,7 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
         </div>
 
         <SearchProjectByPerson onSearch={handleSearchName} />
-
+        <div style={{ overflowX: 'auto', overflowY: 'auto',  maxHeight: '500px' }}>
         <table className="table table-bordered table-responsive-sm">
           <thead>
             <ProjectTableHeader
@@ -315,6 +315,7 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
           </thead>
           <tbody className={darkMode ? 'bg-yinmn-blue dark-mode' : ''}>{projectList}</tbody>
         </table>
+        </div>
       </div>
 
       <ModalTemplate
diff --git a/src/components/Projects/WBS/SingleTask/SingleTask.jsx b/src/components/Projects/WBS/SingleTask/SingleTask.jsx
index 9d7baaa8a5..2ef50e25f9 100644
--- a/src/components/Projects/WBS/SingleTask/SingleTask.jsx
+++ b/src/components/Projects/WBS/SingleTask/SingleTask.jsx
@@ -90,115 +90,127 @@ function SingleTask(props) {
               </ol>
             </nav>
           )}
-
-          <table className={`table table-bordered tasks-table ${darkMode ? 'dark-mode text-light' : ''}`}>
-            <thead className={darkMode ? 'bg-space-cadet' : ''}>
-              <tr>
-                <th scope="col" data-tip="Action" colSpan="1">
-                  Action
-                </th>
-                <th scope="col" data-tip="task-num" colSpan="1">
-                  #
-                </th>
-                <th scope="col" data-tip="Task Name" className="task-name">
-                  Task Name
-                </th>
-                <th scope="col" data-tip="Priority">
-                  <i className="fa fa-star" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Resources">
-                  <i className="fa fa-users" aria-hidden="true" />
-                </th>
-                <th scope="col" data-tip="Assigned">
-                  <i className="fa fa-user-circle-o" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Status">
-                  <i className="fa fa-tasks" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Hours-Best">
-                  <i className="fa fa-hourglass-start" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Hours-Worst">
-                  <i className="fa fa-hourglass" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Hours-Most">
-                  <i className="fa fa-hourglass-half" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Estimated Hours">
-                  <i className="fa fa-clock-o" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Hours-Logged">
-                  <i className="fa fa-hourglass-end" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Start Date">
-                  <i className="fa fa-calendar-check-o" aria-hidden="true" />
-                  {' '}
-                  Start
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Due Date">
-                  <i className="fa fa-calendar-times-o" aria-hidden="true" />
-                  {' '}
-                  End
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Links">
-                  <i className="fa fa-link" aria-hidden="true" />
-                </th>
-                <th className="desktop-view" scope="col" data-tip="Details">
-                  <i className="fa fa-question" aria-hidden="true" />
-                </th>
-              </tr>
-            </thead>
-            <tbody className={darkMode ? 'bg-yinmn-blue' : ''}>
-              <tr>
-                <th scope="row">
-                  <div className="d-flex">
-                    <EditTaskModal
-                      key={`editTask_${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}
-                      setTask={setTask}
-                    />
-                    {canDeleteTask && (
-                      <>
-                        <Button
-                          type="button"
-                          size="sm"
-                          className="btn btn-danger"
-                          onClick={() => showUpDeleteModal()}
-                          style={darkMode ? boxStyleDark : boxStyle}
-                        >
-                          Delete
-                          {' '}
-                          <i className="fa fa-trash" aria-hidden="true" />
-                        </Button>
-                        <ModalDelete
-                          isOpen={modalDelete}
-                          closeModal={() => setModalDelete(false)}
-                          confirmModal={() => deleteTask(task._id, task.mother)}
-                          modalMessage={
-                            props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
+          <div className='tasks-table table-responsive mb-5'>
+            <table className={`table table-bordered ${darkMode ? 'dark-mode text-light' : ''}`}>
+              <thead className={darkMode ? 'bg-space-cadet' : ''}>
+                <tr>
+                  <th scope="col" data-tip="Action" colSpan="1">
+                    Action
+                  </th>
+                  <th scope="col" data-tip="task-num" colSpan="1">
+                    #
+                  </th>
+                  <th scope="col" data-tip="Task Name" style={{ minWidth: '200px' }}>
+                    Task Name
+                  </th>
+                  <th scope="col" data-tip="Priority">
+                    <i className="fa fa-star" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Resources">
+                    <i className="fa fa-users" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Assigned">
+                    <i className="fa fa-user-circle-o" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Status">
+                    <i className="fa fa-tasks" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Hours-Best">
+                    <i className="fa fa-hourglass-start" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Hours-Worst">
+                    <i className="fa fa-hourglass" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Hours-Most">
+                    <i className="fa fa-hourglass-half" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Estimated Hours">
+                    <i className="fa fa-clock-o" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Hours-Logged">
+                    <i className="fa fa-hourglass-end" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Start Date">
+                    <i className="fa fa-calendar-check-o" aria-hidden="true" />
+                    {' '}
+                    Start
+                  </th>
+                  <th scope="col" data-tip="Due Date">
+                    <i className="fa fa-calendar-times-o" aria-hidden="true" />
+                    {' '}
+                    End
+                  </th>
+                  <th scope="col" data-tip="Links">
+                    <i className="fa fa-link" aria-hidden="true" />
+                  </th>
+                  <th scope="col" data-tip="Details">
+                    <i className="fa fa-question" aria-hidden="true" />
+                  </th>
+                </tr>
+              </thead>
+              <tbody className={darkMode ? 'bg-yinmn-blue' : ''}>
+                <tr>
+                  <th scope="row">
+                    <div className="d-flex flex-column">
+                      <EditTaskModal
+                        key={`editTask_${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}
+                        setTask={setTask}
+                      />
+                      {canDeleteTask && (
+                        <>
+                          <Button
+                            type="button"
+                            size="sm"
+                            className="btn btn-danger"
+                            onClick={() => showUpDeleteModal()}
+                            style={darkMode ? boxStyleDark : boxStyle}
+                          >
+                            Delete
+                          </Button>
+                          <ModalDelete
+                            isOpen={modalDelete}
+                            closeModal={() => setModalDelete(false)}
+                            confirmModal={() => deleteTask(task._id, task.mother)}
+                            modalMessage={
+                              props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
+                            }
+                            modalTitle={Message.CONFIRM_DELETION}
+                            darkMode={darkMode}
+                          />
+                        </>
+                      )}
+                    </div>
+                  </th>
+                  <th scope="row">{task.num}</th>
+                  <td>{task.taskName}</td>
+                  <td>{task.priority}</td>
+                  <td>
+                    {task?.resources &&
+                      task.resources.map((elem, i) => {
+                        try {
+                          if (elem.profilePic) {
+                            return (
+                              <a
+                                key={`res_${i}`}
+                                data-tip={elem.name}
+                                className="name"
+                                href={`/userprofile/${elem.userID}`}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                <img className="img-circle" src={elem.profilePic} />
+                              </a>
+                            );
                           }
-                          modalTitle={Message.CONFIRM_DELETION}
-                          darkMode={darkMode}
-                        />
-                      </>
-                    )}
-                  </div>
-                </th>
-                <th scope="row">{task.num}</th>
-                <td>{task.taskName}</td>
-                <td>{task.priority}</td>
-                <td className="desktop-view">
-                  {task?.resources &&
-                    task.resources.map((elem, i) => {
-                      try {
-                        if (elem.profilePic) {
                           return (
                             <a
                               key={`res_${i}`}
@@ -208,49 +220,40 @@ function SingleTask(props) {
                               target="_blank"
                               rel="noreferrer"
                             >
-                              {/* eslint-disable-next-line jsx-a11y/alt-text */}
-                              <img className="img-circle" src={elem.profilePic} />
+                              <span className="dot">{elem.name.substring(0, 2)}</span>
                             </a>
                           );
-                        }
-                        return (
-                          <a
-                            key={`res_${i}`}
-                            data-tip={elem.name}
-                            className="name"
-                            href={`/userprofile/${elem.userID}`}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            <span className="dot">{elem.name.substring(0, 2)}</span>
-                          </a>
-                        );
 
-                      } catch (err) { }
-                    })}
-                </td>
-                <td>
-                  {task.isAssigned ? (
-                    <i data-tip="Assigned" className="fa fa-check-square" aria-hidden="true" />
-                  ) : (
-                    <i data-tip="Not Assigned" className="fa fa-square-o" aria-hidden="true" />
-                  )}
-                </td>
-                <td>{task.status}</td>
-                <td>{task.hoursBest}</td>
-                <td>{task.hoursWorst}</td>
-                <td>{task.hoursMost}</td>
-                <td>{parseFloat(task.estimatedHours).toFixed(2)}</td>
-                <td>{parseFloat(task.hoursLogged).toFixed(2)}</td>
-                <td>{task.startedDatetime ? formatDate(task.startedDatetime) : 'N/A'}</td>
-                <td>{task.dueDatetime ? formatDate(task.dueDatetime) : 'N/A'}</td>
-                <td>{task.links}</td>
-                <td className="desktop-view" onClick={toggleModel}>
-                  <i className="fa fa-book" aria-hidden="true" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        } catch (err) { }
+                      })}
+                  </td>
+                  <td>
+                    {task.isAssigned ? (
+                      <i data-tip="Assigned" className="fa fa-check-square" aria-hidden="true" />
+                    ) : (
+                      <i data-tip="Not Assigned" className="fa fa-square-o" aria-hidden="true" />
+                    )}
+                  </td>
+                  <td>{task.status}</td>
+                  <td>{task.hoursBest}</td>
+                  <td>{task.hoursWorst}</td>
+                  <td>{task.hoursMost}</td>
+                  <td>{parseFloat(task.estimatedHours).toFixed(2)}</td>
+                  <td>{parseFloat(task.hoursLogged).toFixed(2)}</td>
+                  <td>{task.startedDatetime ? formatDate(task.startedDatetime) : 'N/A'}</td>
+                  <td>{task.dueDatetime ? formatDate(task.dueDatetime) : 'N/A'}</td>
+                  <td>
+                    <a href={task.links}>
+                      <i className={`fa fa-link ${darkMode ? 'text-azure' : ''}`} aria-hidden="true" />
+                    </a>
+                  </td>
+                  <td onClick={toggleModel}>
+                    <i className="fa fa-book" aria-hidden="true" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
 
         <Modal isOpen={modal} toggle={toggleModel}>
diff --git a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
index e48153fbdb..881879c028 100644
--- a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
@@ -19,7 +19,8 @@ import { DUE_DATE_MUST_GREATER_THAN_START_DATE ,
 import clsx from 'clsx';
 import '../../../../Header/DarkMode.css';
 import TagsSearch from '../components/TagsSearch';
-import styles from './AddTaskModal.module.css';
+import styles from '../wbs.module.css';
+// import styles from './AddTaskModal.module.css';
 import { fetchAllMembers } from '../../../../../actions/projectMembers';
 import { fetchAllProjects } from '../../../../../actions/projects';
 import { getProjectDetail } from '../../../../../actions/project';
@@ -77,11 +78,12 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled }) {
         }}
       />
       {isOpen && !disabled && (
-        <div style={{ position: 'absolute', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
+        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
           <DayPicker 
             mode="single"
             selected={selectedDate}
             onSelect={handleDaySelect}
+            className={styles['datePicker']}
           />
           <button
             type="button"
@@ -112,7 +114,7 @@ const TINY_MCE_INIT_OPTIONS = {
                     styleselect fontsizeselect | table| strikethrough forecolor backcolor |\
                     subscript superscript charmap  | help',
   branding: false,
-  min_height: 180,
+  min_height: 280,
   max_height: 300,
   autoresize_bottom_margin: 1,
 };
@@ -681,33 +683,33 @@ function AddTaskModal(props) {
         <ModalBody className={darkMode ? 'bg-yinmn-blue dark-mode no-hover' : ''}>
           <div className="table table-bordered responsive">
             <div>
-              <div className="add_new_task_form-group">
-                <span className={`add_new_task_form-label`} data-tip="WBS ID">
+              <div className={styles["add_new_task_form-group"]}>
+                <span className={`${styles['add_new_task_form-label']} ${fontColor}`} data-tip="WBS ID">
                   WBS #
                 </span>
 
-                <span className={`add_new_task_form-input_area`}>{newTaskNum}</span>
+                <span className={`${styles['add_new_task_form-input_area']} ${fontColor}`}>{newTaskNum}</span>
               </div>
-              <div className="add_new_task_form-group">
-                <label htmlFor="taskNameInput" className={`add_new_task_form-label`}>
+              <div className={styles["add_new_task_form-group"]}>
+                <label htmlFor="taskNameInput" className={`${styles['add_new_task_form-label']} ${fontColor}`}>
                   Task Name
                 </label>
-                <span className="add_new_task_form-input_area">
+                <span className={styles['add_new_task_form-input_area']}>
                   <textarea
                     id="taskNameInput"
                     rows="2"
-                    className="task-name border border-dark rounded"
+                    className={`${styles['task-name']} border border-dark rounded`}
                     onChange={e => setTaskName(e.target.value)}
                     value={taskName}
                   />
                 </span>
               </div>
 
-              <div className="add_new_task_form-group">
-                <label htmlFor="priority" className={`add_new_task_form-label`}>
+              <div className={styles["add_new_task_form-group"]}>
+                <label htmlFor="priority" className={`${styles['add_new_task_form-label']} ${fontColor}`}>
                   Priority
                 </label>
-                <span className="add_new_task_form-input_area">
+                <span className={styles['add_new_task_form-input_area']}>
                   <select
                     id="priority"
                     onChange={e => setPriority(e.target.value)}
@@ -720,55 +722,53 @@ function AddTaskModal(props) {
                 </span>
               </div>
 
-              <div className="add_new_task_form-group">
-  <label htmlFor="resource-input" className={`add_new_task_form-label`}>
-    Resources
-  </label>
-
-  <div className="add_new_task_form-input_area">
-    <div className={styles.resourceRow}>
-      <div className={styles.tagsWrapper}>
-        <TagsSearch
-          key={`tags-${props.projectId}-${activeMembers.length}`}
-          placeholder="Add resources"
-          members={activeMembers}
-          addResources={addResources}
-          removeResource={removeResource}
-          resourceItems={resourceItems}
-          disableInput={false}
-          inputTestId="resource-input"
-          projectId={props.projectId}
-        />
-      </div>
-
-      <div className={clsx(styles['replicate-control'], styles.replicateInline)}>
-        <button
-          type="button"
-          className={styles['replicate-btn']}
-          onClick={openReplicateConfirm}
-          data-tip
-          data-for="replicateTip"
-          disabled={!resourceItems?.length || isLoading || isReplicating}
-          aria-label="Replicate Task"
-          title="Replicate Task"
-        >
-          <span style={{ fontWeight: 700 }}>RT</span>
-        </button>
-      </div>
-    </div>
+              <div className={styles["add_new_task_form-group"]}>
+                <label htmlFor="resource-input" className={`${styles['add_new_task_form-label']} ${fontColor}`}>
+                  Resources
+                </label>
+                <div className={styles['add_new_task_form-input_area']}>
+                  <div className={styles.resourceRow}>
+                    <div className={styles.tagsWrapper}>
+                      <TagsSearch
+                        key={`tags-${props.projectId}-${activeMembers.length}`}
+                        placeholder="Add resources"
+                        members={activeMembers}
+                        addResources={addResources}
+                        removeResource={removeResource}
+                        resourceItems={resourceItems}
+                        disableInput={false}
+                        inputTestId="resource-input"
+                        projectId={props.projectId}
+                      />
+                    </div>
 
-    <ReactTooltip id="replicateTip" effect="solid" place="top">
-      Replicate Task: Clicking this button will replicate this task and add it to all the
-      individuals chosen as Resources. Hours and all other details will be copied (not divided)
-      for all people.
-    </ReactTooltip>
-  </div>
-</div>
+                    <div className={clsx(styles['replicate-control'], styles.replicateInline)}>
+                      <button
+                        type="button"
+                        className={styles['replicate-btn']}
+                        onClick={openReplicateConfirm}
+                        data-tip
+                        data-for="replicateTip"
+                        disabled={!resourceItems?.length || isLoading || isReplicating}
+                        aria-label="Replicate Task"
+                        title="Replicate Task"
+                      >
+                        <span style={{ fontWeight: 700 }}>RT</span>
+                      </button>
+                    </div>
+                  </div>
+                  <ReactTooltip id="replicateTip" effect="solid" place="top">
+                    Replicate Task: Clicking this button will replicate this task and add it to all the
+                    individuals chosen as Resources. Hours and all other details will be copied (not divided)
+                    for all people.
+                  </ReactTooltip>
+                </div>
+              </div>
 
-              <div className="add_new_task_form-group">
+              <div className={styles["add_new_task_form-group"]}>
                 {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                <label className={`add_new_task_form-label`}>Assigned</label>
-                <div className="add_new_task_form-input_area">
+                <label className={`${styles['add_new_task_form-label']} ${fontColor}`}>Assigned</label>
+                <div className={styles['add_new_task_form-input_area']}>
                   <div className="flex-row d-inline align-items-center">
                     <div className="form-check form-check-inline">
                       <input
@@ -802,9 +802,9 @@ function AddTaskModal(props) {
                 </div>
               </div>
 
-              <div className="add_new_task_form-group">
-                <span className={`add_new_task_form-label`}>Status</span>
-                <span className="add_new_task_form-input_area">
+              <div className={styles["add_new_task_form-group"]}>
+                <span className={`${styles['add_new_task_form-label']} ${fontColor}`}>Status</span>
+                <span className={styles['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
@@ -867,14 +867,15 @@ function AddTaskModal(props) {
                   </div>
                 </span>
               </div>
-              <div className="add_new_task_form-group">
+              <div className={styles["add_new_task_form-group"]}>
                 {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                <label className={`add_new_task_form-label`}>Hours</label>
-                <div className="add_new_task_form-input_area">
+                <label className={`${styles['add_new_task_form-label']} ${fontColor}`}>Hours</label>
+                <div className={styles['add_new_task_form-input_area']}>
                   <div className="py-2 d-flex align-items-center justify-content-sm-around">
                     <label
                       htmlFor="bestCaseInput"
-                      className={`${styles['hours-label']} text-nowrap align-self-center`}
+                      className={`${styles.hoursLabel} mr-2 text-nowrap align-self-center ${fontColor}`}
+                      // className={`${styles['hours-label']} text-nowrap align-self-center ${fontColor}`}
                     >
                       Best-case
                     </label>
@@ -896,7 +897,8 @@ function AddTaskModal(props) {
                   <div className="py-2 d-flex align-items-center justify-content-sm-around">
                     <label
                       htmlFor="worstCaseInput"
-                      className={`${styles['hours-label']} text-nowrap align-self-center`}
+                      className={`${styles.hoursLabel} mr-2 text-nowrap align-self-center ${fontColor}`}
+                      // className={`${styles['hours-label']} text-nowrap align-self-center ${fontColor}`}
                     >
                       Worst-case
                     </label>
@@ -920,7 +922,8 @@ function AddTaskModal(props) {
                   <div className="py-2 d-flex align-items-center justify-content-sm-around">
                     <label
                       htmlFor="mostCaseInput"
-                      className={`${styles['hours-label']} text-nowrap align-self-center`}
+                      className={`${styles.hoursLabel} mr-2 text-nowrap align-self-center ${fontColor}`}
+                      // className={`${styles['hours-label']} text-nowrap align-self-center ${fontColor}`}
                     >
                       Most-case
                     </label>
@@ -944,7 +947,8 @@ function AddTaskModal(props) {
                   <div className="py-2 d-flex align-items-center justify-content-sm-around">
                     <label
                       htmlFor="estimatedInput"
-                      className={`${styles['hours-label']} text-nowrap align-self-center`}
+                      className={`${styles.hoursLabel} mr-2 text-nowrap align-self-center ${fontColor}`}
+                      // className={`${styles['hours-label']} text-nowrap align-self-center ${fontColor}`}
                     >
                       Estimated
                     </label>
@@ -965,11 +969,11 @@ function AddTaskModal(props) {
                 </div>
               </div>
 
-              <div className="add_new_task_form-group">
-                <label htmlFor="linkInput" className={`add_new_task_form-label`}>
+              <div className={styles["add_new_task_form-group"]}>
+                <label htmlFor="linkInput" className={`${styles['add_new_task_form-label']} ${fontColor}`}>
                   Links
                 </label>
-                <span className="add_new_task_form-input_area">
+                <span className={styles['add_new_task_form-input_area']}>
                   <div className="d-flex flex-row">
                     <input
                       type="text"
@@ -1041,10 +1045,10 @@ function AddTaskModal(props) {
               </div>
 
               <div className="d-flex border align-items-center">
-                <label htmlFor="category-select" className={`add_new_task_form-label`}>
+                <label htmlFor="category-select" className={`${styles['add_new_task_form-label']} ${fontColor}`}>
                   Category
                 </label>
-                <span className="add_new_task_form-input_area">
+                <span className={styles['add_new_task_form-input_area']}>
                   <select
                     id="category-select"
                     value={category}
diff --git a/src/components/Projects/WBS/WBSDetail/ControllerRow/ControllerRow.jsx b/src/components/Projects/WBS/WBSDetail/ControllerRow/ControllerRow.jsx
index 7eadf2ee25..c9faf0f2a1 100644
--- a/src/components/Projects/WBS/WBSDetail/ControllerRow/ControllerRow.jsx
+++ b/src/components/Projects/WBS/WBSDetail/ControllerRow/ControllerRow.jsx
@@ -21,6 +21,7 @@ import { getPopupById } from './../../../../../actions/popupEditorAction';
 import { TASK_DELETE_POPUP_ID } from './../../../../../constants/popupId';
 import hasPermission from '~/utils/permissions';
 import { boxStyle, boxStyleDark } from '~/styles';
+import styles from '../wbs.module.css';
 
 function ControllerRow(props) {
   /*
@@ -69,9 +70,9 @@ function ControllerRow(props) {
   * -------------------------------- JSX rendering --------------------------------
   */
   return (
-    <tr className="wbsTaskController" id={`controller_${props.taskId}`}>
-      <td colSpan={props.tableColNum} className={`controlTd ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div className="task-action-buttons">
+    <tr className={styles["wbsTaskController"]} id={`controller_${props.taskId}`}>
+      <td colSpan={props.tableColNum} className={`${styles['controlTd']} ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div className={styles["task-action-buttons"]}>
           {props.level < 4 && canPostTask ? (
             <AddTaskModal
               label={"Add Subtask"}
@@ -111,7 +112,7 @@ function ControllerRow(props) {
             <Button
               color="danger"
               size="sm"
-              className="controlBtn"
+              className={styles["controlBtn"]}
               onClick={showUpDeleteModal}
               style={darkMode ? boxStyleDark : boxStyle}
             >
@@ -120,7 +121,7 @@ function ControllerRow(props) {
           )}
 
           <Dropdown direction="up" isOpen={dropdownOpen} toggle={toggle}>
-            <DropdownToggle caret color="primary" className="controlBtn" size="sm" style={darkMode ? boxStyleDark : boxStyle}>
+            <DropdownToggle caret color="primary" className={styles["controlBtn"]} size="sm" style={darkMode ? boxStyleDark : boxStyle}>
               Move
             </DropdownToggle>
             <DropdownMenu>
@@ -139,7 +140,7 @@ function ControllerRow(props) {
           <Button
             color="secondary"
             size="sm"
-            className="controlBtn"
+            className={styles["controlBtn"]}
             onClick={() => onCopy(props.taskId)}
             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 3945f8849d..63ee4b171d 100644
--- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
@@ -20,7 +20,7 @@ import UserSearch from './UserSearch';
 import UserTag from './UserTag';
 import ReadOnlySectionWrapper from './ReadOnlySectionWrapper';
 import '../../../../Header/DarkMode.css';
-import '../wbs.css';
+import styles from '../wbs.module.css';
 import TagsSearch from '../components/TagsSearch';
 
 
@@ -74,11 +74,12 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled, dark
         }}
       />
       {isOpen && !disabled && (
-        <div style={{ position: 'absolute', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
+        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
           <DayPicker 
             mode="single"
             selected={selectedDate}
             onSelect={handleDaySelect}
+            className={styles['datePicker']}
           />
           <button
             type="button"
@@ -164,7 +165,7 @@ function EditTaskModal(props) {
                         styleselect fontsizeselect | table| strikethrough forecolor backcolor |\
                         subscript superscript charmap  | help',
     branding: false,
-    min_height: 180,
+    min_height: 280,
     max_height: 300,
     autoresize_bottom_margin: 1,
     skin: darkMode ? 'oxide-dark' : 'oxide',
@@ -739,7 +740,7 @@ function EditTaskModal(props) {
                     <label
                       htmlFor="bestCase"
                      
-                      className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}
+                      className={`text-nowrap ${styles.hoursLabel} mr-2 ${darkMode ? 'text-light' : ''}`}
                     >
                       Best-case
                     </label>
@@ -769,7 +770,7 @@ function EditTaskModal(props) {
                     <label
                       htmlFor="worstCase"
                      
-                      className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}
+                      className={`text-nowrap ${styles.hoursLabel} mr-2 ${darkMode ? 'text-light' : ''}`}
                     >
                       Worst-case
                     </label>
@@ -798,7 +799,7 @@ function EditTaskModal(props) {
                     <label
                       htmlFor="mostCase"
                      
-                      className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}
+                      className={`text-nowrap ${styles.hoursLabel} mr-2 ${darkMode ? 'text-light' : ''}`}
                     >
                       Most-case
                     </label>
@@ -829,7 +830,7 @@ function EditTaskModal(props) {
                     <label
                       htmlFor="Estimated"
                      
-                      className={`text-nowrap w-25 mr-4 ${darkMode ? 'text-light' : ''}`}
+                      className={`text-nowrap ${styles.hoursLabel} mr-2 ${darkMode ? 'text-light' : ''}`}
                     >
                       Estimated
                     </label>
@@ -851,7 +852,7 @@ function EditTaskModal(props) {
                   </div>
                 </td>
               </tr>
-              <tr>
+              <tr className='text-break'>
                 {/* eslint-disable-next-line jsx-a11y/scope */}
                 <td id="edit-modal-td" scope="col">
                   Links
@@ -1084,7 +1085,7 @@ function EditTaskModal(props) {
       <div className="task-action-buttons d-flex" />
       {canUpdateTask && (
         <Button
-          className="mr-2 controlBtn"
+          className="mx-2 controlBtn"
           color="primary"
           size="sm"
           onClick={e => handleModalShow('Edit')}
diff --git a/src/components/Projects/WBS/WBSDetail/FilterBar.jsx b/src/components/Projects/WBS/WBSDetail/FilterBar.jsx
index c2b0de6c2d..da6ddaa15c 100644
--- a/src/components/Projects/WBS/WBSDetail/FilterBar.jsx
+++ b/src/components/Projects/WBS/WBSDetail/FilterBar.jsx
@@ -37,7 +37,7 @@ export const filterButtons = [
  */
 export function FilterBar({ currentFilter, onChange, isLoading }) {
   return (
-    <ButtonGroup aria-label="Task Filters">
+    <div aria-label="Task Filters">
       {filterButtons.map(({ value, label, variant }) => (
         <Button
           size="sm"
@@ -50,6 +50,6 @@ export function FilterBar({ currentFilter, onChange, isLoading }) {
           {label}
         </Button>
       ))}
-    </ButtonGroup>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
index 0a6e2f1dde..c0aa53e915 100644
--- a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
+++ b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
@@ -244,7 +244,7 @@ function Task(props) {
                 <i data-tip="Tertiary" className="fa fa-star-o" aria-hidden="true" />
               ) : null}
             </td>
-            <td className="desktop-view">
+            <td>
               {props.resources.length
                 ? props.resources
                   .filter((elm, i) => i < 2 || showMoreResources)
@@ -293,7 +293,7 @@ function Task(props) {
                 <i data-tip="Not Assigned" className="fa fa-square-o" aria-hidden="true" />
               )}
             </td>
-            <td className="desktop-view">
+            <td>
               {props.status === 'Started' || props.status === 'Active' ? (
                 <i data-tip="Active" className="fa fa-clock-o" aria-hidden="true" />
               ) : null}
@@ -311,43 +311,39 @@ function Task(props) {
               ) : null}
             </td>
             <td
-              className="desktop-view"
               data-tip={`Hours-Best-case: ${parseFloat(props.hoursBest / 8).toFixed(2)} day(s)`}
             >
               {props.hoursBest}
             </td>
             <td
-              className="desktop-view"
               data-tip={`Hours-Worst-case: ${parseFloat(props.hoursWorst / 8).toFixed(2)} day(s)`}
             >
               {props.hoursWorst}
             </td>
             <td
-              className="desktop-view"
               data-tip={`Hours-Most-case: ${parseFloat(props.hoursMost / 8).toFixed(2)} day(s)`}
             >
               {props.hoursMost}
             </td>
             <td
-              className="desktop-view"
               data-tip={`Estimated Hours: ${parseFloat(props.estimatedHours / 8).toFixed(
                 2,
               )} day(s)`}
             >
               {parseFloat(props.estimatedHours).toFixed(2)}
             </td>
-            <td className="desktop-view">
+            <td>
               {startedDate ? 
                 `${startedDate.toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' })}-${startedDate.getUTCDate().toString().padStart(2, '0')}-${startedDate.getUTCFullYear()}` 
                 : null}
               <br />
             </td>
-            <td className="desktop-view">
+            <td>
               {dueDate ? 
                 `${dueDate.toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' })}-${dueDate.getUTCDate().toString().padStart(2, '0')}-${dueDate.getUTCFullYear()}` 
                 : null}
             </td>
-            <td className="desktop-view">
+            <td>
               {props.links.map((link, i) =>
                 link.length > 1 ? (
                   <a key={i} href={link} target="_blank" data-tip={link} rel="noreferrer">
@@ -356,7 +352,7 @@ function Task(props) {
                 ) : null,
               )}
             </td>
-            <td className="desktop-view" onClick={toggleModal}>
+            <td onClick={toggleModal}>
               <i className="fa fa-book" aria-hidden="true" data-tip="More info" />
             </td>
             <Modal isOpen={modal} toggle={toggleModal} className={darkMode ? 'text-light dark-mode' : ''}>
diff --git a/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx b/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx
index 7ae91026be..a081d32811 100644
--- a/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx
+++ b/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx
@@ -11,7 +11,7 @@ import { fetchAllMembers } from '../../../../actions/projectMembers.js';
 import Task from './Task';
 import AddTaskModal from './AddTask/AddTaskModal';
 import ImportTask from './ImportTask';
-import './wbs.css';
+import styles from './wbs.module.css';
 
 import { useFetchWbsTasks } from './hook';
 import { FilterBar } from './FilterBar';
@@ -126,6 +126,7 @@ function WBSTasks(props) {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            minWidth: '300px',
           }}
         >
           {' '}
@@ -137,7 +138,7 @@ function WBSTasks(props) {
 
   // Extract button group component to reduce complexity
   const renderButtonGroup = () => (
-    <div className="mb-2 wbs-button-group" style={{}}>
+    <div className={`mb-1 ${styles['wbs-button-group']}`} style={{}}>
       {canPostTask && (
         <AddTaskModal
           copiedTask={copiedTask}
@@ -203,49 +204,49 @@ function WBSTasks(props) {
   const renderTableHeader = () => (
     <thead>
       <tr className={darkMode ? 'bg-space-cadet' : ''}>
-        <th scope="col" className="tasks-detail-header tasks-detail-actions" data-tip="Action" colSpan="2">
+        <th scope="col" className={`${styles['tasks-detail-header']} tasks-detail-actions`} data-tip="Action" colSpan="2">
           Action
         </th>
-        <th scope="col" data-tip="WBS ID" colSpan="1" className='tasks-detail-header'>
+        <th scope="col" data-tip="WBS ID" colSpan="1" className={styles['tasks-detail-header']}>
           #
         </th>
-        <th scope="col" data-tip="Task Name" className="tasks-detail-header tasks-detail-task-name task-name">
+        <th scope="col" data-tip="Task Name" className={`${styles['tasks-detail-header']} tasks-detail-task-name ${styles['task-name']}`}>
           Task
         </th>
-        <th scope="col" data-tip="Priority" className='tasks-detail-header'>
+        <th scope="col" data-tip="Priority" className={styles['tasks-detail-header']}>
           <i className="fa fa-star" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Resources">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Resources">
           <i className="fa fa-users" aria-hidden="true" />
         </th>
-        <th scope="col" data-tip="Assigned" className='tasks-detail-header'>
+        <th scope="col" data-tip="Assigned" className={styles['tasks-detail-header']}>
           <i className="fa fa-user-circle-o" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Status">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Status">
           <i className="fa fa-tasks" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Hours-Best">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Hours-Best">
           <i className="fa fa-hourglass-start" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Hours-Worst">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Hours-Worst">
           <i className="fa fa-hourglass" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Hours-Most">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Hours-Most">
           <i className="fa fa-hourglass-half" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Estimated Hours">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Estimated Hours">
           <i className="fa fa-clock-o" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Start Date">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Start Date">
           <i className="fa fa-calendar-check-o" aria-hidden="true" /> Start
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Due Date">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Due Date">
           <i className="fa fa-calendar-times-o" aria-hidden="true" /> End
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Links">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Links">
           <i className="fa fa-link" aria-hidden="true" />
         </th>
-        <th className="tasks-detail-header desktop-view" scope="col" data-tip="Details">
+        <th className={styles['tasks-detail-header']} scope="col" data-tip="Details">
           <i className="fa fa-question" aria-hidden="true" />
         </th>
       </tr>
@@ -255,65 +256,66 @@ function WBSTasks(props) {
   return (
     <div className={darkMode ? 'bg-oxford-blue text-light' : ''} style={{ minHeight: '100%' }}>
       <ReactTooltip delayShow={300} />
-      <div className="container-tasks m-0 p-2">
+      <div className={`${styles['container-tasks']} m-0 p-4`}>
         {renderBreadcrumb()}
         {renderButtonGroup()}
-
-        <table
-          className={`table table-bordered tasks-table ${darkMode ? 'text-light' : ''}`}
-          ref={myRef}
-        >
-          {renderTableHeader()}
-          <tbody>
-            {filterTasks(
-              tasks.filter(task => task.level === 1),
-              filterState,
-            ).map((task, i) => (
-              <Task
-                copyCurrentTask={setCopiedTask}
-                key={`${task._id}${i}`}
-                taskId={task._id}
-                level={task.level}
-                num={task.num}
-                name={task.taskName}
-                priority={task.priority}
-                resources={task.resources}
-                isAssigned={task.isAssigned}
-                status={task.status}
-                hoursBest={task.hoursBest}
-                hoursMost={task.hoursMost}
-                hoursWorst={task.hoursWorst}
-                estimatedHours={task.estimatedHours}
-                startedDatetime={task.startedDatetime}
-                dueDatetime={task.dueDatetime}
-                links={task.links}
-                projectId={projectId}
-                wbsId={wbsId}
-                parentId1={task.parentId1}
-                parentId2={task.parentId2}
-                parentId3={task.parentId3}
-                mother={task.mother}
-                openAll={openAll}
-                deleteWBSTask={deleteWBSTask}
-                hasChildren={task.hasChildren}
-                siblings={levelOneTasks}
-                whyInfo={task.whyInfo}
-                intentInfo={task.intentInfo}
-                endstateInfo={task.endstateInfo}
-                childrenQty={task.childrenQty}
-                filterTasks={filterTasks}
-                filterState={filterState}
-                controllerId={controllerId}
-                setControllerId={setControllerId}
-                tasks={tasks}
-                load={refresh}
-                pageLoadTime={pageLoadTime}
-                setIsLoading={() => {}}
-                darkMode={darkMode}
-              />
-            ))}
-          </tbody>
-        </table>
+        <div className={`${styles['tasks-table']} mb-5`}>
+          <table
+            className={`${styles['table']} table table-bordered ${darkMode ? 'text-light' : ''}`}
+            ref={myRef}
+          >
+            {renderTableHeader()}
+            <tbody>
+              {filterTasks(
+                tasks.filter(task => task.level === 1),
+                filterState,
+              ).map((task, i) => (
+                <Task
+                  copyCurrentTask={setCopiedTask}
+                  key={`${task._id}${i}`}
+                  taskId={task._id}
+                  level={task.level}
+                  num={task.num}
+                  name={task.taskName}
+                  priority={task.priority}
+                  resources={task.resources}
+                  isAssigned={task.isAssigned}
+                  status={task.status}
+                  hoursBest={task.hoursBest}
+                  hoursMost={task.hoursMost}
+                  hoursWorst={task.hoursWorst}
+                  estimatedHours={task.estimatedHours}
+                  startedDatetime={task.startedDatetime}
+                  dueDatetime={task.dueDatetime}
+                  links={task.links}
+                  projectId={projectId}
+                  wbsId={wbsId}
+                  parentId1={task.parentId1}
+                  parentId2={task.parentId2}
+                  parentId3={task.parentId3}
+                  mother={task.mother}
+                  openAll={openAll}
+                  deleteWBSTask={deleteWBSTask}
+                  hasChildren={task.hasChildren}
+                  siblings={levelOneTasks}
+                  whyInfo={task.whyInfo}
+                  intentInfo={task.intentInfo}
+                  endstateInfo={task.endstateInfo}
+                  childrenQty={task.childrenQty}
+                  filterTasks={filterTasks}
+                  filterState={filterState}
+                  controllerId={controllerId}
+                  setControllerId={setControllerId}
+                  tasks={tasks}
+                  load={refresh}
+                  pageLoadTime={pageLoadTime}
+                  setIsLoading={() => {}}
+                  darkMode={darkMode}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Projects/WBS/WBSDetail/wbs.css b/src/components/Projects/WBS/WBSDetail/wbs.module.css
similarity index 90%
rename from src/components/Projects/WBS/WBSDetail/wbs.css
rename to src/components/Projects/WBS/WBSDetail/wbs.module.css
index fac8cbb093..08567fef62 100644
--- a/src/components/Projects/WBS/WBSDetail/wbs.css
+++ b/src/components/Projects/WBS/WBSDetail/wbs.module.css
@@ -1,6 +1,10 @@
 .container-tasks {
   margin: 20px;
-  width: calc(100% - 40px);
+  /* width: calc(100% - 40px); */
+}
+
+.task-name {
+  min-width: 200px;
 }
 
 .level-space-1 {
@@ -82,6 +86,11 @@
   display: contents;
 }
 
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
 .wbsTask {
   line-height: 22px;
 }
@@ -93,12 +102,8 @@
 /* Added controlBtn class to ensure uniform margin between buttons */
 .controlBtn {
   margin-right: 8px; /* Adds margin between buttons */
-}
-
-
-.controlBtn {
   float: left;
-  margin-left: 10px;
+  /* margin-left: 10px; */
 }
 
 
@@ -187,7 +192,7 @@
 }
 
 .tasks-table {
-  overflow-x: scroll;
+  overflow-x: auto;
   width: 100% !important;
 }
 
@@ -211,6 +216,10 @@
   max-width: 4rem;
 }
 
+.hoursLabel {
+  width: 85px;
+}
+
 @media (max-width: 250px) {
   .flex-responsive{
     flex-direction: column;
@@ -285,11 +294,25 @@
   margin-top: 20px;
 }
 
+.wbs-button-group button {
+  margin: 5px;
+}
+
 @media (max-width: 968px) {
   .wbs-button-group {
     align-items: flex-start;
     margin-bottom: 10px;
   }
+
+  .datePicker {
+    font-size: small !important; 
+    --rdp-cell-size: auto !important;
+    width: 100%;
+    overflow: auto;
+  }
+  .datePicker :global(.rdp-cell) {
+    padding: 0px !important;
+  }
 }
 
 .text-dark.end-modal-dt .DayPickerInput{
diff --git a/src/components/Projects/WBS/WBSItem/WBSItem.jsx b/src/components/Projects/WBS/WBSItem/WBSItem.jsx
index 8269024783..9583769f93 100644
--- a/src/components/Projects/WBS/WBSItem/WBSItem.jsx
+++ b/src/components/Projects/WBS/WBSItem/WBSItem.jsx
@@ -34,7 +34,7 @@ const WBSItem = ({ darkMode, index, name, wbsId, projectId, getPopupById, delete
   return (
     <React.Fragment>
       <tr>
-        <th scope="row" style={{ width: '150px', textAlign: 'center' }}>
+        <th scope="row" style={{ maxWidth: '150px', textAlign: 'center' }}>
           {index}
         </th>
         <td style={{ textAlign: 'left' }}>
diff --git a/src/components/Projects/WBS/wbs.jsx b/src/components/Projects/WBS/wbs.jsx
index 6dc5f548fd..ac002ac94f 100644
--- a/src/components/Projects/WBS/wbs.jsx
+++ b/src/components/Projects/WBS/wbs.jsx
@@ -46,32 +46,18 @@ const WBS = props => {
   return (
     <React.Fragment>
       <div className={darkMode ? 'bg-oxford-blue text-light' : ''} style={{minHeight: "100%"}}>
-        <div className={`container pt-2 border rounded ${darkMode ? 'text-light' : ''}`}style={darkMode ? { backgroundColor: '#1B2A41', alignItems: 'normal' } : { alignItems: 'normal' }}>
-          <nav aria-label="breadcrumb">
-            <div className={`d-flex align-items-center breadcrumb ${darkMode ? 'bg-space-cadet' : ''}`} 
-              style={{ 
-                ...darkMode ? boxStyleDark : boxStyle,
-                backgroundColor: darkMode ? '' : '#E9ECEF',
-                margin: '0 0 16px',
-                padding: '12px 16px',
-                position: 'relative'
-              }}>
-              <div style={{ position: 'absolute', left: '1rem' }}>
-                <NavItem tag={Link} to={`/projects/`}>
-                  <button type="button" className="btn btn-secondary" style={darkMode ? boxStyleDark : boxStyle}>
-                    <i className="fa fa-chevron-circle-left" aria-hidden="true"></i>
-                  </button>
-                  <span style={{ marginLeft: '8px' }}>Return to Project List</span>
-                </NavItem>
-              </div>
-              <div style={{ 
-                width: '100%',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                fontSize: '1.0rem'  
-              }}>Proj Name: {projectName}</div>
-            </div>
+        <div className={`container mb-5 pt-2 border rounded ${darkMode ? 'text-light bg-space-cadet' : ''}`}>
+          <nav aria-label="breadcrumb" className='align-items-start w-100'>
+            <NavItem tag={Link} to={`/projects/`}>
+              <button type="button" className="btn btn-secondary" style={darkMode ? boxStyleDark : boxStyle}>
+                <i className="fa fa-chevron-circle-left" aria-hidden="true"></i>
+                <span style={{ marginLeft: '8px' }}>Return to Project List</span>
+              </button>
+            </NavItem>
           </nav>
+          <div className="w-100 text-center font-weight-bold my-3" style={{fontSize: "1.5rem"}}>
+            Proj Name: {projectName}
+          </div>
 
           <AddWBS 
             projectId={projectId} 
@@ -86,10 +72,10 @@ const WBS = props => {
               </div>
             </div>
           ) : (
-            <table className={`table table-bordered table-responsive-sm ${darkMode ? 'bg-yinmn-blue text-light dark-mode' : '' }`}>
+            <table className={`table table-bordered ${darkMode ? 'bg-yinmn-blue text-light dark-mode' : '' }`}>
               <thead>
                 <tr className={darkMode ? 'bg-space-cadet' : ''}>
-                  <th scope="col" style={{ width: '150px', textAlign: 'center'}}>#</th>
+                  <th scope="col" style={{ maxWidth: '150px', textAlign: 'center' }}>#</th>
                   <th scope="col" style={{ textAlign: 'left' }}>
                     Name
                     <span style={{ marginLeft: '8px', cursor: 'pointer' }}>
diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
index dfb4238fe5..6ed49be836 100644
--- a/src/components/TeamMemberTasks/TeamMemberTask.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -372,13 +372,15 @@ const TeamMemberTask = React.memo(
                               }}
                             >{`${user.name}`}</Link>
 
-                            {user.role !== 'Volunteer' && (
+                            {user.role !== 'Volunteer' ? (
                               <div
                                 className="user-role"
                                 style={{ fontSize: '14px', color: darkMode ? 'lightgray' : 'gray' }}
                               >
                                 {user.role}
                               </div>
+                            ) : (
+                              <div></div>
                             )}
 
                             <div
@@ -506,8 +508,6 @@ const TeamMemberTask = React.memo(
                                           data-testid={`${task.taskName}`}
                                           style={{ color: darkMode ? '#339CFF' : undefined }}
                                         >
-                                          {/* <span>aaaaaaaa aaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaaaaaaa aaa aaaaaa aaaa aaaaaaa aaaaaaaa aaaaaaaa aaaaaa aa bb</span> */}
-
                                           <span>{`${task.num} ${task.taskName}`} </span>
                                         </Link>
                                         <CopyToClipboard
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index e6f01ca0ee..4acfa84893 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -498,7 +498,7 @@ const TeamMemberTasks = React.memo(props => {
   return (
     <div
       data-testid="team-member-tasks-container"
-      className={`container ${styles['team-member-tasks']} ${
+      className={`container p-0 ${styles['team-member-tasks']} ${
         darkMode ? ' bg-space-cadet border-left border-right border-secondary' : ''
       }`}
     >
@@ -649,10 +649,12 @@ const TeamMemberTasks = React.memo(props => {
       )}
       <div className={styles['task_table-container']}>
         <Table
-          className={`task-table ${darkMode ? 'dark-teammember-row' : 'light-teammember-row'}`}
+          className={`${styles['task-table']} ${
+            darkMode ? styles['dark-teammember-row'] : styles['light-teammember-row']
+          }`}
         >
           <thead
-            className={`pc-component ${darkMode ? 'bg-space-cadet' : ''}`}
+            className={`${styles['pc-component']} ${darkMode ? 'bg-space-cadet' : ''}`}
             style={{ position: 'sticky', top: 0 }}
           >
             <tr>
diff --git a/src/components/TeamMemberTasks/style.module.css b/src/components/TeamMemberTasks/style.module.css
index 475b0bf4aa..efc16bd720 100644
--- a/src/components/TeamMemberTasks/style.module.css
+++ b/src/components/TeamMemberTasks/style.module.css
@@ -26,9 +26,8 @@
 }
 
 .task_table-container {
-  overflow-x: auto;
-  overflow-y: hidden;
-  max-width: 100%;
+  overflow: auto;
+  position: relative;
 }
 
 .task_table-container table {
@@ -489,7 +488,7 @@
   max-height: none !important; 
   overflow: visible !important;
   text-align: left;
-  width: 150px;
+  /* min-width: 150px; */
 }
 
 .team-task-progress-container {
@@ -524,15 +523,16 @@
 }
 
 .team-task-progress-bar {
-  width: 60%;              
+  /* width: 60%;              
   max-width: 180px;       
-  min-width: 100px;        
+  min-width: 100px;         */
   align-self: flex-start;  
   margin-top: 4px;         
   height: 10px;
   border-radius: 4px;
 }
 
+
 .hours-btn-div {
   display: flex;
   flex-direction: row;
@@ -671,9 +671,12 @@
     max-width: none;
   }
 
-  .task-table {
+  .task_table-container{
     max-height: 900px;
   }
+  .header-box {
+    flex-direction: column;
+  }
 }
 
 @media only screen and (max-width: 768px) {
@@ -702,15 +705,15 @@
   }
 
   .team-member-tasks .table,
-  .team-member-tasks .table tbody,
-  .team-member-tasks .table tr,
-  .team-member-tasks .table td {
+  .team-member-tasks tbody,
+  .team-member-tasks tr,
+  .team-member-tasks td {
     display: block;
     width: 100%;
     text-align: left !important;
   }
 
-  .team-member-tasks .table td::before {
+  .team-member-tasks td::before {
     content: attr(data-label);
     font-size: 17px;
     font-weight: 500;
diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
index 4e85808efd..5bd962dd5c 100644
--- a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
+++ b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
@@ -104,10 +104,10 @@ function TimeEntryForm(props) {
                       subscript superscript charmap  | help',
     branding: false,
     toolbar_mode: 'sliding',
-    min_height: 180,
+    min_height: 250,
     max_height: 300,
     autoresize_bottom_margin: 1,
-    content_style: 'body { cursor: text !important; }',
+    content_style: 'body { cursor: text !important; } .mce-content-body[data-mce-placeholder]:focus::before {content: "";}',
     images_upload_handler: customImageUploadHandler,
     skin: darkMode ? 'oxide-dark' : 'oxide',
     content_css: darkMode ? 'dark' : 'default',
@@ -241,6 +241,7 @@ function TimeEntryForm(props) {
   };
 
   const handleEditorChange = (content, editor) => {
+    editor.focus();
     const { wordcount } = editor.plugins;
     const regexFilter = /https:\/\/(?!(www\.)?localhost|(www\.)?dropbox\.com(?!\/scl\/)|(www\.)?[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*$/gim;
     const hasLink = regexFilter.test(content);
diff --git a/src/components/Timelog/Timelog.jsx b/src/components/Timelog/Timelog.jsx
index 916a19c37c..6915c134f5 100644
--- a/src/components/Timelog/Timelog.jsx
+++ b/src/components/Timelog/Timelog.jsx
@@ -765,7 +765,7 @@ const generateAllTimeEntryItems = () => {
 
 return (
   <div
-    className={`${timeLog['container-timelog-wrapper']} ${darkMode ? `bg-oxford-blue ${timeLog['bg-oxford-blue']}` : ''}`}
+    className={`mb-5 ${timeLog['container-timelog-wrapper']} ${darkMode ? `bg-oxford-blue ${timeLog['bg-oxford-blue']}` : ''}`}
     style={darkMode ? (!props.isDashboard ? { padding: "0 15px 300px 15px" } : {}) : {}}
   >
 
@@ -780,7 +780,7 @@ return (
           <br />
         </Container>
       ) : (
-        <Container style={{ textAlign: 'right', minWidth: '100%' }}>
+        <Container style={{ textAlign: 'right'}}>
           {props.isDashboard ? null : (
             <EditableInfoModal
               areaName="DashboardTimelog"
diff --git a/src/components/WeeklySummary/WeeklySummary.jsx b/src/components/WeeklySummary/WeeklySummary.jsx
index 9fe2f8a555..df05600d24 100644
--- a/src/components/WeeklySummary/WeeklySummary.jsx
+++ b/src/components/WeeklySummary/WeeklySummary.jsx
@@ -767,10 +767,11 @@ export class WeeklySummary extends Component {
       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,
+      min_height: 250,
       max_height: 500,
       autoresize_bottom_margin: 1,
-      content_style: 'body { font-size: 14px; }',
+      content_style:
+        'body { font-size: 14px; } .mce-content-body[data-mce-placeholder]:focus::before {content: "";}',
       images_upload_handler: customImageUploadHandler,
       skin: darkMode ? 'oxide-dark' : 'oxide',
       content_css: darkMode ? 'dark' : 'default',