diff --git a/src/components/KitchenandInventory/KIHeader/KIHeader.jsx b/src/components/KitchenandInventory/KIHeader/KIHeader.jsx
index 2f36f24e93..4fa8aa8de2 100644
--- a/src/components/KitchenandInventory/KIHeader/KIHeader.jsx
+++ b/src/components/KitchenandInventory/KIHeader/KIHeader.jsx
@@ -14,7 +14,7 @@ import {
   DropdownMenu,
   DropdownItem,
 } from 'reactstrap';
-import DarkModeButton from '~/components/Header/DarkModeButton';
+import DarkModeButton from '../../Header/DarkModeButton';
 import { fetchTaskEditSuggestions } from '~/components/TaskEditSuggestions/thunks';
 import BellNotification from '~/components/Header/BellNotification';
 import { getHeaderData } from '../../../actions/authActions';
diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index 2a42f8209c..b18a563976 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -5,6 +5,26 @@ import './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
+function TaskModalTrigger({ value, windowWidth, renderMobileFilteredTask, renderFilteredTask }) {
+  return (
+    <>
+      {windowWidth <= 1020 ? renderMobileFilteredTask(value) : renderFilteredTask(value)}
+    </>
+  );
+}
+
+function TaskModalContent({ whyInfo, intentInfo, endstateInfo }) {
+  return (
+    <>
+      <div>Why This Task is important</div>
+      <textarea className="rectangle" type="text" value={whyInfo} readOnly />
+      <div>Design Intent</div>
+      <textarea className="rectangle" type="text" value={intentInfo} readOnly />
+      <div>End State</div>
+      <textarea className="rectangle" type="text" value={endstateInfo} readOnly />
+    </>
+  );
+}
 
 function PeopleTableDetails(props) {
   const [name, setName] = useState('');
@@ -165,12 +185,12 @@ function PeopleTableDetails(props) {
             </div>
             <div className='task-info'>
               <div className='sub-head'>Resources</div>
-              <div>{value.resources?.map(res =>
-                res.map((resource, index) => {
-                  if (index < 2) {
+              <div>{value.resources?.map((res, outerIndex) =>
+                res.map((resource, innerIndex) => {
+                  if (innerIndex < 2) {
                     return (
                       <img
-                        key={`${value._id}-${resource.name}`}
+                        key={`${outerIndex}-${innerIndex}`}
                         alt={resource.name}
                         src={resource.profilePic || '/pfp-default.png'}
                         className="img-circle"
@@ -215,12 +235,12 @@ function PeopleTableDetails(props) {
         <div>{value.priority}</div>
         <div>{value.status}</div>
         <div>
-          {value.resources?.map(res =>
-            res.map((resource, index) => {
-              if (index < 2) {
+          {value.resources?.map((res, outerIndex) =>
+            res.map((resource, innerIndex) => {
+              if (innerIndex < 2) {
                 return (
                   <img
-                    key={`${value._id}-${resource.name}`}
+                    key={`${outerIndex}-${innerIndex}`}
                     alt={resource.name}
                     src={resource.profilePic || '/pfp-default.png'}
                     className="img-circle"
@@ -231,10 +251,10 @@ function PeopleTableDetails(props) {
               return null;
             }),
           )}
-          {value.resources?.map((res) =>
+          {value.resources?.map((res, outerIndex) =>
             res.length > 2 ? (
               <button
-                key={res[0]?.name || res[0]?.id}
+                key={`button-${outerIndex}`}
                 type="button"
                 className="name resourceMoreToggle"
                 onClick={() => toggleMoreResources(value._id)}
@@ -245,21 +265,19 @@ function PeopleTableDetails(props) {
           )}
           <div id={value._id} className="extra">
             <div className="extra1">
-              {value.resources?.map(res =>
+              {value.resources?.map((res, outerIndex) =>
                 // eslint-disable-next-line array-callback-return,consistent-return
-                res.map((resource, index) => {
-                  if (index >= 2) {
-                    return (
-                      <img
-                        key={resource.index}
-                        alt={resource.name}
-                        src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
-                        title={resource.name}
-                      />
-                    );
-                  }
-                }),
+                res
+                .filter((_, index) => index >= 2)
+                .map((resource, innerIndex) => (
+                  <img
+                    key={`${outerIndex}-${innerIndex}`}
+                    alt={resource.name}
+                    src={resource.profilePic || '/pfp-default.png'}
+                    className="img-circle"
+                    title={resource.name}
+                  />
+                )),
               )}
             </div>
           </div>
@@ -323,36 +341,41 @@ function PeopleTableDetails(props) {
           Clear Filters
         </button>
       </div>
-      {windowWidth > 1020 ? (
-        <>
-          <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
-            <div data-testid="task">Task</div>
-            <div data-testid="priority">Priority</div>
-            <div data-testid="status">Status</div>
-            <div data-testid="resources" className="people-table-center-cell">Resources</div>
-            <div data-testid="active" className="people-table-center-cell">Active</div>
-            <div data-testid="assign" className="people-table-center-cell">Assign</div>
-            <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
-            <div data-testid="sd" className="people-table-end-cell">Start Date</div>
-            <div data-testid="ed" className="people-table-end-cell">End Date</div>
-          </div>
-          <div className="people-table people-table-scrollable">
-            {filteredTasks.map(value => (
-              <NewModal key={value._id} header="Task info" trigger={() => renderFilteredTask(value)} darkMode={darkMode}>
-                {renderModalContent(value)}
-              </NewModal>
-            ))}
-          </div>
-        </>
-      ) : (
-        <div className="people-table">
-          {filteredTasks.map(value => (
-            <NewModal key={value._id} header="Task info" trigger={() => renderMobileFilteredTask(value)} darkMode={darkMode}>
-              {renderModalContent(value)}
-            </NewModal>
-          ))}
-        </div>
-      )}
+      <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div data-testid="task">Task</div>
+        <div data-testid="priority">Priority</div>
+        <div data-testid="status">Status</div>
+        <div data-testid="resources" className="people-table-center-cell">Resources</div>
+        <div data-testid="active" className="people-table-center-cell">Active</div>
+        <div data-testid="assign" className="people-table-center-cell">Assign</div>
+        <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
+        <div data-testid="sd" className="people-table-end-cell">Start Date</div>
+        <div data-testid="ed" className="people-table-end-cell">End Date</div>
+      </div>
+      <div className="people-table">
+        {filteredTasks.map(value => (
+
+          // eslint-disable-next-line react/no-unstable-nested-components
+          <NewModal
+            key={value._id}
+            header="Task info"
+            trigger={
+              <TaskModalTrigger
+                value={value}
+                windowWidth={windowWidth}
+                renderMobileFilteredTask={renderMobileFilteredTask}
+                renderFilteredTask={renderFilteredTask}
+              />
+            }
+          >
+            <TaskModalContent
+              whyInfo={value.whyInfo}
+              intentInfo={value.intentInfo}
+              endstateInfo={value.endstateInfo}
+            />
+          </NewModal>
+        ))}
+      </div>
     </Container>
   );
 }