diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index de9f54967c..a40ff10ef8 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -19,10 +19,6 @@
   font-size: medium;
 }
 
-.card {
-  margin-left: 35px;
-  margin-right: 50px;
-}
 
 .card-wrapper {
   padding-top: 1rem;
diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css
index 8077dfa23c..5256153cbf 100644
--- a/src/components/LeaderBoard/Leaderboard.css
+++ b/src/components/LeaderBoard/Leaderboard.css
@@ -1,5 +1,6 @@
 .leaderboard {
   font-size: 1rem;
+  min-width: 500px;
 } /*1rem = 16px*/
 
 .my-custom-scrollbar {
@@ -15,7 +16,8 @@
   border-top-color: rgb(222, 226, 230);
 }
 
-.leaderboard tbody tr td, thead tr th {
+.leaderboard tbody tr td,
+.leaderboard thead tr th {
   text-align: left !important;
 }
 
@@ -47,6 +49,8 @@
 }
 
 
+
+
 /* Small devices (landscape phones, 544px and up) */
 @media (max-width: 544px) {
   .leaderboard {
@@ -55,8 +59,8 @@
 
   .my-custom-scrollbar {
     max-height: 500px;
-    overflow: scroll;
-    margin-bottom: 1rem;
+    overflow: auto;
+    margin-bottom: 50px;
   }
 
   .leaderboard thead th {
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 0148dec99e..d2b1a0e544 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -530,7 +530,7 @@ function LeaderBoard({
               </div>
             </Alert>
           )}
-          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+          <div id="leaderboard">
             <div className="search-container mx-1">
               <input
                 className={`form-control col-12 mb-2 ${
@@ -542,330 +542,338 @@ function LeaderBoard({
                 onChange={handleSearch}
               />
             </div>
-            <Table
-              className={`leaderboard table-fixed ${
-                darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
-              } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
-            >
-              <thead className="responsive-font-size">
-                <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
-                  <th style={darkModeStyle}>
-                    <span>{isAbbreviatedView ? 'Stat.' : 'Status'}</span>
-                  </th>
-                  <th style={darkModeStyle}>
-                    <div className="d-flex align-items-center">
-                      <span>{isAbbreviatedView ? 'Name' : 'Name'}</span>
-                      <EditableInfoModal
-                        areaName="Leaderboard"
-                        areaTitle="Team Members Navigation"
-                        role={loggedInUser.role}
-                        fontSize={18}
-                        isPermissionPage
-                        darkMode={darkMode}
-                        className="p-2"
-                      />
-                    </div>
-                  </th>
-                  <th style={darkModeStyle}>
-                    <span>{isAbbreviatedView ? 'Days Lft.' : 'Days Left'}</span>
-                  </th>
-                  <th style={darkModeStyle}>
-                    <span>{isAbbreviatedView ? 'Time Off' : 'Time Off'}</span>
-                  </th>
-                  <th style={darkModeStyle}>
-                    <span>{isAbbreviatedView ? 'Tan. Time' : 'Tangible Time'}</span>
-                  </th>
-                  <th style={darkModeStyle}>
-                    <span>{isAbbreviatedView ? 'Prog.' : 'Progress'}</span>
-                  </th>
-
-                  <th
-                    style={
-                      darkMode
-                        ? { backgroundColor: '#3a506b', color: 'white', textAlign: 'right' }
-                        : { backgroundColor: '#f0f8ff', color: 'black', textAlign: 'right' }
-                    }
-                  >
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <div style={{ textAlign: 'left' }}>
-                        <span>{isAbbreviatedView ? 'Tot. Time' : 'Total Time'}</span>
+            <div className="my-custom-scrollbar">
+              <Table
+                className={`leaderboard table-fixed ${
+                  darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
+                } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
+              >
+                <thead className="responsive-font-size">
+                  <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
+                    <th style={darkModeStyle}>
+                      <span>{isAbbreviatedView ? 'Stat.' : 'Status'}</span>
+                    </th>
+                    <th style={darkModeStyle}>
+                      <div className="d-flex align-items-center">
+                        <span>{isAbbreviatedView ? 'Name' : 'Name'}</span>
+                        <EditableInfoModal
+                          areaName="Leaderboard"
+                          areaTitle="Team Members Navigation"
+                          role={loggedInUser.role}
+                          fontSize={18}
+                          isPermissionPage
+                          darkMode={darkMode}
+                          className="p-2"
+                        />
                       </div>
-                      {isOwner && (
-                        <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
-                      )}
-                    </div>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="my-custome-scrollbar responsive-font-size">
-                <tr className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}>
-                  <td aria-label="Placeholder" />
-                  <td className={`leaderboard-totals-container `}>
-                    <span>{stateOrganizationData.name}</span>
-                    {viewZeroHouraMembers(loggedInUser.role) && (
-                      <span className="leaderboard-totals-title">
-                        0 hrs Totals:{' '}
-                        {filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '}
-                        Members
-                      </span>
-                    )}
-                  </td>
-                  <td className="align-middle" aria-label="Description" />
-                  <td className="align-middle">
-                    <span title="Tangible time">
-                      {filteredUsers
-                        .reduce((total, user) => total + user.tangibletime, 0)
-                        .toFixed(2)}
-                    </span>
-                  </td>
-                  <td className="align-middle" aria-label="Description">
-                    <Progress
-                      title={`TangibleEffort: ${filteredUsers
-                        .reduce((total, user) => total + user.tangibletime, 0)
-                        .toFixed(2)} hours`}
-                      value={
-                        (filteredUsers.reduce((total, user) => total + user.tangibletime, 0) /
-                          filteredUsers.reduce(
-                            (total, user) => total + user.weeklycommittedHours,
-                            0,
-                          )) *
-                        100
+                    </th>
+                    <th style={darkModeStyle}>
+                      <span>{isAbbreviatedView ? 'Days Lft.' : 'Days Left'}</span>
+                    </th>
+                    <th style={darkModeStyle}>
+                      <span>{isAbbreviatedView ? 'Time Off' : 'Time Off'}</span>
+                    </th>
+                    <th style={darkModeStyle}>
+                      <span>{isAbbreviatedView ? 'Tan. Time' : 'Tangible Time'}</span>
+                    </th>
+                    <th style={darkModeStyle}>
+                      <span>{isAbbreviatedView ? 'Prog.' : 'Progress'}</span>
+                    </th>
+
+                    <th
+                      style={
+                        darkMode
+                          ? { backgroundColor: '#3a506b', color: 'white', textAlign: 'right' }
+                          : { backgroundColor: '#f0f8ff', color: 'black', textAlign: 'right' }
                       }
-                      color="primary"
-                    />
-                  </td>
-                  <td className="align-middle">
-                    <span title="Tangible + Intangible time = Total time">
-                      {filteredUsers
-                        .reduce((total, user) => total + parseFloat(user.totaltime), 0)
-                        .toFixed(2)}{' '}
-                      of{' '}
-                      {filteredUsers.reduce((total, user) => total + user.weeklycommittedHours, 0)}
-                    </span>
-                  </td>
-                  <td aria-label="Placeholder" />
-                </tr>
-                {filteredUsers.map(item => {
-                  const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus(
-                    item.personId,
-                  );
-
-                  return (
-                    <tr
-                      key={item.personId}
-                      className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}
                     >
-                      <td className="align-middle">
-                        <div>
-                          <Modal
-                            isOpen={isDashboardOpen === item.personId}
-                            toggle={dashboardToggle}
-                            className={darkMode ? 'text-light dark-mode' : ''}
-                            style={darkMode ? boxStyleDark : {}}
-                          >
-                            <ModalHeader
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div style={{ textAlign: 'left' }}>
+                          <span>{isAbbreviatedView ? 'Tot. Time' : 'Total Time'}</span>
+                        </div>
+                        {isOwner && (
+                          <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
+                        )}
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="my-custome-scrollbar responsive-font-size">
+                  <tr className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}>
+                    <td aria-label="Placeholder" />
+                    <td className={`leaderboard-totals-container `}>
+                      <span>{stateOrganizationData.name}</span>
+                      {viewZeroHouraMembers(loggedInUser.role) && (
+                        <span className="leaderboard-totals-title">
+                          0 hrs Totals:{' '}
+                          {filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '}
+                          Members
+                        </span>
+                      )}
+                    </td>
+                    <td className="align-middle" aria-label="Description" />
+                    <td className="align-middle">
+                      <span title="Tangible time">
+                        {filteredUsers
+                          .reduce((total, user) => total + user.tangibletime, 0)
+                          .toFixed(2)}
+                      </span>
+                    </td>
+                    <td className="align-middle" aria-label="Description">
+                      <Progress
+                        title={`TangibleEffort: ${filteredUsers
+                          .reduce((total, user) => total + user.tangibletime, 0)
+                          .toFixed(2)} hours`}
+                        value={
+                          (filteredUsers.reduce((total, user) => total + user.tangibletime, 0) /
+                            filteredUsers.reduce(
+                              (total, user) => total + user.weeklycommittedHours,
+                              0,
+                            )) *
+                          100
+                        }
+                        color="primary"
+                      />
+                    </td>
+                    <td className="align-middle">
+                      <span title="Tangible + Intangible time = Total time">
+                        {filteredUsers
+                          .reduce((total, user) => total + parseFloat(user.totaltime), 0)
+                          .toFixed(2)}{' '}
+                        of{' '}
+                        {filteredUsers.reduce(
+                          (total, user) => total + user.weeklycommittedHours,
+                          0,
+                        )}
+                      </span>
+                    </td>
+                    <td aria-label="Placeholder" />
+                  </tr>
+                  {filteredUsers.map(item => {
+                    const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus(
+                      item.personId,
+                    );
+
+                    return (
+                      <tr
+                        key={item.personId}
+                        className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}
+                      >
+                        <td className="align-middle">
+                          <div>
+                            <Modal
+                              isOpen={isDashboardOpen === item.personId}
                               toggle={dashboardToggle}
-                              className={darkMode ? 'bg-space-cadet' : ''}
+                              className={darkMode ? 'text-light dark-mode' : ''}
+                              style={darkMode ? boxStyleDark : {}}
                             >
-                              Jump to personal Dashboard
-                            </ModalHeader>
-                            <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
-                              <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                            </ModalBody>
-                            <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
-                              <Button variant="primary" onClick={() => showDashboard(item)}>
-                                Ok
-                              </Button>{' '}
-                              <Button variant="secondary" onClick={dashboardToggle}>
-                                Cancel
-                              </Button>
-                            </ModalFooter>
-                          </Modal>
-                        </div>
-                        <div
-                          style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: hasSummaryIndicatorPermission
-                              ? 'space-between'
-                              : 'center',
-                          }}
-                        >
-                          {/* <Link to={`/dashboard/${item.personId}`}> */}
+                              <ModalHeader
+                                toggle={dashboardToggle}
+                                className={darkMode ? 'bg-space-cadet' : ''}
+                              >
+                                Jump to personal Dashboard
+                              </ModalHeader>
+                              <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+                                <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                              </ModalBody>
+                              <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+                                <Button variant="primary" onClick={() => showDashboard(item)}>
+                                  Ok
+                                </Button>{' '}
+                                <Button variant="secondary" onClick={dashboardToggle}>
+                                  Cancel
+                                </Button>
+                              </ModalFooter>
+                            </Modal>
+                          </div>
                           <div
-                            role="button"
-                            tabIndex={0}
-                            onClick={() => {
-                              dashboardToggle(item);
-                            }}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter') {
-                                dashboardToggle(item);
-                              }
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: hasSummaryIndicatorPermission
+                                ? 'space-between'
+                                : 'center',
                             }}
                           >
-                            {hasLeaderboardPermissions(item.role) &&
-                            showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                              <i
-                                className="fa fa-star"
-                                title={`Weekly Committed: ${item.weeklycommittedHours} hours ${
-                                  item.role === 'Core Team' && item.missedHours > 0
-                                    ? `\n Additional make-up hours this week: ${item.missedHours}`
-                                    : ''
-                                } \n Click to view their Dashboard`}
-                                style={{
-                                  color: assignStarDotColors(
-                                    item.tangibletime,
-                                    item.weeklycommittedHours + item.missedHours,
-                                  ),
-                                  fontSize: '20px',
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  justifyContent: 'center',
-                                }}
-                              />
-                            ) : (
+                            {/* <Link to={`/dashboard/${item.personId}`}> */}
+                            <div
+                              role="button"
+                              tabIndex={0}
+                              onClick={() => {
+                                dashboardToggle(item);
+                              }}
+                              onKeyDown={e => {
+                                if (e.key === 'Enter') {
+                                  dashboardToggle(item);
+                                }
+                              }}
+                            >
+                              {hasLeaderboardPermissions(item.role) &&
+                              showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                                <i
+                                  className="fa fa-star"
+                                  title={`Weekly Committed: ${item.weeklycommittedHours} hours ${
+                                    item.role === 'Core Team' && item.missedHours > 0
+                                      ? `\n Additional make-up hours this week: ${item.missedHours}`
+                                      : ''
+                                  } \n Click to view their Dashboard`}
+                                  style={{
+                                    color: assignStarDotColors(
+                                      item.tangibletime,
+                                      item.weeklycommittedHours + item.missedHours,
+                                    ),
+                                    fontSize: '20px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                  }}
+                                />
+                              ) : (
+                                <div
+                                  title={`Weekly Committed: ${item.weeklycommittedHours} hours ${
+                                    item.role === 'Core Team' && item.missedHours > 0
+                                      ? `\n Additional make-up hours this week: ${item.missedHours}`
+                                      : ''
+                                  } \n Click to view their Dashboard`}
+                                  style={{
+                                    backgroundColor:
+                                      item.tangibletime >=
+                                      item.weeklycommittedHours + item.missedHours
+                                        ? '#32CD32'
+                                        : 'red',
+                                    width: 15,
+                                    height: 15,
+                                    borderRadius: 7.5,
+                                    margin: 'auto',
+                                    verticalAlign: 'middle',
+                                  }}
+                                />
+                              )}
+                            </div>
+                            {hasSummaryIndicatorPermission && item.hasSummary && (
                               <div
-                                title={`Weekly Committed: ${item.weeklycommittedHours} hours ${
-                                  item.role === 'Core Team' && item.missedHours > 0
-                                    ? `\n Additional make-up hours this week: ${item.missedHours}`
-                                    : ''
-                                } \n Click to view their Dashboard`}
+                                title="Weekly Summary Submitted"
                                 style={{
-                                  backgroundColor:
-                                    item.tangibletime >=
-                                    item.weeklycommittedHours + item.missedHours
-                                      ? '#32CD32'
-                                      : 'red',
-                                  width: 15,
-                                  height: 15,
-                                  borderRadius: 7.5,
-                                  margin: 'auto',
-                                  verticalAlign: 'middle',
+                                  color: '#32a518',
+                                  cursor: 'default',
                                 }}
-                              />
+                              >
+                                <strong>✓</strong>
+                              </div>
                             )}
                           </div>
-                          {hasSummaryIndicatorPermission && item.hasSummary && (
-                            <div
-                              title="Weekly Summary Submitted"
+                          {/* </Link> */}
+                        </td>
+                        <td className="align-middle">
+                          <Link
+                            to={`/userprofile/${item.personId}`}
+                            title="View Profile"
+                            style={{
+                              color: isCurrentlyOff
+                                ? 'rgba(128, 128, 128, 0.5)' // Gray out the name if on time off
+                                : '#007BFF', // Default color
+                            }}
+                          >
+                            {item.name}
+                          </Link>
+                          &nbsp;&nbsp;&nbsp;
+                          {hasVisibilityIconPermission && !item.isVisible && (
+                            <i className="fa fa-eye-slash" title="User is invisible" />
+                          )}
+                          {hasTimeOffIndicatorPermission && additionalWeeks > 0 && (
+                            <span
                               style={{
-                                color: '#32a518',
-                                cursor: 'default',
+                                marginLeft: '20px',
+                                color: '#17a2b8',
+                                fontSize: '15px',
+                                justifyItems: 'center',
                               }}
                             >
-                              <strong>✓</strong>
-                            </div>
+                              {isCurrentlyOff ? `+${additionalWeeks}` : additionalWeeks}
+                              <i
+                                className="fa fa-info-circle"
+                                style={{ marginLeft: '5px', cursor: 'pointer' }}
+                                data-tip={
+                                  isCurrentlyOff
+                                    ? `${additionalWeeks} additional weeks off`
+                                    : `${additionalWeeks} weeks until next time off`
+                                }
+                              />
+                              <ReactTooltip place="top" type="dark" effect="solid" />
+                            </span>
                           )}
-                        </div>
-                        {/* </Link> */}
-                      </td>
-                      <td className="align-middle">
-                        <Link
-                          to={`/userprofile/${item.personId}`}
-                          title="View Profile"
-                          style={{
-                            color: isCurrentlyOff
-                              ? 'rgba(128, 128, 128, 0.5)' // Gray out the name if on time off
-                              : '#007BFF', // Default color
-                          }}
-                        >
-                          {item.name}
-                        </Link>
-                        &nbsp;&nbsp;&nbsp;
-                        {hasVisibilityIconPermission && !item.isVisible && (
-                          <i className="fa fa-eye-slash" title="User is invisible" />
-                        )}
-                        {hasTimeOffIndicatorPermission && additionalWeeks > 0 && (
-                          <span
+                        </td>
+                        <td className="align-middle">
+                          <span title={mouseoverTextValue} id="Days left" style={{ color: 'red' }}>
+                            {displayDaysLeft(item.endDate)}
+                          </span>
+                        </td>
+                        <td className="align-middle">
+                          <div
                             style={{
-                              marginLeft: '20px',
-                              color: '#17a2b8',
-                              fontSize: '15px',
-                              justifyItems: 'center',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
                             }}
                           >
-                            {isCurrentlyOff ? `+${additionalWeeks}` : additionalWeeks}
-                            <i
-                              className="fa fa-info-circle"
-                              style={{ marginLeft: '5px', cursor: 'pointer' }}
-                              data-tip={
-                                isCurrentlyOff
-                                  ? `${additionalWeeks} additional weeks off`
-                                  : `${additionalWeeks} weeks until next time off`
-                              }
-                            />
-                            <ReactTooltip place="top" type="dark" effect="solid" />
-                          </span>
-                        )}
-                      </td>
-                      <td className="align-middle">
-                        <span title={mouseoverTextValue} id="Days left" style={{ color: 'red' }}>
-                          {displayDaysLeft(item.endDate)}
-                        </span>
-                      </td>
-                      <td className="align-middle">
-                        <div
-                          style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        >
-                          {hasTimeOff && (
-                            <button
-                              type="button"
-                              onClick={() => {
-                                const data = {
-                                  requests: [...allRequests[item.personId]],
-                                  name: item.name,
-                                  leaderboard: true,
-                                };
-                                handleTimeOffModalOpen(data);
-                              }}
-                              style={{ width: '35px', height: 'auto' }}
-                              aria-label="View Time Off Requests"
-                            >
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="22"
-                                height="19"
-                                viewBox="0 0 448 512"
-                                className="show-time-off-calender-svg"
+                            {hasTimeOff && (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const data = {
+                                    requests: [...allRequests[item.personId]],
+                                    name: item.name,
+                                    leaderboard: true,
+                                  };
+                                  handleTimeOffModalOpen(data);
+                                }}
+                                style={{ width: '35px', height: 'auto' }}
+                                aria-label="View Time Off Requests"
                               >
-                                <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-                              </svg>
-                            </button>
-                          )}
-                        </div>
-                      </td>
-                      <td className="align-middle" id={`id${item.personId}`}>
-                        <span title="Tangible time">{item.tangibletime}</span>
-                      </td>
-                      <td className="align-middle" aria-label="Description or purpose of the cell">
-                        <Link
-                          to={`/timelog/${item.personId}`}
-                          title={`TangibleEffort: ${item.tangibletime} hours`}
-                        >
-                          <Progress value={item.barprogress} color={item.barcolor} />
-                        </Link>
-                      </td>
-                      <td className="align-middle">
-                        <span
-                          title={mouseoverTextValue}
-                          id="Total time"
-                          className={
-                            item.totalintangibletime_hrs > 0 ? 'leaderboard-totals-title' : null
-                          }
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="22"
+                                  height="19"
+                                  viewBox="0 0 448 512"
+                                  className="show-time-off-calender-svg"
+                                >
+                                  <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                                </svg>
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                        <td className="align-middle" id={`id${item.personId}`}>
+                          <span title="Tangible time">{item.tangibletime}</span>
+                        </td>
+                        <td
+                          className="align-middle"
+                          aria-label="Description or purpose of the cell"
                         >
-                          {item.totaltime}
-                        </span>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </Table>
+                          <Link
+                            to={`/timelog/${item.personId}`}
+                            title={`TangibleEffort: ${item.tangibletime} hours`}
+                          >
+                            <Progress value={item.barprogress} color={item.barcolor} />
+                          </Link>
+                        </td>
+                        <td className="align-middle">
+                          <span
+                            title={mouseoverTextValue}
+                            id="Total time"
+                            className={
+                              item.totalintangibletime_hrs > 0 ? 'leaderboard-totals-title' : null
+                            }
+                          >
+                            {item.totaltime}
+                          </span>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </Table>
+            </div>
           </div>
         </div>
       ) : (
diff --git a/src/components/Projects/AddProject/AddProject.jsx b/src/components/Projects/AddProject/AddProject.jsx
index a1babce1a9..84def92f3f 100644
--- a/src/components/Projects/AddProject/AddProject.jsx
+++ b/src/components/Projects/AddProject/AddProject.jsx
@@ -154,6 +154,7 @@ const AddProject = (props) => {
           borderColor: 'green',
           color: 'green',
           borderWidth: '1px',
+          marginBottom: '10px'
         }}
       >
         <i className="fa fa-plus" aria-hidden="true"></i> Add New Project
diff --git a/src/components/Projects/Overview/Overview.css b/src/components/Projects/Overview/Overview.css
index 49723e7512..4f5e0d3461 100644
--- a/src/components/Projects/Overview/Overview.css
+++ b/src/components/Projects/Overview/Overview.css
@@ -7,7 +7,7 @@
     border-radius: 8px;
     height: 40px;
     width: 300px;
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
   }
   
@@ -20,7 +20,7 @@
     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 71922ce3a3..3bd08286ba 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects/Projects.jsx
@@ -220,9 +220,9 @@ const Projects = function(props) {
   return (
     <>
       <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
-        <div className={`container py-3 ${darkMode ? 'bg-yinmn-blue-light text-light' : ''}`}>
+        <div className={`container py-3 mb-5 ${darkMode ? 'bg-yinmn-blue-light text-light' : ''}`}>
           {fetching || !fetched ? <Loading align="center" /> : null}
-          <div className="d-flex 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"
diff --git a/src/components/Projects/WBS/SingleTask/SingleTask.js b/src/components/Projects/WBS/SingleTask/SingleTask.js
index 672c767924..132b54cc05 100644
--- a/src/components/Projects/WBS/SingleTask/SingleTask.js
+++ b/src/components/Projects/WBS/SingleTask/SingleTask.js
@@ -88,168 +88,167 @@ function SingleTask(props) {
             </ol>
           </nav>
         )}
+        <div className='tasks-table'>
+          <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" className="task-name">
+                  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">
+                  <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}
+                  />
+                  {user.role === 'Volunteer' ? (
+                      ''
+                    ) : (
+                      <>
+                        <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"
+                              >
+                                <img className="img-circle" src={elem.profilePic} />
+                              </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>
+                            );
 
-        <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}
-                />
-                {user.role === 'Volunteer' ? (
-                    ''
-                  ) : (
-                    <>
-                      <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 ?'
-                        }
-                        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}`}
-                              data-tip={elem.name}
-                              className="name"
-                              href={`/userprofile/${elem.userID}`}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              <img className="img-circle" src={elem.profilePic} />
-                            </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>{task.links}</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 5419449fb8..cfc4a23c3d 100644
--- a/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/AddTask/AddTaskModal.jsx
@@ -34,7 +34,7 @@ function AddTaskModal(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',
diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
index ad16ec09af..4ab7590add 100644
--- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
@@ -82,7 +82,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',
@@ -751,18 +751,18 @@ function EditTaskModal(props) {
       {
         canUpdateTask &&
         <Button className="mr-2 controlBtn" color="primary" size="sm" onClick={e => handleModalShow("Edit")} style={darkMode ? boxStyleDark : boxStyle}>
-        Edit
+          Edit
         </Button>
       }
       {
         canSuggestTask &&
-        <Button className="mr-2 controlBtn" color="primary" size="sm" onClick={e => handleModalShow("Suggest")} style={darkMode ? boxStyleDark : boxStyle}>
-        Suggest
+        <Button className="controlBtn" color="primary" size="sm" onClick={e => handleModalShow("Suggest")} style={darkMode ? boxStyleDark : boxStyle}>
+          Suggest
         </Button>
       }
       {
         !canUpdateTask && !canSuggestTask &&
-        <Button className="mr-2 controlBtn" color="primary" size="sm" onClick={e => handleModalShow("View")} style={darkMode ? boxStyleDark : boxStyle}>
+        <Button className="controlBtn" color="primary" size="sm" onClick={e => handleModalShow("View")} style={darkMode ? boxStyleDark : boxStyle}>
         View
         </Button>
       }
diff --git a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
index ca8d285a38..6e2de70bb9 100644
--- a/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
+++ b/src/components/Projects/WBS/WBSDetail/Task/Task.jsx
@@ -236,7 +236,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)
@@ -283,7 +283,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}
@@ -301,39 +301,35 @@ 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.getFullYear() !== 1969 ? formatDate(startedDate) : null}
               <br />
             </td>
-            <td className="desktop-view">
+            <td>
               {dueDate.getFullYear() !== 1969 ? formatDate(dueDate) : 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">
@@ -342,7 +338,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 8d0cf04ca9..dcd6782c86 100644
--- a/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx
+++ b/src/components/Projects/WBS/WBSDetail/WBSTasks.jsx
@@ -191,7 +191,7 @@ function WBSTasks(props) {
               <span style={{ marginLeft: '1px' }}>Return to WBS List: {projectName}</span>
             </NavItem>
             <div id="member_project__name" style={{ flex: '1', textAlign: 'center', fontWeight: 'bold', display: 'flex',
-              alignItems: 'center', justifyContent: 'center', }}> WBS Name: {wbsName}</div>
+              alignItems: 'center', justifyContent: 'center', minWidth: '300px'}}> WBS Name: {wbsName}</div>
           </ol>
         </nav>
         <div
@@ -315,104 +315,106 @@ function WBSTasks(props) {
           {/* </span> */}
         </div>
 
-        <table className={`table table-bordered tasks-table ${darkMode ? 'text-light' : ''}`} ref={myRef}>
-          <thead>
-            <tr className={darkMode ? 'bg-space-cadet' : ''}>
-              <th scope="col" className="tasks-detail-actions" data-tip="Action" colSpan="2">
-                Action
-              </th>
-              <th scope="col" data-tip="WBS ID" colSpan="1">
-                #
-              </th>
-              <th scope="col" data-tip="Task Name" className="tasks-detail-task-name task-name">
-                Task
-              </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="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>
-            {/* <tr className="taskDrop">   // Drag and drop functionality is deserted for now
-              <td colSpan={14} />
-            </tr> */}
-            {fetched && levelOneTasks.map((task, i) => (
-              <Task
-                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}
-                load={load}
-                pageLoadTime={pageLoadTime}
-                setIsLoading={setIsLoading}
-                darkMode={darkMode}
-              />
-            ))}
-          </tbody>
-        </table>
+        <div className='tasks-table mb-5'>
+          <table className={`table table-bordered ${darkMode ? 'text-light' : ''}`} ref={myRef}>
+            <thead>
+              <tr className={darkMode ? 'bg-space-cadet' : ''}>
+                <th scope="col" className="tasks-detail-actions" data-tip="Action" colSpan="2">
+                  Action
+                </th>
+                <th scope="col" data-tip="WBS ID" colSpan="1">
+                  #
+                </th>
+                <th scope="col" data-tip="Task Name" className="tasks-detail-task-name task-name">
+                  Task
+                </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="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>
+              {/* <tr className="taskDrop">   // Drag and drop functionality is deserted for now
+                <td colSpan={14} />
+              </tr> */}
+              {fetched && levelOneTasks.map((task, i) => (
+                <Task
+                  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}
+                  load={load}
+                  pageLoadTime={pageLoadTime}
+                  setIsLoading={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.css
index 989df37e74..ac738b74ad 100644
--- a/src/components/Projects/WBS/WBSDetail/wbs.css
+++ b/src/components/Projects/WBS/WBSDetail/wbs.css
@@ -3,6 +3,10 @@
   width: calc(100% - 40px);
 }
 
+.task-name {
+  min-width: 200px;
+}
+
 .level-space-1 {
   margin-left: 0px;
 }
@@ -93,12 +97,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 +187,7 @@
 }
 
 .tasks-table {
-  overflow-x: scroll;
+  overflow-x: auto;
   width: 100% !important;
 }
 
diff --git a/src/components/Projects/WBS/WBSItem/WBSItem.jsx b/src/components/Projects/WBS/WBSItem/WBSItem.jsx
index 49ef4c0d6d..06134ec9ff 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 eec0e6e7e3..325821ac86 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 ${darkMode ? 'bg-yinmn-blue-light text-light' : ''}`}>
-          <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>
-                    <span style={{ marginLeft: '8px' }}>Return to Project List</span>
-                  </button>
-                </NavItem>
-              </div>
-              <div style={{ 
-                width: '100%',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                fontSize: '1.5rem'  
-              }}>{projectName}</div>
-            </div>
+        <div className={`container mb-5 pt-2 ${darkMode ? 'bg-yinmn-blue-light text-light' : ''}`}>
+          <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"}}>
+            {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' }}>#</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/FollowupCheckButton.jsx b/src/components/TeamMemberTasks/FollowupCheckButton.jsx
index 3daf48f5d0..75f4a48ad5 100644
--- a/src/components/TeamMemberTasks/FollowupCheckButton.jsx
+++ b/src/components/TeamMemberTasks/FollowupCheckButton.jsx
@@ -73,7 +73,7 @@ const FollowupCheckButton = ({ moseoverText, user, task }) => {
       <input
         type="checkbox"
         title={moseoverText}
-        className={`team-task-progress-follow-up ${
+        className={`team-task-progress-follow-up mx-2 ${
           needFollowUp ? 'team-task-progress-follow-up-red' : ''
         }`}
         checked={isChecked && !needFollowUp}
diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
index d9dfec4a10..d5a2271739 100644
--- a/src/components/TeamMemberTasks/TeamMemberTask.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -462,14 +462,14 @@ const TeamMemberTask = React.memo(
                                         )} of ${parseFloat(task.estimatedHours.toFixed(2))}`}
                                       </span>
                                       {canSeeFollowUpCheckButton && (
-                                        <>
+                                        <div>
                                           <FollowupCheckButton
                                             moseoverText={followUpMouseoverText(task)}
                                             user={user}
                                             task={task}
                                           />
                                           <FollowUpInfoModal />
-                                        </>
+                                        </div>
                                       )}
                                       <Progress
                                         color={getProgressColor(
diff --git a/src/components/TeamMemberTasks/style.css b/src/components/TeamMemberTasks/style.css
index f97ccff260..6d2410e236 100644
--- a/src/components/TeamMemberTasks/style.css
+++ b/src/components/TeamMemberTasks/style.css
@@ -9,7 +9,7 @@
 }
 
 .task_table-container {
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
 
@@ -389,10 +389,6 @@
   margin-top: 5px;
 }
 
-.task_table-container {
-  width: 100%;
-  overflow-y: hidden;
-}
 
 .hours-btn-div {
   display: flex;
diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
index 677b20b7cb..d8f2269595 100644
--- a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
+++ b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
@@ -101,10 +101,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',
@@ -234,6 +234,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.css b/src/components/Timelog/Timelog.css
index 805a579023..f6219ebc69 100644
--- a/src/components/Timelog/Timelog.css
+++ b/src/components/Timelog/Timelog.css
@@ -121,6 +121,9 @@
     padding: 0 8%;
     margin-left: 15px;
   }
+  .container-timelog-wrapper {
+    margin-bottom: 50px;
+  }
 }
 
 @media screen and (max-width: 575px) and (min-width: 399px) {
diff --git a/src/components/Timelog/Timelog.jsx b/src/components/Timelog/Timelog.jsx
index 9f225feb5d..8b1204c1fb 100644
--- a/src/components/Timelog/Timelog.jsx
+++ b/src/components/Timelog/Timelog.jsx
@@ -583,7 +583,7 @@ useEffect(() => {
           <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 9ec5cd8663..899f2d0a15 100644
--- a/src/components/WeeklySummary/WeeklySummary.jsx
+++ b/src/components/WeeklySummary/WeeklySummary.jsx
@@ -686,10 +686,10 @@ 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',