diff --git a/src/components/Reports/LostTime/AddLostTime.jsx b/src/components/Reports/LostTime/AddLostTime.jsx
index aac0879ace..95be9eba94 100644
--- a/src/components/Reports/LostTime/AddLostTime.jsx
+++ b/src/components/Reports/LostTime/AddLostTime.jsx
@@ -3,7 +3,7 @@ import { useDispatch, connect, useSelector } from 'react-redux';
 import MemberAutoComplete from '~/components/Teams/MembersAutoComplete';
 import AddProjectsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddProjectsAutoComplete';
 import AddTeamsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddTeamsAutoComplete';
-import "../reportsPage.css";
+import '../index.css';
 import { Editor } from '@tinymce/tinymce-react';
 import moment from 'moment-timezone';
 import { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index 2a42f8209c..2d7af8b3c0 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import 'reactjs-popup/dist/index.css';
 import { Container } from 'reactstrap';
-import './PeopleTableDetails.module.css';
+import styles from './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
@@ -145,61 +145,61 @@ function PeopleTableDetails(props) {
 
   const renderMobileFilteredTask = (value) => {
     return (
-      <div className={`task-card ${darkMode ? 'text-dark' : ''}`}>
+      <div className={`${styles['task-card']} ${darkMode ? styles['text-dark'] : ''}`}>
         <div key={value._id} >
-          <div className='task-header'>
+          <div className={styles['task-header']}>
             <div>
-              <div className='task-title people-report-task-name task-name-word-break'>
+              <div className={`${styles['task-title']} ${styles['people-report-task-name']} ${styles['task-name-word-break']}`}>
                 {value.taskName}
               </div>  
             </div>
             
-            <div className='task-status'>
+            <div className={styles['task-status']}>
               {value.status}
             </div>
           </div>
-          <div className='task-details'>
-            <div className='task-info'>
-              <div className='sub-head'>Priority</div>
-              <div className='sub-details'>{value.priority}</div>
+          <div className={styles['task-details']}>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Priority</div>
+              <div className={styles['sub-details']}>{value.priority}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Resources</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Resources</div>
               <div>{value.resources?.map(res =>
                 res.map((resource, index) => {
                   if (index < 2) {
                     return (
-                      <img
-                        key={`${value._id}-${resource.name}`}
-                        alt={resource.name}
-                        src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
-                        title={resource.name}
-                      />
-                    );
-                  }
-                  return null;
-                }),
-              )}</div>
+                    <img
+                      key={`${value._id}-${resource.name}`}
+                      alt={resource.name}
+                      src={resource.profilePic || '/pfp-default.png'}
+                      className={styles['img-circle']}
+                      title={resource.name}
+                    />
+                  );
+                }
+                return null;
+              }),
+            )}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Active</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Active</div>
               <div>{value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Assign</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Assign</div>
               <div>{value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Estimated Hours</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Estimated Hours</div>
               <div>{value.estimatedHours}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Start Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Start Date</div>
               <div>{value.startDate}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>End Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>End Date</div>
               <div>{value.endDate}</div>
             </div>
           </div>
@@ -210,8 +210,8 @@ function PeopleTableDetails(props) {
 
   const renderFilteredTask = value => (
     <div>
-      <div key={value._id} className={`people-table-row people-table-body-row ${darkMode ? 'people-table-row-dark' : ''}`}>
-        <div className='people-report-task-name'>{value.taskName}</div>
+      <div key={value._id} className={`${styles['people-table-row']} ${styles['people-table-body-row']} ${darkMode ? styles['people-table-row-dark'] : ''}`}>
+        <div className={styles['people-report-task-name']}>{value.taskName}</div>
         <div>{value.priority}</div>
         <div>{value.status}</div>
         <div>
@@ -223,7 +223,7 @@ function PeopleTableDetails(props) {
                     key={`${value._id}-${resource.name}`}
                     alt={resource.name}
                     src={resource.profilePic || '/pfp-default.png'}
-                    className="img-circle"
+                    className={styles['img-circle']}
                     title={resource.name}
                   />
                 );
@@ -236,15 +236,15 @@ function PeopleTableDetails(props) {
               <button
                 key={res[0]?.name || res[0]?.id}
                 type="button"
-                className="name resourceMoreToggle"
+                className={`${styles.name} ${styles.resourceMoreToggle}`}
                 onClick={() => toggleMoreResources(value._id)}
               >
-                <span className="dot">{res.length - 2}+</span>
+                <span className={styles.dot}>{res.length - 2}+</span>
               </button>
             ) : null,
           )}
-          <div id={value._id} className="extra">
-            <div className="extra1">
+          <div id={value._id} className={styles.extra}>
+            <div className={styles.extra1}>
               {value.resources?.map(res =>
                 // eslint-disable-next-line array-callback-return,consistent-return
                 res.map((resource, index) => {
@@ -254,7 +254,7 @@ function PeopleTableDetails(props) {
                         key={resource.index}
                         alt={resource.name}
                         src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
+                        className={styles['img-circle']}
                         title={resource.name}
                       />
                     );
@@ -265,15 +265,15 @@ function PeopleTableDetails(props) {
           </div>
         </div>
 
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-end-cell">{value.estimatedHours}</div>
-        <div className="people-table-end-cell">{value.startDate}</div>
-        <div className="people-table-end-cell">{value.endDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.estimatedHours}</div>
+        <div className={styles['people-table-end-cell']}>{value.startDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.endDate}</div>
       </div>
     </div>
   );
@@ -285,17 +285,17 @@ function PeopleTableDetails(props) {
   const renderModalContent = (value) => (
     <div>
       <div>Why This Task is important</div>
-      <textarea className="rectangle" type="text" value={value.whyInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.whyInfo} />
       <div>Design Intent</div>
-      <textarea className="rectangle" type="text" value={value.intentInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.intentInfo} />
       <div>End State</div>
-      <textarea className="rectangle" type="text" value={value.endstateInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.endstateInfo} />
     </div>
   )
 
   return (
-    <Container fluid className={`wrapper ${darkMode ? 'text-light' : ''}`}>
-      <div className="table-filter-container">
+    <Container fluid className={`${styles.wrapper} ${darkMode ? styles['text-light'] : ''}`}>
+      <div className={styles['table-filter-container']}>
         <TableFilter
           onTaskNameSearch={onTaskNameSearch}
           searchPriority={searchPriority}
@@ -318,25 +318,26 @@ function PeopleTableDetails(props) {
           UpdateStartDate={updateStartDate}
           EndDate={endDate}
           UpdateEndDate={updateEndDate}
+          darkMode={darkMode}
         />
-        <button type="button" onClick={resetFilters} className="tasks-table-clear-filter-button">
+        <button type="button" onClick={resetFilters} className={styles['tasks-table-clear-filter-button']}>
           Clear Filters
         </button>
       </div>
       {windowWidth > 1020 ? (
         <>
-          <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
+          <div className={`${styles['people-table-row']} ${styles['reports-table-head']} ${darkMode ? styles['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 data-testid="resources" className={styles['people-table-center-cell']}>Resources</div>
+            <div data-testid="active" className={styles['people-table-center-cell']}>Active</div>
+            <div data-testid="assign" className={styles['people-table-center-cell']}>Assign</div>
+            <div data-testid="eh" className={styles['people-table-end-cell']}>Estimated Hours</div>
+            <div data-testid="sd" className={styles['people-table-end-cell']}>Start Date</div>
+            <div data-testid="ed" className={styles['people-table-end-cell']}>End Date</div>
           </div>
-          <div className="people-table people-table-scrollable">
+          <div className={`${styles['people-table']} ${styles['people-table-scrollable']}`}>
             {filteredTasks.map(value => (
               <NewModal key={value._id} header="Task info" trigger={() => renderFilteredTask(value)} darkMode={darkMode}>
                 {renderModalContent(value)}
@@ -345,7 +346,7 @@ function PeopleTableDetails(props) {
           </div>
         </>
       ) : (
-        <div className="people-table">
+        <div className={styles['people-table']}>
           {filteredTasks.map(value => (
             <NewModal key={value._id} header="Task info" trigger={() => renderMobileFilteredTask(value)} darkMode={darkMode}>
               {renderModalContent(value)}
diff --git a/src/components/Reports/PeopleTableDetails.module.css b/src/components/Reports/PeopleTableDetails.module.css
index 3c4de00aef..eb87211788 100644
--- a/src/components/Reports/PeopleTableDetails.module.css
+++ b/src/components/Reports/PeopleTableDetails.module.css
@@ -7,8 +7,8 @@
 
 .reports-table-head {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   overflow: hidden;
@@ -23,18 +23,18 @@
 
 .people-table-row {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   min-height: 42px;
-  padding: 0 16px;
+  padding: 8px 16px;
   cursor: pointer;
   border-bottom: 3px solid #f8f7f8;
   width: 100%;
 }
 
-.reports-table-head,
+.reports-table-head > div,
 .people-table-row > div {
   padding: 8px;
   text-align: left;
@@ -43,6 +43,18 @@
   font-size: 16px;
   word-wrap: break-word;
   white-space: normal;
+  overflow: hidden;
+}
+
+/* Profile picture styling */
+.people-table-row .img-circle {
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  object-fit: cover;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
 }
 
 .people-table-row:hover {
@@ -218,6 +230,24 @@
   height: 30px;
   cursor: pointer;
   margin-left: auto;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.tasks-table-clear-filter-button:hover {
+  background-color: #fef5ff;
+  border-color: #ca50db;
+}
+
+/* Dark mode styling for Clear Filters button */
+.text-light .tasks-table-clear-filter-button {
+  background-color: #232946 !important;
+  border: 2px solid #5A67D8 !important;
+  color: #fff !important;
+}
+
+.text-light .tasks-table-clear-filter-button:hover {
+  background-color: #1C2541 !important;
+  border-color: #ca50db !important;
 }
 
 .people-report-task-name {
diff --git a/src/components/Reports/ReportTableSearchPanel.jsx b/src/components/Reports/ReportTableSearchPanel.jsx
index 760e31c1c2..9b145abbee 100644
--- a/src/components/Reports/ReportTableSearchPanel.jsx
+++ b/src/components/Reports/ReportTableSearchPanel.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { SEARCH } from '../../languages/en/ui';
-import './reportsPage.css';
+import './index.css';
 
 /**
  * The search panel stateless component for Report grid
diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index 8aafe509a6..06cbc18efc 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -5,6 +5,7 @@
 import moment from 'moment-timezone';
 import { Component } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
+import './index.css';
 import { connect } from 'react-redux';
 import { Button, Container } from 'reactstrap';
 import EditableInfoModal from '~/components/UserProfile/EditableModal/EditableInfoModal';
@@ -25,7 +26,7 @@ import LostTimeHistory from './LostTime/LostTimeHistory';
 import PeopleTable from './PeopleTable';
 import ProjectTable from './ProjectTable';
 import ReportFilter from './ReportFilter/ReportFilter';
-import './reportsPage.css';
+import './reportsPage.module.css';
 import TeamTable from './TeamTable';
 import TotalContributorsReport from './TotalReport/TotalContributorsReport';
 import TotalPeopleReport from './TotalReport/TotalPeopleReport';
@@ -564,7 +565,7 @@ endDate: moment()
               </div>
             </h2>
             <div>
-              <p >Select a Category</p>
+              <p>Select a Category</p>
             </div>
             <div className='report-container-data'>
               <div className='data-container' style={this.state.showCharts ? {width: '50%'} : {width: '100%'}}>
diff --git a/src/components/Reports/TableFilter/TableFilter.jsx b/src/components/Reports/TableFilter/TableFilter.jsx
index c9abf62e88..5517e88be9 100644
--- a/src/components/Reports/TableFilter/TableFilter.jsx
+++ b/src/components/Reports/TableFilter/TableFilter.jsx
@@ -41,6 +41,7 @@ function TableFilter({
   EndDate,
   UpdateStartDate,
   UpdateEndDate,
+  darkMode,
 }) {
   const taskPriority = ['Primary', 'Secondary', 'Tertiary'];
   const taskStatus = ['Paused', 'Complete', 'Active'];
@@ -118,6 +119,7 @@ function TableFilter({
         id="active"
         wrapperClassname="table-filter-item"
         label="Active"
+        darkMode={darkMode}
       />
       <Checkbox
         value={taskAssign}
@@ -128,6 +130,7 @@ function TableFilter({
         id="assign"
         wrapperClassname="table-filter-item"
         label="Assign"
+        darkMode={darkMode}
       />
     </div>
   );
diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index 27e7655861..2d98003cbe 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -193,13 +193,14 @@ describe('PeopleTableDetails component', () => {
     render(<PeopleTableDetails taskData={tasks} />);
 
     const allButtons = screen.getAllByRole('button');
+    // Find the button by its content (the "1+" text indicating more resources)
     const toggleButton = allButtons.find(button =>
-      button.classList.contains('resourceMoreToggle')
+      button.textContent.includes('+')
     );
     expect(toggleButton).toBeInTheDocument();
 
     // eslint-disable-next-line testing-library/no-node-access
-    const extraDiv = toggleButton.parentElement.querySelector('.extra');
+    const extraDiv = document.getElementById(tasks[0]._id);
     expect(extraDiv).toBeInTheDocument();
 
     fireEvent.click(toggleButton);
diff --git a/src/components/Reports/reportsPage.css b/src/components/Reports/index.css
similarity index 96%
rename from src/components/Reports/reportsPage.css
rename to src/components/Reports/index.css
index 1ba1b54ae1..007977a083 100644
--- a/src/components/Reports/reportsPage.css
+++ b/src/components/Reports/index.css
@@ -19,6 +19,11 @@
   overflow-x: hidden;
 }
 
+/* Dark mode: Reports page background */
+.container-component-wrapper.bg-oxford-blue {
+  background-color: #1b2a41;
+}
+
 .data-container {
   width: 50%;
 }
@@ -33,6 +38,11 @@
   padding: 0 16px;
 }
 
+/* Dark mode: category section background */
+.category-data-container.bg-oxford-blue {
+  background-color: #1b2a41;
+}
+
 @media screen and (max-width: 1200px) {
   .category-data-container {
     grid-template-columns: 1fr;
diff --git a/src/components/Reports/reportsPage.module.css b/src/components/Reports/reportsPage.module.css
new file mode 100644
index 0000000000..eb60882a59
--- /dev/null
+++ b/src/components/Reports/reportsPage.module.css
@@ -0,0 +1,379 @@
+:global {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .red-asterisk {
+    color: #e00000;
+  }
+
+  .container-component-wrapper {
+    min-height: 100%;
+    width: 100%;
+    display: grid;
+    justify-content: center;
+    align-content: start;
+    background-color: #faf7fc;
+    margin: 0px;
+    justify-items: center;
+    overflow-x: hidden;
+  }
+
+  .data-container {
+    width: 50%;
+  }
+
+  .category-data-container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-content: flex-start;
+    background-color: #faf7fc;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+
+  .no-active-selection {
+    grid-template-columns: 1fr !important;
+  }
+
+  .container-component-category {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 16px 16px;
+    padding: 32px;
+  }
+
+  .category-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    gap: 10px;
+  }
+
+  .card-category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 30%;
+    padding: 24px;
+    border: 0;
+    background-color: #f1ebf7;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 8px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    transform-origin: center center;
+  }
+
+  .report-container-data {
+    display: flex;
+    gap: 10px;
+  }
+
+  .category-container > .card-category-item.selected {
+    background-color: #d7cdda;
+    box-shadow: 0px 8px 16px rgba(78, 32, 125, 0.2);
+    transform: scale(1.03);
+    position: relative;
+    z-index: 1;
+  }
+
+  .category-container > .card-category-item.bg-yinmn-blue.selected {
+    background-color: #4a6a8a;
+    box-shadow: 0px 8px 16px rgba(58, 80, 107, 0.4);
+  }
+
+  .category-container > .card-category-item.bg-yinmn-blue.selected .card-category-item-title,
+  .category-container > .card-category-item.bg-yinmn-blue.selected .card-category-item-number {
+    color: #fff;
+  }
+
+  .card-category-item:focus-visible {
+    outline: none;
+  }
+
+  .card-category-item img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+  }
+
+  .card-category-item-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .card-category-item-number {
+    font-size: 32px;
+    font-weight: 700;
+    margin: 12px 0;
+  }
+
+  .text-light {
+    color: white;
+  }
+
+  .table-data-container {
+    width: 50%;
+    max-width: 600px;
+    height: 1250px;
+    position: sticky;
+    top: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .search-field-container {
+    max-width: 100%;
+  }
+
+  .date-picker-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 8px 0px 8px 0px;
+    gap: 4%;
+  }
+
+  .date-picker-item {
+    display: flex;
+    width: 30%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+
+  .date-picker-label {
+    text-align: left;
+    margin: 8px 0;
+  }
+
+  :root {
+    --spacing-unit: 0.5rem;
+  }
+
+  .total-report-container,
+  .lost-time-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    gap: var(--spacing-unit);
+    margin: var(--spacing-unit) 0;
+    padding: 0;
+  }
+
+  .total-report-item,
+  .lost-time-item {
+    flex: 0 0 calc(50% - var(--spacing-unit));
+    min-width: 200px;
+    max-width: 240px;
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--spacing-unit);
+  }
+
+  .total-report-item button,
+  .lost-time-item button {
+    width: 100%;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    padding: 0.5rem;
+  }
+
+  .info-icon-wrapper {
+    margin-left: 6px;
+    flex-shrink: 0;
+  }
+
+  .total-report-container:last-child,
+  .lost-time-container:last-child {
+    margin-bottom: 0;
+  }
+
+  .type-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .type-item {
+    padding-left: 30px;
+  }
+
+  .loading-spinner-top {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .bg-yinmn-blue .info-modal-content {
+    color: #fff !important;
+  }
+
+  .force-white-text,
+  .bg-yinmn-blue .force-white-text,
+  .bg-yinmn-blue .info-modal-content.force-white-text {
+    color: #fff !important;
+  }
+
+  .bg-yinmn-blue .info-modal-content.force-white-text,
+  .bg-yinmn-blue .info-modal-content.force-white-text * {
+    color: #fff !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  :global {
+    .category-data-container {
+      grid-template-columns: 1fr;
+    }
+
+    .table-data-container {
+      max-width: 720px;
+      margin: 0 auto;
+    }
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .category-data-container {
+      width: 100%;
+      padding: 0;
+    }
+
+    .container-component-category {
+      padding: 16px;
+    }
+
+    .category-container {
+      margin-top: 20px;
+      justify-content: center;
+    }
+
+    .card-category-item {
+      width: 30%;
+      min-width: 120px;
+      max-width: 200px;
+      padding: 16px;
+      margin: 8px;
+    }
+
+    .card-category-item img {
+      width: 72px;
+      height: 72px;
+    }
+
+    .card-category-item-number {
+      font-size: 24px;
+      font-weight: 700;
+      margin: 8px 0;
+    }
+
+    .table-data-container {
+      padding: 16px;
+      width: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .table-data-container {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .table-data-container::-webkit-scrollbar {
+      display: none;
+    }
+
+    .category-container {
+      flex-wrap: wrap;
+    }
+
+    .card-category-item {
+      width: 30%;
+      min-width: 120px;
+      margin: 0;
+    }
+
+    .total-report-container,
+    .lost-time-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      gap: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .category-data-container {
+      grid-template-columns: 1fr;
+    }
+
+    .container-component-category {
+      width: 100%;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      border-radius: 0 0 16px 16px;
+      padding: 16px;
+    }
+
+    .table-data-container {
+      width: 100%;
+    }
+
+    .data-container {
+      width: 100% !important;
+    }
+
+    .report-container-data {
+      flex-direction: column;
+    }
+
+    .card-category-item {
+      width: 30%;
+      max-width: none;
+    }
+
+    .card-category-item img {
+      width: 72px;
+      height: 72px;
+    }
+
+    .category-container {
+      flex-wrap: wrap;
+    }
+
+    .card-category-item-number {
+      font-size: 24px;
+      font-weight: 700;
+      margin: 8px 0;
+    }
+  }
+}
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
deleted file mode 100644
index fef69d623e..0000000000
--- a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.report-header {
-  min-height: 25vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.report-header-details {
-  width: 100%;
-  text-align: center;
-}
-
-.report-header-profile-pic {
-  width: 6rem;
-  height: 6rem;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #a780d9;
-  border: 3px solid #e5daf0;
-}
-
-.report-header-profile-pic svg {
-  width: 50px;
-  height: 50px;
-  color: #faf7fd;
-}
-
-.report-header-profile-pic-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.report-header-entity-name {
-  font-weight: 400;
-  font-size: 1.3rem;
-  margin: 1rem 0;
-}
-
-.report-header-activity {
-  position: absolute;
-  right: -6px;
-  bottom: -1px;
-  width: 20px;
-  height: 20px;
-  background-color: #c6c6c6;
-  border-radius: 50%;
-  border: 2px solid white;
-}
-
-.report-header-activity.active {
-  background-color: #2affa1;
-}
-
-/* DARK MODE */
-.report-header-profile-pic-dark {
-  width: 6rem;
-  height: 6rem;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #5b0ac6;
-  border: 3px solid #a45bed;
-}
-
-.report-header-profile-pic-dark svg {
-  width: 50px;
-  height: 50px;
-  color: #c489ff;
-}
-
-.report-header-activity-dark {
-  position: absolute;
-  right: -6px;
-  bottom: -1px;
-  width: 20px;
-  height: 20px;
-  background-color: #3A506B;
-  border-radius: 50%;
-  border: 2px solid rgb(40, 39, 39);
-}
-
-.report-header-activity-dark.active {
-  background-color: #2affa1;
-}
-.report-header-entity-other-info{
-  font-size: 15px;
-}
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
index 37b6ddab2a..03d45cb8a4 100644
--- a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
+++ b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { ReportBlock } from '../ReportBlock';
-import './ReportHeader.css';
+import './ReportHeader.module.css';
 
 export function ReportHeader({
   children,
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css
new file mode 100644
index 0000000000..d80114fe6b
--- /dev/null
+++ b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css
@@ -0,0 +1,95 @@
+:global {
+  .report-header {
+    min-height: 25vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .report-header-details {
+    width: 100%;
+    text-align: center;
+  }
+
+  .report-header-profile-pic {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #a780d9;
+    border: 3px solid #e5daf0;
+  }
+
+  .report-header-profile-pic svg {
+    width: 50px;
+    height: 50px;
+    color: #faf7fd;
+  }
+
+  .report-header-profile-pic-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .report-header-entity-name {
+    font-weight: 400;
+    font-size: 1.3rem;
+    margin: 1rem 0;
+  }
+
+  .report-header-activity {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: #c6c6c6;
+    border-radius: 50%;
+    border: 2px solid white;
+  }
+
+  .report-header-activity.active {
+    background-color: #2affa1;
+  }
+
+  /* DARK MODE */
+  .report-header-profile-pic-dark {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #5b0ac6;
+    border: 3px solid #a45bed;
+  }
+
+  .report-header-profile-pic-dark svg {
+    width: 50px;
+    height: 50px;
+    color: #c489ff;
+  }
+
+  .report-header-activity-dark {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: #3A506B;
+    border-radius: 50%;
+    border: 2px solid rgb(40, 39, 39);
+  }
+
+  .report-header-activity-dark.active {
+    background-color: #2affa1;
+  }
+
+  .report-header-entity-other-info {
+    font-size: 15px;
+  }
+}
diff --git a/src/components/common/Checkbox/Checkbox.jsx b/src/components/common/Checkbox/Checkbox.jsx
index 0b4ec544a2..34f9811780 100644
--- a/src/components/common/Checkbox/Checkbox.jsx
+++ b/src/components/common/Checkbox/Checkbox.jsx
@@ -9,11 +9,14 @@ export const Checkbox = ({
   wrapperClassname,
   backgroundColorCN,
   textColorCN,
+  darkMode,
 }) => {
   return (
     <div
       data-testid="checkbox-wrapper"
-      className={`${styles.checkboxWrapper} ${wrapperClassname} ${backgroundColorCN}`}
+      className={`${
+        darkMode ? styles.checkboxWrapperDark : styles.checkboxWrapper
+      } ${wrapperClassname || ''} ${backgroundColorCN || ''}`}
     >
       <input
         className={`${styles.checkboxInput}`}
@@ -23,7 +26,12 @@ export const Checkbox = ({
         checked={value}
         onChange={onChange}
       />
-      <label className={`${styles.checkboxLabel} ${textColorCN}`} htmlFor={id}>
+      <label
+        className={`${styles.checkboxLabel} ${
+          darkMode ? styles.checkboxLabelDark : ''
+        } ${textColorCN || ''}`}
+        htmlFor={id}
+      >
         {label}
       </label>
     </div>
diff --git a/src/components/common/Checkbox/Checkbox.module.css b/src/components/common/Checkbox/Checkbox.module.css
index ec7f333d74..81a09f6f36 100644
--- a/src/components/common/Checkbox/Checkbox.module.css
+++ b/src/components/common/Checkbox/Checkbox.module.css
@@ -2,6 +2,10 @@
   background-color: #f8f7f8;
 }
 
+.checkboxWrapperDark {
+  background-color: #2c2c2c;
+}
+
 .checkboxInput {
   width: 16px;
   height: 16px;
@@ -12,3 +16,7 @@
   margin: 0 4px;
   cursor: pointer;
 }
+
+.checkboxLabelDark {
+  color: #fff;
+}