diff --git a/src/actions/bmdashboard/issueGraphActions.js b/src/actions/bmdashboard/issueGraphActions.js
new file mode 100644
index 00000000000..4c67fdc1465
--- /dev/null
+++ b/src/actions/bmdashboard/issueGraphActions.js
@@ -0,0 +1,43 @@
+import axios from 'axios';
+import {
+  FETCH_ISSUES_SUMMARY_REQUEST,
+  FETCH_ISSUES_SUMMARY_SUCCESS,
+  FETCH_ISSUES_SUMMARY_FAILURE,
+  FETCH_ISSUES_TREND_REQUEST,
+  FETCH_ISSUES_TREND_SUCCESS,
+  FETCH_ISSUES_TREND_FAILURE,
+} from '../../constants/bmdashboard/issueGraphConstants';
+import { ENDPOINTS } from '../../utils/URL';
+
+export const fetchIssueSummary = (params = {}) => async dispatch => {
+  try{
+    dispatch({ type: FETCH_ISSUES_SUMMARY_REQUEST });
+    const { data } = await axios.get(ENDPOINTS.BM_ISSUES_BARGRAPH_SUMMARY, { params });
+    const normalizedData = data.data ? {
+      total: data.data.totalIssues,
+      newThisWeek: data.data.newIssues,
+      resolved: data.data.resolvedIssues,
+      avgResolution: data.data.averageResolutionTimeDays,
+    } : {};
+    dispatch({ type: FETCH_ISSUES_SUMMARY_SUCCESS, payload: normalizedData });
+  }catch(error){
+    dispatch({
+      type: FETCH_ISSUES_SUMMARY_FAILURE,
+      payload: error.message || 'Failed to fetch issue summary',
+    });
+  }
+}
+
+export const fetchIssueTrend = (params = {}) => async dispatch => {
+  try{
+    dispatch({ type: FETCH_ISSUES_TREND_REQUEST });
+    const { data } = await axios.get(ENDPOINTS.BM_ISSUES_BARGRAPH_TREND, { params });
+    const trendData = data.data || [];
+    dispatch({ type: FETCH_ISSUES_TREND_SUCCESS, payload: trendData });
+  }catch(error){
+    dispatch({
+      type: FETCH_ISSUES_TREND_FAILURE,
+      payload: error.message || 'Failed to fetch issue trend',
+    });
+  }
+};
\ No newline at end of file
diff --git a/src/components/BMDashboard/Issues/IssueGraph.jsx b/src/components/BMDashboard/Issues/IssueGraph.jsx
new file mode 100644
index 00000000000..a66966901f7
--- /dev/null
+++ b/src/components/BMDashboard/Issues/IssueGraph.jsx
@@ -0,0 +1,244 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styles from './IssueGraph.module.css';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  LabelList,
+} from 'recharts';
+import { fetchIssueSummary, fetchIssueTrend } from '../../../actions/bmdashboard/issueGraphActions';
+
+// Constants and Static Helpers
+const TWELVE_WEEKS_IN_MS = 12 * 7 * 24 * 60 * 60 * 1000;
+const today = new Date();
+const formattedDate = date => date.toISOString().split('T')[0];
+const maxEndDate = formattedDate(today);
+const minStartDate = formattedDate(new Date(today.getTime() - TWELVE_WEEKS_IN_MS));
+
+const NO_DATA_STYLE = { color: '#ff4d4f' };
+const CHART_MARGIN = { top: 20, right: 20, left: 0, bottom: 30 };
+
+// Isolated Validation Helper to reduce Cognitive Complexity below 15
+const getDatesValidationError = (startDate, endDate) => {
+  if (!startDate || !endDate) {
+    return 'Please select both a Start Date and an End Date.';
+  }
+  if (startDate === endDate) {
+    return 'Start date and End date cannot be the same day. Please select a range.';
+  }
+  if (new Date(startDate) > new Date(endDate)) {
+    return 'Start date must be before the End date.';
+  }
+  return '';
+};
+
+function IssueGraph() {
+  const dispatch = useDispatch();
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const { loading, issueSummary, issueTrend, error } = useSelector(state => state.issueGraph);
+
+  const [weeks, setWeeks] = useState(8);
+  const [graphData, setGraphData] = useState([]);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const maxStartDate = endDate || maxEndDate;
+  const minEndDate = startDate || minStartDate;
+
+  const chartTheme = useMemo(
+    () => ({
+      gridStroke: darkMode ? '#3a4a5a' : '#e0e0e0',
+      tickColor: darkMode ? '#ffffff' : '#666',
+      cursorFill: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.05)',
+      tooltipContent: {
+        backgroundColor: darkMode ? '#253342' : '#fff',
+        border: '1px solid #555',
+        color: darkMode ? '#fff' : '#000',
+      },
+      tooltipText: { color: darkMode ? '#fff' : '#000' },
+      createdBarFill: darkMode ? '#4fc3f7' : '#007bff',
+      resolvedBarFill: darkMode ? '#81c784' : '#28a745',
+      labelFill: darkMode ? '#ffffff' : '#000000',
+    }),
+    [darkMode],
+  );
+
+  useEffect(() => {
+    if (weeks) {
+      dispatch(fetchIssueSummary({ weeks }));
+      dispatch(fetchIssueTrend({ weeks }));
+    }
+  }, [dispatch, weeks]);
+
+  useEffect(() => {
+    if (Array.isArray(issueTrend)) {
+      const sortedData = [...issueTrend].sort(
+        (a, b) => new Date(a.week).getTime() - new Date(b.week).getTime(),
+      );
+      setGraphData(sortedData);
+    }
+  }, [issueTrend]);
+
+  const handleWeeksChange = e => {
+    const val = Number.parseInt(e.target.value, 10);
+    setWeeks(Number.isNaN(val) ? '' : val);
+    setStartDate('');
+    setEndDate('');
+    setValidationError('');
+  };
+
+  const handleStartDateChange = e => {
+    setStartDate(e.target.value);
+    setValidationError('');
+  };
+
+  const handleEndDateChange = e => {
+    setEndDate(e.target.value);
+    setValidationError('');
+  };
+
+  const handleGoClick = () => {
+    const errorMsg = getDatesValidationError(startDate, endDate);
+    if (errorMsg) {
+      setValidationError(errorMsg);
+      return;
+    }
+
+    setValidationError('');
+    setWeeks('');
+    dispatch(fetchIssueTrend({ start: startDate, end: endDate }));
+    dispatch(fetchIssueSummary({ start: startDate, end: endDate }));
+  };
+
+  return (
+    <div className={`${styles.issueGraphPage} ${darkMode ? styles.darkMode : ''}`}>
+      <div className={styles.issueGraphEventContainer}>
+        <div className={styles.filterRow}>
+          <div className={styles.filterGroup}>
+            <label htmlFor="start-date">Start Date:</label>
+            <input
+              id="start-date"
+              type="date"
+              value={startDate}
+              onChange={handleStartDateChange}
+              min={minStartDate}
+              max={maxStartDate}
+            />
+          </div>
+
+          <div className={styles.filterGroup}>
+            <label htmlFor="end-date">End Date:</label>
+            <div className={styles.inputWithButton}>
+              <input
+                id="end-date"
+                type="date"
+                value={endDate}
+                onChange={handleEndDateChange}
+                min={minEndDate}
+                max={maxEndDate}
+              />
+              <button type="button" className={styles.goButton} onClick={handleGoClick}>
+                Go
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.filterGroup}>
+            <label htmlFor="weeks-select">Weeks:</label>
+            <select id="weeks-select" value={weeks} onChange={handleWeeksChange}>
+              <option value="" disabled hidden>
+                Select Range
+              </option>
+              <option value={4}>Last 4 Weeks</option>
+              <option value={8}>Last 8 Weeks</option>
+              <option value={12}>Last 12 Weeks</option>
+            </select>
+          </div>
+        </div>
+
+        {validationError && <p className={styles.errorText}>{validationError}</p>}
+
+        {issueSummary && (
+          <div className={styles.tileRow}>
+            <div className={styles.tile}>
+              <span className={styles.tileTooltip}>
+                The total number of issues reported within the selected date range.
+              </span>
+              <h3>Total Issues</h3>
+              <p>{issueSummary.total}</p>
+            </div>
+            <div className={styles.tile}>
+              <span className={styles.tileTooltip}>
+                The number of new issues created within the selected date range.
+              </span>
+              <h3>New Issues</h3>
+              <p>{issueSummary.newThisWeek}</p>
+            </div>
+            <div className={styles.tile}>
+              <span className={styles.tileTooltip}>
+                The number of issues marked as resolved within the selected date range.
+              </span>
+              <h3>Resolved Issues</h3>
+              <p>{issueSummary.resolved}</p>
+            </div>
+            <div className={styles.tile}>
+              <span className={styles.tileTooltip}>
+                The average time it takes to resolve an issue within the selected date range.
+              </span>
+              <h3>Avg. Resolution Time</h3>
+              <p>{issueSummary.avgResolution} days</p>
+            </div>
+          </div>
+        )}
+
+        <div className={styles.graphWrapper}>
+          <h2>Issues Created vs. Resolved</h2>
+          {loading && <p>Loading...</p>}
+          {error && (
+            <p className={styles.noDataText} style={NO_DATA_STYLE}>
+              {error}
+            </p>
+          )}
+          {graphData.length > 0 ? (
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={graphData} margin={CHART_MARGIN}>
+                <CartesianGrid strokeDasharray="3 3" stroke={chartTheme.gridStroke} />
+                <XAxis dataKey="week" tick={{ fill: chartTheme.tickColor }} />
+                <YAxis tick={{ fill: chartTheme.tickColor }} />
+                <Tooltip
+                  cursor={{ fill: chartTheme.cursorFill }}
+                  contentStyle={chartTheme.tooltipContent}
+                  labelStyle={chartTheme.tooltipText}
+                  itemStyle={chartTheme.tooltipText}
+                />
+                <Legend verticalAlign="bottom" height={36} />
+                <Bar dataKey="created" fill={chartTheme.createdBarFill} name="Created Issues">
+                  <LabelList dataKey="created" position="top" fill={chartTheme.labelFill} />
+                </Bar>
+                <Bar dataKey="resolved" fill={chartTheme.resolvedBarFill} name="Resolved Issues">
+                  <LabelList dataKey="resolved" position="top" fill={chartTheme.labelFill} />
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            !loading &&
+            !error && (
+              <p className={`${styles.noDataMessage} ${styles.noDataText}`} style={NO_DATA_STYLE}>
+                No issue data found for the selected timeframe.
+              </p>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default IssueGraph;
diff --git a/src/components/BMDashboard/Issues/IssueGraph.module.css b/src/components/BMDashboard/Issues/IssueGraph.module.css
new file mode 100644
index 00000000000..1e222cd86fe
--- /dev/null
+++ b/src/components/BMDashboard/Issues/IssueGraph.module.css
@@ -0,0 +1,298 @@
+.issueGraphPage {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #f0f4f8;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 40px 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.issueGraphEventContainer {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 24px;
+  padding: 24px 24px 40px;
+  background: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+  max-height: calc(100vh - 80px);
+  overflow: auto;
+}
+
+.graphWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  height: 420px;
+  min-height: 300px;
+  padding: 20px;
+}
+
+.graphWrapper .recharts-responsive-container {
+  width: 100%;
+  height: 100%;
+}
+
+
+.filterRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  background: #fff;
+  padding: 16px 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  margin-bottom: 5px;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.filterGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 200px;
+  flex: 1;
+}
+
+.filterRow input,
+.filterRow select {
+  padding: 7px 10px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 0.9rem;
+  height: 38px; 
+  box-sizing: border-box;
+  width: 100%;
+  appearance: none;
+}
+
+.goButton {
+  background-color: #0069d9;
+  color: white;
+  padding: 7px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  height: 38px;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.inputWithButton {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.goButton:hover {
+  background-color: #0056b3;
+}
+
+.goButton:focus {
+  outline: 2px solid #0056b3;
+  outline-offset: 2px;
+}
+
+.tileRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 20px;
+  margin-bottom: 5px;
+  flex-wrap: nowrap;
+  padding: 15px 30px;
+}
+
+.tile {
+  position: relative;
+  flex: 1;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  text-align: center;
+  min-width: 0;
+  cursor: help;
+}
+
+.tileTooltip {
+  visibility: hidden;
+  width: 200px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 110%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 0.8rem;
+  font-weight: normal;
+  line-height: 1.4;
+  pointer-events: none;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+}
+
+.darkMode .tileTooltip {
+  background-color: #2b3e59;
+  border: 1px solid #30b8f8;
+  color: #fff;
+}
+
+.tileTooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #333 transparent transparent;
+}
+
+.tile:hover .tileTooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.darkMode .tileTooltip::after {
+  border-color: #30b8f8 transparent transparent;
+  top: calc(100% + 1px);
+}
+
+.tile h3 {
+  margin-bottom: 10px;
+  font-size: 18px;
+  color: #333;
+}
+
+.tile p {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000;
+}
+
+@media (width <= 768px) {
+  .tileRow {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .tile {
+    min-width: 200px;
+    flex: 1 1 auto;
+  }
+}
+
+/* dark mode */
+.darkMode {
+  background-color: #1b2a41;
+  color: #f5f5f5;
+}
+
+.darkMode .issueGraphPage {
+  background-color: #1b2a41;
+  color: #f5f5f5;
+}
+
+.darkMode .issueGraphEventContainer {
+  background: #253342;
+  color: #f5f5f5;
+}
+
+.darkMode .filterRow,
+.darkMode .tileRow,
+.darkMode .graphWrapper {
+  background-color: #1b2a41;
+  color: #f5f5f5;
+}
+
+/* Filter groups */
+.darkMode .filterGroup label {
+  color: #f5f5f5;
+}
+
+.darkMode .filterRow label {
+  background-color: transparent;
+  color: #f5f5f5;
+  border: none;
+}
+
+.darkMode input[type='date'],
+.darkMode select,
+.darkMode .goButton {
+  background-color: #253342;
+  color: #f5f5f5;
+  border: 1px solid #555;
+}
+
+.darkMode input[type='date'] {
+  color-scheme: dark;
+}
+
+/* Tiles */
+.darkMode .tile {
+  background-color: #2b3e59;
+  color: #f5f5f5;
+  border: 1px solid #30b8f8;
+}
+
+.darkMode .tile h3 {
+  color: #fff;
+}
+
+.darkMode .graphWrapper h2 {
+  color: #fff;
+}
+
+.darkMode .recharts-cartesian-axis-tick-value {
+  fill: #fff; 
+}
+
+.darkMode .recharts-legend-item-text {
+  fill: #fff;
+}
+
+.darkMode .goButton :hover {
+  background-color: #1a73e8;
+}
+
+.darkMode .goButton :focus {
+  outline: 2px solid #1a73e8;
+  outline-offset: 2px;
+}
+
+.issueGraphEventContainer .errorText {
+  color: #ff4d4f;
+  margin: 10px 0;
+  font-weight: 500;
+}
+
+.darkMode .goButton {
+  background-color: #0069d9;
+  color: #fff;
+  border: none;
+}
+
+.darkMode .goButton:hover {
+  background-color: #0056b3;
+}
+
+.darkMode .goButton:focus {
+  outline: 2px solid #0056b3;
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/src/components/CommunityPortal/Activities/ActivityList.jsx b/src/components/CommunityPortal/Activities/ActivityList.jsx
index aa8d9b4b410..4d698de32c0 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.jsx
+++ b/src/components/CommunityPortal/Activities/ActivityList.jsx
@@ -318,22 +318,28 @@ function ActivityList() {
         {loading && <p className={darkMode ? 'text-light' : ''}>Loading activities...</p>}
 
         {!loading && hasActivities && (
-          <ul>
+          <ul className={styles.activityUl}>
             {paginatedActivities.map(activity => (
-              <div
+              <li
                 key={activity.id}
-                style={{ cursor: 'pointer' }}
-                onClick={() => handleActivityClick(activity)}
-                tabIndex={0}
-                role="button"
-                aria-label={`View details for ${activity.name}`}
-                onKeyDown={e => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleActivityClick(activity);
-                  }
-                }}
+                className={`${styles.activityItem} ${darkMode ? styles.darkModeItem : ''}`}
               >
-                <li className={`${styles.activityItem} ${darkMode ? styles.darkModeItem : ''}`}>
+                <div
+                  style={{
+                    cursor: 'pointer',
+                    display: 'block',
+                    width: '100%',
+                  }}
+                  onClick={() => handleActivityClick(activity)}
+                  tabIndex={0}
+                  role="button"
+                  aria-label={`View details for ${activity.name}`}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      handleActivityClick(activity);
+                    }
+                  }}
+                >
                   <strong>{activity.name}</strong>
 
                   {/* Type */}
@@ -354,17 +360,17 @@ function ActivityList() {
                       <span>{activity.date}</span>
                     </div>
                   </div>
+                </div>
 
-                  <button
-                    type="button"
-                    onClick={event => goToReschedule(event, activity)}
-                    className="btn btn-primary btn-sm mt-2"
-                    aria-label={`Reschedule ${activity.name}`}
-                  >
-                    Reschedule
-                  </button>
-                </li>
-              </div>
+                <button
+                  type="button"
+                  onClick={event => goToReschedule(event, activity)}
+                  className="btn btn-primary btn-sm mt-2"
+                  aria-label={`Reschedule ${activity.name}`}
+                >
+                  Reschedule
+                </button>
+              </li>
             ))}
           </ul>
         )}
