diff --git a/src/components/BMDashboard/CostPrediction/CostPredictionPage.jsx b/src/components/BMDashboard/CostPrediction/CostPredictionPage.jsx
new file mode 100644
index 0000000000..fe4669390a
--- /dev/null
+++ b/src/components/BMDashboard/CostPrediction/CostPredictionPage.jsx
@@ -0,0 +1,639 @@
+import { useState, useEffect, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ReferenceLine,
+} from 'recharts';
+import moment from 'moment';
+import Select from 'react-select';
+import { getProjectCosts, getProjectIds } from '../../../services/projectCostTrackingService';
+import { useSelector } from 'react-redux';
+import ReactTooltip from 'react-tooltip';
+import { Info } from 'lucide-react';
+import styles from './CostPredictionPage.module.css';
+import {
+  DARK,
+  LIGHT,
+  getSingleSelectStyles,
+  getMultiSelectStyles,
+  getAxisTickFill,
+  getGridStroke,
+} from '../../../utils/bmChartStyles';
+
+// Cost category options
+const costOptions = [
+  { value: 'Labor', label: 'Labor Cost' },
+  { value: 'Materials', label: 'Materials Cost' },
+  { value: 'Equipment', label: 'Equipment Cost' },
+  { value: 'Total', label: 'Total Cost' },
+];
+
+// Custom dot component for predicted values - consolidated to reduce duplication
+function PredictedDot({ cx, cy, payload, category, costColors, size = 4 }) {
+  if (!payload || !payload[`${category}Predicted`]) return null;
+  return (
+    <path
+      d={`M${cx},${cy - size} L${cx + size},${cy} L${cx},${cy + size} L${cx - size},${cy} Z`}
+      fill={costColors[category]}
+      stroke={costColors[category]}
+      strokeWidth={0}
+    />
+  );
+}
+
+PredictedDot.propTypes = {
+  cx: PropTypes.number,
+  cy: PropTypes.number,
+  payload: PropTypes.object,
+  category: PropTypes.string.isRequired,
+  costColors: PropTypes.object.isRequired,
+  size: PropTypes.number,
+};
+
+// Define line colors
+const costColors = {
+  Labor: '#4589FF',
+  Materials: '#FF6A00',
+  Equipment: '#8A2BE2',
+  Total: '#3CB371',
+};
+
+// Create specific dot components for common categories
+function createDotComponent(category) {
+  function DotComponent(props) {
+    return (
+      <PredictedDot
+        cx={props.cx}
+        cy={props.cy}
+        payload={props.payload}
+        category={category}
+        costColors={costColors}
+        size={4}
+      />
+    );
+  }
+  DotComponent.propTypes = {
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    payload: PropTypes.object,
+  };
+  return DotComponent;
+}
+
+// Pre-defined dot components for different categories
+const LaborDot = createDotComponent('Labor');
+const MaterialsDot = createDotComponent('Materials');
+const EquipmentDot = createDotComponent('Equipment');
+const TotalDot = createDotComponent('Total');
+
+// Calculate last predicted values for reference lines
+const getLastPredictedValues = costData => {
+  const lastValues = {};
+
+  if (!costData || !costData.predicted) {
+    return lastValues;
+  }
+
+  Object.keys(costData.predicted).forEach(category => {
+    const predictedItems = costData.predicted[category];
+    if (predictedItems && predictedItems.length > 0) {
+      // Get the last predicted value for this category
+      const lastPredicted = predictedItems[predictedItems.length - 1];
+      lastValues[category] = lastPredicted.cost;
+    }
+  });
+
+  return lastValues;
+};
+
+// Process data for chart - modify this function to connect actual and predicted data
+const processDataForChart = costData => {
+  const processedData = [];
+
+  if (!costData || !costData.actual) {
+    return processedData;
+  }
+
+  // Get all dates from both actual and predicted data
+  const allDates = new Set();
+  const actualCategories = Object.keys(costData.actual);
+  const predictedCategories = costData.predicted ? Object.keys(costData.predicted) : [];
+
+  // Collect all dates
+  actualCategories.forEach(category => {
+    costData.actual[category].forEach(costItem => {
+      const dateStr = moment(costItem.date).format('MMM YYYY');
+      allDates.add(dateStr);
+    });
+  });
+
+  if (costData.predicted) {
+    predictedCategories.forEach(category => {
+      costData.predicted[category].forEach(costItem => {
+        const dateStr = moment(costItem.date).format('MMM YYYY');
+        allDates.add(dateStr);
+      });
+    });
+  }
+
+  // Sort dates chronologically
+  const sortedDates = Array.from(allDates).sort((a, b) =>
+    moment(a, 'MMM YYYY').diff(moment(b, 'MMM YYYY')),
+  );
+
+  // Create data points for each date
+  sortedDates.forEach(dateStr => {
+    const dataPoint = { date: dateStr };
+
+    // Add actual data values
+    actualCategories.forEach(category => {
+      const costItem = costData.actual[category].find(
+        costEntry => moment(costEntry.date).format('MMM YYYY') === dateStr,
+      );
+      if (costItem) {
+        dataPoint[category] = costItem.cost;
+      }
+    });
+
+    // Add predicted data values
+    if (costData.predicted) {
+      predictedCategories.forEach(category => {
+        const costItem = costData.predicted[category].find(
+          costEntry => moment(costEntry.date).format('MMM YYYY') === dateStr,
+        );
+        if (costItem) {
+          dataPoint[`${category}Predicted`] = costItem.cost;
+        }
+      });
+    }
+
+    // For the last actual data point of each category, also add it as the first predicted point
+    if (costData.predicted) {
+      actualCategories.forEach(category => {
+        const actualItems = costData.actual[category];
+        if (actualItems && actualItems.length > 0) {
+          const lastActualItem = actualItems[actualItems.length - 1];
+          const lastActualDateStr = moment(lastActualItem.date).format('MMM YYYY');
+
+          if (dateStr === lastActualDateStr) {
+            dataPoint[`${category}Predicted`] = lastActualItem.cost;
+          }
+        }
+      });
+    }
+
+    processedData.push(dataPoint);
+  });
+
+  return processedData;
+};
+
+// Shared marker component for legend and tooltip (diamond for predicted, circle for actual)
+function ChartMarker({ color, isPredicted }) {
+  return isPredicted ? (
+    <span
+      className="tooltip-marker"
+      style={{
+        backgroundColor: color,
+        width: '6px',
+        height: '6px',
+        transform: 'rotate(45deg)',
+        display: 'inline-block',
+      }}
+    />
+  ) : (
+    <span
+      className="tooltip-marker"
+      style={{
+        backgroundColor: color,
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  );
+}
+
+ChartMarker.propTypes = {
+  color: PropTypes.string.isRequired,
+  isPredicted: PropTypes.bool.isRequired,
+};
+
+// Map dataKey base names to display labels
+const COST_LABELS = {
+  Labor: 'Labor Cost',
+  Materials: 'Materials Cost',
+  Equipment: 'Equipment Cost',
+  Total: 'Total Cost',
+};
+
+// Custom tooltip component
+function CustomTooltip({ active, payload, label, currency, darkMode }) {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+
+  const textColor = darkMode ? DARK.text : LIGHT.text;
+
+  // Check if any payload entry is predicted data
+  const hasActualData = payload.some(entry => !entry.dataKey.includes('Predicted'));
+  const hasPredictedData = payload.some(entry => entry.dataKey.includes('Predicted'));
+
+  // If both actual and predicted exist, prioritize showing "Actual"
+  const displayType = hasActualData ? 'Actual' : hasPredictedData ? 'Predicted' : 'Actual';
+  // Filter payload: if actual data exists, only show actual data; otherwise show predicted data
+  const filteredPayload = hasActualData
+    ? payload.filter(entry => !entry.dataKey.includes('Predicted'))
+    : payload;
+
+  return (
+    <div
+      className="cost-chart-tooltip"
+      style={{
+        backgroundColor: darkMode ? DARK.cardBg : LIGHT.bg,
+        border: `1px solid ${darkMode ? DARK.border : LIGHT.border}`,
+        borderRadius: '4px',
+        padding: '8px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+        color: textColor,
+        fontSize: '12px',
+      }}
+    >
+      <p
+        className="tooltip-date"
+        style={{ margin: '0 0 4px 0', fontWeight: 'bold', color: textColor }}
+      >
+        {label}
+      </p>
+      <p
+        className="tooltip-type"
+        style={{ margin: '0 0 4px 0', fontSize: '10px', color: textColor, opacity: 0.8 }}
+      >
+        {displayType}
+      </p>
+      {filteredPayload.map(entry => {
+        const isPredicted = entry.dataKey.includes('Predicted');
+        const baseDataKey = entry.dataKey.replace('Predicted', '');
+        const costLabel = COST_LABELS[baseDataKey] || baseDataKey;
+
+        return (
+          <div
+            key={`tooltip-${entry.dataKey}-${entry.value}`}
+            className="tooltip-item"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              margin: '2px 0',
+              color: textColor,
+            }}
+          >
+            <ChartMarker color={entry.color} isPredicted={isPredicted} />
+            <span className="tooltip-label" style={{ color: textColor }}>
+              {costLabel}:
+            </span>
+            <span className="tooltip-value" style={{ fontWeight: 'bold', color: textColor }}>
+              {`${currency}${entry.value.toLocaleString()}`}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+CustomTooltip.propTypes = {
+  active: PropTypes.bool,
+  payload: PropTypes.array,
+  label: PropTypes.string,
+  currency: PropTypes.string.isRequired,
+  darkMode: PropTypes.bool,
+};
+
+function CostPredictionPage({ projectId }) {
+  const [data, setData] = useState([]);
+  const [selectedCosts, setSelectedCosts] = useState(['Labor', 'Materials']);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [currency] = useState('$');
+  const [availableProjects, setAvailableProjects] = useState([]);
+  const [selectedProject, setSelectedProject] = useState(null);
+  const [lastPredictedValues, setLastPredictedValues] = useState({});
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const projectIds = await getProjectIds();
+        setAvailableProjects(projectIds.map(id => ({ value: id, label: id })));
+        if (projectIds.length > 0) {
+          const initialProject = projectId || projectIds[0];
+          setSelectedProject({ value: initialProject, label: initialProject });
+        }
+      } catch {
+        setError('Failed to load projects');
+      }
+    };
+    fetchProjects();
+  }, [projectId]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!selectedProject) return;
+      setLoading(true);
+      try {
+        const costData = await getProjectCosts(selectedProject.value);
+        setData(processDataForChart(costData));
+        setLastPredictedValues(getLastPredictedValues(costData));
+        setLoading(false);
+      } catch {
+        setError('Failed to load cost data');
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [selectedProject]);
+
+  const handleCostChange = selected => {
+    const selectedValues = selected ? selected.map(option => option.value) : [];
+    setSelectedCosts(selectedValues);
+  };
+  const handleProjectChange = selected => setSelectedProject(selected);
+
+  // Pick the right dot component by name
+  const getDotRenderer = category => {
+    switch (category) {
+      case 'Labor':
+        return LaborDot;
+      case 'Materials':
+        return MaterialsDot;
+      case 'Equipment':
+        return EquipmentDot;
+      case 'Total':
+        return TotalDot;
+      default:
+        return LaborDot;
+    }
+  };
+
+  // Toggle dark-mode body class for global Recharts overrides in the CSS module
+  useEffect(() => {
+    document.body.classList.toggle('dark-mode-body', darkMode);
+    return () => document.body.classList.remove('dark-mode-body');
+  }, [darkMode]);
+
+  return (
+    <div className={`${styles.costPredictionPage} ${darkMode ? 'dark-mode' : ''}`}>
+      {/* ReactTooltip moved outside wrapper for better positioning */}
+      <ReactTooltip
+        id="cost-prediction-info"
+        place="left"
+        effect="solid"
+        className={styles.costPredictionTooltip}
+        clickable
+        event="click"
+        globalEventOff="click"
+        delayHide={100}
+        delayShow={0}
+      >
+        <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>Chart Overview</div>
+        <div>This chart compares planned vs actual costs across different categories.</div>
+        <ul style={{ paddingLeft: '16px', marginTop: '4px' }}>
+          <li>Solid lines represent actual costs for each category.</li>
+          <li>Dashed lines with diamond markers represent predicted/planned costs.</li>
+          <li>Hover over lines to view exact cost values.</li>
+          <li>
+            The dropdown filters allow you to:
+            <ul style={{ paddingLeft: '16px' }}>
+              <li>Select specific cost categories (multi-select).</li>
+              <li>Pick a specific project.</li>
+            </ul>
+          </li>
+          <li>
+            Color coding:
+            <ul style={{ paddingLeft: '16px' }}>
+              <li>
+                <strong>Blue</strong> – Labor costs
+              </li>
+              <li>
+                <strong>Orange</strong> – Materials costs
+              </li>
+              <li>
+                <strong>Purple</strong> – Equipment costs
+              </li>
+              <li>
+                <strong>Green</strong> – Total costs
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </ReactTooltip>
+
+      <div className={styles.costPredictionWrapper}>
+        <div className={styles.chartTitleContainer}>
+          <h2 className={styles.costPredictionTitle}>Planned v Actual Costs Tracking</h2>
+          <button
+            type="button"
+            className={styles.costPredictionInfoButton}
+            data-tip
+            data-for="cost-prediction-info"
+            aria-label="Chart Info"
+          >
+            <Info size={14} strokeWidth={2} />
+          </button>
+        </div>
+
+        <div className={styles.dropdownContainer}>
+          <Select
+            options={availableProjects}
+            value={selectedProject}
+            onChange={handleProjectChange}
+            placeholder="Select Project"
+            classNamePrefix="custom-select"
+            className={styles.dropdownItem}
+            styles={getSingleSelectStyles(darkMode)}
+          />
+
+          <Select
+            isMulti
+            isSearchable
+            options={costOptions}
+            value={costOptions.filter(option => selectedCosts.includes(option.value))}
+            onChange={handleCostChange}
+            placeholder="All Cost Categories"
+            classNamePrefix="custom-select"
+            className={`${styles.dropdownItem} ${styles.multiSelect}`}
+            menuPosition="fixed"
+            closeMenuOnSelect={false}
+            hideSelectedOptions={false}
+            styles={getMultiSelectStyles(darkMode)}
+          />
+        </div>
+
+        <div className={styles.costPredictionChartContainer}>
+          {loading && <div className={styles.costChartLoading}>Loading...</div>}
+          {error && <div className={styles.costChartError}>{error}</div>}
+
+          {!loading && !error && data.length > 0 && (
+            <div style={{ height: 'calc(100% - 20px)', width: '100%', position: 'relative' }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={data} margin={{ top: 25, right: 10, left: 45, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={getGridStroke(darkMode)} />
+                  <XAxis
+                    dataKey="date"
+                    tick={{ fill: getAxisTickFill(darkMode), fontSize: 12 }}
+                    tickMargin={5}
+                    height={25}
+                  />
+                  <YAxis
+                    tick={{ fill: getAxisTickFill(darkMode), fontSize: 12 }}
+                    tickFormatter={value => `${currency}${value}`}
+                    width={50}
+                  />
+                  <Tooltip content={<CustomTooltip currency={currency} darkMode={darkMode} />} />
+                  <Legend
+                    verticalAlign="bottom"
+                    height={15}
+                    iconSize={8}
+                    wrapperStyle={{
+                      fontSize: 11,
+                      padding: 0,
+                      margin: '0 auto',
+                      width: '100%',
+                      textAlign: 'center',
+                      lineHeight: '1.2',
+                      color: getAxisTickFill(darkMode),
+                    }}
+                    align="center"
+                    content={props => {
+                      const legendTextColor = getAxisTickFill(darkMode);
+                      return (
+                        <div
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            gap: '15px',
+                            flexWrap: 'wrap',
+                            fontSize: '11px',
+                            color: legendTextColor,
+                          }}
+                        >
+                          {props.payload.map((entry, index) => {
+                            const isPredicted = entry.value.includes('Predicted');
+                            return (
+                              <div
+                                key={index}
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '4px',
+                                }}
+                              >
+                                <ChartMarker color={entry.color} isPredicted={isPredicted} />
+                                <span style={{ color: legendTextColor }}>{entry.value}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      );
+                    }}
+                  />
+
+                  {/* Reference Lines for Last Predicted Values */}
+                  {(selectedCosts.length > 0
+                    ? selectedCosts
+                    : ['Labor', 'Materials']
+                  ).map(category =>
+                    lastPredictedValues[category] ? (
+                      <ReferenceLine
+                        key={`ref-${category}`}
+                        y={lastPredictedValues[category]}
+                        stroke={costColors[category]}
+                        strokeWidth={1.5}
+                      />
+                    ) : null,
+                  )}
+
+                  {/* Dynamically render lines based on selected costs */}
+                  {(selectedCosts.length > 0 ? selectedCosts : ['Labor', 'Materials']).map(
+                    category => (
+                      <Fragment key={`${category}-container`}>
+                        {/* Actual cost line */}
+                        <Line
+                          key={category}
+                          type="linear"
+                          dataKey={category}
+                          name={`${category} Cost`}
+                          stroke={costColors[category]}
+                          strokeWidth={2}
+                          connectNulls={true}
+                          dot={{
+                            r: 3,
+                            fill: costColors[category],
+                            stroke: costColors[category],
+                            strokeWidth: 0,
+                          }}
+                          activeDot={{
+                            r: 4,
+                            fill: costColors[category],
+                            stroke: costColors[category],
+                            strokeWidth: 0,
+                          }}
+                          isAnimationActive={false}
+                        />
+                        {/* Predicted cost line */}
+                        <Line
+                          key={`${category}Predicted`}
+                          type="linear"
+                          dataKey={`${category}Predicted`}
+                          name={`${category} Cost (Predicted)`}
+                          stroke={costColors[category]}
+                          strokeWidth={2}
+                          strokeDasharray="8 4"
+                          connectNulls={true}
+                          dot={getDotRenderer(category)}
+                          activeDot={{ r: 4 }}
+                          isAnimationActive={false}
+                        />
+                      </Fragment>
+                    ),
+                  )}
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+
+          {!loading && !error && data.length === 0 && (
+            <div
+              className={styles.costChartEmpty}
+              style={{ color: darkMode ? DARK.text : 'inherit' }}
+            >
+              <p>No data available</p>
+            </div>
+          )}
+        </div>
+
+        {/* Fixed label below chart */}
+        <div className={styles.chartLegend}>
+          <span>📊 Actual Costs</span>
+          <span>vs</span>
+          <span>📈 Predicted Costs</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CostPredictionPage.propTypes = {
+  projectId: PropTypes.string,
+};
+
+export default CostPredictionPage;
diff --git a/src/components/BMDashboard/CostPrediction/CostPredictionPage.module.css b/src/components/BMDashboard/CostPrediction/CostPredictionPage.module.css
new file mode 100644
index 0000000000..b9caaede0f
--- /dev/null
+++ b/src/components/BMDashboard/CostPrediction/CostPredictionPage.module.css
@@ -0,0 +1,247 @@
+/* Cost Prediction Page Styles */
+.costPredictionPage {
+  padding: 20px;
+  background-color: var(--card-bg);
+  min-height: 100vh;
+  color: var(--text-color);
+}
+
+/* Chart Title Container */
+.chartTitleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+  padding: 0 10px;
+  position: relative;
+}
+
+.costPredictionTitle {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color);
+  text-align: center;
+}
+
+.costPredictionInfoButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-color);
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  position: absolute;
+  right: 10px;
+}
+
+.costPredictionInfoButton:hover {
+  opacity: 1;
+}
+
+.costPredictionTooltip {
+  max-width: 300px;
+  font-size: 12px;
+  line-height: 1.4;
+  z-index: 1000 !important;
+  position: fixed !important;
+}
+
+/* Dropdown Container */
+.dropdownContainer {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+  padding: 0 10px;
+  flex-wrap: wrap;
+}
+
+.dropdownItem {
+  flex: 1;
+  min-width: 120px;
+}
+
+.multiSelect {
+  min-width: 150px;
+}
+
+/* Chart Wrapper - protects from external styles */
+.costPredictionWrapper {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Chart Container */
+.costPredictionChartContainer {
+  position: relative;
+  height: 500px;
+  width: 100%;
+  padding: 0 10px;
+  margin-bottom: 5px;
+  background-color: transparent;
+}
+
+/* Chart Legend */
+.chartLegend {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--text-color);
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.costChartLoading,
+.costChartError,
+.costChartEmpty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-color);
+  font-size: 16px;
+}
+
+.costChartError {
+  color: #ff4d4f;
+}
+
+/* Chart Tooltip Styling */
+.costPredictionChartContainer :global(.recharts-tooltip-wrapper) {
+  z-index: 1000 !important;
+}
+
+.costPredictionChartContainer :global(.recharts-default-tooltip) {
+  background-color: var(--card-bg) !important;
+  border: 1px solid var(--button-hover) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+  padding: 8px !important;
+}
+
+.costPredictionChartContainer :global(.recharts-tooltip-label) {
+  color: var(--text-color) !important;
+  font-weight: bold !important;
+  margin-bottom: 4px !important;
+}
+
+.costPredictionChartContainer :global(.recharts-tooltip-item) {
+  color: var(--text-color) !important;
+  padding: 2px 0 !important;
+}
+
+.costPredictionChartContainer :global(.recharts-tooltip-item-name) {
+  color: var(--text-color) !important;
+}
+
+.costPredictionChartContainer :global(.recharts-tooltip-item-value) {
+  color: var(--text-color) !important;
+  font-weight: bold !important;
+}
+
+/* Dark mode styles */
+:global(.dark-mode) .costPredictionPage {
+  background-color: #1e2736;
+  color: #e0e0e0;
+}
+
+:global(.dark-mode) .costPredictionWrapper {
+  background-color: #2c3344;
+}
+
+:global(.dark-mode) .costPredictionChartContainer {
+  background-color: #1e2736;
+  color: #e0e0e0;
+}
+
+:global(.dark-mode) .costPredictionChartContainer :global(.recharts-default-tooltip) {
+  background-color: #2c3344 !important;
+  border-color: #364156 !important;
+  color: #e0e0e0 !important;
+}
+
+:global(.dark-mode) .costPredictionTitle {
+  color: #e0e0e0;
+}
+
+:global(.dark-mode) .costPredictionInfoButton {
+  color: #e0e0e0;
+}
+
+:global(.dark-mode) .costPredictionInfoButton:hover {
+  color: #ffffff;
+}
+
+/* Dark-mode body overrides for Recharts (replaces injected <style>) */
+:global(.dark-mode-body) :global(.recharts-wrapper),
+:global(.dark-mode-body) :global(.recharts-surface) {
+  background-color: #1e2736 !important;
+}
+
+:global(.dark-mode-body) :global(.recharts-cartesian-grid-horizontal) line,
+:global(.dark-mode-body) :global(.recharts-cartesian-grid-vertical) line {
+  stroke: #364156 !important;
+}
+
+:global(.dark-mode-body) :global(.recharts-text) {
+  fill: #e0e0e0 !important;
+}
+
+:global(.dark-mode-body) :global(.recharts-default-legend) {
+  background-color: #1e2736 !important;
+}
+
+:global(.dark-mode-body) :global(.recharts-legend-item-text) {
+  color: #e0e0e0 !important;
+}
+
+:global(.dark-mode-body) :global(.recharts-tooltip-wrapper) {
+  background-color: transparent !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .dropdownContainer {
+    flex-direction: column;
+  }
+
+  .dropdownItem {
+    min-width: 100%;
+  }
+
+  .costPredictionTitle {
+    font-size: 16px;
+  }
+
+  .costPredictionChartContainer {
+    height: 400px;
+  }
+
+  .costPredictionPage {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chartTitleContainer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .costPredictionChartContainer {
+    height: 350px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
index e66b940f30..2302bece25 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   LineChart,
@@ -13,6 +14,7 @@ import {
 } from 'recharts';
 import styles from './CostPredictionChart.module.css';
 import projectCostService from '../../../services/projectCostService';
+import { getTooltipStyles } from '../../../utils/bmChartStyles';
 
 // Custom dot renderer (unchanged)
 function renderDotTopOrBottom(lineKey, color) {
@@ -145,6 +147,7 @@ function CostPredictionChart({ projectId }) {
                 y={y + 15} // push text down so it doesn’t overlap axis line
                 textAnchor="middle"
                 fill={darkMode ? '#e5e7eb' : '#9ca3af'}
+                fontSize={12}
               >
                 {payload.value}
               </text>
@@ -153,13 +156,22 @@ function CostPredictionChart({ projectId }) {
           />
           <YAxis
             tick={({ x, y, payload }) => (
-              <text x={x} y={y} textAnchor="end" fill={darkMode ? '#e5e7eb' : '#9ca3af'}>
+              <text
+                x={x}
+                y={y}
+                textAnchor="end"
+                fill={darkMode ? '#e5e7eb' : '#9ca3af'}
+                fontSize={12}
+              >
                 {payload.value}
               </text>
             )}
           />
           {/* Tooltip & Legend */}
-          <Tooltip />
+          <Tooltip
+            {...getTooltipStyles(darkMode)}
+            cursor={{ stroke: darkMode ? '#e0e0e0' : '#999' }}
+          />
           <Legend
             verticalAlign="bottom"
             height={48}
@@ -170,7 +182,7 @@ function CostPredictionChart({ projectId }) {
                   <li key={item.label} className={styles.legendListItem}>
                     {/* icon */}
                     {item.type === 'circle' ? (
-                      <span className={styles.legendItem} />
+                      <span className={styles.legendItem} style={{ backgroundColor: item.color }} />
                     ) : (
                       <svg width="18" height="12">
                         <line
@@ -185,7 +197,7 @@ function CostPredictionChart({ projectId }) {
                       </svg>
                     )}
                     {/* label */}
-                    <span style={{ color: item.color }}>{item.label}</span>
+                    <span style={{ color: darkMode ? '#e5e7eb' : '#374151' }}>{item.label}</span>
                   </li>
                 ))}
               </ul>
@@ -230,4 +242,8 @@ function CostPredictionChart({ projectId }) {
   );
 }
 
+CostPredictionChart.propTypes = {
+  projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
 export default CostPredictionChart;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
index 95676917a6..ec515bb5ee 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
@@ -19,6 +19,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 12px;
 }
 
 .legendItem {
@@ -26,7 +27,6 @@
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: var(--text-color);
 }
 
 .legendListItem {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.jsx
index e5d032a325..eacf0bc1f9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.jsx
@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';
-import axios from 'axios';
+// import httpService from '../../../../services/httpService';
+import { getProjectExpenditure } from './mockExpenditureData';
 import styles from './ExpenditureChart.module.css';
+import { getTooltipStyles } from '../../../../utils/bmChartStyles';
 
 const COLORS = ['#6777EF', '#A0CD61', '#F5CD4B'];
 const CATEGORIES = ['Labor', 'Equipment', 'Materials'];
@@ -35,6 +39,7 @@ const renderCustomLabel = ({ cx, cy, midAngle, outerRadius, percent, name }) =>
 };
 
 function ExpenditureChart({ projectId }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [actual, setActual] = useState([]);
   const [planned, setPlanned] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -46,11 +51,16 @@ function ExpenditureChart({ projectId }) {
       setLoading(true);
       setError(null);
       try {
-        const res = await axios.get(
-          `${process.env.REACT_APP_APIENDPOINT}/bm/expenditure/${projectId}/pie`,
-        );
-        setActual(res.data.actual);
-        setPlanned(res.data.planned);
+        // Using mock data instead of API call
+        const data = getProjectExpenditure(projectId);
+        setActual(data.actual);
+        setPlanned(data.planned);
+        // Original API call (commented out for mock data)
+        // const res = await httpService.get(
+        //   `${process.env.REACT_APP_APIENDPOINT}/bm/expenditure/${projectId}/pie`,
+        // );
+        // setActual(res.data.actual);
+        // setPlanned(res.data.planned);
       } catch (err) {
         setError('Failed to load expenditure data');
       } finally {
@@ -61,8 +71,8 @@ function ExpenditureChart({ projectId }) {
   }, [projectId]);
 
   const renderChart = (data, title) => (
-    <div className={styles.expenditure - chart - card}>
-      <h4 className={styles.expenditure - chart - title}>{title}</h4>
+    <div className={styles.expenditureChartCard}>
+      <h4 className={styles.expenditureChartTitle}>{title}</h4>
       <PieChart width={280} height={280}>
         <Pie
           data={data}
@@ -79,22 +89,38 @@ function ExpenditureChart({ projectId }) {
             <Cell key={entry.category || index} fill={COLORS[index % COLORS.length]} />
           ))}
         </Pie>
-        <Tooltip />
-        <Legend layout="horizontal" verticalAlign="bottom" align="center" height={20} />
+        <Tooltip
+          {...getTooltipStyles(darkMode)}
+          itemStyle={{ color: darkMode ? '#e0e0e0' : '#333' }}
+        />
+        <Legend
+          layout="horizontal"
+          verticalAlign="bottom"
+          align="center"
+          height={20}
+          wrapperStyle={{
+            color: darkMode ? '#e0e0e0' : '#333',
+          }}
+          iconSize={10}
+        />
       </PieChart>
     </div>
   );
 
   if (loading)
-    return <div className={styles.expenditure - chart - loading}>Loading expenditure data...</div>;
-  if (error) return <div className={styles.expenditure - chart - error}>{error}</div>;
+    return <div className={styles.expenditureChartLoading}>Loading expenditure data...</div>;
+  if (error) return <div className={styles.expenditureChartError}>{error}</div>;
 
   return (
-    <div className={styles.expenditure - chart - wrapper}>
+    <div className={styles.expenditureChartWrapper}>
       {renderChart(normalizeData(actual), 'Actual Expenditure')}
       {renderChart(normalizeData(planned), 'Planned Expenditure')}
     </div>
   );
 }
 
+ExpenditureChart.propTypes = {
+  projectId: PropTypes.string.isRequired,
+};
+
 export default ExpenditureChart;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.module.css
index 8b58a523e4..e7c5519980 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.module.css
@@ -1,4 +1,4 @@
-.expenditure-chart-wrapper {
+.expenditureChartWrapper {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -8,11 +8,11 @@
   margin: 0;
 }
 
-.expenditure-chart-card {
+.expenditureChartCard {
   flex: 1 1 220px;
-  max-width: 260px;
+  max-width: 280px;
   padding: 12px 10px;
-  min-height: 300px;
+  min-height: 350px;
   background: var(--card-bg);
   box-shadow: 0 2px 4px var(--card-shadow);
   border-radius: 8px;
@@ -22,20 +22,23 @@
   justify-content: flex-start;
 }
 
-.expenditure-chart-title {
+.expenditureChartTitle {
   font-size: 1.1rem;
   font-weight: bold;
   text-align: center;
   margin-bottom: 6px;
+  color: var(--text-color);
 }
 
 .recharts-legend-wrapper {
   margin-top: -10px !important;
+  padding: 0 10px;
 }
 
 .recharts-legend-item-text {
-  font-size: 12px !important;
+  font-size: 11px !important;
   white-space: nowrap;
+  color: var(--text-color) !important;
 }
 
 .recharts-pie-label-text {
@@ -47,12 +50,12 @@
   white-space: nowrap;
 }
 
-.dark-mode .expenditure-chart-card {
+.dark-mode .expenditureChartCard {
   background: var(--card-bg);
   box-shadow: 0 2px 5px rgba(255, 255, 255, 0.08);
 }
 
-.dark-mode .expenditure-chart-title {
+.dark-mode .expenditureChartTitle {
   color: var(--text-color);
 }
 
@@ -61,3 +64,43 @@
   color: #fff !important;
   border: 1px solid #555 !important;
 }
+
+.expenditureChartLoading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  color: var(--text-color);
+}
+
+.expenditureChartError {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  color: var(--error-color, #ff4d4f);
+}
+
+/* Responsive design for tablets and smaller screens */
+@media (max-width: 768px) {
+  .expenditureChartCard {
+    max-width: 100%;
+    flex: 1 1 100%;
+  }
+
+  .expenditureChartWrapper {
+    gap: 12px;
+  }
+}
+
+/* Responsive design for mobile */
+@media (max-width: 480px) {
+  .expenditureChartCard {
+    padding: 8px;
+    min-height: 260px;
+  }
+
+  .expenditureChartTitle {
+    font-size: 1rem;
+  }
+}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.jsx
index d1eb5e79f5..ddd6ae932a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.jsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
-import axios from 'axios';
+// import httpService from '../../../../services/httpService';
 import ExpenditureChart from './ExpenditureChart';
+import { getProjectIds } from './mockExpenditureData';
+import styles from './FinancialsTrackingCard.module.css';
 
 function FinancialsTrackingCard() {
   const [projectList, setProjectList] = useState([]);
@@ -12,17 +14,25 @@ function FinancialsTrackingCard() {
     const fetchProjects = async () => {
       try {
         setLoading(true);
-        const res = await axios.get(`${process.env.REACT_APP_APIENDPOINT}/bm/expenditure/projects`);
-        const labeledProjects = res.data.map((id, index) => ({
+        // Using mock data instead of API call
+        const projectIds = getProjectIds();
+        const labeledProjects = projectIds.map((id, index) => ({
           id,
           name: `Project ${String.fromCharCode(65 + index)}`,
         }));
+        // Original API call (commented out for mock data)
+        // const res = await httpService.get(
+        //   `${process.env.REACT_APP_APIENDPOINT}/bm/expenditure/projects`,
+        // );
+        // const labeledProjects = res.data.map((id, index) => ({
+        //   id,
+        //   name: `Project ${String.fromCharCode(65 + index)}`,
+        // }));
         setProjectList(labeledProjects);
         if (labeledProjects.length > 0) {
           setSelectedProject(labeledProjects[0].id);
         }
       } catch (err) {
-        // console.error('Error fetching project IDs:', err);
         setError('Failed to load projects');
       } finally {
         setLoading(false);
@@ -35,8 +45,8 @@ function FinancialsTrackingCard() {
   if (error) return <div>{error}</div>;
 
   return (
-    <div className="financials-tracking-card">
-      <div className="project-dropdown">
+    <div className={styles.financialsTrackingCard}>
+      <div className={styles.projectDropdown}>
         <label htmlFor="project-select">Select Project:</label>
         <select
           id="project-select"
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.module.css
new file mode 100644
index 0000000000..75bedf3125
--- /dev/null
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.module.css
@@ -0,0 +1,100 @@
+.financialsTrackingCard {
+  width: 100%;
+  padding: 20px;
+  background: var(--section-bg);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--card-shadow);
+}
+
+.projectDropdown {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: var(--card-bg);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.projectDropdown label {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--text-color);
+  white-space: nowrap;
+}
+
+.projectDropdown select {
+  flex: 1;
+  max-width: 300px;
+  padding: 10px 14px;
+  border: 1px solid var(--border-color, #ccc);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--section-bg);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.projectDropdown select option {
+  background: var(--section-bg, #fff);
+  color: var(--text-color, #000);
+  padding: 8px;
+}
+
+.projectDropdown select:hover {
+  border-color: var(--primary-color, #6777ef);
+  background-color: var(--hover-bg, rgba(103, 119, 239, 0.05));
+}
+
+.projectDropdown select:focus {
+  outline: none;
+  border-color: var(--primary-color, #6777ef);
+  box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.1);
+}
+
+/* Dark mode support */
+.dark-mode .financialsTrackingCard {
+  background: var(--section-bg);
+  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
+}
+
+.dark-mode .projectDropdown {
+  background: var(--card-bg);
+  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.08);
+}
+
+.dark-mode .projectDropdown select {
+  border-color: var(--border-color, #444);
+  background: var(--section-bg);
+  color: var(--text-color);
+}
+
+.dark-mode .projectDropdown select option {
+  background: #2d3748;
+  color: #fff;
+}
+
+.dark-mode .projectDropdown select:hover {
+  border-color: var(--primary-color, #6777ef);
+  background-color: rgba(103, 119, 239, 0.15);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .financialsTrackingCard {
+    padding: 12px;
+  }
+
+  .projectDropdown {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .projectDropdown select {
+    max-width: 100%;
+    width: 100%;
+  }
+}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/mockExpenditureData.js b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/mockExpenditureData.js
new file mode 100644
index 0000000000..0dfc65e2bd
--- /dev/null
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/mockExpenditureData.js
@@ -0,0 +1,86 @@
+// Mock data from MongoDB expenditurePie collection
+const mockExpenditureData = [
+  { projectId: '5a849085592ca46b43db272a', category: 'Labor', type: 'actual', amount: 3500 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Labor', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'actual', amount: 300 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Labor', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'planned', amount: 450 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Materials', type: 'planned', amount: 5000 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Materials', type: 'planned', amount: 5000 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Materials', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'planned', amount: 550 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Labor', type: 'actual', amount: 4000 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Materials', type: 'actual', amount: 4000 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Materials', type: 'actual', amount: 4000 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Labor', type: 'planned', amount: 5000 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Equipment', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'actual', amount: 10710 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Labor', type: 'planned', amount: 1500 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Labor', type: 'planned', amount: 5000 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Equipment', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'actual', amount: 6300 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Equipment', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'actual', amount: 4760 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'actual', amount: 4000 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Equipment', type: 'planned', amount: 3150 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Labor', type: 'actual', amount: 4000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'planned', amount: 350 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'planned', amount: 2040 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Labor', type: 'planned', amount: 2700 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'actual', amount: 500 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Equipment', type: 'actual', amount: 7350 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'planned', amount: 4590 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Materials', type: 'planned', amount: 5000 },
+  { projectId: '646be02cb56e486c046486b6', category: 'Equipment', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Materials', type: 'actual', amount: 4000 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Materials', type: 'actual', amount: 1400 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Equipment', type: 'planned', amount: 5000 },
+  { projectId: '5a849085592ca46b43db9999', category: 'Equipment', type: 'planned', amount: 5000 },
+  { projectId: '6628f8b2c25e4a69f3d3f001', category: 'Equipment', type: 'actual', amount: 400 },
+  { projectId: '5a849085592ca46b43db272a', category: 'Materials', type: 'planned', amount: 600 },
+];
+
+// Get unique project IDs (mimics /api/bm/expenditure/projects endpoint)
+export const getProjectIds = () => {
+  const uniqueIds = [...new Set(mockExpenditureData.map(item => item.projectId))];
+  return uniqueIds;
+};
+
+// Get expenditure data for a specific project (mimics /api/bm/expenditure/:projectId/pie endpoint)
+export const getProjectExpenditure = projectId => {
+  const projectData = mockExpenditureData.filter(item => item.projectId === projectId);
+
+  // Group by type and category, summing amounts
+  const actual = {};
+  const planned = {};
+
+  projectData.forEach(item => {
+    const target = item.type === 'actual' ? actual : planned;
+    if (!target[item.category]) {
+      target[item.category] = 0;
+    }
+    target[item.category] += item.amount;
+  });
+
+  // Convert to array format expected by the chart
+  const actualArray = Object.entries(actual).map(([category, amount]) => ({
+    category,
+    amount,
+  }));
+
+  const plannedArray = Object.entries(planned).map(([category, amount]) => ({
+    category,
+    amount,
+  }));
+
+  return {
+    actual: actualArray,
+    planned: plannedArray,
+  };
+};
+
+export default mockExpenditureData;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 48818a5f28..6e4c193ce5 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
 import html2canvas from 'html2canvas';
 import { jsPDF } from 'jspdf';
+import WeeklyProjectSummaryHeader from './WeeklyProjectSummaryHeader';
 import CostPredictionChart from './CostPredictionChart';
 import ToolStatusDonutChart from './ToolStatusDonutChart/ToolStatusDonutChart';
 import PaidLaborCost from './PaidLaborCost/PaidLaborCost';
@@ -16,6 +17,8 @@ import ToolsHorizontalBarChart from './Tools/ToolsHorizontalBarChart';
 import ExpenseBarChart from './Financials/ExpenseBarChart';
 import ActualVsPlannedCost from './ActualVsPlannedCost/ActualVsPlannedCost';
 import TotalMaterialCostPerProject from './TotalMaterialCostPerProject/TotalMaterialCostPerProject';
+import FinancialsTrackingCard from './ExpenditureChart/FinancialsTrackingCard';
+import EmbedInteractiveMap from '../InteractiveMap/EmbedInteractiveMap';
 import InteractiveMap from '../InteractiveMap/InteractiveMap';
 import styles from './WeeklyProjectSummary.module.css';
 import IssueCharts from '../Issues/openIssueCharts';
@@ -128,7 +131,6 @@ function WeeklyProjectSummary() {
   const [openSections, setOpenSections] = useState({});
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const darkMode = useSelector(state => state.theme.darkMode);
-
   useEffect(() => {
     if (materials.length === 0) {
       dispatch(fetchAllMaterials());
@@ -168,16 +170,19 @@ function WeeklyProjectSummary() {
                 <div
                   key={uniqueId}
                   className={`${styles.weeklyProjectSummaryCard} ${styles.statusCard}`}
-                  style={{ backgroundColor: button.bgColor }}
+                  style={{ backgroundColor: button.bgColor }} // Dynamic Background
                 >
                   <div className={`${styles.weeklyCardTitle}`}>{button.title}</div>
                   <div
                     className={`${styles.weeklyStatusButton}`}
-                    style={{ backgroundColor: button.buttonColor }}
+                    style={{ backgroundColor: button.buttonColor }} // Dynamic Oval Color
                   >
                     <span className={`${styles.weeklyStatusValue}`}>{button.value}</span>
                   </div>
-                  <div className="weekly-status-change" style={{ color: button.textColor }}>
+                  <div
+                    className="weekly-status-change"
+                    style={{ color: button.textColor }} // Dynamic Change Color
+                  >
                     {button.change}
                   </div>
                 </div>
@@ -186,6 +191,7 @@ function WeeklyProjectSummary() {
           </div>
         ),
       },
+      // New Issues Breakdown card
       {
         title: 'Issues Breakdown',
         key: 'Issues Breakdown',
@@ -233,57 +239,46 @@ function WeeklyProjectSummary() {
       {
         title: 'Tools and Equipment Tracking',
         key: 'Tools and Equipment Tracking',
-        className: 'full',
-        content: (
-          <div className={`${styles.toolsTrackingLayout}`}>
-            <div className={`${styles.toolsDonutWrap}`}>
-              <ToolStatusDonutChart />
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
-              <ToolsHorizontalBarChart darkMode={darkMode} />
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
-              <SupplierPerformanceGraph />
-            </div>
-          </div>
-        ),
+        className: 'half',
+        content: [
+          <div
+            key="donut-chart"
+            className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+          >
+            <ToolStatusDonutChart />
+          </div>,
+          <div
+            key="bar-chart"
+            className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+          >
+            <ToolsHorizontalBarChart darkMode={darkMode} />
+          </div>,
+        ],
       },
       {
         title: 'Lessons Learned',
         key: 'Lessons Learned',
-        className: 'full',
-        content: (
-          <div className={`${styles.lessonsLearnedGrid}`}>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.lessonsCard}`}>
-              <MostFrequentKeywords darkMode={darkMode} />
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.lessonsCard}`}>
-              <InjuryCategoryBarChart />
-            </div>
-          </div>
-        ),
+        className: 'half',
+        content: [
+          <MostFrequentKeywords key="frequent-tags-card" />,
+          <div key="injury-chart" className="weekly-project-summary-card normal-card">
+            <InjuryCategoryBarChart />
+          </div>,
+        ],
       },
       {
         title: 'Financials',
         key: 'Financials',
         className: 'large',
         content: (
-          <div className={`${styles.financialsGrid}`}>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-small financial-chart">
               <ExpenseBarChart />
             </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialBig}`}>
-              📊 Big Card
-            </div>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-big">📊 Big Card</div>
           </div>
         ),
       },
@@ -304,7 +299,7 @@ function WeeklyProjectSummary() {
             className={`${styles.weeklyProjectSummaryCard} ${styles.mapCard}`}
             style={{ height: '500px', padding: '0' }}
           >
-            <InteractiveMap />
+            <EmbedInteractiveMap />
           </div>
         ),
       },
@@ -312,40 +307,38 @@ function WeeklyProjectSummary() {
         title: 'Labor and Time Tracking',
         key: 'Labor and Time Tracking',
         className: 'half',
-        content: (
-          <div className={`${styles.laborTimeGrid}`}>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
-              <DistributionLaborHours />
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
-              <PaidLaborCost />
+        content: [1, 2].map((_, index) => {
+          const uniqueId = uuidv4();
+          return (
+            <div
+              key={uniqueId}
+              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+            >
+              {index === 1 ? <PaidLaborCost /> : <DistributionLaborHours />}
             </div>
-          </div>
-        ),
+          );
+        }),
       },
       {
         title: 'Financials Tracking',
         key: 'Financials Tracking',
         className: 'full',
-        content: (
-          <div className={`${styles.financialsTrackingGrid}`}>
-            {[1, 2, 3, 4].map((_, index) => {
-              const uniqueId = uuidv4();
-              return (
-                <div
-                  key={uniqueId}
-                  className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
-                >
-                  {(() => {
-                    if (index === 2) return <CostPredictionChart projectId={1} />;
-                    if (index === 3) return <ActualVsPlannedCost />;
-                    return '📊 Card';
-                  })()}
-                </div>
-              );
-            })}
-          </div>
-        ),
+        content: [1, 2, 3, 4].map((_, index) => {
+          const uniqueId = uuidv4();
+          return (
+            <div
+              key={uniqueId}
+              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+            >
+              {(() => {
+                if (index === 0) return <FinancialsTrackingCard />;
+                if (index === 2) return <CostPredictionChart projectId={1} />;
+                if (index === 3) return <ActualVsPlannedCost />;
+                return '📊 Card';
+              })()}
+            </div>
+          );
+        }),
       },
     ],
     [quantityOfMaterialsUsedData, darkMode],
@@ -460,7 +453,7 @@ function WeeklyProjectSummary() {
 
   return (
     <div className={`${styles.weeklyProjectSummaryContainer} ${darkMode ? styles.darkMode : ''}`}>
-      {/* Header Section - Now inline instead of separate component */}
+      {/* Header Section - Now inline instead of seperate component */}
       <div className={styles.weeklySummaryHeaderWrapper}>
         <div className={styles.weeklySummaryHeaderContainer}>
           <h1 className={styles.weeklySummaryHeaderTitle}>
diff --git a/src/routes.jsx b/src/routes.jsx
index 3ec84437c6..c5570f7e99 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -133,6 +133,9 @@ import CheckTypes from './components/BMDashboard/shared/CheckTypes';
 import AttendanceNoShow from './components/AttendanceSystem/AttendanceNoShowCharts.jsx';
 import LessonsLearntChart from './components/BMDashboard/LessonsLearnt/LessonsLearntChart';
 import UtilizationChart from './components/BMDashboard/UtilizationChart/UtilizationChart';
+import CostPredictionPage from './components/BMDashboard/CostPrediction/CostPredictionPage';
+//import MostSusceptibleTools from './components/MostSusceptible/toolBreakdownChart';
+
 import RentalChart from './components/BMDashboard/RentalChart/RentalChart';
 import ReturnedLateChart from './components/BMDashboard/RentalChart/ReturnedLateChart';
 import CreateNewTeam from './components/BMDashboard/Team/CreateNewTeam/CreateNewTeam';
@@ -662,6 +665,8 @@ export default (
           fallback
           component={PurchaseConsumable}
         />
+
+        <BMProtectedRoute path="/bmdashboard/cost-prediction" component={CostPredictionPage} />
         <BMProtectedRoute path="/bmdashboard/rentalchart" component={RentalChart} />
         <BMProtectedRoute path="/bmdashboard/returned-late-chart" component={ReturnedLateChart} />
         <BMProtectedRoute path="/bmdashboard/inventory/types" component={CheckTypes} />
diff --git a/src/services/projectCostTrackingService.js b/src/services/projectCostTrackingService.js
new file mode 100644
index 0000000000..8993827673
--- /dev/null
+++ b/src/services/projectCostTrackingService.js
@@ -0,0 +1,33 @@
+import axios from 'axios';
+import { ENDPOINTS } from '../utils/URL';
+
+/**
+ * Fetches all available project IDs with cost tracking data
+ * @returns {Promise<Array>} Array of project IDs
+ */
+export const getProjectIds = async () => {
+  const response = await axios.get(ENDPOINTS.PROJECT_COST_IDS);
+  return response.data.projectIds || [];
+};
+
+/**
+ * Fetches cost data for a specific project
+ * @param {string} projectId - The ID of the project
+ * @param {Object} options - Optional parameters
+ * @param {string} options.categories - Comma-separated list of categories to filter by
+ * @param {string} options.fromDate - Start date for filtering (YYYY-MM-DD)
+ * @param {string} options.toDate - End date for filtering (YYYY-MM-DD)
+ * @returns {Promise<Object>} Cost data including actual and predicted costs
+ */
+export const getProjectCosts = async (projectId, options = {}) => {
+  const { categories, fromDate, toDate } = options;
+  const response = await axios.get(
+    ENDPOINTS.PROJECT_COSTS_BY_ID(projectId, categories, fromDate, toDate),
+  );
+  return response.data;
+};
+
+export default {
+  getProjectIds,
+  getProjectCosts,
+};
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 641784a311..e812bfc6ea 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -357,8 +357,18 @@ export const ENDPOINTS = {
   BM_INJURY_ISSUE: `${APIEndpoint}/bm/issues`,
   BM_INJURY_SEVERITY: `${APIEndpoint}/bm/injuries/severity-by-project`,
   BM_RENTAL_CHART: `${APIEndpoint}/bm/rentalChart`,
-  BM_TOOLS_RETURNED_LATE: `${APIEndpoint}/bm/tools/returned-late`,
-  BM_TOOLS_RETURNED_LATE_PROJECTS: `${APIEndpoint}/bm/tools/returned-late/projects`,
+
+  // Project cost tracking endpoints
+  PROJECT_COST_IDS: `${APIEndpoint}/bm/projects-cost/ids`,
+  PROJECT_COSTS_BY_ID: (projectId, categories, fromDate, toDate) => {
+    let url = `${APIEndpoint}/bm/projects/${projectId}/costs`;
+    const params = [];
+    if (categories) params.push(`categories=${categories}`);
+    if (fromDate) params.push(`fromDate=${fromDate}`);
+    if (toDate) params.push(`toDate=${toDate}`);
+    if (params.length > 0) url += `?${params.join('&')}`;
+    return url;
+  },
   TOOLS_AVAILABILITY_PROJECTS: `${APIEndpoint}/bm/tools-availability/projects`,
   TOOLS_AVAILABILITY_BY_PROJECT: (projectId, startDate, endDate) => {
     let url = `${APIEndpoint}/bm/projects/${projectId}/tools-availability`;
diff --git a/src/utils/bmChartStyles.js b/src/utils/bmChartStyles.js
new file mode 100644
index 0000000000..25a09375d6
--- /dev/null
+++ b/src/utils/bmChartStyles.js
@@ -0,0 +1,88 @@
+/**
+ * Shared dark-mode style helpers for BM Dashboard charts.
+ * Centralises color tokens so every chart stays consistent
+ * and SonarQube no longer flags duplicated style objects.
+ */
+
+// ── colour tokens ──────────────────────────────────────────
+export const DARK = {
+  bg: '#1e2736',
+  cardBg: '#2c3344',
+  border: '#364156',
+  text: '#e0e0e0',
+  error: '#ff4d4f',
+};
+
+export const LIGHT = {
+  bg: '#fff',
+  border: '#ccc',
+  text: '#333',
+};
+
+// ── Recharts Tooltip contentStyle / labelStyle / itemStyle ─
+export const getTooltipStyles = darkMode => ({
+  contentStyle: {
+    backgroundColor: darkMode ? DARK.cardBg : LIGHT.bg,
+    border: `1px solid ${darkMode ? DARK.border : LIGHT.border}`,
+    color: darkMode ? DARK.text : LIGHT.text,
+  },
+  labelStyle: { color: darkMode ? DARK.text : LIGHT.text },
+  itemStyle: { color: darkMode ? DARK.text : LIGHT.text },
+});
+
+// ── react-select dark-mode base styles ─────────────────────
+// Use the spread operator to merge with component-specific overrides.
+const darkModeSelectBase = {
+  control: baseStyles => ({
+    ...baseStyles,
+    backgroundColor: DARK.cardBg,
+    borderColor: DARK.border,
+  }),
+  menu: baseStyles => ({
+    ...baseStyles,
+    backgroundColor: DARK.cardBg,
+  }),
+  option: (baseStyles, state) => ({
+    ...baseStyles,
+    backgroundColor: state.isFocused ? DARK.border : DARK.cardBg,
+    color: DARK.text,
+  }),
+  singleValue: baseStyles => ({
+    ...baseStyles,
+    color: DARK.text,
+  }),
+};
+
+/**
+ * Returns dark-mode styles for a single-value `<Select>`.
+ * Pass `darkMode` boolean – returns `{}` in light mode.
+ */
+export const getSingleSelectStyles = darkMode => (darkMode ? darkModeSelectBase : {});
+
+/**
+ * Returns dark-mode styles for a multi-value `<Select>`.
+ * Extends the base styles with multiValue tokens.
+ */
+export const getMultiSelectStyles = darkMode =>
+  darkMode
+    ? {
+        ...darkModeSelectBase,
+        multiValue: baseStyles => ({
+          ...baseStyles,
+          backgroundColor: DARK.border,
+        }),
+        multiValueLabel: baseStyles => ({
+          ...baseStyles,
+          color: DARK.text,
+        }),
+        multiValueRemove: baseStyles => ({
+          ...baseStyles,
+          color: DARK.text,
+          ':hover': { backgroundColor: DARK.error, color: '#fff' },
+        }),
+      }
+    : {};
+
+// ── Recharts axis / grid helpers ───────────────────────────
+export const getAxisTickFill = darkMode => (darkMode ? DARK.text : LIGHT.text);
+export const getGridStroke = darkMode => (darkMode ? DARK.border : LIGHT.border);