diff --git a/src/actions/bmdashboard/issueChartActions.js b/src/actions/bmdashboard/issueChartActions.js
index 12f8b4ad4f8..6a0f34a503a 100644
--- a/src/actions/bmdashboard/issueChartActions.js
+++ b/src/actions/bmdashboard/issueChartActions.js
@@ -53,10 +53,8 @@ const formatFilters = ({ projectIds, startDate, endDate } = {}) => {
   ) {
     formatted.projectIds = Array.isArray(projectIds) ? projectIds.join(',') : projectIds.trim();
   }
-  if (startDate !== undefined && startDate !== '') {
+  if (startDate !== undefined && startDate !== '' && endDate !== undefined && endDate !== '') {
     formatted.startDate = startDate;
-  }
-  if (endDate !== undefined && endDate !== '') {
     formatted.endDate = endDate;
   }
   return formatted;
@@ -69,7 +67,7 @@ export const fetchLongestOpenIssues = filters => async dispatch => {
     const response = await axios.get(ENDPOINTS.BM_LONGEST_OPEN_ISSUES, {
       params: formattedFilters,
     });
-    dispatch({ type: FETCH_LONGEST_OPEN_ISSUES_SUCCESS, payload: response.data });
+    dispatch({ type: FETCH_LONGEST_OPEN_ISSUES_SUCCESS, payload: response.data.data });
   } catch (error) {
     dispatch({
       type: FETCH_LONGEST_OPEN_ISSUES_FAILURE,
@@ -85,7 +83,7 @@ export const fetchMostExpensiveIssues = filters => async dispatch => {
     const response = await axios.get(ENDPOINTS.BM_MOST_EXPENSIVE_ISSUES, {
       params: formattedFilters,
     });
-    dispatch({ type: FETCH_MOST_EXPENSIVE_ISSUES_SUCCESS, payload: response.data });
+    dispatch({ type: FETCH_MOST_EXPENSIVE_ISSUES_SUCCESS, payload: response.data.data });
   } catch (error) {
     dispatch({
       type: FETCH_MOST_EXPENSIVE_ISSUES_FAILURE,
diff --git a/src/components/BMDashboard/InteractiveMap/InteractiveMap.jsx b/src/components/BMDashboard/InteractiveMap/InteractiveMap.jsx
index 6163c0f3d4e..5cae710a9b2 100644
--- a/src/components/BMDashboard/InteractiveMap/InteractiveMap.jsx
+++ b/src/components/BMDashboard/InteractiveMap/InteractiveMap.jsx
@@ -541,17 +541,17 @@ export default function InteractiveMap() {
                         <div style={{ marginBottom: '8px' }}>
                           <strong>Status:</strong>{' '}
                           <span
-                            style={{
-                              color:
-                                org.status === 'active'
-                                  ? '#DE6A6A'
-                                  : org.status === 'delayed'
-                                  ? '#E3D270'
-                                  : org.status === 'completed'
-                                  ? '#6ACFDE'
-                                  : '#AAAAAA',
-                              fontWeight: 'bold',
-                            }}
+                            className={
+                              // eslint-disable-next-line no-nested-ternary
+                              org.status === 'active'
+                                ? styles.statusActive
+                                : // eslint-disable-next-line no-nested-ternary
+                                org.status === 'delayed'
+                                ? styles.statusDelayed
+                                : org.status === 'completed'
+                                ? styles.statusCompleted
+                                : styles.statusDefault
+                            }
                           >
                             {org.status}
                           </span>
diff --git a/src/components/BMDashboard/InteractiveMap/InteractiveMap.module.css b/src/components/BMDashboard/InteractiveMap/InteractiveMap.module.css
index af3cb9d025b..bdf14385fc1 100644
--- a/src/components/BMDashboard/InteractiveMap/InteractiveMap.module.css
+++ b/src/components/BMDashboard/InteractiveMap/InteractiveMap.module.css
@@ -376,6 +376,10 @@
   filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6);
 }
 
+.darkMap :global(.leaflet-tile-pane) {
+  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
+}
+
 /* ----------------------------------
    POPUPS
 ---------------------------------- */
@@ -487,6 +491,48 @@
   margin-right: 8px;
 }
 
+/* ----------------------------------
+   POPUP STATUS TEXT
+---------------------------------- */
+.statusActive,
+.statusDelayed,
+.statusCompleted,
+.statusDefault {
+  font-weight: 700;
+}
+
+.statusActive {
+  color: #b84040;
+}
+
+.statusDelayed {
+  color: #8a6d00;
+}
+
+.statusCompleted {
+  color: #1a8fa0;
+}
+
+.statusDefault {
+  color: #666;
+}
+
+.darkPage .statusActive {
+  color: #ff8a80;
+}
+
+.darkPage .statusDelayed {
+  color: #ffd166;
+}
+
+.darkPage .statusCompleted {
+  color: #5ee2f0;
+}
+
+.darkPage .statusDefault {
+  color: #ccc;
+}
+
 /* ----------------------------------
    POPUP BUTTON
 ---------------------------------- */
diff --git a/src/components/BMDashboard/Issues/LongestOpenIssuesChart.jsx b/src/components/BMDashboard/Issues/LongestOpenIssuesChart.jsx
index 9507e4b8ce1..dce86123b9f 100644
--- a/src/components/BMDashboard/Issues/LongestOpenIssuesChart.jsx
+++ b/src/components/BMDashboard/Issues/LongestOpenIssuesChart.jsx
@@ -22,9 +22,7 @@ function IssuesCharts({ bmProjects = [] }) {
   const [selectedProjects, setSelectedProjects] = useState([]);
   const [dateRange, setDateRange] = useState({ start: null, end: null });
 
-  const { longestOpenIssues = [], mostExpensiveIssues = [] } = useSelector(
-    state => state.issue || {},
-  );
+  const { longestOpenIssues, mostExpensiveIssues } = useSelector(state => state.issue || {});
   const darkMode = useSelector(state => state.theme.darkMode);
 
   useEffect(() => {
@@ -41,7 +39,8 @@ function IssuesCharts({ bmProjects = [] }) {
     }
   }, [graphType, selectedProjects, dateRange.start, dateRange.end, dispatch]);
 
-  const chartData = graphType === 'Longest Open' ? longestOpenIssues : mostExpensiveIssues;
+  const rawChartData = graphType === 'Longest Open' ? longestOpenIssues : mostExpensiveIssues;
+  const chartData = Array.isArray(rawChartData) ? rawChartData : [];
 
   const data = {
     labels: chartData.map(issue => truncateLabel(issue.title || String(issue.issueId))),
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
index 8be87dad0d1..123a7282405 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
@@ -28,14 +28,26 @@
   width: 100%;
   max-height: 200px;
   overflow-y: auto;
-  background-color: var(--card-bg);
-  color: var(--text-color);
+  background-color: #fff;
+  color: #000;
   border: 1px solid var(--button-hover);
   border-radius: 4px;
   padding: 4px 8px;
   box-sizing: border-box;
 }
 
+.darkMode .selectorGroup select {
+  background-color: #253342;
+  color: #fff;
+  border-color: #4a5a77;
+  color-scheme: dark;
+}
+
+.darkMode .selectorGroup select option {
+  background-color: #253342;
+  color: #fff;
+}
+
 .chartCaption {
   text-align: center;
   font-size: medium;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.jsx b/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.jsx
index a5fddea041a..b82d7c3d3b2 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.jsx
@@ -6,20 +6,22 @@ import styles from './DistributionLaborHours.module.css';
 
 const COLORS = ['#4f8fa8', '#3fa4b8', '#ffab91', '#ffccbb', '#c7c7c7', '#f9f3e3'];
 
+const SWATCH_CLASSES = [
+  styles.swatch0,
+  styles.swatch1,
+  styles.swatch2,
+  styles.swatch3,
+  styles.swatch4,
+  styles.swatch5,
+];
+
 const CustomTooltip = ({ active, payload, total, darkMode }) => {
   if (active && payload && payload.length) {
     const { name, value } = payload[0];
     const percent = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
 
     return (
-      <div
-        className={styles.tooltip}
-        style={{
-          backgroundColor: darkMode ? '#2e3e5a' : '#fff',
-          color: darkMode ? '#fff' : '#000',
-          border: darkMode ? '1px solid #64748b' : '1px solid #ccc',
-        }}
-      >
+      <div className={`${styles.tooltip} ${darkMode ? styles.tooltipDark : styles.tooltipLight}`}>
         <p>{name}</p>
         <p>{`Hours: ${value} hrs`}</p>
         <p>{`Percentage: ${percent}%`}</p>
@@ -298,17 +300,13 @@ export default function DistributionLaborHours() {
                 {filteredData.map((entry, index) => (
                   <div key={entry.name} className={styles.legendItem}>
                     <span
-                      className={styles.colorBox}
-                      style={{
-                        backgroundColor: COLORS[index % COLORS.length],
-                      }}
+                      className={`${styles.colorBox} ${
+                        SWATCH_CLASSES[index % SWATCH_CLASSES.length]
+                      }`}
                     />
 
                     <span
-                      className={styles.legendText}
-                      style={{
-                        color: darkMode ? '#f5f5f5' : '#000',
-                      }}
+                      className={`${styles.legendText} ${darkMode ? styles.legendTextDark : ''}`}
                     >
                       {entry.name}: {entry.value} hrs
                     </span>
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.module.css b/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.module.css
index f793516ffd3..9685b3655f9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.module.css
@@ -381,6 +381,11 @@
   min-width: 0;
   overflow-wrap: anywhere;
   line-height: 1.3;
+  color: #000;
+}
+
+.legendTextDark {
+  color: #f5f5f5;
 }
 
 .colorBox {
@@ -394,6 +399,30 @@
   flex-shrink: 0;
 }
 
+.swatch0 {
+  background-color: #4f8fa8;
+}
+
+.swatch1 {
+  background-color: #3fa4b8;
+}
+
+.swatch2 {
+  background-color: #ffab91;
+}
+
+.swatch3 {
+  background-color: #ffccbb;
+}
+
+.swatch4 {
+  background-color: #c7c7c7;
+}
+
+.swatch5 {
+  background-color: #f9f3e3;
+}
+
 /* =========================
    PIE
    ========================= */
@@ -428,6 +457,20 @@
   margin: 2px 0;
 }
 
+.tooltipLight {
+  border: 1px solid #ccc;
+
+  background-color: #fff;
+  color: #000;
+}
+
+.tooltipDark {
+  border: 1px solid #64748b;
+
+  background-color: #2e3e5a;
+  color: #fff;
+}
+
 :global(.dark) .tooltip,
 :global(.dark-mode) .tooltip,
 :global(.bm-dashboard-dark) .tooltip,
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css
index 7f1a0490e4e..f7b9c5bf4d7 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostBreakDown/CostBreakDown.module.css
@@ -344,6 +344,14 @@
 .wrapperDark .filterSelect,
 .wrapperDark .filterInput {
   color-scheme: dark;
+  background: #2b3e59;
+  color: #fff;
+  border-color: #4a5a77;
+}
+
+.wrapperDark .filterInput[type='date']::-webkit-datetime-edit,
+.wrapperDark .filterInput[type='date']::-webkit-datetime-edit-fields-wrapper {
+  color: #fff;
 }
 
 .wrapperDark .filterInput[type='date']::-webkit-calendar-picker-indicator {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.jsx
index 82a9133a236..476e96b047d 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.jsx
@@ -253,7 +253,7 @@ export default function CostVarianceTrendGraph() {
 
   const containerClass = `${styles.varianceContainer} ${darkMode ? styles.darkMode : ''}`;
   const dateInputClass = `${styles.dateInput} ${darkMode ? styles.darkDateInput : ''}`;
-  const calendarClass = darkMode ? 'paid-labor-cost-dark-calendar' : '';
+  const calendarClass = darkMode ? 'cost-variance-dark-calendar' : '';
   const tooltipCursorFill = darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
 
   if (initialLoading) {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css
index d7f4d28260c..d82b1db2943 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/CostVarianceTrendGraph.module.css
@@ -35,7 +35,7 @@
   width: 100%;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .filtersGrid {
     grid-template-columns: 1fr; 
   }
@@ -90,14 +90,18 @@
   border-color: #4285F4;
 }
 
-.darkDateInput {
+.dateInput.darkDateInput {
   background-color: #253342;
   color: #fff;
   border-color: #2d4059;
   color-scheme: dark;
 }
 
-.darkDateInput:focus {
+.dateInput.darkDateInput::placeholder {
+  color: #94a3b8;
+}
+
+.dateInput.darkDateInput:focus {
   border-color: #3a506b;
 }
 
@@ -173,8 +177,61 @@
   display: inline-block;
 }
 
-.varianceOverLight { color: #e74c3c !important; }
-.varianceOverDark { color: #ff4444 !important; }
+.varianceOverLight { color: #e74c3c; }
+.varianceOverDark { color: #f44; }
+
+.varianceUnderLight { color: #2ecc71; }
+.varianceUnderDark { color: #4ade80; }
+
+:global(.cost-variance-dark-calendar.react-datepicker) {
+  background-color: #253342;
+  border-color: #2d4059;
+  color: #fff;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__header) {
+  background-color: #2d4059;
+  border-bottom-color: #3a506b;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__current-month),
+:global(.cost-variance-dark-calendar .react-datepicker__day-name) {
+  color: #fff;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__day) {
+  color: #e0e0e0;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__day:hover) {
+  background-color: #3a506b;
+  color: #fff;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__day--outside-month) {
+  color: #8a94a3;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__day--disabled) {
+  color: #5a6472;
+}
+
+:global(.cost-variance-dark-calendar .react-datepicker__day--selected),
+:global(.cost-variance-dark-calendar .react-datepicker__day--keyboard-selected),
+:global(.cost-variance-dark-calendar .react-datepicker__day--range-start),
+:global(.cost-variance-dark-calendar .react-datepicker__day--range-end) {
+  background-color: #e8a71c;
+  color: #000;
+  font-weight: 600;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- repeated class raises specificity to beat
+   react-datepicker's own :not() compound selector for --in-selecting-range without !important */
+:global(.cost-variance-dark-calendar.cost-variance-dark-calendar .react-datepicker__day--in-selecting-range) {
+  background-color: rgb(232 167 28 / 55%);
+  color: #1a1a1a;
+}
 
-.varianceUnderLight { color: #2ecc71 !important; }
-.varianceUnderDark { color: #4ade80 !important; }
\ No newline at end of file
+:global(.cost-variance-dark-calendar .react-datepicker__navigation-icon::before) {
+  border-color: #fff;
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index e8f3ce674fd..08b415c7322 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -64,6 +64,12 @@
   text-shadow: none;
 }
 
+/* Dark mode heading (fixes #888 fallback which is near-invisible on dark bg) */
+:global(.dark-mode) .heading,
+:global(.bm-dashboard-dark) .heading {
+  color: #e5e7eb;
+}
+
 /* Dark mode legend label */
 :global(.dark-mode) .legendLabel {
   color: #fff;
@@ -131,9 +137,9 @@
 
 /* Dark mode specific styling for better visibility */
 :global(.dark-mode) .datePicker {
-  background-color: #2c3344 !important;
-  border-color: #364156 !important;
-  color: #e0e0e0 !important;
+  background-color: #2c3344;
+  border-color: #364156;
+  color: #e0e0e0;
   color-scheme: dark;
 }
 
@@ -173,7 +179,7 @@
 }
 
 :global(.dark-mode) .datePicker:hover {
-  border-color: #4a5568 !important;
+  border-color: #4a5568;
 }
 
 .datePicker:focus {
@@ -183,8 +189,8 @@
 }
 
 :global(.dark-mode) .datePicker:focus {
-  border-color: #0d55b3 !important;
-  box-shadow: 0 0 0 2px rgb(13 85 179 / 30%) !important;
+  border-color: #0d55b3;
+  box-shadow: 0 0 0 2px rgb(13 85 179 / 30%);
 }
 
 .dateSeparator {
@@ -194,7 +200,7 @@
 }
 
 :global(.dark-mode) .dateSeparator {
-  color: #e0e0e0 !important;
+  color: #e0e0e0;
 }
 
 .resetButtonContainer {
@@ -212,7 +218,7 @@
   cursor: pointer;
   font-weight: 500;
   font-size: 14px;
-  transition: all 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
   box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
 }
 
@@ -263,10 +269,15 @@
   background: var(--section-bg, #fff);
   border-radius: 12px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
 }
 
+.chartContainer > * {
+  flex: 1;
+  min-width: 0;
+}
+
 :global(.dark-mode) .chartContainer {
   background: #253342;
 }
@@ -518,12 +529,6 @@
    Responsive adjustments
    =========================== */
 
-/* Responsive design */
-@media (width <= 768px) {
-  .container {
-    padding: 20px;
-  }
-
 /* Tablets */
 @media (width <= 1024px) {
   .heading {
@@ -554,8 +559,12 @@
   }
 }
 
-/* Mobile */
+/* Responsive design */
 @media (width <= 768px) {
+  .container {
+    padding: 20px;
+  }
+
   .heading {
     font-size: 22px;
   }
@@ -575,7 +584,7 @@
   /* Increase label contrast and adjust stroke width */
   :global(.recharts-label-list text) {
     font-size: 9px;
-    fill: var(--chart-label-color, #111827) !important;
+    fill: var(--chart-label-color, #111827);
     stroke-width: 1px;
     opacity: 1;
   }
@@ -598,49 +607,23 @@
 
   .legendBox {
     border: 1px solid currentcolor;
+  }
 
   /* Reduce label size and opacity instead of hiding */
   :global(.recharts-label-list text) {
     font-size: 8px;
     opacity: 0.85;
-    fill: var(--chart-label-color, #111827) !important;
+    fill: var(--chart-label-color, #111827);
     stroke-width: 1px;
   }
 }
 
-
-:global(.recharts-cartesian-axis-tick-value) {
-  fill: var(--chart-axis-color, #374151) !important; /* strong contrast */
+.container :global(.recharts-cartesian-axis-tick-value) {
+  fill: var(--chart-axis-color, #374151); /* strong contrast */
   font-weight: 600;
   font-size: 12px;
 }
 
-/* Selected value text — DARK MODE (keep text black) */
-:global(.darkMode .injurySelect__single-value) {
-  color: #000 !important;
-}
-
-:global(.darkMode .injurySelect__multi-value__label) {
-  color: #000 !important;
-}
-
-/* Ensure input text while typing is also black */
-:global(.darkMode .injurySelect__input-container),
-:global(.darkMode .injurySelect__input) {
-  color: #000 !important;
-}
-
-/* Ensure clear (×) and dropdown arrow are black in dark mode */
-:global(.darkMode .injurySelect__clear-indicator),
-:global(.darkMode .injurySelect__dropdown-indicator) {
-  color: #000 !important;
-}
-
-:global(.darkMode .injurySelect__clear-indicator:hover),
-:global(.darkMode .injurySelect__dropdown-indicator:hover) {
-  color: #000 !important;
-}
-
 :global(.filter label) {
   margin-bottom: 4px;
 }
@@ -665,4 +648,4 @@
 
 :global(.filter .injurySelect__control) {
   width: 100%;
-}}}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 336e038c03f..8b423b0a437 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -82,6 +82,20 @@ const getSelectStyles = darkMode => {
         ...baseStyles,
         color: '#aaaaaa',
       }),
+      clearIndicator: baseStyles => ({
+        ...baseStyles,
+        color: '#e0e0e0',
+        ':hover': {
+          color: '#fff',
+        },
+      }),
+      dropdownIndicator: baseStyles => ({
+        ...baseStyles,
+        color: '#e0e0e0',
+        ':hover': {
+          color: '#fff',
+        },
+      }),
     };
   }
 
@@ -566,12 +580,13 @@ export default function IssuesBreakdownChart() {
             </div>
           </div>
         ) : (
-          <ResponsiveContainer>
+          <ResponsiveContainer width="100%" height="100%">
             <BarChart data={data} margin={{ top: 30, right: 30, left: 0, bottom: 30 }} barGap={8}>
               <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
               <XAxis dataKey="projectName" tick={{ fill: textColor }} />
               <YAxis allowDecimals={false} tick={{ fill: textColor }} />
               <Tooltip
+                cursor={{ fill: darkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)' }}
                 contentStyle={{
                   backgroundColor: tooltipBg,
                   border: `1px solid ${tooltipBorderColor}`,
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx b/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx
index b06587888c6..f2b38faf7eb 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx
@@ -286,6 +286,78 @@ const generateSelectStyles = darkMode => ({
   }),
 });
 
+const LaborCostSummary = ({
+  hasData,
+  darkMode,
+  textColor,
+  displayTotalBudget,
+  displayTotalCost,
+  absoluteVariance,
+  variancePercentage,
+  varianceClass,
+  componentStyles,
+}) => {
+  if (!hasData) {
+    return (
+      <div className={componentStyles.emptyState}>No data available for the selected filters.</div>
+    );
+  }
+
+  return (
+    <div
+      className={`${componentStyles.summaryContainer} ${
+        darkMode ? componentStyles.darkSummaryContainer : ''
+      }`}
+    >
+      <div className={componentStyles.summaryItem}>
+        <span className={componentStyles.summaryLabel}>Total Budget</span>
+        <span className={componentStyles.summaryValue} style={{ color: textColor }}>
+          $
+          {displayTotalBudget.toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </span>
+      </div>
+      <div className={componentStyles.summaryItem}>
+        <span className={componentStyles.summaryLabel}>Total Actual</span>
+        <span className={componentStyles.summaryValue} style={{ color: textColor }}>
+          $
+          {displayTotalCost.toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </span>
+      </div>
+      <div className={componentStyles.summaryItem}>
+        <span className={componentStyles.summaryLabel}>Variance</span>
+        <span className={`${componentStyles.summaryValue} ${varianceClass}`}>
+          $
+          {absoluteVariance.toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}{' '}
+          ({variancePercentage > 0 ? '+' : ''}
+          {variancePercentage.toFixed(1)}%)
+        </span>
+      </div>
+    </div>
+  );
+};
+
+LaborCostSummary.propTypes = {
+  hasData: PropTypes.bool.isRequired,
+  darkMode: PropTypes.bool.isRequired,
+  textColor: PropTypes.string.isRequired,
+  displayTotalBudget: PropTypes.number.isRequired,
+  displayTotalCost: PropTypes.number.isRequired,
+  absoluteVariance: PropTypes.number.isRequired,
+  variancePercentage: PropTypes.number.isRequired,
+  varianceClass: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  componentStyles: PropTypes.object.isRequired,
+};
+
 const MultiValue = () => null;
 
 const ValueContainer = ({ children, ...props }) => {
@@ -409,7 +481,13 @@ const buildChartOptions = (textColor, darkMode) => ({
   scales: {
     x: {
       grid: { display: false },
-      ticks: { font: { size: 12 }, color: textColor },
+      ticks: {
+        font: { size: 12 },
+        color: textColor,
+        autoSkip: false,
+        maxRotation: 45,
+        minRotation: 0,
+      },
       offset: true,
     },
     y: {
@@ -661,40 +739,17 @@ export default function PaidLaborCost() {
         )}
       </div>
 
-      <div className={`${styles.summaryContainer} ${darkMode ? styles.darkSummaryContainer : ''}`}>
-        <div className={styles.summaryItem}>
-          <span className={styles.summaryLabel}>Total Budget</span>
-          <span className={styles.summaryValue} style={{ color: textColor }}>
-            $
-            {displayTotalBudget.toLocaleString('en-US', {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}
-          </span>
-        </div>
-        <div className={styles.summaryItem}>
-          <span className={styles.summaryLabel}>Total Actual</span>
-          <span className={styles.summaryValue} style={{ color: textColor }}>
-            $
-            {displayTotalCost.toLocaleString('en-US', {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}
-          </span>
-        </div>
-        <div className={styles.summaryItem}>
-          <span className={styles.summaryLabel}>Variance</span>
-          <span className={`${styles.summaryValue} ${varianceClass}`}>
-            $
-            {absoluteVariance.toLocaleString('en-US', {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}{' '}
-            ({variancePercentage > 0 ? '+' : ''}
-            {variancePercentage.toFixed(1)}%)
-          </span>
-        </div>
-      </div>
+      <LaborCostSummary
+        hasData={labels.length > 0}
+        darkMode={darkMode}
+        textColor={textColor}
+        displayTotalBudget={displayTotalBudget}
+        displayTotalCost={displayTotalCost}
+        absoluteVariance={absoluteVariance}
+        variancePercentage={variancePercentage}
+        varianceClass={varianceClass}
+        componentStyles={styles}
+      />
     </div>
   );
 }
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.module.css b/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.module.css
index e6b46f81628..6b84995c747 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.module.css
@@ -15,54 +15,32 @@
   color: #1e293b;
 }
 
+/* Filters row (Tasks, Project, Date Range) */
+.filtersGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
 /* Each filter group (Tasks, Project, Date Range) */
-.paidLaborCostFilterGroup {
+.filterGroup {
   display: flex;
-  flex-direction: row;
-
-  /* side by side */
-  align-items: center;
-
-  /* align vertically */
-  gap: 8px;
-
-  /* space between label and select */
-  width: fit-content;
-
-  /* shrink-wrap to contents instead of 100% */
-  padding: 4px 8px;
-
-  /* optional padding */
+  flex-direction: column;
+  gap: 6px;
 }
 
-.paidLaborCostFilterLabel {
+.filterLabel {
   margin: 0;
-
-  /* reset margin so it doesn't push things apart */
-  font-size: 15px;
-  color: var(--text-color);
-  white-space: nowrap;
-
-  /* keep label text on one line */
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
 }
 
-.paidLaborCostFilterSelect {
-  font-size: 14px;
-  padding: 4px 8px;
-  height: 28px;
-  box-sizing: border-box;
-  width: auto;
-
-  /* let it size naturally */
-  min-width: 80px;
-
-  /* optional minimum width */
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: white;
+.darkMode .filterLabel {
+  color: #e2e8f0;
 }
 
-
 /* Chart container */
 .paid-labor-cost-chart-container {
   width: 100%;
@@ -75,15 +53,6 @@
   }
 }
 
-.filterGroup {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  color: #666;
-  font-size: 12px;
-}
-
 /* Date picker container styles */
 .paidLaborCostDaterangeRow {
   width: 100%;
@@ -98,7 +67,7 @@
   width: 100%;
   overflow: visible;
   max-width: 300px;
-  transition: all 0.3s ease-in-out;
+  transition: max-width 0.3s ease-in-out;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
@@ -124,10 +93,18 @@
   font-size: 0.9rem;
 }
 
+.dateRangeFlex {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
 .datePickerWrapper {
   flex: 1;
   width: 100%;
-  min-width: 0;
+  min-width: 140px;
 }
 
 .datePickerWrapper > div {
@@ -151,21 +128,43 @@
   outline: none;
 }
 
+.dateInput {
+  flex: 1;
+  width: 100%;
+  padding: 8px 30px 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background-color: #fff;
+  color: #000;
+  font-size: 13px;
+  box-sizing: border-box;
+  height: 38px;
+}
+
 .dateInput:focus {
   border-color: #4285F4;
 }
 
-.darkDateInput {
+.dateInput.darkDateInput {
   background-color: #253342;
   color: #fff;
   border-color: #2d4059;
   color-scheme: dark;
 }
 
-.darkDateInput:focus {
+.dateInput.darkDateInput:focus {
   border-color: #3a506b;
 }
 
+.dateInput.darkDateInput::placeholder {
+  color: #94a3b8;
+}
+
+.datePickerWrapper :global(.react-datepicker-wrapper) {
+  width: 100%;
+  display: block;
+}
+
 .dateSeparator {
   flex: 0 0 auto;
   font-size: 13px;
@@ -383,19 +382,19 @@
   min-height: 30px;
 }
 
-.varianceOver { color: #e74c3c !important; }
-.darkSummaryContainer .varianceOver { color: #ff5252 !important; }
+.varianceOver { color: #e74c3c; }
+.darkSummaryContainer .varianceOver { color: #ff5252; }
 
-.varianceUnder { color: #2ecc71 !important; }
-.darkSummaryContainer .varianceUnder { color: #4ade80 !important; }
+.varianceUnder { color: #2ecc71; }
+.darkSummaryContainer .varianceUnder { color: #4ade80; }
 
-.varianceNeutral { color: #666 !important; }
-.darkSummaryContainer .varianceNeutral { color: #fff !important; }
+.varianceNeutral { color: #666; }
+.darkSummaryContainer .varianceNeutral { color: #fff; }
 
-:global(.paid-labor-cost-calendar.react-datepicker) {
-  background-color: #fff !important;
-  border-color: #aeaeae !important;
-  color: #000 !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar.react-datepicker) {
+  background-color: #fff;
+  border-color: #aeaeae;
+  color: #000;
 }
 
 .dark-mode .paid-labor-cost-day {
@@ -406,54 +405,71 @@
   background-color: #f0f0f0;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__current-month),
-:global(.paid-labor-cost-calendar .react-datepicker__day-name) {
-  color: #000 !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__current-month),
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__day-name) {
+  color: #000;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day) {
-  color: #000 !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day) {
+  color: #000;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day:hover) {
-  background-color: #f0f0f0 !important;
-  color: #000 !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day:hover) {
+  background-color: #f0f0f0;
+  color: #000;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--selected),
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--keyboard-selected) {
-  background-color: #216ba5 !important;
-  color: #fff !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--selected),
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--keyboard-selected) {
+  background-color: #216ba5;
+  color: #fff;
+}
+
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--in-range),
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--in-selecting-range) {
+  background-color: #badcf6;
+  color: #000;
+}
+
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__navigation-icon::before) {
+  border-color: #ccc;
+}
+
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar.react-datepicker) {
+  background-color: #253342;
+  border-color: #2d4059;
+  color: #fff;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--in-range),
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day--in-selecting-range) {
-  background-color: #badcf6 !important;
-  color: #000 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__header) {
+  background-color: #2d4059;
+  border-bottom-color: #3a506b;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__navigation-icon::before) {
-  border-color: #ccc !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__header__dropdown) {
+  background-color: #2d4059;
 }
 
-:global(.paid-labor-cost-dark-calendar.react-datepicker) {
-  background-color: #253342 !important;
-  border-color: #2d4059 !important;
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__current-month),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__day-name) {
+  color: #fff;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__header) {
-  background-color: #2d4059 !important;
-  border-bottom-color: #3a506b !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__day) {
+  color: #e0e0e0;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__header__dropdown) {
-  background-color: #2d4059 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__day:hover) {
+  background-color: #3a506b;
+  color: #fff;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__current-month),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__day-name) {
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__day--outside-month) {
+  color: #8a94a3;
+}
+
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__day--disabled) {
+  color: #5a6472;
 }
 
 @media screen and (width <=1130px) {
@@ -477,10 +493,10 @@
   box-shadow: 0 1px 3px var(--card-shadow);
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--selected),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--keyboard-selected) {
-  background-color: #e8a71c !important;
-  color: #000 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--selected),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--keyboard-selected) {
+  background-color: #e8a71c;
+  color: #000;
   font-weight: 600;
 }
 
@@ -488,25 +504,27 @@
   background-color: rgb(232 167 28 / 20%);
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--in-selecting-range) {
-  background-color: rgb(232 167 28 / 55%) !important;
-  color: #1a1a1a !important;
+/* stylelint-disable-next-line no-duplicate-selectors -- repeated class raises specificity to beat
+   react-datepicker's own :not() compound selector for --in-selecting-range without !important */
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--in-selecting-range) {
+  background-color: rgb(232 167 28 / 55%);
+  color: #1a1a1a;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--range-start),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--range-end) {
-  background-color: #e8a71c !important;
-  color: #000 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--range-start),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--range-end) {
+  background-color: #e8a71c;
+  color: #000;
   font-weight: 600;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__navigation-icon::before) {
-  border-color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__navigation-icon::before) {
+  border-color: #fff;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-read-view--down-arrow),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-read-view--down-arrow) {
-  border-top-color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-read-view--down-arrow),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-read-view--down-arrow) {
+  border-top-color: #fff;
 }
 
 .dark-mode .paid-labor-cost-date-range-calendar {
@@ -514,71 +532,71 @@
   box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-option),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-option) {
-  background-color: #253342 !important;
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-option),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-option) {
+  background-color: #253342;
+  color: #fff;
   padding: 8px 12px;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-option:hover),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-option:hover) {
-  background-color: #3a506b !important;
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-option:hover),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-option:hover) {
+  background-color: #3a506b;
+  color: #fff;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-option--selected),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-option--selected) {
-  background-color: #e8a71c !important;
-  color: #000 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-option--selected),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-option--selected) {
+  background-color: #e8a71c;
+  color: #000;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-read-view),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-read-view) {
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-read-view),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-read-view) {
+  color: #fff;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-dropdown-container),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-dropdown-container),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-year-dropdown-container) {
-  background-color: transparent !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-dropdown-container),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-dropdown-container),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-year-dropdown-container) {
+  background-color: transparent;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-select),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-select) {
-  background-color: #253342 !important;
-  border: 1px solid #2d4059 !important;
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-select),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-select) {
+  background-color: #253342;
+  border: 1px solid #2d4059;
+  color: #fff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 14px;
   cursor: pointer;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-select:focus),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-select:focus) {
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-select:focus),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-select:focus) {
   outline: none;
-  border-color: #e8a71c !important;
+  border-color: #e8a71c;
   box-shadow: 0 0 0 2px rgb(232 167 28 / 20%);
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__month-select option),
-:global(.paid-labor-cost-dark-calendar .react-datepicker__year-select option) {
-  background-color: #253342 !important;
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__month-select option),
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__year-select option) {
+  background-color: #253342;
+  color: #fff;
   padding: 8px;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__time-container) {
-  border-left-color: #2d4059 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__time-container) {
+  border-left-color: #2d4059;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__time) {
-  background-color: #253342 !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__time) {
+  background-color: #253342;
 }
 
-:global(.paid-labor-cost-dark-calendar .react-datepicker__time-list-item) {
-  color: #fff !important;
+:global(.paid-labor-cost-dark-calendar.paid-labor-cost-dark-calendar .react-datepicker__time-list-item) {
+  color: #fff;
 }
 
 .dark-mode .paid-labor-cost-day.in-range {
@@ -623,9 +641,9 @@
   align-items: center;
 }
 
-:global(.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--disabled:hover) {
-  color: #ccc !important;
-  background-color: transparent !important;
+:global(.paid-labor-cost-calendar.paid-labor-cost-calendar .react-datepicker__month .react-datepicker__day.react-datepicker__day--disabled:hover) {
+  color: #ccc;
+  background-color: transparent;
 }
 
 .paid-labor-cost-info-button:hover,
@@ -718,30 +736,3 @@
     border-width: 4px;
   }
 }
-
-.paidLaborCostChartScrollWrapper {
-  width: 100%;
-  overflow-x: auto;
-  background-color: var(--bg-color);
-  scrollbar-width: thin;
-  scrollbar-color: var(--button-bg) var(--card-shadow);
-
-}
-
-.paidLaborCostChartScrollWrapper::-webkit-scrollbar {
-  height: 6px;
-}
-
-.paidLaborCostChartScrollWrapper::-webkit-scrollbar-track {
-  background: var(--bg-color);
-}
-
-.paidLaborCostChartScrollWrapper::-webkit-scrollbar-thumb {
-  background: var(--button-bg);
-  border-radius: 3px;
-}
-
-/* .paidLaborCostChartScrollWrapper {
-  scrollbar-width: thin;
-  scrollbar-color: var(--button-bg) var(--card-shadow);
-} */
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx
index 84852526444..b6c5d9744a9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx
@@ -309,6 +309,9 @@ export default function ProjectRiskProfileOverview() {
       },
       labelStyle: { color: darkMode ? '#eee' : '#222' },
       itemStyle: { color: darkMode ? '#eee' : '#222' },
+      allowEscapeViewBox: { x: true, y: true },
+      wrapperStyle: { zIndex: 2000, pointerEvents: 'none' },
+      position: { y: -60 },
     }),
     [darkMode],
   );
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.module.css
index ca2e1448179..75469e8126f 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.module.css
@@ -116,10 +116,13 @@
   padding: 8px 12px;
   border-radius: 5px;
   transition: all 0.25s ease;
+  box-sizing: border-box;
 }
 
 .dateInput {
-  min-width: 150px;
+  display: block;
+  width: 100%;
+  min-width: 170px;
 }
 
 .dropdownButton:hover, .dateInput:hover {
@@ -192,6 +195,8 @@
 .trendSection {
   margin-top: 28px;
   padding: 24px;
+  min-width: 0;
+  box-sizing: border-box;
   background: #fafafa;
   border-radius: 8px;
   border: 1px solid #e8e8e8;
@@ -215,7 +220,7 @@
 
 .trendGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
   gap: 16px;
 }
 
@@ -225,6 +230,8 @@
   border-radius: 6px;
   padding: 16px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 .darkMode .trendCard {
@@ -239,6 +246,7 @@
   margin-bottom: 12px;
   border-bottom: 1px solid #eee;
   padding-bottom: 8px;
+  overflow-wrap: break-word;
 }
 
 .darkMode .projectName {
@@ -254,9 +262,9 @@
   margin-bottom: 8px;
 }
 
-.trendRow span:first-child { flex: 1; color: #666; font-weight: 500; }
+.trendRow span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #666; font-weight: 500; }
 .darkMode .trendRow span:first-child { color: #aaa; }
-.trendRow span:last-child { font-weight: 600; color: #1a1a1a; min-width: 50px; text-align: right; }
+.trendRow span:last-child { font-weight: 600; color: #1a1a1a; min-width: 50px; text-align: right; flex-shrink: 0; }
 .darkMode .trendRow span:last-child { color: #ddd; }
 
 .trendIndicator { font-size: 16px; font-weight: 700; display: inline-block; width: 24px; text-align: center; }
@@ -280,7 +288,7 @@
   padding-top: 0;
 }
 
-.attributeRow .label { flex: 1; color: #666; font-weight: 500; }
+.attributeRow .label { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #666; font-weight: 500; }
 .darkMode .attributeRow .label { color: #aaa; }
 .attributeRow .value { font-weight: 600; color: #1a1a1a; text-align: right; }
 .darkMode .attributeRow .value { color: #ddd; }
@@ -288,6 +296,8 @@
 .tableScroll {
   width: 100%;
   overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 4px;
 }
 
 .table {
@@ -304,6 +314,28 @@
   background: #2b2b2b;
 }
 
+.table tbody tr:hover {
+  background-color: #e8f0fe;
+}
+
+.table tbody tr:hover .td,
+.table tbody tr:hover .tdProject,
+.table tbody tr:hover .deltaText,
+.table tbody tr:hover .indicatorSub {
+  color: #1a1a1a;
+}
+
+.darkMode .table tbody tr:hover {
+  background-color: #3a506b;
+}
+
+.darkMode .table tbody tr:hover .td,
+.darkMode .table tbody tr:hover .tdProject,
+.darkMode .table tbody tr:hover .deltaText,
+.darkMode .table tbody tr:hover .indicatorSub {
+  color: #fff;
+}
+
 .th {
   padding: 12px;
   text-align: left;
@@ -320,10 +352,12 @@
 .td {
   padding: 12px;
   border-bottom: 1px solid #eee;
+  color: #1a1a1a;
 }
 
 .darkMode .td {
   border-bottom: 1px solid #404040;
+  color: #e5e7eb;
 }
 
 .tdProject {
@@ -331,10 +365,12 @@
   border-bottom: 1px solid #eee;
   white-space: nowrap;
   font-weight: 500;
+  color: #1a1a1a;
 }
 
 .darkMode .tdProject {
   border-bottom: 1px solid #404040;
+  color: #e5e7eb;
 }
 
 .sparkRow {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx b/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx
index 576773e590b..b214cf61b37 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx
@@ -20,6 +20,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 import { Info, Repeat } from 'lucide-react';
 import { v4 as uuidv4 } from 'uuid';
+import PropTypes from 'prop-types';
 import { fetchBMProjects } from '../../../../actions/bmdashboard/projectActions';
 import styles from './QuantityOfMaterialsUsed.module.css';
 
@@ -68,6 +69,88 @@ function getRandomColor() {
   return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 }
 
+const getOptionBackground = (darkMode, state) => {
+  if (state.isSelected || state.isFocused) return '#0d55b3';
+  return darkMode ? '#22272e' : '#fff';
+};
+
+const getOptionColor = (darkMode, state) => {
+  if (state.isSelected || darkMode) return '#fff';
+  return '#232323';
+};
+
+const createSelectStyles = darkMode => ({
+  control: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#22272e' : '#fff',
+    borderColor: darkMode ? '#375071' : '#ccc',
+    color: darkMode ? '#fff' : '#232323',
+    minHeight: 38,
+    boxShadow: 'none',
+    borderRadius: 8,
+  }),
+  menu: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#22272e' : '#fff',
+    fontSize: 12,
+    zIndex: 10001,
+    borderRadius: 8,
+    marginTop: 2,
+    color: darkMode ? '#fff' : '#232323',
+  }),
+  menuList: base => ({
+    ...base,
+    maxHeight: 400,
+    overflowY: 'auto',
+    backgroundColor: darkMode ? '#22272e' : '#fff',
+    color: darkMode ? '#fff' : '#232323',
+    padding: 0,
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: getOptionBackground(darkMode, state),
+    color: getOptionColor(darkMode, state),
+    fontSize: 13,
+    padding: '10px 16px',
+    cursor: 'pointer',
+  }),
+  multiValue: base => ({
+    ...base,
+    backgroundColor: darkMode ? '#375071' : '#e2e7ee',
+    borderRadius: 6,
+    fontSize: 12,
+    marginRight: 4,
+  }),
+  multiValueLabel: base => ({
+    ...base,
+    color: darkMode ? '#fff' : '#333',
+    fontSize: 12,
+    padding: '2px 6px',
+  }),
+  multiValueRemove: base => ({
+    ...base,
+    color: darkMode ? '#fff' : '#333',
+    ':hover': {
+      backgroundColor: darkMode ? '#0d55b3' : '#e2e7ee',
+      color: '#fff',
+    },
+    borderRadius: 4,
+    padding: 2,
+  }),
+  singleValue: base => ({
+    ...base,
+    color: darkMode ? '#fff' : base.color,
+  }),
+  input: base => ({
+    ...base,
+    color: darkMode ? '#fff' : base.color,
+  }),
+  placeholder: base => ({
+    ...base,
+    color: darkMode ? '#fff' : base.color,
+  }),
+});
+
 function QuantityOfMaterialsUsed({
   data,
   comparisonMode = 'No Comparison',
@@ -96,86 +179,7 @@ function QuantityOfMaterialsUsed({
     dispatch(fetchBMProjects());
   }, [dispatch]);
 
-  const selectStyles = useMemo(
-    () => ({
-      control: base => ({
-        ...base,
-        backgroundColor: darkMode ? '#22272e' : '#fff',
-        borderColor: darkMode ? '#375071' : '#ccc',
-        color: darkMode ? '#fff' : '#232323',
-        minHeight: 38,
-        boxShadow: 'none',
-        borderRadius: 8,
-      }),
-      menu: base => ({
-        ...base,
-        backgroundColor: darkMode ? '#22272e' : '#fff',
-        fontSize: 12,
-        zIndex: 10001,
-        borderRadius: 8,
-        marginTop: 2,
-        color: darkMode ? '#fff' : '#232323',
-      }),
-      menuList: base => ({
-        ...base,
-        maxHeight: 400,
-        overflowY: 'auto',
-        backgroundColor: darkMode ? '#22272e' : '#fff',
-        color: darkMode ? '#fff' : '#232323',
-        padding: 0,
-      }),
-      option: (base, state) => ({
-        ...base,
-        backgroundColor: state.isSelected
-          ? '#0d55b3'
-          : state.isFocused
-          ? '#0d55b3'
-          : darkMode
-          ? '#22272e'
-          : '#fff',
-        color: state.isSelected ? '#fff' : darkMode ? '#fff' : '#232323',
-        fontSize: 13,
-        padding: '10px 16px',
-        cursor: 'pointer',
-      }),
-      multiValue: base => ({
-        ...base,
-        backgroundColor: darkMode ? '#375071' : '#e2e7ee',
-        borderRadius: 6,
-        fontSize: 12,
-        marginRight: 4,
-      }),
-      multiValueLabel: base => ({
-        ...base,
-        color: darkMode ? '#fff' : '#333',
-        fontSize: 12,
-        padding: '2px 6px',
-      }),
-      multiValueRemove: base => ({
-        ...base,
-        color: darkMode ? '#fff' : '#333',
-        ':hover': {
-          backgroundColor: darkMode ? '#0d55b3' : '#e2e7ee',
-          color: '#fff',
-        },
-        borderRadius: 4,
-        padding: 2,
-      }),
-      singleValue: base => ({
-        ...base,
-        color: darkMode ? '#fff' : base.color,
-      }),
-      input: base => ({
-        ...base,
-        color: darkMode ? '#fff' : base.color,
-      }),
-      placeholder: base => ({
-        ...base,
-        color: darkMode ? '#fff' : base.color,
-      }),
-    }),
-    [darkMode],
-  );
+  const selectStyles = useMemo(() => createSelectStyles(darkMode), [darkMode]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -841,7 +845,10 @@ function QuantityOfMaterialsUsed({
             maxDate={new Date()}
             dateFormat="MM/dd/yy - MM/dd/yy"
             placeholderText="Select Date Range one"
-            className={`${styles.quantityOfMaterialUsedCustomDatePicker}`}
+            className={`${styles.quantityOfMaterialUsedCustomDatePicker}${
+              darkMode ? ` ${styles.quantityOfMaterialUsedCustomDatePickerDark}` : ''
+            }`}
+            calendarClassName={darkMode ? 'paid-labor-cost-dark-calendar' : ''}
             disabledKeyboardNavigation
             calendarStartDay={1}
             shouldCloseOnSelect={false}
@@ -886,7 +893,10 @@ function QuantityOfMaterialsUsed({
             maxDate={new Date()}
             dateFormat="MM/dd/yy - MM/dd/yy"
             placeholderText="Select Date Range two"
-            className={`${styles.quantityOfMaterialUsedCustomDatePicker}`}
+            className={`${styles.quantityOfMaterialUsedCustomDatePicker}${
+              darkMode ? ` ${styles.quantityOfMaterialUsedCustomDatePickerDark}` : ''
+            }`}
+            calendarClassName={darkMode ? 'paid-labor-cost-dark-calendar' : ''}
             disabledKeyboardNavigation
             calendarStartDay={1}
             shouldCloseOnSelect={false}
@@ -1101,4 +1111,8 @@ function QuantityOfMaterialsUsed({
   );
 }
 
+QuantityOfMaterialsUsed.propTypes = {
+  data: PropTypes.array.isRequired,
+};
+
 export default QuantityOfMaterialsUsed;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.module.css b/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.module.css
index b23a46a65c4..1d30cf67a24 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.module.css
@@ -211,11 +211,15 @@ div.weeklyProjectSummaryCard.normalCard .dropdownItem {
   border-radius: 4px;
   text-align: center;
   padding: 2px 6px;
-  background-color: var(--card-bg);
-  color: var(--text-color);
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
   transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
+.quantityOfMaterialUsedCustomDatePickerDark {
+  color-scheme: dark;
+}
+
 .quantityOfMaterialsUsedCard .customSelect_singleValue {
   color: var(--text-color) !important;
 }
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.jsx b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.jsx
index e743f113752..99042456eec 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.jsx
@@ -11,9 +11,10 @@ import {
   Label,
 } from 'recharts';
 import { useDispatch, useSelector } from 'react-redux';
-import { Input } from 'reactstrap';
+import Select from 'react-select';
 import { fetchSupplierProjects, fetchSupplierPerformance } from '../../../actions/summaryDashboard';
 import styles from './SupplierPerformanceGraph.module.css';
+import { buildChartSelectStyles } from './sharedSelectStyles';
 
 const getDateRangeOptions = () => {
   const today = new Date();
@@ -72,12 +73,13 @@ const SupplierPerformanceDashboard = function({ height = 420, onDataLoaded }) {
   const chartTheme = {
     textColor: darkMode ? '#e0e0e0' : '#333',
     axisColor: darkMode ? '#a0a0a0' : '#666',
-    // UPDATE: Set a lighter grey for dark mode so grid lines are clearly visible
     gridColor: darkMode ? '#9CA3AF' : '#E2E8F0',
     barColor: '#4CAF50',
     labelFill: darkMode ? '#ffffff' : '#333',
   };
 
+  const selectStyles = buildChartSelectStyles(darkMode);
+
   useEffect(() => {
     const loadProjects = async () => {
       try {
@@ -124,6 +126,18 @@ const SupplierPerformanceDashboard = function({ height = 420, onDataLoaded }) {
     fetchData();
   }, [dispatch, selectedDateRange, selectedProject, onDataLoaded]);
 
+  // Build react-select options
+  const dateOptions = getDateRangeOptions().map(opt => ({ value: opt.value, label: opt.label }));
+  const selectedDateOption =
+    dateOptions.find(opt => opt.value === selectedDateRange) || dateOptions[0];
+
+  const projectOptions = [
+    { value: 'all', label: 'ALL Projects' },
+    ...projects.map(p => ({ value: p._id, label: p.projectName })),
+  ];
+  const selectedProjectOption =
+    projectOptions.find(opt => opt.value === selectedProject) || projectOptions[0];
+
   return (
     <div
       className={`${styles['supplier-performance-card']} ${
@@ -137,38 +151,37 @@ const SupplierPerformanceDashboard = function({ height = 420, onDataLoaded }) {
       {/* Filters Row */}
       <div className={styles['supplier-performance-filters']}>
         <div className={styles['supplier-performance-filter-group']}>
-          <label htmlFor="supplier-date-select">Dates</label>
-          <Input
-            id="supplier-date-select"
-            type="select"
-            value={selectedDateRange}
-            onChange={e => setSelectedDateRange(e.target.value)}
-            className={styles['supplier-performance-select']}
-          >
-            {getDateRangeOptions().map(option => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </Input>
+          <span className={styles['supplier-performance-label']} id="supplier-date-label">
+            Dates
+          </span>
+          <Select
+            inputId="supplier-date-select"
+            aria-labelledby="supplier-date-label"
+            options={dateOptions}
+            value={selectedDateOption}
+            onChange={opt => setSelectedDateRange(opt.value)}
+            styles={selectStyles}
+            isSearchable={false}
+            menuPortalTarget={typeof document === 'undefined' ? null : document.body}
+            menuPosition="fixed"
+          />
         </div>
 
         <div className={styles['supplier-performance-filter-group']}>
-          <label htmlFor="supplier-project-select">Project</label>
-          <Input
-            id="supplier-project-select"
-            type="select"
-            value={selectedProject}
-            onChange={e => setSelectedProject(e.target.value)}
-            className={styles['supplier-performance-select']}
-          >
-            <option value="all">ALL Projects</option>
-            {projects.map(project => (
-              <option key={project._id} value={project._id}>
-                {project.projectName}
-              </option>
-            ))}
-          </Input>
+          <span className={styles['supplier-performance-label']} id="supplier-project-label">
+            Project
+          </span>
+          <Select
+            inputId="supplier-project-select"
+            aria-labelledby="supplier-project-label"
+            options={projectOptions}
+            value={selectedProjectOption}
+            onChange={opt => setSelectedProject(opt.value)}
+            styles={selectStyles}
+            isSearchable={false}
+            menuPortalTarget={typeof document === 'undefined' ? null : document.body}
+            menuPosition="fixed"
+          />
         </div>
       </div>
 
@@ -178,16 +191,15 @@ const SupplierPerformanceDashboard = function({ height = 420, onDataLoaded }) {
 
         {error && <div className={styles['supplier-performance-error']}>{error}</div>}
 
-        {!loading && !error && supplierData.length === 0 && (
+        {loading === false && error === null && supplierData.length === 0 && (
           <div className={styles['supplier-performance-empty']}>
             No supplier performance data available.
           </div>
         )}
 
-        {!loading && !error && supplierData.length > 0 && (
+        {loading === false && error === null && supplierData.length > 0 && (
           <ResponsiveContainer width="100%" height={height}>
             <BarChart data={supplierData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
-              {/* Added grid lines: Dotted (3 3) and custom theme color */}
               <CartesianGrid strokeDasharray="3 3" stroke={chartTheme.gridColor} opacity={0.5} />
 
               <XAxis
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
index 1c7dc5e66fc..39fd0b49d99 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
@@ -178,6 +178,29 @@
 .supplier-performance-error {
   color: #f44336;
 }
+/* Label span styling for react-select labels */
+.supplier-performance-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: var(--label-color, #555);
+}
+
+.supplier-performance-dark-mode .supplier-performance-label {
+  color: #e0e0e0;
+}/* Label span styling for react-select labels */
+.supplier-performance-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: var(--label-color, #555);
+}
+
+.supplier-performance-dark-mode .supplier-performance-label {
+  color: #e0e0e0;
+}
 
 @media (width <= 768px) {
   .supplier-performance-filters {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 4a595f35a9a..0a8110df8fa 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -204,17 +204,17 @@ export default function ToolStatusDonutChart() {
   let outerRadius;
   let chartHeight;
   if (isXS) {
-    innerRadius = 25;
-    outerRadius = 40;
-    chartHeight = 180;
-  } else if (windowWidth <= 768) {
     innerRadius = 30;
     outerRadius = 50;
-    chartHeight = 200;
-  } else {
-    innerRadius = 35;
-    outerRadius = 60;
     chartHeight = 220;
+  } else if (windowWidth <= 768) {
+    innerRadius = 40;
+    outerRadius = 65;
+    chartHeight = 260;
+  } else {
+    innerRadius = 50;
+    outerRadius = 80;
+    chartHeight = 300;
   }
 
   const wrapperClass = `${styles.toolDonutWrapper} ${darkMode ? styles.toolDonutWrapperDark : ''}`;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index b7b361f5a74..4c83d487f10 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -7,18 +7,6 @@ import axios from 'axios';
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './ToolsHorizontalBarChart.module.css';
 
-const getChartFontSize = width => {
-  if (width <= 480) return 10;
-  if (width <= 768) return 11;
-  return 12;
-};
-
-const getYAxisWidth = width => {
-  if (width <= 480) return 90;
-  if (width <= 768) return 120;
-  return 150;
-};
-
 function CustomTooltip({ active, payload, label, darkMode }) {
   if (!active || !payload || !payload.length) {
     return null;
@@ -72,6 +60,18 @@ CustomTooltip.defaultProps = {
   darkMode: false,
 };
 
+const getChartFontSize = windowWidth => {
+  if (windowWidth < 480) return 10;
+  if (windowWidth < 768) return 11;
+  return 12;
+};
+
+const getYAxisWidth = windowWidth => {
+  if (windowWidth < 480) return 70;
+  if (windowWidth < 768) return 90;
+  return 110;
+};
+
 function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
   const reduxDarkMode = useSelector(state => state.theme.darkMode);
   const darkMode = typeof darkModeProp === 'boolean' ? darkModeProp : reduxDarkMode;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index 8f8efc9c85f..5ddaf0494db 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -177,6 +177,7 @@
   background-color: #253342;
   border-color: #3a506b;
   color: #e0e0e0;
+  color-scheme: dark;
 }
 
 .tools-horizontal-bar-chart-date-picker:focus {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index a6d167f61ab..1ba9544a79b 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -8,8 +8,8 @@
 
 /* Base styles define size - dark mode only changes colors */
 :global(.datePickerInput),
-:global(.react-datepicker-wrapper input),
-:global(.react-datepicker-wrapper .datePickerInput) {
+:global(.tools-availability-page .react-datepicker-wrapper input),
+:global(.tools-availability-page .react-datepicker-wrapper .datePickerInput) {
   font-size: 13px !important;
   padding: 8px 12px !important;
   height: 38px !important;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx
index b067f85810c..a54ac035e01 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx
@@ -53,21 +53,41 @@ function TotalMaterialCostPerProject() {
   const options = {
     responsive: true,
     maintainAspectRatio: false,
+    layout: { padding: { top: 24 } },
     plugins: {
       legend: {
         position: 'top',
         labels: { color: textColor },
       },
+      title: { display: false },
       // Keep bar value labels readable when the globally registered datalabels plugin runs.
       datalabels: {
         // Match label color to the active theme so values stay visible on light and dark charts.
-        color: darkMode ? '#ffffff' : '#000000',
+        color: darkMode ? '#fff' : '#1a1a1a',
+        anchor: 'end',
+        align: 'end',
+        offset: 4,
+        clamp: true,
         // Emphasize the displayed values without changing label position or chart data.
-        font: { weight: 'bold' },
+        font: { weight: '600' },
+        textStrokeColor: darkMode ? '#1a1f26' : '#fff',
+        textStrokeWidth: 3,
         // Round only the displayed label text; keep the chart data unchanged.
-        formatter: value => Number(value).toFixed(3),
+        formatter: value => Number(value ?? 0).toFixed(3),
+      },
+      tooltip: {
+        backgroundColor: darkMode ? '#22272e' : '#fff',
+        titleColor: textColor,
+        bodyColor: textColor,
+        borderColor: darkMode ? '#375071' : '#ccc',
+        borderWidth: 1,
+        callbacks: {
+          label(context) {
+            const value = Number(context.parsed.y ?? 0);
+            return `${context.dataset.label}: ${value.toFixed(3)}`;
+          },
+        },
       },
-      title: { display: false },
     },
     scales: {
       x: {
@@ -82,8 +102,13 @@ function TotalMaterialCostPerProject() {
         },
       },
       y: {
-        grid: { color: '#ccc' },
-        ticks: { color: textColor },
+        grid: { color: darkMode ? '#4a5a77' : '#ccc' },
+        ticks: {
+          color: textColor,
+          callback(val) {
+            return Number(val).toFixed(3);
+          },
+        },
       },
     },
   };
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 9c5bfc2f293..418414398f7 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -17,7 +17,6 @@
   width: 95%;
   margin: auto;
   padding: 20px;
-  background: var(--bg-color);
   color: var(--text-color);
 }
 
@@ -34,7 +33,7 @@
 
 .weeklySummaryHeaderContainer {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   width: 88%;
@@ -60,7 +59,7 @@
   display: flex;
   gap: 8px;
   align-items: center;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   margin-left: auto;
   min-width: 0;
 
@@ -91,7 +90,7 @@
   font-size: 14px;
   background: var(--section-bg);
   color: var(--text-color);
-  transition: all 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
   appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
   background-repeat: no-repeat;
@@ -320,25 +319,20 @@
 }
 
 .weeklyProjectSummaryCard :global(.container) {
-  background: #fff !important;
-  width: 100% !important;
-  height: 100% !important;
-  padding: 0 !important;
-  border: none !important;
-  box-shadow: none !important;
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  box-shadow: none;
 }
 
 .darkMode .weeklyProjectSummaryCard :global(.container) {
-  background: #1e293b !important;
-}
-
-.weeklyProjectSummaryCard :global(.recharts-wrapper) {
-  width: 100% !important;
-  height: 100% !important;
+  background: #1e293b;
 }
 
 .weeklyProjectSummaryCard :global(.recharts-surface) {
-  overflow: visible !important;
+  overflow: visible;
 }
 
 .weeklyProjectSummaryCard :global(.chartContainer) {
@@ -348,15 +342,15 @@
 }
 
 .weeklyProjectSummaryCard :global(.recharts-bar-rectangle) {
-  shape-rendering: geometricprecision !important;
+  shape-rendering: geometricprecision;
 }
 
 .weeklyProjectSummaryCard :global(.recharts-cartesian-axis-tick-value) {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 .weeklyProjectSummaryCard :global(.recharts-cartesian-grid-horizontal line) {
-  stroke-dasharray: 3 3 !important;
+  stroke-dasharray: 3 3;
 }
 
 .financialSmall {
@@ -453,7 +447,7 @@
 .weeklyProjectSummaryDashboardCategoryContent {
   padding: 15px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
   gap: 20px;
   border-top: 1px solid var(--card-shadow);
   animation: fade-in 0.3s ease-in-out;
@@ -498,7 +492,7 @@
   flex-direction: column;
   border-radius: 12px;
   box-shadow: 0 4px 6px var(--card-shadow);
-  transition: all 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 /* ---------------- TOOLS TRACKING LAYOUT ---------------- */
@@ -610,7 +604,7 @@
   /* Fill the responsive grid track instead of capping cards at a fixed desktop width. */
   max-width: none;
   min-width: 0;
-  height: 190px;
+  min-height: 190px;
   text-align: center;
   box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
   padding: 20px;
@@ -627,12 +621,16 @@
   transition: color 0.3s ease;
 }
 
+/* The status oval's background is always the color-coded pastel from
+   projectStatusButtons, so its value text must stay dark for contrast
+   in both themes. */
 .weeklyStatusValue {
   /* Pills are always pastel, so the value stays dark in both themes */
   color: #1a1a1a;
   font-size: clamp(26px, 2.2vw, 36px);
   font-weight: 600;
-  white-space: nowrap;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   transition: color 0.3s ease;
 }
 
@@ -708,13 +706,9 @@
 
 /* Tooltip styles */
 .quantityOfMaterialsUsedChartTooltip {
-  max-height: 80vh !important;
-
-  /* Limit to 80% of viewport height */
-  overflow-y: auto !important;
-
-  /* Enable vertical scrolling */
-  padding-right: 15px !important;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding-right: 15px;
 
   /* Add some padding for the scrollbar */
 
@@ -881,15 +875,13 @@
   }
 
   .darkMode .weeklySummaryHeaderTitle {
-    color: #fff !important;
-
-    /* bright white title */
+    color: #fff; /* bright white title */
   }
 
   .darkMode .weeklySummaryHeaderControls select {
-    background: #2d4059 !important;
-    color: #fff !important;
-    border: 1px solid rgb(255 255 255 / 30%) !important;
+    background: #2d4059;
+    color: #fff;
+    border: 1px solid rgb(255 255 255 / 30%);
   }
 
   .darkMode .weeklySummaryHeaderControls select option {
@@ -930,10 +922,33 @@
     width: 100%;
   }
 
+  .weeklySummaryHeaderControls :global(.form-control) {
+    max-width: none;
+  }
+
   .weeklySummaryHeaderControls select {
     width: 100%;
   }
 
+  .weeklySummaryHeaderTitle {
+    font-size: 24px;
+    text-align: center;
+  }
+
+  .weeklyProjectSummaryDashboardCategoryContent,
+  .weeklyProjectSummaryDashboardSection.half .weeklyProjectSummaryDashboardCategoryContent {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .normalCard {
+    min-height: 280px;
+  }
+
+  .weeklyProjectSummaryDashboardCategoryContent .wideCard,
+  .weeklyProjectSummaryDashboardCategoryContent .normalCard {
+    grid-column: span 1;
+  }
+
   .weeklySummaryShareBtn {
     margin-top: 5px;
   }
@@ -957,10 +972,6 @@
     min-height: 240px;
   }
 
-  .normalCard {
-    min-height: 280px;
-  }
-
   .lessonsLearnedGrid {
     grid-template-columns: 1fr;
     gap: 16px;
@@ -1064,6 +1075,12 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .weeklyProjectSummaryDashboardCategoryContent {
+    animation: none;
+  }
+}
+
 /* Customize Cards control */
 .cardSelectorBar {
   display: flex;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/sharedSelectStyles.js b/src/components/BMDashboard/WeeklyProjectSummary/sharedSelectStyles.js
new file mode 100644
index 00000000000..9c2076298b9
--- /dev/null
+++ b/src/components/BMDashboard/WeeklyProjectSummary/sharedSelectStyles.js
@@ -0,0 +1,78 @@
+/**
+ * Shared react-select styles for BMDashboard charts.
+ * Single source of truth for dropdown theming so dark mode stays consistent
+ * across ExpenseBarChart, FinancialStatButtons, SupplierPerformanceGraph,
+ * InjuryCategoryBarChart and others.
+ */
+
+function getOptionBackground(state, darkMode) {
+  if (state.isSelected || state.isFocused) return '#0d55b3';
+  return darkMode ? '#22272e' : '#fff';
+}
+
+function getOptionTextColor(state, darkMode) {
+  if (state.isSelected || state.isFocused) return '#fff';
+  return darkMode ? '#fff' : '#232323';
+}
+
+export function buildChartSelectStyles(darkMode) {
+  return {
+    control: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#22272e' : '#fff',
+      borderColor: darkMode ? '#375071' : '#ccc',
+      color: darkMode ? '#fff' : '#232323',
+      minHeight: 38,
+      fontSize: 12,
+      boxShadow: 'none',
+    }),
+    menu: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#22272e' : '#fff',
+      fontSize: 12,
+      zIndex: 10001,
+      color: darkMode ? '#fff' : '#232323',
+    }),
+    menuList: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#22272e' : '#fff',
+      color: darkMode ? '#fff' : '#232323',
+      padding: 0,
+    }),
+    option: (base, state) => ({
+      ...base,
+      backgroundColor: getOptionBackground(state, darkMode),
+      color: getOptionTextColor(state, darkMode),
+      fontSize: 12,
+      cursor: 'pointer',
+    }),
+    singleValue: base => ({
+      ...base,
+      color: darkMode ? '#fff' : '#232323',
+    }),
+    multiValue: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#375071' : '#e2e7ee',
+      borderRadius: 4,
+    }),
+    multiValueLabel: base => ({
+      ...base,
+      color: darkMode ? '#fff' : '#333',
+      fontSize: 12,
+      padding: '2px 6px',
+    }),
+    multiValueRemove: base => ({
+      ...base,
+      color: darkMode ? '#fff' : '#333',
+      ':hover': { backgroundColor: '#0d55b3', color: '#fff' },
+    }),
+    placeholder: base => ({
+      ...base,
+      color: darkMode ? '#aaa' : '#5f6b7a',
+    }),
+    input: base => ({
+      ...base,
+      color: darkMode ? '#fff' : '#232323',
+    }),
+  };
+}
diff --git a/src/components/Badge/Badge.css b/src/components/Badge/Badge.css
deleted file mode 100644
index 5a49605cb62..00000000000
--- a/src/components/Badge/Badge.css
+++ /dev/null
@@ -1,168 +0,0 @@
-.btn--dark-sea-green {
-  background-color: #c9d6c6 !important;
-  border-color: #285739 !important;
-  color: #285739 !important;
-}
-
-.badge_image_sm > img {
-  border-radius: 50%;
-  height: 50px;
-  width: 50px;
-  margin: 5px;
-  overflow: inherit;
-}
-
-#rank-filter {
-  width: 200px;
-}
-
-.badge_image_md > img {
-  border-radius: 50%;
-  height: 100px;
-  width: 100px;
-  overflow: inherit;
-}
-
-.badge_image_lg > img {
-  border-radius: 50%;
-  height: 200px;
-  width: 200px;
-  overflow: inherit;
-}
-
-.badge_image_mini > img {
-  border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  overflow: inherit;
-}
-
-.badge_count {
-  padding-top: 4px;
-  border-radius: 50%;
-  width: 22px;
-  height: 22px;
-  background: #007bff;
-  color: #fff;
-  text-align: center;
-  font: 12px Arial, sans-serif;
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  z-index: 10;
-}
-.bagde-box-shadow {
-  box-shadow: 2px 2px 4px 1px lightgray;
-}
-.badge-box-shadow-dark {
-  box-shadow: 2px 2px 4px 1px black;
-}
-/* This is just only for displaying 'Personal Max hours' badge hours position */
-.badge_count_personalmax {
-  padding-top: 4px;
-  border-radius: 45%;
-  width: 20px;
-  height: 22px;
-  background: #800080;
-  color: #fff;
-  text-align: center;
-  font: 11px Arial, sans-serif;
-  position: absolute;
-  right: 20px;
-  bottom: 1px;
-  z-index: 10;
-}
-
-.badge_count_3_digit {
-  border-radius: 50%;
-  padding: 1px 3px;
-  background: #007bff;
-  color: #fff;
-  text-align: center;
-  font-size: 9px;
-  position: absolute;
-  right: 5px;
-  bottom: 5px;
-  z-index: 10;
-}
-
-.new_badges {
-  display: flex;
-  flex-wrap: wrap;
-  overflow-y: auto;
-  height: 70px;
-}
-
-.old_badges {
-  height: 220px;
-  overflow-y: auto;
-}
-
-.badge_history_container {
-  display: flex;
-  flex-wrap: wrap;
-  overflow-y: auto;
-}
-
-.badge_image_container {
-  position: relative;
-  height: 60px;
-}
-
-.badgemanagement-actions-cell {
-  display: table-cell;
-  padding-left: 10px;
-}
-
-.assign-badge-margin-top {
-  margin-top: 15px;
-}
-
-.badge-message-background-success {
-  background-color: #d4edda;
-}
-
-.badge-message-background-danger {
-  background-color: #f8d7da;
-}
-
-.badge-message-text-success {
-  color: #092b00;
-}
-
-.badge-message-text-danger {
-  color: #a8071a;
-}
-
-.assign_badge_search_box {
-  margin-bottom: 15px;
-}
-
-.badge_info_icon_text {
-  text-align: left;
-}
-
-.widett {
-  width: 500px;
-}
-
-#badgeEdit .form-group i {
-  margin-left: 5px;
-}
-
-.badgeTooltip .tooltip-inner {
-  background-color: #666;
-}
-
-.popover img {
-  width: 100%;
-  height: 100%;
-  max-width: 120px;
-  margin: 0 auto;
-}
-
-@media screen and (max-width: 544px) {
-  .responsive-font-size {
-    font-size: 0.75rem !important;
-  }
-}
\ No newline at end of file
diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index a93abece438..1d176edfb42 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -1,11 +1,12 @@
-/* stylelint-disable  */
-.btn--dark-sea-green {
-  background-color: #c9d6c6 !important;
-  border-color: #285739 !important;
-  color: #285739 !important;
+/* stylelint-disable-next-line no-duplicate-selectors -- class repeated to
+   outrank Bootstrap's .btn/.btn-secondary without !important */
+:global(.btn--dark-sea-green.btn--dark-sea-green) {
+  background-color: #c9d6c6;
+  border-color: #285739;
+  color: #285739;
 }
 
-.badge_image_sm > img {
+:global(.badge_image_sm) > img {
   border-radius: 50%;
   height: 50px;
   width: 50px;
@@ -13,37 +14,37 @@
   overflow: inherit;
 }
 
-#rank-filter {
+:global(#rank-filter) {
   width: 200px;
 }
 
-.badge_image_md > img {
+:global(.badge_image_md) > img {
   border-radius: 50%;
   height: 100px;
   width: 100px;
   overflow: inherit;
 }
 
-.badge_image_lg > img {
+:global(.badge_image_lg) > img {
   border-radius: 50%;
   height: 200px;
   width: 200px;
   overflow: inherit;
 }
 
-.badge_image_mini > img {
+:global(.badge_image_mini) > img {
   border-radius: 50%;
   height: 25px;
   width: 25px;
   overflow: inherit;
 }
 
-.badge_count {
+:global(.badge_count) {
   padding-top: 4px;
   border-radius: 50%;
   width: 22px;
   height: 22px;
-  background: #007bff;
+  background: #0056b3;
   color: #fff;
   text-align: center;
   font: 12px Arial, sans-serif;
@@ -53,16 +54,16 @@
   z-index: 10;
 }
 
-.bagde-box-shadow {
+:global(.bagde-box-shadow) {
   box-shadow: 2px 2px 4px 1px lightgray;
 }
 
-.badge-box-shadow-dark {
+:global(.badge-box-shadow-dark) {
   box-shadow: 2px 2px 4px 1px black;
 }
 
 /* This is just only for displaying 'Personal Max hours' badge hours position */
-.badge_count_personalmax {
+:global(.badge_count_personalmax) {
   padding-top: 4px;
   border-radius: 45%;
   width: 20px;
@@ -77,10 +78,10 @@
   z-index: 10;
 }
 
-.badge_count_3_digit {
+:global(.badge_count_3_digit) {
   border-radius: 50%;
   padding: 1px 3px;
-  background: #007bff;
+  background: #0056b3;
   color: #fff;
   text-align: center;
   font-size: 9px;
@@ -90,75 +91,75 @@
   z-index: 10;
 }
 
-.new_badges {
+:global(.new_badges) {
   display: flex;
   flex-wrap: wrap;
-  overflow-y: scroll;
-  height: 120px;
+  overflow-y: auto;
+  height: 70px;
 }
 
-.old_badges {
+:global(.old_badges) {
   height: 220px;
   overflow-y: auto;
 }
 
-.badge_history_container {
+:global(.badge_history_container) {
   display: flex;
   flex-wrap: wrap;
   overflow-y: auto;
 }
 
-.badge_image_container {
+:global(.badge_image_container) {
   position: relative;
   height: 60px;
 }
 
-.badgemanagement-actions-cell {
+:global(.badgemanagement-actions-cell) {
   display: table-cell;
   padding-left: 10px;
 }
 
-.assign-badge-margin-top {
+:global(.assign-badge-margin-top) {
   margin-top: 15px;
 }
 
-.badge-message-background-success {
+:global(.badge-message-background-success) {
   background-color: #d4edda;
 }
 
-.badge-message-background-danger {
+:global(.badge-message-background-danger) {
   background-color: #f8d7da;
 }
 
-.badge-message-text-success {
+:global(.badge-message-text-success) {
   color: #092b00;
 }
 
-.badge-message-text-danger {
+:global(.badge-message-text-danger) {
   color: #a8071a;
 }
 
-.assign_badge_search_box {
+:global(.assign_badge_search_box) {
   margin-bottom: 15px;
 }
 
-.badge_info_icon_text {
+:global(.badge_info_icon_text) {
   text-align: left;
 }
 
-.widett {
+:global(.widett) {
   width: 500px;
 }
 
-#badgeEdit .form-group i {
+:global(#badgeEdit) :global(.form-group) i {
   margin-left: 5px;
 }
 
-.badgeTooltip .tooltip-inner {
+:global(.badgeTooltip) :global(.tooltip-inner) {
   background-color: #666;
 }
 
-.popover img {
+:global(.popover) img {
   width: 100%;
   height: 100%;
   max-width: 120px;
@@ -166,7 +167,9 @@
 }
 
 @media screen and (width <= 544px) {
-  .responsive-font-size {
-    font-size: 0.75rem !important;
+  /* stylelint-disable-next-line no-duplicate-selectors -- class repeated to
+     outrank other same-specificity .responsive-font-size rules without !important */
+  :global(.responsive-font-size.responsive-font-size) {
+    font-size: 0.75rem;
   }
 }
diff --git a/src/components/Badge/BadgeImage.jsx b/src/components/Badge/BadgeImage.jsx
index 5b7300de7c3..238e932845b 100644
--- a/src/components/Badge/BadgeImage.jsx
+++ b/src/components/Badge/BadgeImage.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Card, CardTitle, CardBody, CardImg, CardText, Popover } from 'reactstrap';
-import styles from './Badge.module.css';
+import './Badge.module.css';
 
 function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuffix }) {
   const [isOpen, setOpen] = useState(false);
@@ -9,8 +9,8 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
 
   return (
     <>
-      <div className={styles.badge_image_container}>
-        <div className={styles.badge_image_sm}>
+      <div className="badge_image_container">
+        <div className="badge_image_sm">
           <img
             src={badgeData?.imageUrl}
             id={`popover_${time}${index.toString()}`}
@@ -32,7 +32,7 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
         target={`popover_${time}${index.toString()}`}
       >
         <Card className="text-center">
-          <CardImg className={styles.badge_image_lg} src={badgeData?.imageUrl} />
+          <CardImg className="badge_image_lg" src={badgeData?.imageUrl} />
           <CardBody>
             <CardTitle
               style={{
@@ -55,17 +55,15 @@ function BadgeImage({ badgeData, time, index, personalBestMaxHrs, count, cssSuff
 function BadgeSpan({ badgeType, personalBestMaxHrs, count, cssSuffix }) {
   if (badgeType === 'Personal Max') {
     return (
-      <span className={styles.badge_count_personalmax + cssSuffix}>
+      <span className={`badge_count_personalmax${cssSuffix}`}>
         {Math.floor(personalBestMaxHrs)}
       </span>
     );
-  } else {
-    if (count < 100) {
-      return <span className={styles.badge_count + cssSuffix}>{Math.round(count)}</span>;
-    } else {
-      return <span className={styles.badge_count_3_digit + cssSuffix}>{Math.round(count)}</span>;
-    }
   }
+  if (count < 100) {
+    return <span className={`badge_count${cssSuffix}`}>{Math.round(count)}</span>;
+  }
+  return <span className={`badge_count_3_digit${cssSuffix}`}>{Math.round(count)}</span>;
 }
 
 export default BadgeImage;
diff --git a/src/components/Badge/NewBadges.jsx b/src/components/Badge/NewBadges.jsx
index 40480d1ccad..cfe338101bb 100644
--- a/src/components/Badge/NewBadges.jsx
+++ b/src/components/Badge/NewBadges.jsx
@@ -1,7 +1,6 @@
 import { Card, CardTitle, CardBody, UncontrolledTooltip } from 'reactstrap';
 import BadgeImage from './BadgeImage';
 import { WEEK_DIFF } from '../../constants/badge';
-import styles from './Badge.module.css';
 
 function NewBadges(props) {
   const filterBadges = allBadges => {
@@ -51,7 +50,7 @@ function NewBadges(props) {
             New Badges Earned <i className="fa fa-info-circle" id="NewBadgeInfo" />
           </CardTitle>
 
-          <div className={`${styles.new_badges} ${props.darkMode ? 'text-light' : ''}`}>
+          <div className={`new_badges ${props.darkMode ? 'text-light' : ''}`}>
             {filteredBadges.length === 0 ? (
               <strong
                 style={{ opacity: 0.7 }}
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 241d3c197e1..c7b5b543693 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1079,6 +1079,8 @@ function LeaderBoard({
                                 height="19"
                                 viewBox="0 0 448 512"
                                 className="show-time-off-calender-svg"
+                                aria-hidden="true"
+                                focusable="false"
                               >
                                 <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>
diff --git a/src/components/LeaderBoard/Leaderboard.module.css b/src/components/LeaderBoard/Leaderboard.module.css
index 0578158ceaa..f65231e6ac8 100644
--- a/src/components/LeaderBoard/Leaderboard.module.css
+++ b/src/components/LeaderBoard/Leaderboard.module.css
@@ -9,17 +9,20 @@
 }
 
 .dark-leaderboard-row {
-  background-color: #3a506b;
-  color: white;
+  background-color: #3a506b !important;
+  color: white !important;
 }
 
 .dark-leaderboard-row th {
-  background-color: #3a506b;
-  color: white;
+  background-color: #3a506b !important;
+  color: white !important;
 }
 
-.dark-leaderboard-row:hover {
-  background-color: #111831;
+.dark-leaderboard-row:hover,
+.dark-leaderboard-row:hover td,
+.dark-leaderboard-row:hover th {
+  background-color: #111831 !important;
+  color: #fff !important;
 }
 
 .light-leaderboard-row {
diff --git a/src/components/StudentBadgeGallery/StudentBadgeGallery.jsx b/src/components/StudentBadgeGallery/StudentBadgeGallery.jsx
index 6fa03559ad9..12ac134cd73 100644
--- a/src/components/StudentBadgeGallery/StudentBadgeGallery.jsx
+++ b/src/components/StudentBadgeGallery/StudentBadgeGallery.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Row, Col, Card, CardHeader, CardBody, Spinner } from 'reactstrap';
 import StudentBadgeImage from './StudentBadgeImage';
-import '../Badge/Badge.css'; // Reuse shared badge styling
+import '../Badge/Badge.module.css'; // Reuse shared badge styling
 import badgeIcon from '../SummaryBar/badges_icon.png';
 import reportIcon from '../SummaryBar/report_icon.png';
 import taskIcon from '../SummaryBar/task_icon.png';
@@ -159,7 +159,7 @@ function StudentBadgeGallery({ darkMode }) {
   return (
     <div className={styles.galleryContainer}>
       <Row
-        className={darkMode ? 'badge-box-shadow-dark' : 'bagde-box-shadow'}
+        className={darkMode ? styles.badgeBoxShadowDark : styles.badgeBoxShadow}
         style={{
           margin: '0 2px',
           backgroundColor: darkMode ? '#1c2541' : '#ffffff',
diff --git a/src/components/StudentBadgeGallery/StudentBadgeGallery.module.css b/src/components/StudentBadgeGallery/StudentBadgeGallery.module.css
index 18e9604b6dd..74abcc135cc 100644
--- a/src/components/StudentBadgeGallery/StudentBadgeGallery.module.css
+++ b/src/components/StudentBadgeGallery/StudentBadgeGallery.module.css
@@ -8,6 +8,14 @@
   align-items: center;
 }
 
+.badgeBoxShadow {
+  box-shadow: 2px 2px 4px 1px lightgray;
+}
+
+.badgeBoxShadowDark {
+  box-shadow: 2px 2px 4px 1px black;
+}
+
 .title {
   font-size: 1.5rem;
   font-weight: 600;
@@ -48,7 +56,6 @@
   padding: 1.2rem;
   text-align: center;
   box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
   width: 190px;
   height: 210px;
   display: flex;
@@ -83,7 +90,6 @@
   border-radius: 50%;
   object-fit: contain;
   margin-bottom: 10px; /* 👈 ensures space between image and label */
-  transition: transform 0.2s ease;
 }
 
 .badge_image_container img:hover,
@@ -223,31 +229,41 @@
    which isn't currently wired into this component.
    ========================================================= */
 :global(body.dark-mode) .card {
-  background-color: #1c2541 !important;
-  color: #fff !important;
-  border: 1px solid #2e3d55 !important;
-  box-shadow: 2px 2px 6px rgb(0 0 0 / 35%) !important;
+  background-color: #1c2541;
+  color: #fff;
+  border: 1px solid #2e3d55;
+  box-shadow: 2px 2px 6px rgb(0 0 0 / 35%);
 }
 
 :global(body.dark-mode) .cardHeader {
-  background-color: #3a506b !important;
-  color: #fff !important;
-  border-bottom: 1px solid #2e3d55 !important;
+  background-color: #3a506b;
+  color: #fff;
+  border-bottom: 1px solid #2e3d55;
 }
 
 :global(body.dark-mode) .badgeName,
 :global(body.dark-mode) .badgeDesc,
 :global(body.dark-mode) .badgeLabel {
-  color: #fff !important;
+  color: #fff;
 }
 
 :global(body.dark-mode) .icon {
-  filter: none !important;
-  box-shadow: 0 0 4px rgb(0 0 0 / 40%) !important;
-  background-color: #1c2541 !important;
+  filter: none;
+  box-shadow: 0 0 4px rgb(0 0 0 / 40%);
+  background-color: #1c2541;
 }
 
 :global(body.dark-mode) .unearned {
-  opacity: 0.55 !important;
-  filter: grayscale(100%) !important;
-}
\ No newline at end of file
+  opacity: 0.55;
+  filter: grayscale(100%);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .icon {
+    transition: transform 0.2s ease;
+  }
+}
diff --git a/src/reducers/bmdashboard/issueReducer.js b/src/reducers/bmdashboard/issueReducer.js
index 5be89bcaf29..584de4ce0e2 100644
--- a/src/reducers/bmdashboard/issueReducer.js
+++ b/src/reducers/bmdashboard/issueReducer.js
@@ -56,14 +56,14 @@ const issueReducer = (state = initialState, action) => {
     case FETCH_LONGEST_OPEN_ISSUES_REQUEST:
       return { ...state, loading: true, error: null };
     case FETCH_LONGEST_OPEN_ISSUES_SUCCESS:
-      return { ...state, loading: false, longestOpenIssues: action.payload.data };
+      return { ...state, loading: false, longestOpenIssues: action.payload };
     case FETCH_LONGEST_OPEN_ISSUES_FAILURE:
       return { ...state, loading: false, error: action.payload };
 
     case FETCH_MOST_EXPENSIVE_ISSUES_REQUEST:
       return { ...state, loading: true, error: null };
     case FETCH_MOST_EXPENSIVE_ISSUES_SUCCESS:
-      return { ...state, loading: false, mostExpensiveIssues: action.payload.data };
+      return { ...state, loading: false, mostExpensiveIssues: action.payload };
     case FETCH_MOST_EXPENSIVE_ISSUES_FAILURE:
       return { ...state, loading: false, error: action.payload };
 
diff --git a/src/styles.js b/src/styles.js
index 480c948a045..18d3b0a1e43 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -7,5 +7,5 @@ export const boxStyleDark = {
   boxShadow: '0.5px 0.5px 5px black',
 };
 
-export const getFontColor = (darkMode) => darkMode ? 'text-light' : '';
-export const getBoxStyling = (darkMode) => darkMode ? boxStyleDark : boxStyle;
\ No newline at end of file
+export const getFontColor = darkMode => (darkMode ? 'text-light' : '');
+export const getBoxStyling = darkMode => (darkMode ? boxStyleDark : boxStyle);