diff --git a/src/components/CommunityPortal/Activities/__tests__/ActivityList.test.jsx b/src/components/CommunityPortal/Activities/__tests__/ActivityList.test.jsx
index d5751c59432..fb3b788502d 100644
--- a/src/components/CommunityPortal/Activities/__tests__/ActivityList.test.jsx
+++ b/src/components/CommunityPortal/Activities/__tests__/ActivityList.test.jsx
@@ -58,6 +58,8 @@ describe('ActivityList', () => {
   test('sorts activities by date (latest to earliest)', () => {
     renderActivityList();
 
+    fireEvent.click(screen.getByLabelText(/Show Past Events:/i));
+
     fireEvent.change(screen.getByLabelText(/Sort By:/i), {
       target: { value: 'latest' },
     });
diff --git a/src/constants/bmdashboard/issueGraphConstants.js b/src/constants/bmdashboard/issueGraphConstants.js
new file mode 100644
index 00000000000..bb4f41b1ce5
--- /dev/null
+++ b/src/constants/bmdashboard/issueGraphConstants.js
@@ -0,0 +1,7 @@
+export const FETCH_ISSUES_SUMMARY_REQUEST = 'FETCH_ISSUES_SUMMARY_REQUEST';
+export const FETCH_ISSUES_SUMMARY_SUCCESS = 'FETCH_ISSUES_SUMMARY_SUCCESS';
+export const FETCH_ISSUES_SUMMARY_FAILURE = 'FETCH_ISSUES_SUMMARY_FAILURE';
+
+export const FETCH_ISSUES_TREND_REQUEST = 'FETCH_ISSUES_TREND_REQUEST';
+export const FETCH_ISSUES_TREND_SUCCESS = 'FETCH_ISSUES_TREND_SUCCESS';
+export const FETCH_ISSUES_TREND_FAILURE = 'FETCH_ISSUES_TREND_FAILURE';
diff --git a/src/reducers/bmdashboard/issueGraphReducer.js b/src/reducers/bmdashboard/issueGraphReducer.js
new file mode 100644
index 00000000000..05086c7da6e
--- /dev/null
+++ b/src/reducers/bmdashboard/issueGraphReducer.js
@@ -0,0 +1,36 @@
+import {
+  FETCH_ISSUES_SUMMARY_REQUEST,
+  FETCH_ISSUES_SUMMARY_SUCCESS,
+  FETCH_ISSUES_SUMMARY_FAILURE,
+  FETCH_ISSUES_TREND_REQUEST,
+  FETCH_ISSUES_TREND_SUCCESS,
+  FETCH_ISSUES_TREND_FAILURE,
+} from '../../constants/bmdashboard/issueGraphConstants';
+
+const initialState = {
+  loading: false,
+  issueSummary: null,
+  issueTrend: null,
+  error: null,
+};
+
+const issueGraphReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_ISSUES_SUMMARY_REQUEST:
+      return { ...state, loading: true, error: null };
+    case FETCH_ISSUES_TREND_REQUEST:
+      return { ...state, loading: true, error: null };
+    case FETCH_ISSUES_SUMMARY_SUCCESS:
+      return { ...state, loading: false, issueSummary: action.payload };
+    case FETCH_ISSUES_TREND_SUCCESS:
+      return { ...state, loading: false, issueTrend: action.payload };
+    case FETCH_ISSUES_SUMMARY_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    case FETCH_ISSUES_TREND_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default issueGraphReducer;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 176586d9b76..944f4a135ea 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -54,6 +54,7 @@ import { consumablesReducer } from './bmdashboard/consumablesReducer';
 import { costBreakdownReducer } from './bmdashboard/costBreakdownReducer';
 import { equipmentReducer } from './bmdashboard/equipmentReducer';
 import bmInjuryReducer from './bmdashboard/injuryReducer';
+import issueGraphReducer from './bmdashboard/issueGraphReducer';
 import { bmInvTypeReducer } from './bmdashboard/inventoryTypeReducer';
 import { bmInvUnitReducer } from './bmdashboard/inventoryUnitReducer';
 import { lessonsReducer } from './bmdashboard/lessonsReducer';
@@ -194,6 +195,7 @@ const localReducers = {
 
   // lbdashboard
   wishlistItem: wishListReducer,
+  issueGraph: issueGraphReducer,
   villageDetails: villageDetailsReducer,
 
   bmissuechart: issueReducer,
diff --git a/src/routes.jsx b/src/routes.jsx
index b0cad32696f..20b79ec0b69 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -34,31 +34,31 @@ import FormViewer from './components/Forms/FormViewer';
 import HeaderRenderer from './components/Header/HeaderRenderer';
 import Announcements from './components/Announcements';
 import JobCCDashboard from './components/JobCCDashboard/JobCCDashboard';
-import WeeklyProjectSummary from './components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary';
-import TotalOrgSummaryEmail from './components/TotalOrgSummary/WeeklySummaryEmail/TotalOrgSummaryEmail';
-import LessonForm from './components/BMDashboard/Lesson/LessonForm';
-import LessonList from './components/BMDashboard/LessonList/LessonListForm';
+
+import AddTeamMember from './components/BMDashboard/AddTeamMember/AddTeamMember';
+import BMTimeLogger from './components/BMDashboard/BMTimeLogger/BMTimeLogger';
 import AddEquipmentType from './components/BMDashboard/Equipment/Add/AddEquipmentType';
 import EDailyActivityLog from './components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog';
+import Issue from './components/BMDashboard/Issue/Issue';
+import AnalyticsDashboard from './components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx';
+import IssueGraph from './components/BMDashboard/Issues/IssueGraph';
+import FaqSearch from './components/Faq/FaqSearch';
+import FaqManagement from './components/Faq/FaqManagement';
+import FaqHistory from './components/Faq/FaqHistory';
+import UnansweredFaqs from './components/Faq/UnansweredFaqs';
+import IssueDashboard from './components/BMDashboard/Issues/IssueDashboard';
+import LessonForm from './components/BMDashboard/Lesson/LessonForm';
+import LessonList from './components/BMDashboard/LessonList/LessonListForm';
 import EquipmentUpdateLog from './components/BMDashboard/Equipment/EHistory';
 import LogTools from './components/BMDashboard/LogTools/LogTools';
 import OrdersPage from './components/KitchenInventory/Orders/OrdersPage';
 import Toolslist from './components/BMDashboard/Tools/ToolsList';
 import AddTool from './components/BMDashboard/Tools/AddTool';
 import EquipmentUpdate from './components/BMDashboard/Tools/EquipmentUpdate';
-import Issue from './components/BMDashboard/Issue/Issue';
-import IssueDashboard from './components/BMDashboard/Issues/IssueDashboard';
+import WeeklyProjectSummary from './components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary';
 import MaterialConsumption from './components/BMDashboard/WeeklyProjectSummary/MaterialConsumption/MaterialConsumption';
-import BMTimeLogger from './components/BMDashboard/BMTimeLogger/BMTimeLogger';
-import AddTeamMember from './components/BMDashboard/AddTeamMember/AddTeamMember';
-import AnalyticsDashboard from './components/JobCCDashboard/JobAnalytics/JobAnalytics';
 import KnowledgeEvolution from './components/BMDashboard/KnowledgeEvolution/KnowledgeEvolution';
-import FaqSearch from './components/Faq/FaqSearch';
-import FaqManagement from './components/Faq/FaqManagement';
-import FaqHistory from './components/Faq/FaqHistory';
-import UnansweredFaqs from './components/Faq/UnansweredFaqs';
 import { ExperienceDonutChart } from './components/ExperienceDonutChart';
-import ActualCostBreakdown from './components/ActualCostBreakdown';
 import ToolsAvailabilityPage from './components/BMDashboard/WeeklyProjectSummary/Tools/ToolsAvailabilityPage';
 import ResourceUsage from './components/CommunityPortal/ResourceUsage/ResourceUsage';
 import DatabaseDesign from './components/CommunityPortal/DatabaseDesign/DatabaseDesign';
@@ -232,6 +232,8 @@ import SupportDashboard from './components/SupportPortal/SupportDashboard';
 import SupportLogViewer from './components/SupportPortal/SupportLogViewer';
 import ProjectStatus from './components/ProjectStatus/ProjectStatus';
 import MaterialUtilizationChart from './components/MaterialUtilization/MaterialUtilizationChart';
+import TotalOrgSummaryEmail from './components/TotalOrgSummary/WeeklySummaryEmail/TotalOrgSummaryEmail';
+import ActualCostBreakdown from './components/ActualCostBreakdown/ActualCostBreakdown';
 
 // High Good Education
 import StudentBadgeGallery from './components/StudentBadgeGallery/StudentBadgeGallery';
@@ -852,6 +854,7 @@ export default (
         <BMProtectedRoute path="/bmdashboard/issues/add/:projectId" component={Issue} />
         {/* PR #4812 expects this URL to show the full three-card Material Consumption group. */}
         <BMProtectedRoute path="/bmdashboard/issuechart" component={MaterialConsumption} />
+        <BMProtectedRoute path="/bmdashboard/issueGraph" component={IssueGraph} />
         <BMProtectedRoute path="/bmdashboard/timelog/" component={BMTimeLogger} />
         <BMProtectedRoute path="/bmdashboard/issues/" component={IssueDashboard} />
         <BMProtectedRoute path="/bmdashboard/InteractiveMap" component={InteractiveMap} />
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 5d095a500b1..6d5bddda6c2 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -438,6 +438,8 @@ 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_ISSUES_BARGRAPH_SUMMARY: `${APIEndpoint}/issues/summary`,
+  BM_ISSUES_BARGRAPH_TREND: `${APIEndpoint}/issues/trends`,
   BM_TOOLS_RETURNED_LATE: `${APIEndpoint}/bm/tools/returned-late`,
   BM_TOOLS_RETURNED_LATE_PROJECTS: `${APIEndpoint}/bm/tools/returned-late/projects`,