From 02d52759773992ab427088affdbdc344affa1cd3 Mon Sep 17 00:00:00 2001
From: Aseem Deshmukh <deshmukh.as@northeastern.edu>
Date: Wed, 8 Jul 2026 22:56:06 -0500
Subject: [PATCH 1/2] added date range and project filter, added reset filter
 and fixed custom tool tip

Co-authored-by: Copilot <copilot@github.com>
---
 .../CostPredictionChart.jsx                   | 296 +++++++++++++++---
 .../CostPredictionChart.module.css            | 106 ++++++-
 2 files changed, 352 insertions(+), 50 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
index 9581fd4d09..e163667b43 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -14,7 +14,35 @@ import {
 } from 'recharts';
 import styles from './CostPredictionChart.module.css';
 import projectCostService from '../../../services/projectCostService';
-import { getTooltipStyles } from '../../../utils/bmChartStyles';
+
+const THEME = {
+  light: {
+    pageBg: '#ffffff',
+    cardBg: '#f9fafb',
+    itemBg: '#f3f4f6',
+    itemBgHover: '#e5e7eb',
+    border: '#d1d5db',
+    text: '#111827',
+    mutedText: '#374151',
+    axisText: '#9ca3af',
+    accent: '#2563eb',
+  },
+  dark: {
+    pageBg: '#1B2A41', // Oxford blue
+    cardBg: '#1C2541', // space cadet
+    itemBg: '#3A506B', // yinmn blue
+    itemBgHover: '#4a6285',
+    border: '#3A506B',
+    text: '#f3f4f6',
+    mutedText: '#d1d5db',
+    axisText: '#c7ccd6',
+    accent: '#6FFFE9',
+  },
+};
+
+function getTheme(darkMode) {
+  return darkMode ? THEME.dark : THEME.light;
+}
 
 // Fallback sample data so the chart always renders, even when the backend has
 // no cost/prediction records for this project (e.g. on a reviewer's machine).
@@ -56,7 +84,7 @@ function renderDotTopOrBottom(lineKey, color) {
           x={cx + dx}
           y={cy - 20}
           fill={color}
-          fontSize={10}
+          fontSize={14}
           fontWeight="bold"
           textAnchor="middle"
           alignmentBaseline="middle"
@@ -71,7 +99,7 @@ function renderDotTopOrBottom(lineKey, color) {
           x={cx + dx}
           y={cy + 18}
           fill={color}
-          fontSize={10}
+          fontSize={14}
           fontWeight="bold"
           textAnchor="middle"
           alignmentBaseline="middle"
@@ -84,24 +112,31 @@ function renderDotTopOrBottom(lineKey, color) {
   };
 }
 
-function CostPredictionChart({ projectId }) {
+function CostPredictionChart({ projectId, projects }) {
   const dispatch = useDispatch();
   const [chartData, setChartData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const darkMode = useSelector(state => state.theme.darkMode);
+  const theme = getTheme(darkMode);
+
+  // Filter state (project + full date range: day/month/year)
+  const [selectedProjectId, setSelectedProjectId] = useState(projectId);
+  const [dateRange, setDateRange] = useState({ start: '', end: '' }); // 'YYYY-MM-DD'
+
   const legendItems = [
     { label: 'Planned Cost', color: '#7acba6', type: 'circle' },
     { label: 'Actual Cost', color: '#9aa6ff', type: 'circle' },
     { label: 'Predicted Cost', color: '#ff8c2a', type: 'dash' },
   ];
+
   useEffect(() => {
     const fetchData = async () => {
       try {
         setLoading(true);
         const [costsResponse, predictionsResponse] = await Promise.all([
-          projectCostService.getProjectCosts(projectId),
-          projectCostService.getProjectPredictions(projectId),
+          projectCostService.getProjectCosts(selectedProjectId),
+          projectCostService.getProjectPredictions(selectedProjectId),
         ]);
 
         const costsData = costsResponse.data.costs;
@@ -129,79 +164,237 @@ function CostPredictionChart({ projectId }) {
       }
     };
 
-    if (projectId) fetchData();
-  }, [projectId]);
+    if (selectedProjectId) fetchData();
+  }, [selectedProjectId]);
+
+  // date range filter logic
+
+  const filteredData = useMemo(() => {
+    if (!dateRange.start && !dateRange.end) return chartData;
+    return chartData.filter(d => {
+      const pointDate = new Date(d.month);
+      if (dateRange.start && pointDate < new Date(dateRange.start)) return false;
+      if (dateRange.end && pointDate > new Date(dateRange.end)) return false;
+      return true;
+    });
+  }, [chartData, dateRange]);
+
+  // Reset handler
+  const handleReset = () => {
+    setSelectedProjectId(projectId);
+    setDateRange({ start: '', end: '' });
+  };
+
+  const hasActiveFilters =
+    selectedProjectId !== projectId || dateRange.start !== '' || dateRange.end !== '';
+
+  const filterStyles = {
+    bar: {
+      background: theme.cardBg,
+      border: `1px solid ${theme.border}`,
+    },
+    label: {
+      color: theme.mutedText,
+    },
+    control: {
+      background: theme.itemBg,
+      border: `1px solid ${theme.border}`,
+      color: theme.text,
+    },
+    resetButton: {
+      background: theme.itemBg,
+      border: `1px solid ${theme.border}`,
+      color: theme.text,
+      opacity: hasActiveFilters ? 1 : 0.5,
+      cursor: hasActiveFilters ? 'pointer' : 'not-allowed',
+    },
+  };
+
+  // Custom tooltip showing Predicted + Actual clearly, using card-layer background
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (!active || !payload || !payload.length) return null;
+    const point = payload[0].payload;
+    const variance =
+      point.actualCost != null && point.predictedCost != null
+        ? point.actualCost - point.predictedCost
+        : null;
+
+    return (
+      <div
+        style={{
+          background: theme.cardBg,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 6,
+          padding: '10px 14px',
+          fontSize: 13,
+          color: theme.text,
+        }}
+      >
+        <p style={{ margin: 0, fontWeight: 'bold', marginBottom: 6 }}>{label}</p>
+        <p style={{ margin: '2px 0', color: '#9aa6ff' }}>
+          Actual: <strong>{point.actualCost ?? 'N/A'}</strong>
+        </p>
+        <p style={{ margin: '2px 0', color: '#ff8c2a' }}>
+          Predicted: <strong>{point.predictedCost ?? 'N/A'}</strong>
+        </p>
+        <p style={{ margin: '2px 0', color: '#7acba6' }}>
+          Planned: <strong>{point.plannedCost ?? 'N/A'}</strong>
+        </p>
+        {variance != null && (
+          <p
+            style={{
+              margin: '6px 0 0',
+              borderTop: `1px solid ${theme.border}`,
+              paddingTop: 4,
+            }}
+          >
+            Variance (Actual - Predicted): <strong>{variance.toFixed(0)}</strong>
+          </p>
+        )}
+      </div>
+    );
+  };
 
-  if (loading) return <div>Loading chart data...</div>;
-  if (error) return <div>Error: {error}</div>;
+  if (loading) {
+    return (
+      <div
+        className={styles.titleContainer}
+        style={{ background: theme.pageBg, color: theme.text }}
+      >
+        Loading chart data...
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div
+        className={styles.titleContainer}
+        style={{ background: theme.pageBg, color: theme.text }}
+      >
+        Error: {error}
+      </div>
+    );
+  }
 
   const currentMonth = new Date().toLocaleString('default', {
     month: 'long',
     year: 'numeric',
   });
 
-  // THEME COLORS — only for grid, axis ticks/lines, legend
-  const gridColor = darkMode ? '#e5e7eb' : '#9ca3af'; // grid lines
-  const tickColor = darkMode ? '#e5e7eb' : '#9ca3af'; // tick text
-  const axisLineCol = darkMode ? '#e5e7eb' : '#9ca3af'; // axis baseline & tick marks
-  const legendColor = darkMode ? '#e5e7eb' : '#9ca3af'; // legend text
+  const projectOptions =
+    projects && projects.length ? projects : [{ id: projectId, name: `Project ${projectId}` }];
+
   return (
-    <div className={styles.titleContainer}>
-      <h2 className={styles.title}>Planned Vs Actual costs tracking</h2>
+    <div className={styles.titleContainer} style={{ background: theme.pageBg, color: theme.text }}>
+      <h2 className={styles.title} style={{ color: theme.text }}>
+        Planned Vs Actual costs tracking
+      </h2>
+
+      {/* Filter bar — "card" layer */}
+      <div className={styles.filterBar} style={filterStyles.bar}>
+        <div className={styles.filterGroup}>
+          <label htmlFor="project-filter" style={filterStyles.label}>
+            Project
+          </label>
+          <select
+            id="project-filter"
+            className={styles.control}
+            style={filterStyles.control}
+            value={selectedProjectId}
+            onChange={e => setSelectedProjectId(e.target.value)}
+          >
+            {projectOptions.map(p => (
+              <option key={p.id} value={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className={styles.filterGroup}>
+          <label htmlFor="start-date" style={filterStyles.label}>
+            Start Date
+          </label>
+          <input
+            id="start-date"
+            type="date"
+            className={`${styles.control} ${styles.dateInput} ${
+              darkMode ? styles.dateInputDark : ''
+            }`}
+            style={filterStyles.control}
+            value={dateRange.start}
+            max={dateRange.end || undefined}
+            onChange={e => setDateRange(prev => ({ ...prev, start: e.target.value }))}
+          />
+        </div>
+
+        <div className={styles.filterGroup}>
+          <label htmlFor="end-date" style={filterStyles.label}>
+            End Date
+          </label>
+          <input
+            id="end-date"
+            type="date"
+            className={`${styles.control} ${styles.dateInput} ${
+              darkMode ? styles.dateInputDark : ''
+            }`}
+            style={filterStyles.control}
+            value={dateRange.end}
+            min={dateRange.start || undefined}
+            onChange={e => setDateRange(prev => ({ ...prev, end: e.target.value }))}
+          />
+        </div>
+
+        {/* Reset button */}
+        <button
+          type="button"
+          className={styles.resetButton}
+          style={filterStyles.resetButton}
+          onClick={handleReset}
+          disabled={!hasActiveFilters}
+        >
+          Reset Filters
+        </button>
+      </div>
+
       <ResponsiveContainer width="100%" height={400}>
-        <LineChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 40 }}>
-          {/* Grid */}
+        <LineChart data={filteredData} margin={{ top: 20, right: 30, left: 20, bottom: 40 }}>
           <CartesianGrid
             strokeDasharray="3 3"
-            stroke={gridColor}
+            stroke={theme.border}
             vertical
             horizontal
             verticalFill={[]}
             horizontalFill={[]}
           />
-          {/* Axes: tick text, tick marks, baseline lines */}
           <XAxis
             dataKey="month"
             tick={({ x, y, payload }) => (
-              <text
-                x={x}
-                y={y + 15} // push text down so it doesn’t overlap axis line
-                textAnchor="middle"
-                fill={darkMode ? '#e5e7eb' : '#9ca3af'}
-                fontSize={12}
-              >
+              <text x={x} y={y + 15} textAnchor="middle" fill={theme.axisText} fontSize={13}>
                 {payload.value}
               </text>
             )}
-            tickMargin={0} // apply margin at XAxis level, not inside <text>
+            tickMargin={0}
           />
           <YAxis
             tick={({ x, y, payload }) => (
-              <text
-                x={x}
-                y={y}
-                textAnchor="end"
-                fill={darkMode ? '#e5e7eb' : '#9ca3af'}
-                fontSize={12}
-              >
+              <text x={x} y={y} textAnchor="end" fill={theme.axisText} fontSize={13}>
                 {payload.value}
               </text>
             )}
           />
-          {/* Tooltip & Legend */}
-          <Tooltip
-            {...getTooltipStyles(darkMode)}
-            cursor={{ stroke: darkMode ? '#e0e0e0' : '#999' }}
-          />
+          <Tooltip content={<CustomTooltip />} cursor={{ stroke: theme.accent }} />
           <Legend
             verticalAlign="bottom"
             height={48}
             wrapperStyle={{ paddingTop: 10 }}
             content={() => (
-              <ul className={styles.legendList}>
+              <ul
+                className={styles.legendList}
+                style={{ background: theme.itemBg, borderRadius: 6 }}
+              >
                 {legendItems.map(item => (
                   <li key={item.label} className={styles.legendListItem}>
-                    {/* icon */}
                     {item.type === 'circle' ? (
                       <span className={styles.legendItem} style={{ backgroundColor: item.color }} />
                     ) : (
@@ -217,21 +410,18 @@ function CostPredictionChart({ projectId }) {
                         />
                       </svg>
                     )}
-                    {/* label */}
-                    <span style={{ color: darkMode ? '#e5e7eb' : '#374151' }}>{item.label}</span>
+                    <span style={{ color: theme.text }}>{item.label}</span>
                   </li>
                 ))}
               </ul>
             )}
           />
-          {/* Reference line (kept fixed color) */}
           <ReferenceLine
             x={currentMonth}
             stroke="#ff0000"
             strokeDasharray="3 3"
             label={{ value: 'Current Month', position: 'top', fill: '#fc07cfff' }}
           />
-          {/* Series (kept fixed colors) */}
           <Line
             type="monotone"
             dataKey="plannedCost"
@@ -265,6 +455,16 @@ function CostPredictionChart({ projectId }) {
 
 CostPredictionChart.propTypes = {
   projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  projects: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+  ),
+};
+
+CostPredictionChart.defaultProps = {
+  projects: [],
 };
 
 export default CostPredictionChart;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
index 18427fff24..15350f1aa9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
@@ -4,13 +4,15 @@
   text-align: center;
   font-size: 24px;
   font-weight: normal;
-  color: var(--text-color);
+  transition: color 0.2s ease;
 }
 
 .titleContainer {
   width: 100%;
   height: 100%;
   padding: 20px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .legendList {
@@ -19,8 +21,9 @@
   gap: 24px;
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 8px 12px;
   font-size: 12px;
+  transition: background-color 0.2s ease;
 }
 
 .legendItem {
@@ -35,3 +38,102 @@
   align-items: center;
   gap: 8px;
 }
+
+.filterBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.filterGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.filterGroup label {
+  font-weight: 500;
+}
+
+.control {
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.control:hover {
+  filter: brightness(1.1);
+}
+
+.control:focus-visible {
+  outline: 2px solid #6fffe9;
+  outline-offset: 1px;
+}
+
+.dateInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
+}
+
+.dateInputWrapper:hover {
+  filter: brightness(1.1);
+}
+
+.dateInputWrapper:focus-within {
+  outline: 2px solid #6fffe9;
+  outline-offset: 1px;
+}
+
+.dateIcon {
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.dateInput {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  font-family: inherit;
+  padding: 0;
+  outline: none;
+  min-width: 130px;
+  color-scheme: light dark;
+}
+
+.dateInput::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.7;
+  filter: invert(0.4);
+}
+
+.resetButton {
+  padding: 7px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.resetButton:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.resetButton:focus-visible {
+  outline: 2px solid #6fffe9;
+  outline-offset: 1px;
+}
+
+.resetButton:disabled {
+  cursor: not-allowed;
+}

From ed40078ed3752f9d5b63940b81fb479be618dc98 Mon Sep 17 00:00:00 2001
From: Aseem Deshmukh <deshmukh.as@northeastern.edu>
Date: Fri, 17 Jul 2026 18:00:37 -0500
Subject: [PATCH 2/2] Revert "Merge branch 'development' into
 aseem-predicted-actual-planned-linechart"

This reverts commit 7a7a0566f5ef24b525decb391375e36b5baaeac6, reversing
changes made to 1e95ff4911267907b12e434de51c023b7f4040f9.
---
 src/__mocks__/resourceRequestMockData.js      | 176 ----
 .../BMDashboard/ItemList/ItemListView.jsx     |  15 +-
 .../ActualVsPlannedCost.jsx                   | 337 +++----
 .../ActualVsPlannedCost.module.css            | 137 ---
 .../CostPredictionChart.jsx                   |  34 +-
 .../CostPredictionChart.module.css            |   8 -
 .../Activities/Register/Register.jsx          |  27 +-
 .../CommunityPortal/CPDashboard.jsx           | 309 ++----
 .../CommunityPortal/CPDashboard.module.css    | 504 ++++------
 .../RegistrationConfirmation/Registration.jsx |  42 +-
 .../Registration.module.css                   |  45 -
 .../RegistrationPopup.jsx                     |  89 +-
 .../RegistrationPopup.module.css              | 147 ++-
 src/components/CommunityPortal/utils.js       |  22 -
 .../EducationPortalSideNav.jsx                |  90 ++
 .../EducationPortalSideNav.module.css         | 449 +++++++++
 .../DashboardLayout/DashboardLayout.jsx       |  19 -
 .../DashboardLayout.module.css                |  46 -
 .../EducatorReports/ReportChart.jsx           | 125 ---
 .../EducatorReports/ReportChart.module.css    |  16 -
 .../EducatorReports/ReportsView.jsx           | 446 ---------
 .../EducatorReports/ReportsView.module.css    | 924 -----------------
 .../ClassPerformanceView.jsx                  | 500 ---------
 .../ClassPerformanceView.module.css           | 793 ---------------
 .../IndividualReportView.jsx                  | 465 ---------
 .../IndividualReportView.module.css           | 590 -----------
 .../components/MetricCard/MetricCard.jsx      | 120 ---
 .../MetricCard/MetricCard.module.css          | 473 ---------
 .../components/ReportChart/ReportChart.jsx    | 236 -----
 .../ReportChart/ReportChart.module.css        | 185 ----
 .../ReportFilterBar/ReportFilterBar.jsx       | 155 ---
 .../ReportFilterBar.module.css                | 285 ------
 .../EducatorReports/config/layoutConfig.js    |  23 -
 .../EductionPortal/EducatorReports/index.js   |   4 -
 .../EducatorReports/mockdata.js               | 198 ----
 .../EducatorReports/utils/statusUtils.js      |  34 -
 .../EvaluationResults/EvaluationResults.jsx   | 684 ++++++-------
 .../EvaluationResults.module.css              |  81 +-
 .../EvaluationResultsWrapper.jsx              |  12 +-
 .../EductionPortal/Login/EPLogin.jsx          |  23 +-
 .../EductionPortal/SideBar/SideBar.jsx        |  90 ++
 .../EductionPortal/SideBar/SideBar.module.css | 449 +++++++++
 .../EductionPortal/SidebarContext.jsx         |  27 +-
 .../StudentTasks/StudentDashboard.jsx         |   2 +
 .../StudentTasks/StudentDashboard.module.css  |   1 +
 .../StudentTasks/StudentSidebar.jsx           | 163 +++
 .../StudentTasks/StudentSidebar.module.css    | 142 +++
 .../StudentTasks/StudentTasks.jsx             |  90 +-
 .../StudentTasks/StudentTasks.module.css      |   2 +
 .../StudentTasks/TaskDetails.jsx              |   3 +
 .../StudentTasks/TaskDetails.module.css       |   4 +-
 .../EductionPortal/Tasks/Sidebar.jsx          | 144 +++
 .../EductionPortal/Tasks/Sidebar.module.css   | 100 ++
 .../EductionPortal/Tasks/UploadPanel.jsx      |  34 +-
 .../layout/EducationPortalLayout.jsx          |  60 --
 .../layout/EducationPortalLayout.module.css   | 131 ---
 .../layout/EducationPortalSidebar.jsx         | 145 ---
 .../layout/EducationPortalSidebar.module.css  | 211 ----
 src/components/Header/HeaderRenderer.jsx      |  11 +-
 .../LBDashboard/Login/Login.module.css        |   5 -
 .../LBDashboard/Register/LBRegister.jsx       | 177 ++--
 .../Register/LBRegister.module.css            |  33 -
 src/components/PRPromotions/DisplayBox.jsx    |  22 +-
 .../components/PeopleTasksPieChart.module.css |   4 -
 .../Reports/PeopleReport/selectors.jsx        |   2 +-
 .../ResourceManagementDashboard.jsx           | 400 --------
 .../ResourceManagementDashboard.module.css    | 946 ------------------
 .../ResourceRequestForm.jsx                   | 157 ---
 .../ResourceRequestForm.module.css            | 318 ------
 .../ResourceRequestList.jsx                   | 226 -----
 .../ResourceRequestList.module.css            | 704 -------------
 .../ResourceRequest/hooks/useResourceFetch.js |  58 --
 .../utils/resourceRequestUtils.js             |  70 --
 src/components/Teams/TeamMembersPopup.jsx     |  25 +-
 .../TotalOrgSummary/TotalOrgSummary.jsx       | 126 +++
 .../UserProfile/AssignBadgePopup.jsx          |  27 +-
 .../TeamsAndProjects/UserProjectsTable.jsx    |  41 +-
 src/components/UserProfile/UserProfile.jsx    |  18 +-
 .../EPProtectedRoute/EPProtectedRoute.jsx     |  37 +-
 .../common/PieChart/PieChart.module.css       |  39 +-
 src/routes.jsx                                | 760 ++++++++------
 src/services/projectCostService.js            |   5 +-
 src/utils/URL.js                              |   1 -
 83 files changed, 3440 insertions(+), 11438 deletions(-)
 delete mode 100644 src/__mocks__/resourceRequestMockData.js
 delete mode 100644 src/components/CommunityPortal/RegistrationConfirmation/Registration.module.css
 delete mode 100644 src/components/CommunityPortal/utils.js
 create mode 100644 src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.jsx
 create mode 100644 src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/ReportChart.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/ReportChart.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/ReportsView.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/ReportsView.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.jsx
 delete mode 100644 src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.module.css
 delete mode 100644 src/components/EductionPortal/EducatorReports/config/layoutConfig.js
 delete mode 100644 src/components/EductionPortal/EducatorReports/index.js
 delete mode 100644 src/components/EductionPortal/EducatorReports/mockdata.js
 delete mode 100644 src/components/EductionPortal/EducatorReports/utils/statusUtils.js
 create mode 100644 src/components/EductionPortal/SideBar/SideBar.jsx
 create mode 100644 src/components/EductionPortal/SideBar/SideBar.module.css
 create mode 100644 src/components/EductionPortal/StudentTasks/StudentSidebar.jsx
 create mode 100644 src/components/EductionPortal/StudentTasks/StudentSidebar.module.css
 create mode 100644 src/components/EductionPortal/Tasks/Sidebar.jsx
 create mode 100644 src/components/EductionPortal/Tasks/Sidebar.module.css
 delete mode 100644 src/components/EductionPortal/layout/EducationPortalLayout.jsx
 delete mode 100644 src/components/EductionPortal/layout/EducationPortalLayout.module.css
 delete mode 100644 src/components/EductionPortal/layout/EducationPortalSidebar.jsx
 delete mode 100644 src/components/EductionPortal/layout/EducationPortalSidebar.module.css
 delete mode 100644 src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.jsx
 delete mode 100644 src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.module.css
 delete mode 100644 src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.jsx
 delete mode 100644 src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.module.css
 delete mode 100644 src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.jsx
 delete mode 100644 src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.module.css
 delete mode 100644 src/components/ResourceRequest/hooks/useResourceFetch.js
 delete mode 100644 src/components/ResourceRequest/utils/resourceRequestUtils.js

diff --git a/src/__mocks__/resourceRequestMockData.js b/src/__mocks__/resourceRequestMockData.js
deleted file mode 100644
index 0d8ed6abf6..0000000000
--- a/src/__mocks__/resourceRequestMockData.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * Mock Data for Resource Request Management System
- * Use this for testing without a backend
- *
- * To use this in your app:
- * 1. Copy this file to src/__mocks__/resourceRequestMockData.js
- * 2. Add it to your test setup or use with Mock Service Worker
- */
-
-export const mockResourceRequests = [
-  {
-    id: '1',
-    educatorName: 'John Smith',
-    title: 'Need projectors for outdoor lessons',
-    details:
-      'We require 3 high-brightness projectors for outdoor science classes. These will be used for interactive demonstrations with students. The projectors should have brightness of at least 4000 lumens and support wireless connectivity for seamless content sharing from tablets and laptops.',
-    priority: 'high',
-    status: 'pending',
-    createdAt: new Date(Date.now() - 604800000).toISOString(), // 7 days ago
-    updatedAt: new Date(Date.now() - 604800000).toISOString(),
-  },
-  {
-    id: '2',
-    educatorName: 'Jane Doe',
-    title: 'Request for art supplies',
-    details:
-      'Canvas, paints, and brushes for painting classes. We need: 50 canvas sheets (A3 size), 5 sets of acrylic paint (24 colors each), 100 brushes (various sizes), and 10 palettes for color mixing. These will support our upcoming art exhibition project.',
-    priority: 'medium',
-    status: 'approved',
-    createdAt: new Date(Date.now() - 1209600000).toISOString(), // 14 days ago
-    updatedAt: new Date(Date.now() - 1000000000).toISOString(),
-  },
-  {
-    id: '3',
-    educatorName: 'Mike Johnson',
-    title: 'Laboratory equipment needed',
-    details:
-      'Beakers, test tubes, and safety equipment for chemistry labs. Specifically: 50 beakers (various sizes), 100 test tubes, 10 safety goggles, 5 lab coats, and 2 first aid kits. Essential for upcoming chemistry practical sessions.',
-    priority: 'urgent',
-    status: 'pending',
-    createdAt: new Date(Date.now() - 259200000).toISOString(), // 3 days ago
-    updatedAt: new Date(Date.now() - 259200000).toISOString(),
-  },
-  {
-    id: '4',
-    educatorName: 'Sarah Williams',
-    title: 'Sports equipment request',
-    details:
-      'Basketballs, volleyball nets, and training cones for physical education. We need: 12 basketballs, 3 volleyball nets, 20 training cones, and 5 agility ladder sets. This will support our PE curriculum and intramural sports programs.',
-    priority: 'low',
-    status: 'denied',
-    createdAt: new Date(Date.now() - 1814400000).toISOString(), // 21 days ago
-    updatedAt: new Date(Date.now() - 1209600000).toISOString(),
-  },
-  {
-    id: '5',
-    educatorName: 'Emily Chen',
-    title: 'Computer software licenses',
-    details:
-      'Educational licenses for design software. We need: 30 licenses of Adobe Creative Suite, 20 licenses of Autodesk AutoCAD, and 15 licenses of Blender Pro. These are for our digital design and engineering courses.',
-    priority: 'high',
-    status: 'approved',
-    createdAt: new Date(Date.now() - 2419200000).toISOString(), // 28 days ago
-    updatedAt: new Date(Date.now() - 1209600000).toISOString(),
-  },
-  {
-    id: '6',
-    educatorName: 'Robert Martinez',
-    title: 'Musical instruments for band class',
-    details:
-      'Various instruments needed for the school band program. List includes: 5 trumpets, 3 French horns, 4 saxophones, 2 trombones, 6 violins, and 4 cellos. All should be intermediate to advanced level.',
-    priority: 'medium',
-    status: 'pending',
-    createdAt: new Date(Date.now() - 432000000).toISOString(), // 5 days ago
-    updatedAt: new Date(Date.now() - 432000000).toISOString(),
-  },
-  {
-    id: '7',
-    educatorName: 'Lisa Anderson',
-    title: 'Library books for literature courses',
-    details:
-      'Classic and contemporary literature books for our English department. We need 100 copies each of: To Kill a Mockingbird, 1984, Pride and Prejudice, The Great Gatsby, and Brave New World. These will be used in our literature courses across grades 9-12.',
-    priority: 'low',
-    status: 'pending',
-    createdAt: new Date(Date.now() - 864000000).toISOString(), // 10 days ago
-    updatedAt: new Date(Date.now() - 864000000).toISOString(),
-  },
-  {
-    id: '8',
-    educatorName: 'David Thompson',
-    title: 'Microscopes and slides for biology',
-    details:
-      'Microscopes and prepared slides for advanced biology courses. We need: 15 compound microscopes (1000x magnification), 10 digital microscopes with cameras, 500 prepared microscope slides covering various cell types and organisms.',
-    priority: 'urgent',
-    status: 'approved',
-    createdAt: new Date(Date.now() - 1209600000).toISOString(), // 14 days ago
-    updatedAt: new Date(Date.now() - 432000000).toISOString(),
-  },
-];
-
-/**
- * Mock API Response for GET /educator/resource-requests
- * Returns only the authenticated educator's requests
- */
-export const getMockEducatorRequests = () => {
-  // Simulate that educator John Smith submitted requests 1, 3
-  return mockResourceRequests.filter(req => req.educatorName === 'John Smith');
-};
-
-/**
- * Mock API Response for GET /pm/resource-requests
- * Returns all requests, optionally filtered by status
- */
-export const getMockPMRequests = (status = null) => {
-  if (!status) {
-    return mockResourceRequests;
-  }
-  return mockResourceRequests.filter(req => req.status === status);
-};
-
-/**
- * Mock API Response for POST /educator/resource-requests
- * Simulates creating a new request
- */
-export const createMockRequest = (title, details, priority) => {
-  const newRequest = {
-    id: Date.now().toString(),
-    educatorName: 'John Smith', // In real app, would be authenticated user
-    title,
-    details,
-    priority,
-    status: 'pending',
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-  };
-  mockResourceRequests.push(newRequest);
-  return newRequest;
-};
-
-/**
- * Mock API Response for PUT /pm/resource-requests/:requestId
- * Simulates updating request status
- */
-export const updateMockRequestStatus = (requestId, newStatus) => {
-  const index = mockResourceRequests.findIndex(r => r.id === requestId);
-  if (index === -1) {
-    throw new Error(`Request ${requestId} not found`);
-  }
-  mockResourceRequests[index] = {
-    ...mockResourceRequests[index],
-    status: newStatus,
-    updatedAt: new Date().toISOString(),
-  };
-  return mockResourceRequests[index];
-};
-
-/**
- * Statistics helpers
- */
-export const getMockStatistics = () => {
-  return {
-    total: mockResourceRequests.length,
-    pending: mockResourceRequests.filter(r => r.status === 'pending').length,
-    approved: mockResourceRequests.filter(r => r.status === 'approved').length,
-    denied: mockResourceRequests.filter(r => r.status === 'denied').length,
-  };
-};
-
-export default {
-  mockResourceRequests,
-  getMockEducatorRequests,
-  getMockPMRequests,
-  createMockRequest,
-  updateMockRequestStatus,
-  getMockStatistics,
-};
diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index 9bb6a30f86..036ca746f8 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -2,21 +2,14 @@ import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+
 import BMError from '../shared/BMError';
 import SelectForm from './SelectForm';
 import SelectItem from './SelectItem';
 import ItemsTable from './ItemsTable';
 import styles from './ItemListView.module.css';
-import { useSelector } from 'react-redux';
-
-export function ItemListView({
-  itemType,
-  items,
-  errors,
-  UpdateItemModal,
-  dynamicColumns,
-  children,
-}) {
+
+export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
   const [filteredItems, setFilteredItems] = useState([]);
   const [selectedProject, setSelectedProject] = useState([]); // Array of strings
   const [selectedItem, setSelectedItem] = useState([]); // Array of strings
@@ -28,8 +21,6 @@ export function ItemListView({
   const [currentPage, setCurrentPage] = useState(1);
   const [rowsPerPage, setRowsPerPage] = useState(25);
 
-  const darkMode = useSelector(state => state.theme.darkMode);
-
   // Sync initial items load
   useEffect(() => {
     if (items) setFilteredItems([...items]);
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.jsx
index 1b583f57ab..3810379f2e 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import axios from 'axios';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -19,175 +18,6 @@ import { fetchBMProjects } from '../../../../actions/bmdashboard/projectActions'
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './ActualVsPlannedCost.module.css';
 
-function getBudgetStatus(variance) {
-  if (variance > 0) return 'Over Budget';
-  if (variance < 0) return 'Under Budget';
-  return 'On Budget';
-}
-
-// Dynamic bar color: flash red when actual exceeds planned
-function getActualBarColor(entry, darkMode) {
-  if (entry.plannedCost > 0 && entry.actualCost > entry.plannedCost) {
-    return '#dc2626'; // bright red for over-budget
-  }
-  return darkMode ? '#c0392b' : '#e74a3b';
-}
-
-function getVarianceCardClass(variance, cardStyles) {
-  if (variance > 0) return cardStyles.varianceOverrun;
-  if (variance < 0) return cardStyles.varianceUnder;
-  return cardStyles.varianceNeutral;
-}
-
-function VarianceCard({ item, cardStyles }) {
-  const isOverrun = item.variance > 0;
-  const cardClass = getVarianceCardClass(item.variance, cardStyles);
-  return (
-    <div className={`${cardStyles.varianceCard} ${cardClass}`}>
-      <div className={cardStyles.varianceCardCategory}>{item.category}</div>
-      <div className={cardStyles.varianceCardRow}>
-        <span>Planned:</span>
-        <span>{item.plannedCost.toLocaleString()}</span>
-      </div>
-      <div className={cardStyles.varianceCardRow}>
-        <span>Actual:</span>
-        <span>{item.actualCost.toLocaleString()}</span>
-      </div>
-      <div className={cardStyles.varianceCardRow}>
-        <span>Variance:</span>
-        <span>
-          {isOverrun ? '+' : ''}
-          {item.variance.toLocaleString()}
-        </span>
-      </div>
-      {item.variancePct !== null && (
-        <div className={cardStyles.varianceCardPct}>
-          {isOverrun ? '+' : ''}
-          {item.variancePct.toFixed(1)}%
-        </div>
-      )}
-      <div className={cardStyles.varianceCardStatus}>{item.budgetStatus}</div>
-    </div>
-  );
-}
-
-VarianceCard.propTypes = {
-  item: PropTypes.shape({
-    category: PropTypes.string.isRequired,
-    plannedCost: PropTypes.number.isRequired,
-    actualCost: PropTypes.number.isRequired,
-    variance: PropTypes.number.isRequired,
-    variancePct: PropTypes.number,
-    budgetStatus: PropTypes.string.isRequired,
-  }).isRequired,
-  cardStyles: PropTypes.shape({
-    varianceCard: PropTypes.string,
-    varianceOverrun: PropTypes.string,
-    varianceUnder: PropTypes.string,
-    varianceNeutral: PropTypes.string,
-    varianceCardCategory: PropTypes.string,
-    varianceCardRow: PropTypes.string,
-    varianceCardPct: PropTypes.string,
-    varianceCardStatus: PropTypes.string,
-  }).isRequired,
-};
-
-function buildChartContent({ loading, isFiltering, hasData, chartDataWithVariance, darkMode }) {
-  if (loading || isFiltering) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          height: 200,
-          justifyContent: 'center',
-          alignItems: 'center',
-          color: 'var(--text-color)',
-        }}
-      >
-        <Spinner color="primary" size="sm" />
-        <span style={{ marginLeft: '10px' }}>Updating chart...</span>
-      </div>
-    );
-  }
-  if (hasData) {
-    return (
-      <div style={{ width: '100%', height: 200 }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={chartDataWithVariance}
-            margin={{ top: 20, right: 5, left: 5, bottom: 0 }}
-            barGap={20}
-          >
-            <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? '#e5e7eb' : '#e0e0e0'} />
-            <XAxis
-              dataKey="category"
-              axisLine={false}
-              tickLine={false}
-              tick={{ fill: 'var(--text-color)' }}
-            />
-            <YAxis tick={{ fill: 'var(--text-color)', fontSize: '12px' }} />
-            <Tooltip
-              cursor={{ fill: 'transparent' }}
-              allowEscapeViewBox={{ x: true, y: true }}
-              contentStyle={{
-                backgroundColor: darkMode ? '#1f242b' : 'var(--card-bg)',
-                borderColor: darkMode ? '#45505e' : 'var(--button-hover)',
-                borderRadius: '6px',
-                color: 'var(--text-color)',
-              }}
-              labelStyle={{ color: 'var(--text-color)', fontSize: '12px' }}
-              itemStyle={{ color: 'var(--text-color)', fontSize: '12px' }}
-              wrapperStyle={{ pointerEvents: 'none', zIndex: 12 }}
-            />
-            <Legend
-              verticalAlign="top"
-              height={36}
-              iconSize={8}
-              wrapperStyle={{ color: 'var(--text-color)' }}
-            />
-            <Bar
-              dataKey="actualCost"
-              name="Actual"
-              fill={darkMode ? '#c0392b' : '#e74a3b'}
-              barSize={40}
-            >
-              {chartDataWithVariance.map(entry => (
-                <Cell
-                  key={`actual-cell-${entry.category}`}
-                  fill={getActualBarColor(entry, darkMode)}
-                />
-              ))}
-              <LabelList dataKey="actualCost" position="top" fill="var(--text-color)" />
-            </Bar>
-            <Bar
-              dataKey="plannedCost"
-              name="Planned"
-              fill={!darkMode ? '#17a272' : '#1cc88a'}
-              barSize={40}
-            >
-              <LabelList dataKey="plannedCost" position="top" fill="var(--text-color)" />
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-  return (
-    <div
-      style={{
-        display: 'flex',
-        height: 200,
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: 'var(--text-color)',
-        fontStyle: 'italic',
-      }}
-    >
-      No data available for the selected filters.
-    </div>
-  );
-}
-
 function ActualVsPlannedCost() {
   const dispatch = useDispatch();
   const projects = useSelector(state => state.bmProjects) || [];
@@ -274,44 +104,124 @@ function ActualVsPlannedCost() {
       ? [{ category: 'Overall', actualCost: totals.actual, plannedCost: totals.planned }]
       : breakdown.filter(d => d.category === selectedCategory);
 
-  const filterSummary = `${selectedProjectName || 'Loading...'} - ${selectedCategory}`;
-
-  const chartDataWithVariance = chartData.map(item => {
-    const variance = item.actualCost - item.plannedCost;
-    return {
-      ...item,
-      variance,
-      variancePct: item.plannedCost > 0 ? (variance / item.plannedCost) * 100 : null,
-      budgetStatus: getBudgetStatus(variance),
-    };
-  });
+  // Detect over-budget items
+  const isOverBudget = chartData.some(d => d.actualCost > d.plannedCost && d.plannedCost > 0);
+  const overBudgetPct =
+    totals.planned > 0 ? ((totals.actual - totals.planned) / totals.planned) * 100 : 0;
 
-  const hasData =
-    chartDataWithVariance.length > 0 &&
-    !(
-      chartDataWithVariance.length === 1 &&
-      chartDataWithVariance[0].actualCost === 0 &&
-      chartDataWithVariance[0].plannedCost === 0
-    );
+  // Dynamic bar color: flash red when actual exceeds planned
+  const getActualBarColor = entry => {
+    if (entry.plannedCost > 0 && entry.actualCost > entry.plannedCost) {
+      return '#dc2626'; // bright red for over-budget
+    }
+    return darkMode ? '#c0392b' : '#e74a3b';
+  };
 
-  // Badge reflects the currently selected view (Overall or a specific
-  // category), so it stays consistent with the breakdown cards below it.
-  const displayedPlanned = chartDataWithVariance.reduce((sum, d) => sum + d.plannedCost, 0);
-  const displayedActual = chartDataWithVariance.reduce((sum, d) => sum + d.actualCost, 0);
-  const totalVariance = displayedActual - displayedPlanned;
-  const totalVariancePct = displayedPlanned > 0 ? (totalVariance / displayedPlanned) * 100 : null;
-  const isTotalOverrun = totalVariance > 0;
+  const filterSummary = `${selectedProjectName || 'Loading...'} - ${selectedCategory}`;
 
-  const chartContent = buildChartContent({
-    loading,
-    isFiltering,
-    hasData,
-    chartDataWithVariance,
-    darkMode,
-  });
+  let chartContent;
+  if (loading || isFiltering) {
+    chartContent = (
+      <div
+        style={{
+          display: 'flex',
+          height: 200,
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: 'var(--text-color)',
+        }}
+      >
+        <Spinner color="primary" size="sm" />
+        <span style={{ marginLeft: '10px' }}>Updating chart...</span>
+      </div>
+    );
+  } else if (
+    !chartData.length ||
+    (chartData.length === 1 && chartData[0].actualCost === 0 && chartData[0].plannedCost === 0)
+  ) {
+    chartContent = (
+      <div
+        style={{
+          display: 'flex',
+          height: 200,
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: 'var(--text-color)',
+          fontStyle: 'italic',
+        }}
+      >
+        No data available for the selected filters.
+      </div>
+    );
+  } else {
+    chartContent = (
+      <>
+        <div style={{ width: '100%', height: 200 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={chartData}
+              margin={{ top: 20, right: 5, left: 5, bottom: 0 }}
+              barGap={20}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis
+                dataKey="category"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fill: 'var(--text-color)' }}
+              />
+              <YAxis tick={{ fill: 'var(--text-color)', fontSize: '12px' }} />
+              <Tooltip
+                cursor={false}
+                contentStyle={{
+                  backgroundColor: 'var(--card-bg)',
+                  borderColor: 'var(--button-hover)',
+                }}
+                labelStyle={{ color: 'var(--text-color)', fontSize: '12px' }}
+              />
+              <Legend
+                verticalAlign="top"
+                height={36}
+                iconSize={8}
+                wrapperStyle={{ color: 'var(--text-color)' }}
+              />
+              <Bar
+                dataKey="actualCost"
+                name="Actual"
+                fill={darkMode ? '#c0392b' : '#e74a3b'}
+                barSize={40}
+              >
+                {chartData.map(entry => (
+                  <Cell key={`actual-cell-${entry.category}`} fill={getActualBarColor(entry)} />
+                ))}
+                <LabelList dataKey="actualCost" position="top" fill="var(--text-color)" />
+              </Bar>
+              <Bar
+                dataKey="plannedCost"
+                name="Planned"
+                fill={!darkMode ? '#17a272' : '#1cc88a'}
+                barSize={40}
+              >
+                <LabelList dataKey="plannedCost" position="top" fill="var(--text-color)" />
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+        <div className={styles.chartCaption}>{selectedProjectName}</div>
+        {isOverBudget && (
+          <div className={styles.overBudgetWarning}>
+            ⚠️ Actual cost exceeds planned budget
+            {selectedCategory === 'Overall' && overBudgetPct > 0
+              ? ` by ${overBudgetPct.toFixed(1)}%`
+              : ''}
+          </div>
+        )}
+      </>
+    );
+  }
 
   return (
-    <div style={{ padding: 10 }} className={darkMode ? styles.darkMode : ''}>
+    <div style={{ padding: 10 }}>
       <div style={{ textAlign: 'center', marginBottom: '15px' }}>
         <h2 style={{ fontSize: 'large', margin: '0 0 5px 0' }} className={styles.title}>
           Actual vs Planned Costs
@@ -357,27 +267,6 @@ function ActualVsPlannedCost() {
       </div>
 
       {chartContent}
-
-      {!loading && !isFiltering && hasData && (
-        <div className={styles.varianceSummaryContainer}>
-          <div className={styles.varianceSummaryHeader}>
-            <h3 className={styles.varianceSummaryTitle}>Variance and Budget Indicators</h3>
-            <div className={isTotalOverrun ? styles.totalOverrunBadge : styles.totalOnTrackBadge}>
-              {selectedCategory === 'Overall' ? 'Total Variance' : `${selectedCategory} Variance`}:{' '}
-              {isTotalOverrun ? '+' : ''}
-              {totalVariance.toLocaleString()}
-              {totalVariancePct !== null &&
-                ` (${isTotalOverrun ? '+' : ''}${totalVariancePct.toFixed(1)}%)`}
-            </div>
-          </div>
-
-          <div className={styles.varianceCardsRow}>
-            {chartDataWithVariance.map(item => (
-              <VarianceCard key={item.category} item={item} cardStyles={styles} />
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
index 8be87dad0d..47f88ab1db 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ActualVsPlannedCost/ActualVsPlannedCost.module.css
@@ -43,143 +43,6 @@
   color: var(--text-color);
 }
 
-.varianceSummaryContainer {
-  margin-top: 12px;
-  border-top: 1px solid var(--button-hover);
-  padding-top: 10px;
-}
-
-.varianceSummaryHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 10px;
-  flex-wrap: wrap;
-}
-
-.varianceSummaryTitle {
-  font-size: 0.9rem;
-  margin: 0;
-  color: var(--text-color);
-}
-
-.totalOverrunBadge,
-.totalOnTrackBadge {
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 4px 8px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-}
-
-.totalOverrunBadge {
-  color: #b63d30;
-  background: rgba(231, 74, 59, 0.14);
-  border-color: rgba(231, 74, 59, 0.35);
-}
-
-.totalOnTrackBadge {
-  color: #0f7f5b;
-  background: rgba(28, 200, 138, 0.14);
-  border-color: rgba(28, 200, 138, 0.35);
-}
-
-.varianceCardsRow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  gap: 10px;
-}
-
-.varianceCard {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 10px;
-}
-
-.varianceOverrun {
-  background: rgba(231, 74, 59, 0.1);
-  border-color: rgba(231, 74, 59, 0.35);
-}
-
-.varianceUnder {
-  background: rgba(28, 200, 138, 0.1);
-  border-color: rgba(28, 200, 138, 0.35);
-}
-
-.varianceNeutral {
-  background: rgba(128, 128, 128, 0.08);
-  border-color: rgba(128, 128, 128, 0.2);
-}
-
-.varianceCardCategory {
-  font-size: 0.82rem;
-  font-weight: 700;
-  color: var(--text-color);
-  margin-bottom: 8px;
-}
-
-.varianceCardRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--text-color);
-  font-size: 0.8rem;
-  margin-bottom: 3px;
-}
-
-.varianceCardPct {
-  margin-top: 4px;
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--text-color);
-  text-align: right;
-}
-
-.varianceCardStatus {
-  margin-top: 6px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  color: var(--text-color);
-}
-
-.darkMode .totalOverrunBadge {
-  color: #ffb7af;
-  background: rgba(231, 74, 59, 0.2);
-  border-color: rgba(255, 183, 175, 0.45);
-}
-
-.darkMode .totalOnTrackBadge {
-  color: #9ce7cb;
-  background: rgba(28, 200, 138, 0.2);
-  border-color: rgba(156, 231, 203, 0.45);
-}
-
-.darkMode .varianceOverrun {
-  background: rgba(231, 74, 59, 0.18);
-  border-color: rgba(255, 183, 175, 0.3);
-}
-
-.darkMode .varianceUnder {
-  background: rgba(28, 200, 138, 0.18);
-  border-color: rgba(156, 231, 203, 0.3);
-}
-
-.darkMode .varianceNeutral {
-  background: rgba(160, 170, 190, 0.12);
-  border-color: rgba(160, 170, 190, 0.28);
-}
-
-/* Keep dashed grid lines visible in dark mode. Overrides the app-wide
-   `:global(.dark-mode) .recharts-cartesian-grid-* line` rule that leaks
-   from EventPopularity.module.css (stroke #334155 !important). */
-:global(.dark-mode) .darkMode :global(.recharts-cartesian-grid-horizontal) line,
-:global(.dark-mode) .darkMode :global(.recharts-cartesian-grid-vertical) line {
-  stroke: #aab4c2 !important;
-}
-
 .overBudgetWarning {
   text-align: center;
   font-size: 12px;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
index 9bf9e55219..e163667b43 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.jsx
@@ -112,38 +112,6 @@ function renderDotTopOrBottom(lineKey, color) {
   };
 }
 
-// Custom label for the "Current Month" reference line. Rendered near the bottom
-// of the line and right-aligned to its left, so it stays in the empty lower area
-// and never overlaps the data value labels (which sit near the top on the right).
-function CurrentMonthLabel({ viewBox }) {
-  if (!viewBox) return null;
-  const { x, y, height } = viewBox;
-  return (
-    <text
-      x={x - 6}
-      y={y + height - 8}
-      fill="#fc07cf"
-      fontSize={12}
-      fontWeight="bold"
-      textAnchor="end"
-    >
-      Current Month
-    </text>
-  );
-}
-
-CurrentMonthLabel.propTypes = {
-  viewBox: PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-    height: PropTypes.number,
-  }),
-};
-
-CurrentMonthLabel.defaultProps = {
-  viewBox: null,
-};
-
 function CostPredictionChart({ projectId, projects }) {
   const dispatch = useDispatch();
   const [chartData, setChartData] = useState([]);
@@ -452,7 +420,7 @@ function CostPredictionChart({ projectId, projects }) {
             x={currentMonth}
             stroke="#ff0000"
             strokeDasharray="3 3"
-            label={<CurrentMonthLabel />}
+            label={{ value: 'Current Month', position: 'top', fill: '#fc07cfff' }}
           />
           <Line
             type="monotone"
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
index e3f8e4db8e..15350f1aa9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/CostPredictionChart.module.css
@@ -15,14 +15,6 @@
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
-/* Keep dashed grid lines visible in dark mode. Overrides the app-wide
-   `:global(.dark-mode) .recharts-cartesian-grid-* line` rule that leaks
-   from EventPopularity.module.css (stroke #334155 !important). */
-:global(.dark-mode) .titleContainer :global(.recharts-cartesian-grid-horizontal) line,
-:global(.dark-mode) .titleContainer :global(.recharts-cartesian-grid-vertical) line {
-  stroke: #aab4c2 !important;
-}
-
 .legendList {
   display: flex;
   justify-content: center;
diff --git a/src/components/CommunityPortal/Activities/Register/Register.jsx b/src/components/CommunityPortal/Activities/Register/Register.jsx
index b4b11f2d30..05f6e72072 100644
--- a/src/components/CommunityPortal/Activities/Register/Register.jsx
+++ b/src/components/CommunityPortal/Activities/Register/Register.jsx
@@ -2,13 +2,36 @@ import { useState, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
-import CalendarWidget from 'react-calendar';
+import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import axios from 'axios';
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './Register.module.css';
 import EventDescription from './EventDescription';
 
+function isTomorrow(dateString) {
+  const input = new Date(dateString);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(today.getDate() + 1);
+  return input >= tomorrow && input < new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);
+}
+
+function isComingWeekend(dateString) {
+  const input = new Date(dateString);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const day = today.getDay();
+  const daysUntilSaturday = (6 - day + 7) % 7 || 7;
+  const saturday = new Date(today);
+  saturday.setDate(today.getDate() + daysUntilSaturday);
+  const sunday = new Date(saturday);
+  sunday.setDate(saturday.getDate() + 1);
+  sunday.setHours(23, 59, 59, 999);
+  return input >= saturday && input <= sunday;
+}
+
 const MOCK_ACTIVITIES = [
   {
     id: 1,
@@ -542,7 +565,7 @@ function Register() {
         {/* Right Column: Calendar */}
         <div className={styles['right-column']}>
           <div className={styles['calendar-container']}>
-            <CalendarWidget
+            <Calendar
               onChange={setSelectedDate}
               value={selectedDate}
               tileClassName={tileClassName}
diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 7f9c5b2f9b..51d90f4528 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -1,99 +1,14 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Container, Row, Alert, Col, Card, CardBody, Button, Input } from 'reactstrap';
-import {
-  FaCalendarAlt,
-  FaMapMarkerAlt,
-  FaUserAlt,
-  FaSearch,
-  FaTimes,
-  FaHistory,
-} from 'react-icons/fa';
+import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt, FaSearch, FaTimes } from 'react-icons/fa';
 import styles from './CPDashboard.module.css';
 import { ENDPOINTS } from '../../utils/URL';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import { isTomorrow, isComingWeekend } from './utils';
-
-const RECENT_SEARCHES_KEY = 'cp_recent_searches';
-const MAX_RECENT_SEARCHES = 10;
-
-function useRecentSearches(key = RECENT_SEARCHES_KEY, maxItems = MAX_RECENT_SEARCHES) {
-  const [recentSearches, setRecentSearches] = useState(() => {
-    try {
-      const stored = localStorage.getItem(key);
-      return stored ? JSON.parse(stored) : [];
-    } catch {
-      return [];
-    }
-  });
-
-  const addSearch = useCallback(
-    query => {
-      const trimmed = query.trim();
-      if (!trimmed) return;
-      setRecentSearches(prev => {
-        const updated = [trimmed, ...prev.filter(s => s !== trimmed)].slice(0, maxItems);
-        localStorage.setItem(key, JSON.stringify(updated));
-        return updated;
-      });
-    },
-    [key, maxItems],
-  );
-
-  const removeSearch = useCallback(
-    query => {
-      setRecentSearches(prev => {
-        const updated = prev.filter(s => s !== query);
-        localStorage.setItem(key, JSON.stringify(updated));
-        return updated;
-      });
-    },
-    [key],
-  );
-
-  return { recentSearches, addSearch, removeSearch };
-}
 
-function RecentSearchDropdown({ searches, onSelect, onRemove, darkMode }) {
-  if (!searches.length) return null;
-  return (
-    <div
-      className={`${styles.recentSearchDropdown} ${
-        darkMode ? styles.darkRecentSearchDropdown : ''
-      }`}
-    >
-      <div className={styles.recentSearchHeader}>
-        <FaHistory className={darkMode ? styles.recentIconDark : styles.recentIcon} />
-        <span>Recently Searched</span>
-      </div>
-      {searches.map(term => (
-        <div key={term} className={styles.recentSearchItem}>
-          <button
-            type="button"
-            className={`${styles.recentSearchTerm} ${darkMode ? styles.darkRecentSearchTerm : ''}`}
-            onClick={() => onSelect(term)}
-          >
-            <FaSearch className={darkMode ? styles.recentIconDark : styles.recentIcon} />
-            {term}
-          </button>
-          <button
-            type="button"
-            className={`${styles.recentSearchRemove} ${
-              darkMode ? styles.darkRecentSearchRemove : ''
-            }`}
-            onClick={() => onRemove(term)}
-            aria-label={`Remove ${term}`}
-          >
-            <FaTimes />
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const FixedRatioImage = ({ src, alt, fallback }) => (
+const FixedRatioImage = ({ src = '', alt = '', fallback }) => (
   <div
     style={{
       width: '100%',
@@ -119,6 +34,12 @@ const FixedRatioImage = ({ src, alt, fallback }) => (
   </div>
 );
 
+FixedRatioImage.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  fallback: PropTypes.string.isRequired,
+};
+
 // Default filter values
 const DEFAULT_FILTERS = {
   dateFilter: '',
@@ -128,35 +49,23 @@ const DEFAULT_FILTERS = {
   categories: '',
 };
 
-function passesFilters(
-  event,
-  { showPastEvents, isPastEvent, onlineOnly, dateFilter, searchQuery },
-) {
-  if (!showPastEvents && isPastEvent(event)) return false;
-  if (onlineOnly && event.location?.toLowerCase() !== 'virtual') return false;
-  if (dateFilter === 'tomorrow') return isTomorrow(event.date);
-  if (dateFilter === 'weekend') return isComingWeekend(event.date);
-  if (!searchQuery) return true;
-  const term = searchQuery.toLowerCase();
-  return (
-    event.title?.toLowerCase().includes(term) ||
-    event.location?.toLowerCase().includes(term) ||
-    event.organizer?.toLowerCase().includes(term)
-  );
-}
-
 export function CPDashboard() {
   const [events, setEvents] = useState([]);
   const [searchInput, setSearchInput] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedDate, setSelectedDate] = useState('');
-  const [onlineOnly] = useState(false);
+  const [onlineOnly, setOnlineOnly] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [showPastEvents, setShowPastEvents] = useState(false);
-  const [showRecentSearches, setShowRecentSearches] = useState(false);
   const darkMode = useSelector(state => state.theme.darkMode);
-  const { recentSearches, addSearch, removeSearch } = useRecentSearches();
+
+  // Darken the page body in dark mode (app-wide pattern) so the area around the
+  // dashboard isn't left white.
+  useEffect(() => {
+    document.body.classList.toggle('dark-mode-body', darkMode);
+    return () => document.body.classList.remove('dark-mode-body');
+  }, [darkMode]);
 
   // Hide the global back-to-top button — not needed on this page
   useEffect(() => {
@@ -202,13 +111,6 @@ export function CPDashboard() {
     fetchEvents();
   }, []);
 
-  // Darken the page body in dark mode (app-wide pattern) so the area
-  // behind the dashboard isn't left white.
-  useEffect(() => {
-    document.body.classList.toggle('dark-mode-body', darkMode);
-    return () => document.body.classList.remove('dark-mode-body');
-  }, [darkMode]);
-
   useEffect(() => {
     const handler = setTimeout(() => {
       setSearchQuery(searchInput.trim());
@@ -221,13 +123,11 @@ export function CPDashboard() {
   const handleSearchClick = () => {
     const trimmed = searchInput.trim();
     setSearchQuery(trimmed);
-    addSearch(trimmed);
     setPagination(prev => ({ ...prev, currentPage: 1 }));
-    setShowRecentSearches(false);
   };
 
   // keep this near your refs/functions
-  const BASE_HEIGHT = 32;
+  const BASE_HEIGHT = 36;
 
   const autoGrow = el => {
     if (!el) return;
@@ -236,9 +136,6 @@ export function CPDashboard() {
   };
 
   const searchRef = useRef(null);
-  const recentDropdownRef = useRef(null);
-  const blurTimeoutRef = useRef(null);
-
   useEffect(() => {
     autoGrow(searchRef.current); // ✅ runs even when you clear via button
   }, [searchInput]);
@@ -248,36 +145,10 @@ export function CPDashboard() {
       e.preventDefault(); // ✅ stops newline
       const trimmed = searchInput.trim();
       setSearchQuery(trimmed);
-      addSearch(trimmed);
       setPagination(prev => ({ ...prev, currentPage: 1 }));
-      setShowRecentSearches(false);
-    }
-  };
-
-  const handleSearchFocus = () => {
-    setShowRecentSearches(true);
-  };
-
-  const handleSearchBlur = () => {
-    blurTimeoutRef.current = setTimeout(() => {
-      setShowRecentSearches(false);
-    }, 200);
-  };
-
-  const handleRecentDropdownMouseDown = () => {
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
     }
   };
 
-  const handleSelectRecent = term => {
-    setSearchInput(term);
-    setSearchQuery(term);
-    setPagination(prev => ({ ...prev, currentPage: 1 }));
-    setShowRecentSearches(false);
-    if (searchRef.current) searchRef.current.focus();
-  };
-
   const formatDate = dateStr => {
     if (!dateStr) return 'Date TBD';
     const date = new Date(dateStr);
@@ -285,11 +156,35 @@ export function CPDashboard() {
       weekday: 'long',
       month: 'long',
       day: 'numeric',
+      year: 'numeric',
       hour: 'numeric',
       minute: '2-digit',
     });
   };
 
+  const isTomorrow = dateString => {
+    const input = new Date(dateString);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const tomorrow = new Date(today);
+    tomorrow.setDate(today.getDate() + 1);
+    return input >= tomorrow && input < new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);
+  };
+
+  const isComingWeekend = dateString => {
+    const input = new Date(dateString);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const day = today.getDay();
+    const daysUntilSaturday = (6 - day + 7) % 7 || 7;
+    const saturday = new Date(today);
+    saturday.setDate(today.getDate() + daysUntilSaturday);
+    const sunday = new Date(saturday);
+    sunday.setDate(saturday.getDate() + 1);
+    sunday.setHours(23, 59, 59, 999);
+    return input >= saturday && input <= sunday;
+  };
+
   // Handler to update pending filter values
   const handleFilterChange = (filterName, value) => {
     setPendingFilters(prev => ({
@@ -298,6 +193,15 @@ export function CPDashboard() {
     }));
   };
 
+  // Toggle the date radio: clicking the active option clears it; clicking another switches.
+  // Applies immediately (bypasses the Apply Filters button) so the user sees instant feedback.
+  const handleDateToggle = value => {
+    const next = appliedFilters.dateFilter === value ? '' : value;
+    setPendingFilters(prev => ({ ...prev, dateFilter: next }));
+    setAppliedFilters(prev => ({ ...prev, dateFilter: next }));
+    setPagination(prev => ({ ...prev, currentPage: 1 }));
+  };
+
   // Apply all pending filters
   const handleApplyFilters = () => {
     setAppliedFilters(pendingFilters);
@@ -318,16 +222,32 @@ export function CPDashboard() {
     if (!ref) return false;
     return new Date(ref) < now;
   };
+  // Filter events based on applied filters
+  const filteredEvents = events.filter(event => {
+    if (!showPastEvents && isPastEvent(event)) return false;
+    // Filter by online only
+    if (appliedFilters.onlineOnly) {
+      const isOnlineEvent = event.location?.toLowerCase() === 'virtual';
+      if (!isOnlineEvent) return false;
+    }
 
-  const filteredEvents = events.filter(event =>
-    passesFilters(event, {
-      showPastEvents,
-      isPastEvent,
-      onlineOnly: appliedFilters.onlineOnly,
-      dateFilter: appliedFilters.dateFilter,
-      searchQuery,
-    }),
-  );
+    // Filter by date
+    if (appliedFilters.dateFilter === 'tomorrow') {
+      return isTomorrow(event.date);
+    } else if (appliedFilters.dateFilter === 'weekend') {
+      return isComingWeekend(event.date);
+    }
+
+    // Filter by search query
+    if (!searchQuery) return true;
+
+    const term = searchQuery.toLowerCase();
+    return (
+      event.title?.toLowerCase().includes(term) ||
+      event.location?.toLowerCase().includes(term) ||
+      event.organizer?.toLowerCase().includes(term)
+    );
+  });
 
   // Reset pagination to page 1 when filters change
   useEffect(() => {
@@ -361,6 +281,7 @@ export function CPDashboard() {
     );
   }
 
+  // isLoading and error are already handled by the early returns above.
   let eventsContent;
 
   if (displayedEvents.length > 0) {
@@ -377,9 +298,7 @@ export function CPDashboard() {
               <FixedRatioImage src={event.coverImage} alt={event.title} fallback={FALLBACK_IMG} />
             </div>
             <CardBody className={`${styles.eventCardBody} ${darkMode ? styles.darkEventCard : ''}`}>
-              <h5 className={styles.eventTitle} data-event-title={event.title || 'Untitled event'}>
-                <span className={styles.eventTitleText}>{event.title}</span>
-              </h5>
+              <h5 className={styles.eventTitle}>{event.title}</h5>
               <p className={styles.eventDate}>
                 <FaCalendarAlt
                   className={`${darkMode ? styles.eventIconDark : styles.eventIcon}`}
@@ -435,8 +354,6 @@ export function CPDashboard() {
                       value={searchInput}
                       onChange={e => setSearchInput(e.target.value)}
                       onKeyDown={handleSearchKeyDown}
-                      onFocus={handleSearchFocus}
-                      onBlur={handleSearchBlur}
                       className={`${styles.dashboardSearchTextarea} ${
                         darkMode ? styles.darkSearchTextarea : ''
                       }`}
@@ -468,22 +385,6 @@ export function CPDashboard() {
                   {searchInput.length >= 100 && (
                     <Alert className={styles.charCountWarning}>Max 100 characters</Alert>
                   )}
-                  {showRecentSearches && (
-                    <div
-                      ref={recentDropdownRef}
-                      onMouseDown={handleRecentDropdownMouseDown}
-                      role="menu"
-                      aria-label="Recent searches"
-                      tabIndex={-1}
-                    >
-                      <RecentSearchDropdown
-                        searches={recentSearches}
-                        onSelect={handleSelectRecent}
-                        onRemove={removeSearch}
-                        darkMode={darkMode}
-                      />
-                    </div>
-                  )}
                 </div>
               </div>
 
@@ -491,32 +392,30 @@ export function CPDashboard() {
               <div className={styles.filterItem}>
                 <label htmlFor="date-tomorrow">Dates</label>
                 <div className={styles.radioRow}>
-                  <div className={styles.radioGroup}>
+                  <label className={styles.radioOption} htmlFor="date-tomorrow">
                     <input
                       id="date-tomorrow"
                       type="radio"
                       name="dates"
-                      checked={pendingFilters.dateFilter === 'tomorrow'}
-                      onChange={() => handleFilterChange('dateFilter', 'tomorrow')}
+                      checked={appliedFilters.dateFilter === 'tomorrow'}
+                      onChange={() => {}}
+                      onClick={() => handleDateToggle('tomorrow')}
                       className={styles.radioInput}
                     />
-                    <label htmlFor="date-tomorrow" className={styles.radioLabel}>
-                      Tomorrow
-                    </label>
-                  </div>
-                  <div className={styles.radioGroup}>
+                    <span>Tomorrow</span>
+                  </label>
+                  <label className={styles.radioOption} htmlFor="date-weekend">
                     <input
                       id="date-weekend"
                       type="radio"
                       name="dates"
-                      checked={pendingFilters.dateFilter === 'weekend'}
-                      onChange={() => handleFilterChange('dateFilter', 'weekend')}
+                      checked={appliedFilters.dateFilter === 'weekend'}
+                      onChange={() => {}}
+                      onClick={() => handleDateToggle('weekend')}
                       className={styles.radioInput}
                     />
-                    <label htmlFor="date-weekend" className={styles.radioLabel}>
-                      This Weekend
-                    </label>
-                  </div>
+                    <span>This Weekend</span>
+                  </label>
                 </div>
 
                 <Input
@@ -532,20 +431,18 @@ export function CPDashboard() {
               {/* Online Only Filter */}
               <div className={styles.filterItem}>
                 <label htmlFor="online-only">Online</label>
-                <div className={styles.radioRow}>
-                  <div className={styles.radioGroup}>
-                    <input
-                      type="checkbox"
-                      id="online-only"
-                      checked={pendingFilters.onlineOnly}
-                      onChange={e => handleFilterChange('onlineOnly', e.target.checked)}
-                      className={styles.radioInput}
-                    />
-                    <label htmlFor="online-only" className={styles.radioLabel}>
-                      Online Only
-                    </label>
-                  </div>
-                </div>
+                <label className={styles.checkboxOption} htmlFor="online-only">
+                  <input
+                    id="online-only"
+                    type="checkbox"
+                    checked={onlineOnly}
+                    onChange={e => {
+                      setOnlineOnly(e.target.checked);
+                      setPagination(prev => ({ ...prev, currentPage: 1 }));
+                    }}
+                  />
+                  <span>Online Only</span>
+                </label>
               </div>
 
               {/* Branches Filter */}
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index abbdaa8189..b5e71c7cbd 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 :global(body) {
   font-family: Poppins, sans-serif;
   background: #fff;
@@ -5,6 +6,12 @@
   padding: 0;
 }
 
+/* In dark mode the page body is darkened (class toggled from the component) so
+   the area around the dashboard matches the app's dark theme instead of white. */
+:global(body.dark-mode-body) {
+  background: #1b2a41;
+}
+
 .dashboardContainer {
   padding: 40px 10px;
   margin: 0 auto;
@@ -20,13 +27,15 @@
 .darkContainer {
   background: #2b3e59 !important;
   color: #fff;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .dashboardHeader {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  gap: 20px;
+  justify-content: flex-start; 
+  gap: 20px;                   
   margin-bottom: 30px;
   padding: 16px 24px;
   background: linear-gradient(120deg, #fff, #f8f9fa);
@@ -35,26 +44,27 @@
   flex-wrap: nowrap;
 }
 
+.darkHeader{
+  background: #1b2a41;
+  color: #fff;
+}
+
 .dashboardHeader h1 {
   margin: 0;
   font-size: 2.5rem;
   font-weight: bold;
   color: #2c3e50;
-  white-space: nowrap;
+  white-space: nowrap; 
   flex-shrink: 0;
 }
 
-.darkHeader {
-  background: #1b2a41;
-  color: #fff;
-}
-
 .dashboardControls {
   display: flex;
   align-items: center;
   gap: 15px;
 }
 
+/* pill input */
 .dashboardSearchInput {
   width: 100%;
   border-radius: 999px;
@@ -63,37 +73,41 @@
   box-sizing: border-box;
 }
 
+/* clear X button */
 .dashboardClearBtn {
+  position: absolute;
+  right: 35px;
+  top: 45%;
+  transform: translateY(-50%);
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: 0.9rem;
   color: #1b3c55;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
 }
 
+/* search icon button inside the bar */
 .dashboardSearchIconBtn {
+  position: absolute;
+  right: 1%;
+  top: 48%;
+  transform: translateY(-50%);
   width: 34px;
   height: 34px;
   border-radius: 50%;
   cursor: pointer;
   background: transparent;
-  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1b3c55;
   font-size: 0.9rem;
-  padding: 0;
 }
 
 .cp_dashboard_header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between; 
   gap: 24px;
   padding: 16px 24px;
   margin-bottom: 30px;
@@ -113,7 +127,12 @@
   overflow: hidden;
   border: 2px solid #1b3c55;
   background: #fff;
+}
+
+.darkHeader .dashboardSearchContainer {   /* white when NOT focused */
   outline: none;
+  border-color: #fff;
+  background: #1b2a41;
 }
 
 .dashboardSearchContainer {
@@ -129,15 +148,12 @@
   margin-top: 8px;
 }
 
-.dashboardSearchContainer input,
-.dashboardSearchContainer textarea {
+.dashboardSearchContainer input {
   outline: none;
 }
 
 .dashboardSearchContainer input:focus,
-.dashboardSearchContainer input:focus-visible,
-.dashboardSearchContainer textarea:focus,
-.dashboardSearchContainer textarea:focus-visible {
+.dashboardSearchContainer input:focus-visible {
   outline: none;
   box-shadow: none;
 }
@@ -147,11 +163,6 @@
   outline: none;
 }
 
-.darkHeader .dashboardSearchContainer {
-  border-color: #fff;
-  background: #1b2a41;
-}
-
 .dashboardSearchContainer:focus-within {
   border-color: #4da3ff;
   box-shadow: none;
@@ -169,11 +180,11 @@
   background: transparent;
   font-size: 1rem;
   line-height: 1.5;
-  padding: 8px 96px 8px 18px;
-  min-height: 32px;
+  padding: 10px 96px 10px 18px;
+  min-height: 36px;
   max-height: 120px;
   box-sizing: border-box;
-  overflow: hidden auto;
+  overflow: hidden auto;      /* ✅ Brave-like wrapping */      /* ✅ prevents overflow */
   white-space: pre-wrap;
   overflow-wrap: break-word;
   word-break: normal;
@@ -187,6 +198,7 @@
   color: #cbd5e1;
 }
 
+
 @media (width <= 850px) {
   .dashboardSearchContainer {
     width: 250px;
@@ -220,6 +232,12 @@
   border-color: #4da3ff;
 }
 
+.dashboardSearchContainer,
+.dashboardSearchContainer:focus,
+.dashboardSearchContainer:focus-visible {
+  outline: none;
+}
+
 .darkSearchTextarea {
   color: #fff;
 }
@@ -247,12 +265,42 @@
 }
 
 .darkSidebar {
-  background: #2b3e59;
-  border-right: 1px solid #1b2a41;
+  background: #1b2a41;
 }
 
-.filterSection {
-  width: 100%;
+.darkSidebar .filterItem input:not([type='checkbox'], [type='radio']),
+.darkSidebar .filterItem select {
+  background-color: #34495e;
+  color: #fff;
+  border: 1px solid #4a6572;
+}
+
+.darkSidebar .filterItem label {
+  background: transparent;
+  color: #ecf0f1;
+}
+
+.darkSidebar input[type="date"] {
+  color-scheme: dark;
+}
+
+.darkSidebar .inputGroup {
+  background-color: #34495e;
+  border-color: #4da3ff;
+}
+
+.darkSidebar .inputGroup input {
+  color: #fff;
+}
+
+.darkSidebar .inputGroup input::placeholder {
+  color: #cbd5e1;
+}
+
+.darkSidebar .inputGroupText {
+  background: #2b3e59;
+  border-right: 1px solid #1b2a41;
+  color: #cbd5e1;
 }
 
 .filterSection h4 {
@@ -261,25 +309,18 @@
   font-weight: 600;
 }
 
-.filterSectionHeader {
-  margin-bottom: 40px;
-}
-
 .filterSectionDivider {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }
 
-.filterItem {
-  margin-bottom: 0;
+.filterSectionHeader{
+  margin-bottom: 40px;
 }
 
-.filterItem label {
-  display: block;
-  font-weight: 600;
-  color: #34495e;
-  margin-bottom: 8px;
+.filterItem {
+  margin-bottom: 0;
 }
 
 .filterOptionsVertical {
@@ -290,6 +331,13 @@
   margin-top: 10px;
 }
 
+.filterItem label {
+  display: block;
+  font-weight: 600;
+  color: #34495e;
+  margin-bottom: 8px;
+}
+
 .filterItem input:not([type='checkbox'], [type='radio'], [type='date']),
 .filterItem select {
   padding: 12px 15px;
@@ -303,83 +351,87 @@
   transition: all 0.3s ease;
 }
 
-.filterItem input:focus,
-.filterItem select:focus {
-  border-color: #2c3e50;
-  box-shadow: 0 0 5px rgb(44 62 80 / 40%);
-  outline: none;
-}
-
 .radioRow {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   margin-top: 10px;
-  padding: 0;
-}
-
-.radioColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  align-items: center;
 }
 
-.radioGroup {
-  display: flex;
+.radioOption,
+.checkboxOption {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  background: transparent !important;
 }
 
-.radioLabel,
-.checkboxLabel {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.radioOption input[type='radio'],
+.checkboxOption input[type='checkbox'] {
+  margin: 0;
   cursor: pointer;
-  font-weight: 400;
-  margin-bottom: 0;
-  color: #34495e;
+  flex-shrink: 0;
 }
 
 .filterItem input[type='radio'],
-.filterItem input[type='checkbox'],
-.radioInput,
-.checkboxInput {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  margin: 0;
+.filterItem input[type='checkbox'] {
+  display: inline-block; /* <– keeps input on same line as text */
+  width: auto;
   padding: 0;
-  accent-color: #1b3c55;
-  flex-shrink: 0;
+  margin: 0;
   vertical-align: middle;
 }
 
-.darkSidebar .filterItem label,
-.darkSidebar .radioLabel,
-.darkSidebar .checkboxLabel {
-  color: #ecf0f1;
+.filterItem input:focus,
+.filterItem select:focus {
+  border-color: #2c3e50;
+  box-shadow: 0 0 5px rgb(44 62 80 / 40%);
+  outline: none;
 }
 
-.darkSidebar .radioInput,
-.darkSidebar .filterItem input[type='checkbox'] {
-  accent-color: #4da3ff;
+.radioGroup {
+  margin-right: 8px;
 }
 
-.darkSidebar .inputGroup input {
-  color: #fff;
+.radioInput {
+  margin-right: 6px;
 }
 
-.darkSidebar .filterItem input:not([type='checkbox'], [type='radio'], [type='date']),
-.darkSidebar .filterItem select {
-  background-color: #34495e;
-  color: #fff;
-  border: 1px solid #4a6572;
+.radioLabel {
+  margin-bottom: 0;
+  vertical-align: middle;
 }
 
-.darkSidebar input[type='date'] {
-  color-scheme: dark;
+.filterItem input:not([type="checkbox"], [type="radio"]),
+.filterItem select {
+  padding: 12px 15px;
+  margin-top: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  width: 100%;
+  font-size: 1rem;
+  background: #fff;
+  transition: all 0.3s ease;
+}
+
+/* Render a single dropdown chevron: hide the browser's native arrow and draw
+   one custom chevron so the selects don't show a doubled-up arrow. */
+.filterItem select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  padding-right: 36px;
+}
+
+/* In the dark sidebar the select text is white, so use a white chevron. */
+.darkSidebar .filterItem select {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 }
 
 .dateFilter {
@@ -412,6 +464,7 @@
   margin-bottom: 1.5rem;
 }
 
+/* Search Input Container */
 .inputGroup {
   display: flex;
   align-items: center;
@@ -431,19 +484,6 @@
   font-size: 1.1rem;
 }
 
-.darkSidebar .inputGroup {
-  background-color: #34495e;
-  border-color: #4da3ff;
-}
-
-.darkSidebar .inputGroup input::placeholder {
-  color: #cbd5e1;
-}
-
-.darkSidebar .inputGroupText {
-  color: #cbd5e1;
-}
-
 .dashboardMain {
   width: 65%;
   padding: 30px;
@@ -454,17 +494,11 @@
   background: #2b3e59;
 }
 
-.darkMain .sectionTitle {
-  color: #f5f6f7;
-}
-
 .eventsHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 30px;
-  gap: 16px;
-  flex-wrap: wrap;
 }
 
 .sectionTitle {
@@ -495,7 +529,7 @@
   margin-bottom: 30px;
 }
 
-.clearDateFilterBtn {
+.clearDateFilterBtn{
   margin-top: 10px;
 }
 
@@ -504,17 +538,19 @@
   margin-bottom: 1.5rem;
 }
 
-.eventCardLink {
+.eventCard:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
+}
+
+.eventCardImgContainer img {
   width: 100%;
-  display: flex;
-  text-decoration: none;
-  color: inherit;
+  height: auto;
 }
 
 .eventCard {
   width: 100%;
   height: 100%;
-  min-height: 100%;
   box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
@@ -522,65 +558,19 @@
   overflow: hidden;
   border: none;
   background: #fff;
-  transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
 }
 
-.eventCard:hover {
-  transform: scale(1.02);
-  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
-}
-
-.eventTitle::after {
-  content: attr(data-event-title);
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  z-index: 2;
-  max-width: min(280px, calc(100vw - 48px));
-  padding: 6px 10px;
-  color: #fff;
-  font-size: 0.9rem;
-  line-height: 1.3;
-  text-align: center;
-  white-space: normal;
-  overflow-wrap: break-word;
-  background-color: #000;
-  border-radius: 4px;
-  opacity: 0;
-  pointer-events: none;
-  transform: translate(-50%, -4px);
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-}
-
-.eventTitle:hover::after {
-  opacity: 1;
-  transform: translate(-50%, 0);
-}
-
 .darkEventCard {
   background: #1b2a41;
 }
 
-.darkEventCard .eventTitle {
-  color: #f5f6f7;
-}
-
 .eventCardImgContainer {
   width: 100%;
   overflow: hidden;
   background-color: #f0f0f0;
   position: relative;
-  flex-shrink: 0;
-}
-
-.eventCardImgContainer img {
-  width: 100%;
-  height: auto;
 }
 
 .eventCardImg {
@@ -597,22 +587,16 @@
 }
 
 .eventTitle {
-  position: relative;
   text-align: center;
   color: #2c3e50;
   margin: 0 0 15px;
   font-weight: bold;
   font-size: 1.3rem;
   line-height: 1.4;
-  overflow: visible;
-  cursor: default;
-}
-
-.eventTitleText {
-  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
 }
 
 .eventDate,
@@ -658,19 +642,17 @@
 .noEvents {
   text-align: center;
   padding: 40px;
-  color: #888;
+  color: #595959; /* darker gray to meet AA contrast on the white background */
   font-size: 1.2rem;
-  width: 100%;
 }
 
 .darkMain .noEvents {
-  color: #9ca3af;
+  color: #e4e6eb; /* lighter gray to meet AA contrast on the dark background */
 }
 
 .dashboardActions {
   text-align: center;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 30px;
 }
 
 .dashboardActions button {
@@ -695,11 +677,6 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  flex-wrap: wrap;
-}
-
-.paginationInfo {
-  font-weight: 500;
 }
 
 .paginationBtn {
@@ -708,31 +685,24 @@
   color: #fff !important;
 }
 
-.paginationBtn:disabled {
-  opacity: 0.65;
-}
-
-.paginationBtn:hover:not(:disabled) {
-  background-color: #5a6268 !important;
-  border-color: #545b62 !important;
-}
+/* Hide browser's built-in clear icon for search inputs */
 
 .filterActions {
   display: flex;
-  flex-direction: row;
+  flex-direction: row; 
   gap: 10px;
   margin-top: 20px;
   padding-top: 15px;
-  width: 100%;
+  width: 100%; 
 }
 
 .applyBtn {
   flex: 1;
-  background-color: #1e8449 !important;
+  background-color: #198754 !important; /* darker success green: white text meets AA contrast */
   border: none;
   color: white;
-  padding: 10px 5px;
-  font-size: 0.9rem;
+  padding: 10px 5px; 
+  font-size: 0.9rem; 
   font-weight: 600;
   border-radius: 8px;
   cursor: pointer;
@@ -740,16 +710,16 @@
 }
 
 .applyBtn:hover {
-  background-color: #156b3a !important;
+  background-color: #146c43 !important;
   box-shadow: 0 4px 8px rgb(39 174 96 / 30%);
 }
 
 .clearBtn {
   flex: 1;
-  background-color: #6c757d !important;
+  background-color: #6c757d !important; /* darker secondary gray: white text meets AA contrast */
   border: none;
   color: white;
-  padding: 10px 5px;
+  padding: 10px 5px; 
   font-size: 0.9rem;
   font-weight: 600;
   border-radius: 8px;
@@ -758,7 +728,7 @@
 }
 
 .clearBtn:hover {
-  background-color: #7f8c8d !important;
+  background-color: #565e64 !important;
   box-shadow: 0 4px 8px rgb(149 165 166 / 30%);
 }
 
@@ -766,113 +736,6 @@
   border-top-color: #3a4e6a;
 }
 
-/* Recent Search Dropdown */
-.recentSearchDropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  margin-top: 4px;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.darkRecentSearchDropdown {
-  background: #1b2a41;
-  border-color: #4a6572;
-}
-
-.recentSearchHeader {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  border-bottom: 1px solid #eee;
-}
-
-.darkRecentSearchDropdown .recentSearchHeader {
-  color: #9ca3af;
-  border-bottom-color: #3a4e6a;
-}
-
-.recentIcon {
-  color: #888;
-  font-size: 0.7rem;
-}
-
-.recentIconDark {
-  color: #9ca3af;
-  font-size: 0.7rem;
-}
-
-.recentSearchItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.recentSearchTerm {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 0.9rem;
-  color: #34495e;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-
-.recentSearchTerm:hover {
-  background: #f5f5f5;
-}
-
-.darkRecentSearchTerm {
-  color: #ecf0f1;
-}
-
-.darkRecentSearchTerm:hover {
-  background: #2b3e59;
-}
-
-.recentSearchRemove {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 4px 8px;
-  color: #999;
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.15s ease;
-}
-
-.recentSearchRemove:hover {
-  color: #e74c3c;
-}
-
-.darkRecentSearchRemove {
-  color: #7f8c8d;
-}
-
-.darkRecentSearchRemove:hover {
-  color: #e74c3c;
-}
-
 @media (width <= 768px) {
   .dashboardHeader {
     flex-wrap: wrap;
@@ -881,26 +744,13 @@
   .cp_dashboard_search_container {
     width: 100%;
   }
+}
 
-  .centeredRow {
-    padding: 15px;
-  }
-
-  .dashboardMain {
-    width: 100%;
-    padding: 20px 10px;
-  }
-
-  .dashboardSidebar {
-    margin-bottom: 20px;
-  }
-
-  .eventsHeader {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+.paginationBtn:disabled {
+  opacity: 0.65;
+}
 
-  .filterActions {
-    flex-direction: column;
-  }
+.paginationBtn:hover:not(:disabled) {
+  background-color: #5a6268 !important;
+  border-color: #545b62 !important;
 }
diff --git a/src/components/CommunityPortal/RegistrationConfirmation/Registration.jsx b/src/components/CommunityPortal/RegistrationConfirmation/Registration.jsx
index b4f3a35b27..b4ab643211 100644
--- a/src/components/CommunityPortal/RegistrationConfirmation/Registration.jsx
+++ b/src/components/CommunityPortal/RegistrationConfirmation/Registration.jsx
@@ -1,12 +1,11 @@
 import { useState } from 'react';
-import RegistrationPopup from './RegistrationPopup';
-import styles from './Registration.module.css';
 import { useSelector } from 'react-redux';
+import RegistrationPopup from './RegistrationPopup';
 
 function RegistrationPage() {
   const [showPopup, setShowPopup] = useState(false);
-
   const darkMode = useSelector(state => state.theme.darkMode);
+
   const handleRegisterClick = () => {
     setShowPopup(true);
   };
@@ -16,14 +15,37 @@ function RegistrationPage() {
   };
 
   return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      <div className={`${styles.container}`}>
-        <button type="button" onClick={handleRegisterClick} className={`${styles.registerButton}`}>
-          Register
-        </button>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        padding: '16px',
+        backgroundColor: darkMode ? '#1a1d23' : '#f9fafb',
+        color: darkMode ? '#ffffff' : '#000000',
+      }}
+    >
+      <button
+        type="button"
+        style={{
+          marginTop: '20px',
+          marginBottom: '20px',
+          backgroundColor: '#3A506B',
+          color: 'white',
+          padding: '10px 20px',
+          borderRadius: '5px',
+          fontSize: '16px',
+          cursor: 'pointer',
+          border: 'none',
+        }}
+        onClick={handleRegisterClick}
+      >
+        Register
+      </button>
 
-        {showPopup && <RegistrationPopup onClose={handleClosePopup} />}
-      </div>
+      {showPopup && <RegistrationPopup onClose={handleClosePopup} />}
     </div>
   );
 }
diff --git a/src/components/CommunityPortal/RegistrationConfirmation/Registration.module.css b/src/components/CommunityPortal/RegistrationConfirmation/Registration.module.css
deleted file mode 100644
index 276ea87521..0000000000
--- a/src/components/CommunityPortal/RegistrationConfirmation/Registration.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: left;
-  min-height: 100vh;
-  padding: 16px;
-  background-color: #f9fafb;
-  transition: background-color 0.3s ease;
-}
-
-.registerButton {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  background-color: #3a506b;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
-  font-size: 16px;
-  border: none;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.registerButton:hover {
-  background-color: #2c3e50;
-}
-
-.darkMode {
-  background-color: #1b2a41;
-}
-
-.darkMode .container {
-  background-color: #1b2a41;
-}
-
-.darkMode .registerButton {
-  background-color: #4a5568;
-  color: #f0f0f0;
-}
-
-.darkMode .registerButton:hover {
-  background-color: #2d3748;
-}
diff --git a/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.jsx b/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.jsx
index e280df9007..5781991455 100644
--- a/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.jsx
+++ b/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.jsx
@@ -1,46 +1,61 @@
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import styles from './RegistrationPopup.module.css';
 
 function Popup({ onClose }) {
   const darkMode = useSelector(state => state.theme.darkMode);
+
+  const handleMoreDetails = () => {
+    globalThis.alert('Event details coming soon!');
+  };
+
+  const handleAddToCalendar = () => {
+    globalThis.alert('Add to calendar coming soon!');
+  };
+
+  const handleViewEmailDetails = () => {
+    globalThis.alert('Email details coming soon!');
+  };
+
+  const handleDownloadTicket = () => {
+    globalThis.alert('Download ticket coming soon!');
+  };
+
   return (
-    <div className={darkMode ? styles.darkMode : ''}>
-      <div className={`${styles.popupOverlay}`}>
-        <div className={`${styles.popup}`}>
-          <div className={`${styles.popupHeader}`}>
-            <span>✅ Registration Successful!</span>
-            <button type="button" className={`${styles.closeBtn}`} onClick={onClose}>
-              ✖
-            </button>
+    <div className={styles.popupOverlay}>
+      <div className={`${styles.popup} ${darkMode ? styles.popupDark : ''}`}>
+        <div className={styles.popupHeader}>
+          <span>✅ Registration Successful!</span>
+          <button type="button" className={styles.closeBtn} onClick={onClose}>
+            ✖
+          </button>
+        </div>
+        <h2>Thank you for Registering!</h2>
+        <p>
+          You have successfully registered for the event. We have reserved your space. See you
+          there!
+        </p>
+        <div className={styles.popupContent}>
+          <strong>Event Name</strong>
+          <button type="button" className={styles.eventDetails} onClick={handleMoreDetails}>
+            (Click for more details)
+          </button>
+          <p className={styles.userFullName}>User&apos;s Full Name</p>
+          <div className={styles.eventInfo}>
+            <span>📅 Tuesday, January 7th, 2025</span>
+            <span>⏰ 7:00 PM CST</span>
+            <span>📍 Location</span>
           </div>
-          <h2>Thank you for Registering!</h2>
-          <p>
-            You have successfully registered for the event. We have reserved your space. See you
-            there!
-          </p>
-          <div className={`${styles.popupContent}`}>
-            <strong>Event Name</strong>
-            <p className={`${styles.eventDetails}`}>(Click for more details)</p>
-            <p className={`${styles.userFullName}`}>User&apos;s Full Name</p>
-
-            <div className={`${styles.eventInfo}`}>
-              <span>📅 Tuesday, January 7th, 2025</span>
-              <span>⏰ 7:00 PM CST</span>
-              <span>📍 Location</span>
-            </div>
-
-            <button type="button" className={`${styles.calendarBtn}`}>
-              Add to my calendar
+          <button type="button" className={styles.calendarBtn} onClick={handleAddToCalendar}>
+            Add to my calendar
+          </button>
+          <div className={styles.popupFooter}>
+            <button type="button" className={styles.emailBtn} onClick={handleViewEmailDetails}>
+              View details in Email
+            </button>
+            <button type="button" className={styles.downloadBtn} onClick={handleDownloadTicket}>
+              Download Ticket
             </button>
-
-            <div className={`${styles.popupFooter}`}>
-              <button type="button" className={`${styles.emailBtn}`}>
-                View details in Email
-              </button>
-              <button type="button" className={`${styles.downloadBtn}`}>
-                Download Ticket
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -48,4 +63,8 @@ function Popup({ onClose }) {
   );
 }
 
+Popup.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
 export default Popup;
diff --git a/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.module.css b/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.module.css
index dfdc92f9bd..dfd21c3583 100644
--- a/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.module.css
+++ b/src/components/CommunityPortal/RegistrationConfirmation/RegistrationPopup.module.css
@@ -1,32 +1,46 @@
+/* Popup overlay */
 .popupOverlay {
   position: fixed;
-  inset: 0;
-  background: rgb(0 0 0 / 55%);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
 }
 
+/* Popup container */
 .popup {
-  width: 420px;
-  max-width: 90%;
-  background: #fff;
-  color: #1a1a1a;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 12px 30px rgb(0 0 0 / 20%);
+  background: white;
+  padding: 20px;
+  width: 400px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
+  text-align: center;
+  position: relative;
+}
+
+.popupDark {
+  background: #3a506b;
+  color: white;
+  padding: 20px;
+  width: 400px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
   text-align: center;
-  animation: fade-in 0.2s ease-out;
+  position: relative;
 }
 
+/* Popup header */
 .popupHeader {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  font-weight: 600;
-  font-size: 15px;
-  margin-bottom: 16px;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .closeBtn {
@@ -34,109 +48,70 @@
   border: none;
   font-size: 18px;
   cursor: pointer;
-  color: #d32f2f;
-}
-
-.popupContent {
-  margin-top: 16px;
 }
 
+/* Event details */
 .eventDetails {
-  color: #1976d2;
+  color: blue;
   cursor: pointer;
-  margin: 6px 0 12px;
-  font-size: 14px;
-}
-
-.userFullName {
-  font-weight: 600;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
+  text-decoration: underline;
 }
 
+/* Event info */
 .eventInfo {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 14px;
-  margin: 16px 0;
+  justify-content: space-between;
+  padding: 10px 0;
 }
 
+/* Buttons */
+.registerBtn,
 .calendarBtn,
 .emailBtn,
 .downloadBtn {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
+  display: block;
+  margin: 10px auto;
+  padding: 10px;
   border: none;
+  border-radius: 5px;
   font-size: 14px;
   cursor: pointer;
 }
 
-.calendarBtn {
-  background: #2e7d32;
-  color: #fff;
-  margin-bottom: 16px;
+.registerBtn {
+  background: #0056b3;
+  color: white;
 }
 
-.popupFooter {
-  display: flex;
-  gap: 12px;
+.calendarBtn {
+  background: #1a7a32;
+  color: white;
 }
 
 .emailBtn {
-  background: #01579b;
-  color: #fff;
-  flex: 1;
+  background: #0d6b7a;
+  color: white;
 }
 
 .downloadBtn {
-  background: #fbc02d;
-  color: #000;
-  flex: 1;
-}
-
-/* ==========================================================================
-   DARK MODE
-   ========================================================================== */
-
-.darkMode .popup {
-  background: #2c3e50;
-  color: #ecf0f1;
+  background: #7a5c00;
+  color: white;
 }
 
-.darkMode .eventDetails {
-  color: #90caf9;
-}
-
-.darkMode .calendarBtn {
-  background: #43a047;
-}
-
-.darkMode .emailBtn {
-  background: #0277bd;
+.popupFooter {
+  display: flex;
+  justify-content: space-between;
 }
 
-.darkMode .downloadBtn {
-  background: #fdd835;
+:global(.darkMode) .eventDetails {
+  color: #90cdf4;
 }
 
-.darkMode .userFullName,
-.darkMode p {
-  color: #ecf0f1;
+.userFullName {
+  /* Add any specific styles for user full name if needed */
 }
 
-/* ==========================================================================
-   ANIMATIONS
-   ========================================================================== */
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+.popupContent {
+  /* Add any specific styles for popup content if needed */
+}
\ No newline at end of file
diff --git a/src/components/CommunityPortal/utils.js b/src/components/CommunityPortal/utils.js
deleted file mode 100644
index d6e62f504b..0000000000
--- a/src/components/CommunityPortal/utils.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export function isTomorrow(dateString) {
-  const input = new Date(dateString);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const tomorrow = new Date(today);
-  tomorrow.setDate(today.getDate() + 1);
-  return input >= tomorrow && input < new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);
-}
-
-export function isComingWeekend(dateString) {
-  const input = new Date(dateString);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const day = today.getDay();
-  const daysUntilSaturday = (6 - day + 7) % 7 || 7;
-  const saturday = new Date(today);
-  saturday.setDate(today.getDate() + daysUntilSaturday);
-  const sunday = new Date(saturday);
-  sunday.setDate(saturday.getDate() + 1);
-  sunday.setHours(23, 59, 59, 999);
-  return input >= saturday && input <= sunday;
-}
diff --git a/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.jsx b/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.jsx
new file mode 100644
index 0000000000..2352e5969c
--- /dev/null
+++ b/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { useSidebar } from '../SidebarContext';
+import styles from './EducationPortalSideNav.module.css';
+
+const EducationPortalSideNav = () => {
+  const location = useLocation();
+  const authUser = useSelector(state => state.auth?.user);
+  const { isMinimized, setIsMinimized } = useSidebar();
+
+  const menuItems = [
+    { icon: '🏠', label: 'Homepage', path: '/educationportal' },
+    { icon: '📊', label: 'Knowledge Evaluation', path: '#' },
+    { icon: '📋', label: 'Past Lesson Plans', path: '#' },
+    { icon: '⭐', label: 'My Saved Interests', path: '#' },
+    { icon: '📈', label: 'Evaluation results', path: '/educationportal/evaluation-results' },
+    { icon: '🏗️', label: 'Build Lesson Plan', path: '#' },
+  ];
+
+  const isActive = path => path !== '#' && location.pathname === path;
+
+  return (
+    <aside className={`${styles.sidebar} ${isMinimized ? styles.minimized : ''}`}>
+      {/* User Welcome Section */}
+      <div className={styles.userSection}>
+        <div className={styles.welcomeIcon}>👋</div>
+        {!isMinimized && (
+          <>
+            <div className={styles.welcomeText}>
+              <div className={styles.welcomeLabel}>Welcome</div>
+              <div className={styles.userName}>{authUser?.firstName || 'Student'}</div>
+            </div>
+            <div className={styles.notifyIcon}>🔔</div>
+          </>
+        )}
+        {isMinimized && (
+          <button
+            className={styles.toggleButton}
+            onClick={() => setIsMinimized(!isMinimized)}
+            title="Expand sidebar"
+            aria-label="Expand sidebar"
+          >
+            ➜
+          </button>
+        )}
+      </div>
+
+      {/* Toggle Button - Only show when expanded */}
+      {!isMinimized && (
+        <div className={styles.toggleButtonContainer}>
+          <button
+            className={styles.minimizeBtn}
+            onClick={() => setIsMinimized(!isMinimized)}
+            title="Minimize sidebar"
+            aria-label="Minimize sidebar"
+          >
+            ⬅️
+          </button>
+        </div>
+      )}
+
+      {/* Navigation Menu */}
+      <nav className={styles.nav}>
+        <ul className={styles.menuList}>
+          {menuItems.map(item => (
+            <li key={item.label} className={styles.menuItem}>
+              {item.path !== '#' ? (
+                <NavLink
+                  to={item.path}
+                  className={`${styles.menuLink} ${isActive(item.path) ? styles.active : ''}`}
+                >
+                  <span className={styles.icon}>{item.icon}</span>
+                  <span className={styles.label}>{item.label}</span>
+                </NavLink>
+              ) : (
+                <div className={styles.menuLink}>
+                  <span className={styles.icon}>{item.icon}</span>
+                  <span className={styles.label}>{item.label}</span>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+};
+
+export default EducationPortalSideNav;
diff --git a/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.module.css b/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.module.css
new file mode 100644
index 0000000000..b1695c0692
--- /dev/null
+++ b/src/components/EductionPortal/EducationPortalSideNav/EducationPortalSideNav.module.css
@@ -0,0 +1,449 @@
+/* stylelint-disable declaration-property-value-keyword-no-deprecated, no-descending-specificity */
+
+/* ===== SIDEBAR CONTAINER ===== */
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 100vh;
+  background-color: #f5f5f5;
+  border-right: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  z-index: 1000;
+  transition: width 0.3s ease;
+}
+
+.sidebar.minimized {
+  width: 70px;
+}
+
+.sidebar.minimized .label,
+.sidebar.minimized .welcomeText,
+.sidebar.minimized .toggleButtonContainer {
+  display: none;
+}
+
+/* ===== USER SECTION ===== */
+.userSection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.welcomeIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.welcomeText {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.welcomeLabel {
+  font-size: 11px;
+  color: #999;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.userName {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  word-break: break-word;
+}
+
+.notifyIcon {
+  font-size: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* ===== NAVIGATION ===== */
+.nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.menuList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menuItem {
+  margin: 0;
+  padding: 0;
+}
+
+.menuLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  color: #333;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+  min-height: 44px;
+}
+
+.menuLink:hover {
+  background-color: #efefef;
+}
+
+.menuLink.active {
+  background-color: #e0e7ff;
+  color: #4f46e5;
+}
+
+.icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  width: 18px;
+  text-align: center;
+}
+
+.label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== TOGGLE BUTTONS ===== */
+.toggleButtonContainer {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.minimizeBtn {
+  background: none;
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.minimizeBtn:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.2s ease;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.toggleButton:hover {
+  background-color: #efefef;
+}
+
+/* ===== RESPONSIVE - DESKTOP (≥992px) ===== */
+@media (width >= 992px) {
+  /* Desktop: sidebar visible by default */
+}
+
+/* ===== RESPONSIVE - TABLET (768px - 991px) ===== */
+@media (width <= 991px) {
+  .sidebar {
+    width: 180px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .userSection {
+    padding: 10px;
+    gap: 6px;
+  }
+
+  .welcomeIcon {
+    font-size: 16px;
+  }
+
+  .welcomeLabel {
+    font-size: 10px;
+  }
+
+  .userName {
+    font-size: 11px;
+  }
+
+  .notifyIcon {
+    font-size: 14px;
+  }
+
+  .menuLink {
+    padding: 8px 10px;
+    font-size: 12px;
+    gap: 6px;
+  }
+
+  .icon {
+    font-size: 12px;
+    width: 16px;
+  }
+}
+
+/* ===== RESPONSIVE - MOBILE (≤767px) ===== */
+@media (width <= 767px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 240px;
+    height: 100vh;
+    background-color: #f5f5f5;
+    border-right: 1px solid #ddd;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    z-index: 1000;
+    transition: width 0.3s ease;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 12px;
+    border-bottom: 1px solid #ddd;
+    background-color: #fff;
+  }
+
+  .welcomeIcon {
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .welcomeText {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .welcomeLabel {
+    font-size: 10px;
+    color: #999;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .userName {
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    word-break: break-word;
+  }
+
+  .notifyIcon {
+    font-size: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+  }
+
+  .notifyIcon:active {
+    background-color: #e0e0e0;
+  }
+
+  .nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+  }
+
+  .menuList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .menuItem {
+    margin: 0;
+    padding: 0;
+  }
+
+  .menuLink {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    color: #333;
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    min-height: 48px;
+  }
+
+  .menuLink:active {
+    background-color: #f0f0f0;
+  }
+
+  .menuLink:hover {
+    background-color: #efefef;
+  }
+
+  .menuLink.active {
+    background-color: #e0e7ff;
+    color: #4f46e5;
+    border-left: 3px solid #4f46e5;
+    padding-left: 11px;
+  }
+
+  .icon {
+    font-size: 16px;
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+  }
+
+  .label {
+    flex: 1;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: break-word;
+  }
+}
+
+/* ===== RESPONSIVE - SMALL PHONES (≤480px) ===== */
+@media (width <= 480px) {
+  .sidebar {
+    width: 220px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    padding: 12px 10px;
+  }
+
+  .welcomeIcon {
+    font-size: 16px;
+  }
+
+  .userName {
+    font-size: 11px;
+  }
+
+  .menuLink {
+    padding: 11px 12px;
+    font-size: 12px;
+    gap: 8px;
+  }
+
+  .icon {
+    font-size: 14px;
+    width: 18px;
+  }
+}
+
+/* ===== RESPONSIVE - EXTRA SMALL (≤360px) ===== */
+@media (width <= 359px) {
+  .sidebar {
+    width: 200px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    padding: 10px 8px;
+    gap: 6px;
+  }
+
+  .welcomeIcon {
+    font-size: 14px;
+  }
+
+  .welcomeLabel {
+    font-size: 9px;
+  }
+
+  .userName {
+    font-size: 10px;
+  }
+
+  .menuLink {
+    padding: 10px;
+    font-size: 11px;
+    gap: 6px;
+    min-height: 44px;
+  }
+
+  .icon {
+    font-size: 12px;
+    width: 16px;
+  }
+}
diff --git a/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.jsx b/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.jsx
deleted file mode 100644
index 14ddfed416..0000000000
--- a/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import styles from './DashboardLayout.module.css';
-
-const DashboardLayout = ({ children }) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      <div className={`${styles.dashboardLayout} `}>
-        <div className={`${styles.mainContent}`}>
-          <div className={`${styles.contentWrapper}`}>{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardLayout;
diff --git a/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.module.css b/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.module.css
deleted file mode 100644
index 443af2de1f..0000000000
--- a/src/components/EductionPortal/EducatorReports/DashboardLayout/DashboardLayout.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.dashboardLayout {
-  display: flex;
-  min-height: 100vh;
-  background-color: #f8f9fa;
-}
-
-.mainContent {
-  flex: 1;
-  margin-left: 0;
-  min-height: 100vh;
-  overflow-x: auto;
-}
-
-.contentWrapper {
-  padding: 0 20px;
-  max-width: 100%;
-}
-
-@media (width <= 768px) {
-  .dashboardLayout {
-    flex-direction: column;
-    margin-top: 0;
-    min-height: 100vh;
-  }
-
-  .mainContent {
-    margin-left: 0;
-    width: 100%;
-    min-height: auto;
-    order: 2;
-  }
-
-  .contentWrapper {
-    padding: 16px;
-  }
-}
-
-@media (width <= 480px) {
-  .contentWrapper {
-    padding: 12px;
-  }
-}
-
-.darkMode .dashboardLayout {
-  background-color: #0f172a;
-}
diff --git a/src/components/EductionPortal/EducatorReports/ReportChart.jsx b/src/components/EductionPortal/EducatorReports/ReportChart.jsx
deleted file mode 100644
index 199a7efa9f..0000000000
--- a/src/components/EductionPortal/EducatorReports/ReportChart.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  ArcElement,
-} from 'chart.js';
-import { Bar, Line, Doughnut } from 'react-chartjs-2';
-import { useSelector } from 'react-redux';
-import styles from './ReportChart.module.css';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  ArcElement,
-  ChartDataLabels,
-);
-
-const ReportChart = ({
-  type = 'bar',
-  data,
-  height = 300,
-  showLegend = true,
-  horizontal = false,
-  options: customOptions = {},
-}) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  const getChartOptions = () => {
-    const baseOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      indexAxis: horizontal ? 'y' : 'x',
-      plugins: {
-        datalabels: { display: type !== 'line', color: '#ffffff' },
-        legend: {
-          display: showLegend,
-          labels: {
-            color: darkMode ? '#f1f5f9' : '#1e293b',
-            font: {
-              size: 12,
-            },
-          },
-        },
-        tooltip: {
-          backgroundColor: darkMode ? '#0f172a' : '#ffffff',
-          titleColor: darkMode ? '#f1f5f9' : '#0f172a',
-          bodyColor: darkMode ? '#94a3b8' : '#475569',
-          borderColor: darkMode ? '#334155' : '#e2e8f0',
-          borderWidth: 1,
-        },
-      },
-      scales: {
-        x: {
-          grid: {
-            color: darkMode ? '#334155' : '#cbd5e1',
-          },
-          ticks: {
-            color: darkMode ? '#f1f5f9' : '#1e293b',
-            font: {
-              size: 11,
-            },
-          },
-        },
-        y: {
-          grid: {
-            color: darkMode ? '#334155' : '#cbd5e1',
-          },
-          ticks: {
-            color: darkMode ? '#f1f5f9' : '#1e293b',
-            font: {
-              size: 11,
-            },
-          },
-        },
-      },
-    };
-
-    return {
-      ...baseOptions,
-      ...customOptions,
-      plugins: {
-        ...baseOptions.plugins,
-        ...customOptions.plugins,
-      },
-    };
-  };
-
-  const renderChart = () => {
-    const chartOptions = getChartOptions();
-
-    switch (type) {
-      case 'line':
-        return <Line data={data} options={chartOptions} />;
-      case 'doughnut':
-        return <Doughnut data={data} options={chartOptions} />;
-      case 'bar':
-      default:
-        return <Bar data={data} options={chartOptions} />;
-    }
-  };
-
-  return (
-    <div
-      className={`${styles.chartContainer} ${darkMode ? styles.darkMode : ''}`}
-      style={{ height: `${height}px` }}
-    >
-      {renderChart()}
-    </div>
-  );
-};
-
-export default ReportChart;
diff --git a/src/components/EductionPortal/EducatorReports/ReportChart.module.css b/src/components/EductionPortal/EducatorReports/ReportChart.module.css
deleted file mode 100644
index 608095133c..0000000000
--- a/src/components/EductionPortal/EducatorReports/ReportChart.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.chartContainer {
-  width: 100%;
-  padding: 15px;
-  background: var(--bg-color, #fff);
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-}
-
-.chartContainer.darkMode {
-  background: #1e293b;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
-}
-
-.chartContainer canvas {
-  max-height: 100% !important;
-}
diff --git a/src/components/EductionPortal/EducatorReports/ReportsView.jsx b/src/components/EductionPortal/EducatorReports/ReportsView.jsx
deleted file mode 100644
index e065c10fe3..0000000000
--- a/src/components/EductionPortal/EducatorReports/ReportsView.jsx
+++ /dev/null
@@ -1,446 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Container,
-  Row,
-  Col,
-  Card,
-  CardBody,
-  Table,
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Nav,
-  NavItem,
-  NavLink,
-} from 'reactstrap';
-import { useSelector } from 'react-redux';
-import styles from './ReportsView.module.css';
-import ReportChart from './ReportChart';
-import IndividualReportView from './components/IndividualReportView/IndividualReportView';
-import ClassPerformanceView from './components/ClassPerformanceView/ClassPerformanceView';
-import { getStatusClass, getStatusIcon, getStatusText } from './utils/statusUtils';
-import {
-  strengthsGapsData,
-  performanceTrendData,
-  teachingStrategiesData,
-  lifeStrategiesData,
-  subjects,
-  students,
-  classes,
-} from './mockdata';
-
-const ReportsView = () => {
-  const [subjectFilter, setSubjectFilter] = useState('All Subjects');
-  const [subjectDropdownOpen, setSubjectDropdownOpen] = useState(false);
-  const [performanceDropdownOpen, setPerformanceDropdownOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState('overview');
-  const [filters, setFilters] = useState({
-    studentId: null,
-    classId: null,
-    subject: 'All Subjects',
-    dateRange: null,
-  });
-
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  // Filter functions
-  const getFilteredStrengthsGapsData = () => {
-    if (subjectFilter === 'All Subjects') {
-      return strengthsGapsData;
-    }
-    return strengthsGapsData.filter(item => item.subject === subjectFilter);
-  };
-
-  const getFilteredPerformanceTrendData = () => {
-    if (subjectFilter === 'All Subjects') {
-      return performanceTrendData;
-    }
-
-    // Filter datasets to show only the selected subject
-    const filteredDatasets = performanceTrendData.datasets.filter(
-      dataset => dataset.label === subjectFilter,
-    );
-
-    return {
-      ...performanceTrendData,
-      datasets: filteredDatasets,
-    };
-  };
-
-  const handleSubjectFilterChange = subjectName => {
-    setSubjectFilter(subjectName);
-    setSubjectDropdownOpen(false);
-  };
-
-  // Status helpers are shared via utils/statusUtils.js
-
-  return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      <div className={`${styles.dashboardContainer}`}>
-        {/* Header */}
-        <div className={`${styles.dashboardHeader}`}>
-          <h1 className={`${styles.dashboardTitle}`}>Analytics: Actionable Visualizations</h1>
-        </div>
-
-        {/* Tab Navigation */}
-        <div className={`${styles.tabNavigation}`}>
-          <Nav tabs className={`${styles.navTabs}`}>
-            <NavItem>
-              <NavLink
-                className={`${activeTab === 'overview' ? styles.activeTab : ''}`}
-                onClick={() => setActiveTab('overview')}
-              >
-                Overview
-              </NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink
-                className={`${activeTab === 'individual' ? styles.activeTab : ''}`}
-                onClick={() => setActiveTab('individual')}
-              >
-                Individual Student Report
-              </NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink
-                className={`${activeTab === 'class' ? styles.activeTab : ''}`}
-                onClick={() => setActiveTab('class')}
-              >
-                Class Performance
-              </NavLink>
-            </NavItem>
-          </Nav>
-        </div>
-
-        {/* Filter Bar for Individual/Class Views */}
-        {(activeTab === 'individual' || activeTab === 'class') && (
-          <div className={`${styles.filterBar}`}>
-            <Row>
-              <Col md={6}>
-                <label htmlFor="studentClassSelect">
-                  {activeTab === 'individual' ? 'Select Student:' : 'Select Class:'}
-                </label>
-                <select
-                  id="studentClassSelect"
-                  className={styles.formControl}
-                  value={
-                    activeTab === 'individual' ? filters.studentId || '' : filters.classId || ''
-                  }
-                  onChange={e => {
-                    if (activeTab === 'individual') {
-                      setFilters({ ...filters, studentId: e.target.value || null });
-                    } else {
-                      setFilters({ ...filters, classId: e.target.value || null });
-                    }
-                  }}
-                >
-                  <option value="">
-                    {activeTab === 'individual' ? '-- Select a Student --' : '-- Select a Class --'}
-                  </option>
-                  {activeTab === 'individual'
-                    ? students.map(student => (
-                        <option key={student.id} value={student.id}>
-                          {student.name}
-                        </option>
-                      ))
-                    : classes.map(cls => (
-                        <option key={cls.id} value={cls.id}>
-                          {cls.name}
-                        </option>
-                      ))}
-                </select>
-              </Col>
-            </Row>
-          </div>
-        )}
-
-        {/* Render Active Tab Content */}
-        {activeTab === 'overview' && (
-          <Container fluid>
-            <Row className={`${styles.sectionRow}`}>
-              <Col>
-                <Card className={`${styles.reportCard}`}>
-                  <CardBody className={styles.cardBody}>
-                    <div className={`${styles.cardHeader}`}>
-                      <h4 className={`${styles.cardTitle}`}>Strengths & Gaps by Subject</h4>
-                      <Dropdown
-                        isOpen={subjectDropdownOpen}
-                        toggle={() => setSubjectDropdownOpen(!subjectDropdownOpen)}
-                        className={`${styles.subjectDropdown}`}
-                      >
-                        <DropdownToggle caret className={`${styles.dropdownToggle}`}>
-                          {subjectFilter}
-                        </DropdownToggle>
-                        <DropdownMenu className={`${styles.dropdownMenu}`}>
-                          {subjects.map(subject => (
-                            <DropdownItem
-                              key={subject.name}
-                              onClick={() => handleSubjectFilterChange(subject.name)}
-                              className={`${styles.dropdownItem} ${styles.coloredDropdownItem}`}
-                              style={{ color: subject.color }}
-                            >
-                              {subject.name}
-                            </DropdownItem>
-                          ))}
-                        </DropdownMenu>
-                      </Dropdown>
-                    </div>
-
-                    <div className={`${styles.tableContainer}`}>
-                      <Table responsive className={`${styles.strengthsTable}`}>
-                        <thead>
-                          <tr>
-                            <th>Subject</th>
-                            <th>Performance</th>
-                            <th>Status</th>
-                            <th>Visual Indicator</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {getFilteredStrengthsGapsData().map(item => (
-                            <tr key={item.subject}>
-                              <td className={`${styles.subjectCell}`}>{item.subject}</td>
-                              <td className={`${styles.performanceCell}`}>
-                                <div className={`${styles.performanceBar}`}>
-                                  <div
-                                    className={`${styles.performanceFill}`}
-                                    style={{
-                                      width: `${item.performance}%`,
-                                      backgroundColor: item.color,
-                                    }}
-                                  />
-                                  <span className={`${styles.performanceText}`}>
-                                    {item.performance}%
-                                  </span>
-                                </div>
-                              </td>
-                              <td>
-                                <span
-                                  className={`${styles.statusBadge} ${
-                                    styles[getStatusClass(item.performance)]
-                                  }`}
-                                >
-                                  {getStatusText(item.performance)}
-                                </span>
-                              </td>
-                              <td className={`${styles.visualCell}`}>
-                                <span className={`${styles.visualIndicator}`}>
-                                  {getStatusIcon(item.performance)}
-                                </span>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </Table>
-                    </div>
-
-                    {/* Actionable Insight 1 */}
-                    <div
-                      role="alert"
-                      className={`${styles.insightAlert} ${styles.insightAlertInfo}`}
-                    >
-                      <div className={`${styles.insightContent}`}>
-                        <strong>Actionable Insight:</strong> You consistently excel in Mathematics
-                        and English. Consider focusing extra effort on Arts/Trades and Values.
-                      </div>
-                      <div className={`${styles.insightActions}`}>
-                        <button className={`${styles.actionButton}`}>Set Target Goals</button>
-                        <button className={`${styles.actionButton}`}>Study Schedule Tips</button>
-                      </div>
-                    </div>
-                  </CardBody>
-                </Card>
-              </Col>
-            </Row>
-
-            {/* Performance Trend by Subject Over Time */}
-            <Row className={`${styles.sectionRow}`}>
-              <Col>
-                <Card className={`${styles.reportCard}`}>
-                  <CardBody className={styles.cardBody}>
-                    <div className={`${styles.cardHeader}`}>
-                      <h4 className={`${styles.cardTitle}`}>
-                        Performance Trend by Subject Over Time
-                      </h4>
-                      <Dropdown
-                        isOpen={performanceDropdownOpen}
-                        toggle={() => setPerformanceDropdownOpen(!performanceDropdownOpen)}
-                        className={`${styles.subjectDropdown}`}
-                      >
-                        <DropdownToggle caret className={`${styles.dropdownToggle}`}>
-                          {subjectFilter}
-                        </DropdownToggle>
-                        <DropdownMenu className={`${styles.dropdownMenu}`}>
-                          {subjects.map(subject => (
-                            <DropdownItem
-                              key={subject.name}
-                              onClick={() => handleSubjectFilterChange(subject.name)}
-                              className={`${styles.dropdownItem} ${styles.coloredDropdownItem}`}
-                              style={{ color: subject.color }}
-                            >
-                              {subject.name}
-                            </DropdownItem>
-                          ))}
-                        </DropdownMenu>
-                      </Dropdown>
-                    </div>
-
-                    <div className={`${styles.chartContainer}`}>
-                      <ReportChart
-                        type="line"
-                        data={getFilteredPerformanceTrendData()}
-                        height={400}
-                        showLegend
-                      />
-                    </div>
-
-                    <div
-                      role="alert"
-                      className={`${styles.insightAlert} ${styles.insightAlertWarning}`}
-                    >
-                      <div className={`${styles.insightContent}`}>
-                        <strong>Actionable Insight:</strong> Your performance in Mathematics shows a
-                        consistent upward trend. Keep up the great work! Notice a dip in Art
-                        activities during that period.
-                      </div>
-                      <div className={`${styles.insightActions}`}>
-                        <button className={`${styles.actionButton}`}>
-                          Review Notes lesson plans
-                        </button>
-                        <button className={`${styles.actionButton}`}>Get one goal for Art</button>
-                      </div>
-                    </div>
-                  </CardBody>
-                </Card>
-              </Col>
-            </Row>
-
-            {/* Teaching Strategies */}
-            <Row className={`${styles.sectionRow}`}>
-              <Col>
-                <Card className={`${styles.reportCard}`}>
-                  <CardBody className={styles.cardBody}>
-                    <h4 className={`${styles.cardTitle}`}>Effectiveness of Teaching Strategies</h4>
-
-                    <div className={`${styles.chartContainer}`}>
-                      <ReportChart
-                        type="bar"
-                        data={teachingStrategiesData}
-                        height={350}
-                        showLegend={false}
-                        horizontal
-                      />
-                    </div>
-
-                    <div className={`${styles.legend}`}>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.highlyEffective}`} />
-                        <span>Highly Effective (85%)</span>
-                      </div>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.effective}`} />
-                        <span>Effective (70-84%)</span>
-                      </div>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.needsAdaptation}`} />
-                        <span>Needs Adaptation (&lt;70%)</span>
-                      </div>
-                    </div>
-
-                    <div
-                      role="alert"
-                      className={`${styles.insightAlert} ${styles.insightAlertSuccess}`}
-                    >
-                      <div className={`${styles.insightContent}`}>
-                        <strong>Actionable Insight:</strong> You found &apos;Game Genius&apos; and
-                        &apos;Power Play&apos; particularly engaging. These strategies seem to align
-                        with your learning style. Strategies like &apos;Curious Dropout&apos; might
-                        require a different approach for you.
-                      </div>
-                      <div className={`${styles.insightActions}`}>
-                        <button className={`${styles.actionButton}`}>
-                          Ask teacher for more Game Genius lessons
-                        </button>
-                        <button className={`${styles.actionButton}`}>
-                          Explore Power Play activities
-                        </button>
-                      </div>
-                    </div>
-                  </CardBody>
-                </Card>
-              </Col>
-            </Row>
-
-            {/* Life Strategies */}
-            <Row className={`${styles.sectionRow}`}>
-              <Col>
-                <Card className={`${styles.reportCard}`}>
-                  <CardBody className={styles.cardBody}>
-                    <h4 className={`${styles.cardTitle}`}>Impact of Life Strategies</h4>
-
-                    <div className={`${styles.chartContainer}`}>
-                      <ReportChart
-                        type="bar"
-                        data={lifeStrategiesData}
-                        height={300}
-                        showLegend={false}
-                        horizontal
-                      />
-                    </div>
-
-                    <div className={`${styles.legend}`}>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.veryGood}`} />
-                        <span>Very Good (85%+)</span>
-                      </div>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.goodImpact}`} />
-                        <span>Good Impact (70-84%)</span>
-                      </div>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.moderateImpact}`} />
-                        <span>Moderate Impact (50-69%)</span>
-                      </div>
-                      <div className={`${styles.legendItem}`}>
-                        <span className={`${styles.legendColor} ${styles.lowImpact}`} />
-                        <span>Low Impact (&lt;50%)</span>
-                      </div>
-                    </div>
-
-                    <div
-                      role="alert"
-                      className={`${styles.insightAlert} ${styles.insightAlertWarning}`}
-                    >
-                      <div className={`${styles.insightContent}`}>
-                        <strong>Actionable Insight:</strong> Consistently applying &apos;Everything
-                        you do should increase choices&apos; seems to correlate with positive
-                        learning experiences for you. Consider focusing more on &apos;Practice
-                        improving your emotional intelligence&apos; to enhance your overall
-                        well-being and learning.
-                      </div>
-                      <div className={`${styles.insightActions}`}>
-                        <button className={`${styles.actionButton}`}>
-                          Learn more about choice-making strategies
-                        </button>
-                        <button className={`${styles.actionButton}`}>
-                          Tips for emotional intelligence
-                        </button>
-                      </div>
-                    </div>
-                  </CardBody>
-                </Card>
-              </Col>
-            </Row>
-          </Container>
-        )}
-
-        {activeTab === 'individual' && <IndividualReportView filters={filters} />}
-
-        {activeTab === 'class' && <ClassPerformanceView filters={filters} />}
-      </div>
-    </div>
-  );
-};
-
-export default ReportsView;
diff --git a/src/components/EductionPortal/EducatorReports/ReportsView.module.css b/src/components/EductionPortal/EducatorReports/ReportsView.module.css
deleted file mode 100644
index ae5201ba7e..0000000000
--- a/src/components/EductionPortal/EducatorReports/ReportsView.module.css
+++ /dev/null
@@ -1,924 +0,0 @@
-.dashboardContainer {
-  padding: 5px 20px 20px;
-  background-color: #fff;
-  min-height: 100vh;
-}
-
-.darkMode .dashboardContainer {
-  background-color: #0f172a;
-}
-
-.dashboardHeader {
-  margin-bottom: 20px;
-  padding: 10px 0;
-  border-bottom: 2px solid #e0e0e0;
-}
-
-.darkMode .dashboardHeader {
-  border-bottom-color: rgb(255 255 255 / 12%);
-}
-
-.dashboardTitle {
-  color: var(--primary-color, #2c3e50);
-  font-size: 28px;
-  font-weight: 600;
-  margin-bottom: 0;
-}
-
-.darkMode .dashboardTitle {
-  color: var(--primary-color-dark, #fff);
-}
-
-.dashboardSubtitle {
-  color: var(--text-secondary, #666);
-  font-size: 16px;
-  margin: 0;
-}
-
-.darkMode .dashboardSubtitle {
-  color: var(--text-secondary-dark, #ccc);
-}
-
-.sectionRow {
-  margin-bottom: 30px;
-  padding: 0;
-}
-
-.reportCard {
-  border: none;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
-  transition: all 0.3s ease;
-  background: white;
-}
-
-.cardBody {
-  background-color: #f8fafc;
-}
-
-.darkMode .cardBody {
-  background-color: #1e293b;
-}
-
-.reportCard:hover {
-  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
-}
-
-.darkMode .reportCard {
-  background: #1e293b;
-  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
-}
-
-/* Card Headers */
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.cardTitle {
-  color: var(--primary-color, #1d283a);
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.darkMode .cardTitle {
-  color: var(--primary-color-dark, #fff);
-}
-
-.subjectDropdown {
-  min-width: 140px;
-}
-
-.dropdownToggle {
-  background: var(--primary-color, #0069d9);
-  border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
-  font-size: 14px;
-}
-
-.darkMode .dropdownToggle {
-  background: #4f46e5;
-  color: #fff;
-}
-
-.darkMode .dropdownToggle::after {
-  border-top-color: #fff;
-}
-
-.darkMode .dropdownToggle:focus,
-.darkMode .dropdownToggle:active,
-.darkMode .dropdownToggle span {
-  background: #4f46e5;
-  color: #fff;
-  box-shadow: none;
-}
-
-.dropdownMenu {
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  border: none;
-}
-
-.dropdownItem {
-  padding: 10px 16px;
-  font-size: 14px;
-  transition: background-color 0.2s ease;
-}
-
-.dropdownItem:hover {
-  background-color: var(--hover-color, #f8f9fa);
-}
-
-.darkMode .dropdownMenu {
-  background-color: #1e293b;
-  box-shadow: 0 10px 28px rgb(0 0 0 / 55%);
-  border: 1px solid #334155;
-}
-
-.darkMode .dropdownItem {
-  background-color: #1e293b;
-}
-
-.darkMode .dropdownItem:hover {
-  background-color: rgb(255 255 255 / 8%);
-}
-
-.coloredDropdownItem {
-  font-weight: 500;
-}
-
-.coloredDropdownItem:hover {
-  background-color: rgb(0 0 0 / 5%);
-  opacity: 0.8;
-}
-
-.strengthsGapsSection {
-  background: white;
-  border-radius: 12px;
-  padding: 25px;
-  margin-bottom: 30px;
-  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
-}
-
-.darkMode .strengthsGapsSection {
-  background: #1e293b;
-  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
-}
-
-.strengthsTable {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.strengthsTable th {
-  background-color: #f9fafb;
-  color: #374151;
-  font-weight: 600;
-  border: none;
-  padding: 1rem 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 0.75rem;
-}
-
-.tableHeader {
-  background: linear-gradient(135deg, #4338ca 0%, #6b21a8 100%);
-  color: white;
-}
-
-.darkMode .tableHeader {
-  background: linear-gradient(135deg, #4f66d6 0%, #5f3c86 100%);
-}
-
-.tableHeader th {
-  padding: 15px 20px;
-  font-weight: 600;
-  text-align: left;
-  border: none;
-  font-size: 14px;
-}
-
-.tableHeader th:first-child {
-  border-radius: 8px 0 0;
-}
-
-.tableHeader th:last-child {
-  border-radius: 0 8px 0 0;
-}
-
-.darkMode .strengthsTable th {
-  background-color: #374151;
-  color: #d1d5db;
-}
-
-.strengthsTable tbody tr {
-  border-bottom: 1px solid #e0e0e0;
-  transition: background-color 0.2s ease;
-}
-
-.strengthsTable tbody tr:hover {
-  background-color: #f8f9fa;
-}
-
-.darkMode .strengthsTable tbody tr {
-  border-bottom-color: #334155;
-}
-
-.strengthsTable td {
-  padding: 15px 20px;
-  vertical-align: middle;
-  border: none;
-  font-size: 14px;
-  color: #333;
-}
-
-.darkMode .strengthsTable td {
-  color: #f1f5f9;
-}
-
-.subjectCell {
-  font-weight: 500;
-  color: #1d283a;
-}
-
-.darkMode .subjectCell {
-  color: #f1f5f9;
-}
-
-.performanceCell {
-  min-width: 160px;
-}
-
-.visualCell {
-  text-align: center;
-}
-
-.subjectName {
-  font-weight: 500;
-  color: var(--primary-color, #2c3e50);
-}
-
-.darkMode .subjectName {
-  color: var(--primary-color-dark, #64b5f6);
-}
-
-.progressContainer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.progressBar {
-  flex: 1;
-  height: 8px;
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.darkMode .progressBar {
-  background-color: #334155;
-}
-
-.progressFill {
-  height: 100%;
-  border-radius: 4px;
-  transition: width 0.6s ease;
-}
-
-.progressFill.strength {
-  background: linear-gradient(90deg, #4caf50, #8bc34a);
-}
-
-.progressFill.moderate {
-  background: linear-gradient(90deg, #ff9800, #ffc107);
-}
-
-.progressFill.gap {
-  background: linear-gradient(90deg, #f44336, #e91e63);
-}
-
-.progressText {
-  font-weight: 600;
-  font-size: 13px;
-  min-width: 40px;
-  text-align: right;
-}
-
-.progressText.strength {
-  color: #4caf50;
-}
-
-.progressText.moderate {
-  color: #ff9800;
-}
-
-.progressText.gap {
-  color: #f44336;
-}
-
-.darkMode .progressText {
-  color: rgb(255 255 255 / 92%);
-}
-
-.chartContainer {
-  margin: 20px 0;
-  min-height: 300px;
-}
-
-.legend {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-  margin-top: 20px;
-  flex-wrap: wrap;
-}
-
-.legendItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--text-primary, #333);
-}
-
-.darkMode .legendItem {
-  color: var(--text-primary-dark, #fff);
-}
-
-.legendColor {
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.legendColor.highlyEffective {
-  background: #4caf50;
-}
-
-.legendColor.effective {
-  background: #8bc34a;
-}
-
-.legendColor.needsAdaptation {
-  background: #ff9800;
-}
-
-.legendColor.veryGood {
-  background: #2196f3;
-}
-
-.legendColor.goodImpact {
-  background: #4caf50;
-}
-
-.legendColor.moderateImpact {
-  background: #ff9800;
-}
-
-.legendColor.lowImpact {
-  background: #f44336;
-}
-
-.insightAlert {
-  margin-top: 20px;
-  border: none;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.insightAlertInfo {
-  background-color: #d1ecf1;
-  border: 1px solid #bee5eb;
-  color: #0c5460;
-}
-
-.insightAlertSuccess {
-  background-color: #d4edda;
-  border: 1px solid #c3e6cb;
-  color: #155724;
-}
-
-.insightAlertWarning {
-  background-color: #fff3cd;
-  border: 1px solid #ffeeba;
-  color: #856404;
-}
-
-.insightAlertDanger {
-  background-color: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
-}
-
-.insightAlertPrimary {
-  background-color: #cce5ff;
-  border: 1px solid #b8daff;
-  color: #004085;
-}
-
-.actionButton {
-  background: var(--primary-color, #0069d9);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.actionButton:hover {
-  background: var(--primary-hover, #0056b3);
-  transform: translateY(-1px);
-}
-
-.darkMode .actionButton {
-  background: var(--primary-color-dark, #2563eb);
-}
-
-.insightAlertInfo .actionButton {
-  background: #0ea5e9;
-}
-
-.insightAlertSuccess .actionButton {
-  background: #22c55e;
-}
-
-.insightAlertWarning .actionButton {
-  background: #b45309;
-  color: #fff;
-}
-
-.insightAlertDanger .actionButton {
-  background: #ef4444;
-}
-
-.insightAlertInfo .actionButton:hover {
-  background: #0284c7;
-}
-
-.insightAlertSuccess .actionButton:hover {
-  background: #16a34a;
-}
-
-.insightAlertWarning .actionButton:hover {
-  background: #9a3412;
-}
-
-.insightAlertDanger .actionButton:hover {
-  background: #dc2626;
-}
-
-.darkMode .insightAlert {
-  color: #e2e8f0;
-  background-color: #1e293b;
-  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
-  border: 1px solid #334155;
-}
-
-.darkMode .insightAlert strong {
-  color: #f1f5f9;
-}
-
-.darkMode .insightAlert.insightAlertInfo {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.darkMode .insightAlert.insightAlertSuccess {
-  background-color: #052e16;
-  border-color: #166534;
-  color: #86efac;
-}
-
-.darkMode .insightAlert.insightAlertWarning {
-  background-color: #451a03;
-  border-color: #92400e;
-  color: #fde68a;
-}
-
-.darkMode .insightAlert.insightAlertDanger {
-  background-color: #450a0a;
-  border-color: #991b1b;
-  color: #fca5a5;
-}
-
-.darkMode .insightAlert.insightAlertPrimary {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.darkMode .insightAlert .actionButton {
-  color: #fff;
-}
-
-.insightContent {
-  margin-bottom: 15px;
-  line-height: 1.6;
-  font-size: 14px;
-}
-
-.insightActions {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.darkMode .insightAlert.insightAlertInfo .actionButton {
-  background: #0284c7;
-}
-
-.darkMode .insightAlert.insightAlertSuccess .actionButton {
-  background: #16a34a;
-}
-
-.darkMode .insightAlert.insightAlertWarning .actionButton {
-  background: #b45309;
-  color: #fff;
-}
-
-.darkMode .insightAlert.insightAlertDanger .actionButton {
-  background: #dc2626;
-}
-
-.darkMode .insightAlert.insightAlertInfo .actionButton:hover {
-  background: #0369a1;
-}
-
-.darkMode .insightAlert.insightAlertSuccess .actionButton:hover {
-  background: #15803d;
-}
-
-.darkMode .insightAlert.insightAlertWarning .actionButton:hover {
-  background: #9a3412;
-}
-
-.darkMode .insightAlert.insightAlertDanger .actionButton:hover {
-  background: #b91c1c;
-}
-
-.statusBadge {
-  display: inline-block;
-  padding: 5px 12px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 600;
-  text-align: center;
-  min-width: 80px;
-  border: 1px solid transparent;
-}
-
-.statusBadge.excellent {
-  background-color: #dcfce7;
-  color: #15803d;
-  border-color: #bbf7d0;
-}
-
-.statusBadge.good {
-  background-color: #fefce8;
-  color: #a16207;
-  border-color: #fef08a;
-}
-
-.statusBadge.needsImprovement {
-  background-color: #fff7ed;
-  color: #c2410c;
-  border-color: #fed7aa;
-}
-
-.statusBadge.critical {
-  background-color: #fee2e2;
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-
-.darkMode .statusBadge.excellent {
-  background-color: #064e3b;
-  color: #6ee7b7 !important;
-  border-color: #065f46;
-}
-
-.darkMode .statusBadge.good {
-  background-color: #78350f;
-  color: #fde68a !important;
-  border-color: #92400e;
-}
-
-.darkMode .statusBadge.needsImprovement {
-  background-color: #7c2d12;
-  color: #fed7aa !important;
-  border-color: #9a3412;
-}
-
-.darkMode .statusBadge.critical {
-  background-color: #7f1d1d;
-  color: #fecaca !important;
-  border-color: #991b1b;
-}
-
-.visualIndicator {
-  font-size: 18px;
-  display: inline-block;
-}
-
-.tableContainer {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Form Control (replaces Bootstrap form-control) */
-.formControl {
-  display: block;
-  width: 100%;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #333;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
-  appearance: none;
-  border-radius: 6px;
-  transition:
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-}
-
-.formControl:focus {
-  border-color: #4f46e5;
-  outline: 0;
-  box-shadow: 0 0 0 3px rgb(79 70 229 / 15%);
-}
-
-.darkMode .formControl {
-  background-color: #334155;
-  border-color: #475569;
-  color: #f1f5f9;
-}
-
-.darkMode .formControl:focus {
-  border-color: #818cf8;
-  box-shadow: 0 0 0 3px rgb(129 140 248 / 15%);
-}
-
-@media (width <= 768px) {
-  .dashboardContainer {
-    padding: 10px;
-    min-height: auto;
-  }
-
-  .dashboardHeader {
-    margin-bottom: 15px;
-    padding: 10px 0;
-  }
-
-  .dashboardTitle {
-    font-size: 20px;
-  }
-
-  .sectionRow {
-    margin-bottom: 20px;
-  }
-
-  .cardHeader {
-    flex-direction: column;
-    gap: 15px;
-    align-items: flex-start;
-  }
-
-  .legend {
-    justify-content: flex-start;
-    gap: 16px;
-  }
-
-  .insightActions {
-    flex-direction: column;
-  }
-
-  .actionButton {
-    width: 100%;
-    text-align: center;
-  }
-
-  .tableCell {
-    padding: 12px 8px;
-    font-size: 12px;
-  }
-
-  .tableHeader th {
-    padding: 12px 8px;
-    font-size: 12px;
-  }
-
-  .strengthsTable {
-    font-size: 12px;
-  }
-
-  .strengthsTable th,
-  .strengthsTable td {
-    min-width: 80px;
-    white-space: nowrap;
-  }
-
-  .statusBadge {
-    display: inline-block;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 10px;
-    font-weight: 600;
-    text-align: center;
-    min-width: 60px;
-  }
-
-  .statusBadge.excellent {
-    background-color: #e8f5e8;
-    color: #2e7d32;
-  }
-
-  .statusBadge.good {
-    background-color: #fff3e0;
-    color: #bf360c;
-  }
-
-  .statusBadge.needsImprovement {
-    background-color: #ffebee;
-    color: #b71c1c;
-  }
-
-  .statusBadge.critical {
-    background-color: #fce4ec;
-    color: #c2185b;
-  }
-
-  .progressContainer {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .progressText {
-    text-align: left;
-  }
-}
-
-@media (width <= 576px) {
-  .dashboardTitle {
-    font-size: 24px;
-  }
-
-  .cardTitle {
-    font-size: 18px;
-  }
-
-  .tableCell {
-    padding: 10px 12px;
-    font-size: 12px;
-  }
-
-  .tableHeader th {
-    padding: 12px;
-    font-size: 13px;
-  }
-}
-
-.darkMode .reportCard:hover {
-  box-shadow: 0 6px 12px rgb(0 0 0 / 40%);
-  transform: translateY(-2px);
-}
-
-.darkMode .strengthsTable tbody tr:hover {
-  background-color: #334155;
-}
-
-.darkMode .coloredDropdownItem:hover {
-  background-color: rgb(255 255 255 / 8%);
-  opacity: 1;
-}
-
-.tabNavigation {
-  margin-bottom: 20px;
-}
-
-.navTabs {
-  border-bottom: 2px solid #e0e0e0;
-  display: flex;
-  gap: 4px;
-}
-
-.darkMode .navTabs {
-  border-bottom-color: #334155;
-}
-
-.navTabs :global(.nav-link) {
-  border: none;
-  border-bottom: 3px solid transparent;
-  color: #475569;
-  font-weight: 600;
-  font-size: 14px;
-  padding: 12px 20px;
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-  background-color: #f1f5f9;
-  border-radius: 8px 8px 0 0;
-  margin-bottom: -2px;
-}
-
-.darkMode .navTabs :global(.nav-link) {
-  color: #94a3b8;
-  background-color: #1e293b;
-}
-
-.navTabs :global(.nav-link):hover {
-  color: #1e293b;
-  background-color: #e2e8f0;
-  border-bottom-color: #94a3b8;
-}
-
-.darkMode .navTabs :global(.nav-link):hover {
-  color: #f1f5f9;
-  background-color: #334155;
-  border-bottom-color: #64748b;
-}
-
-.activeTab {
-  color: #4f46e5 !important;
-  border-bottom-color: #4f46e5 !important;
-  background-color: #fff !important;
-  box-shadow: 0 -2px 8px rgb(79 70 229 / 15%);
-}
-
-.darkMode .activeTab {
-  color: #818cf8 !important;
-  border-bottom-color: #818cf8 !important;
-  background-color: #0f172a !important;
-  box-shadow: 0 -2px 8px rgb(129 140 248 / 20%);
-}
-
-.filterBar {
-  background-color: #f8f9fa;
-  padding: 15px 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.filterBar label {
-  font-weight: 500;
-  margin-bottom: 5px;
-  display: block;
-  color: #333;
-}
-
-.darkMode .filterBar label {
-  color: #ccc;
-}
-
-.filterBar select {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 8px 12px;
-  padding-right: 35px;
-  appearance: none;
-  background: #fff
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
-    no-repeat right 12px center;
-}
-
-.filterBar select:focus {
-  outline: none;
-  border-color: #4f46e5;
-}
-
-.filterBar select option {
-  background-color: #fff;
-  color: #333;
-}
-
-.darkMode .filterBar {
-  background-color: #1e293b;
-}
-
-.darkMode .filterBar select {
-  background-color: #334155;
-  border-color: #475569;
-  color: #f1f5f9;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-}
-
-.darkMode .filterBar select option {
-  background-color: #334155;
-  color: #f1f5f9;
-}
diff --git a/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.jsx b/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.jsx
deleted file mode 100644
index 8b52cbafd3..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.jsx
+++ /dev/null
@@ -1,500 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Row, Col, Card, CardBody, Table } from 'reactstrap';
-import { useSelector } from 'react-redux';
-import styles from './ClassPerformanceView.module.css';
-import MetricCard from '../MetricCard/MetricCard';
-import ReportChart from '../ReportChart/ReportChart';
-import { getStatusClass, getStatusIcon, getStatusText } from '../../utils/statusUtils';
-
-const getClassMockData = classId => {
-  const classDataMap = {
-    '1': {
-      class: { id: '1', name: 'Grade 5A - Mathematics', studentCount: 25, teacher: 'Ms. Johnson' },
-      metrics: { classAverage: 78, completionRate: 85, engagementRate: 82, activeLearners: 23 },
-      changes: { classAverage: 3.5, completionRate: 7.2, engagementRate: -1.8, activeLearners: 2 },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 69, color: '#8b5cf6' },
-        { subject: 'Mathematics', performance: 83, color: '#4f46e5' },
-        { subject: 'English', performance: 74, color: '#10b981' },
-        { subject: 'Science', performance: 68, color: '#f59e0b' },
-        { subject: 'Health', performance: 62, color: '#ef4444' },
-        { subject: 'Social Studies', performance: 71, color: '#06b6d4' },
-        { subject: 'Tech & Innovation', performance: 79, color: '#06b6d4' },
-        { subject: 'Values', performance: 87, color: '#84cc16' },
-      ],
-      teachingStrategies: {
-        labels: [
-          'Game Lesson',
-          'Power Play',
-          'Book Smart Exploration',
-          'Core Creative Centered Composition',
-          'Exercised Smart Generation',
-          'Curious Dropout',
-        ],
-        datasets: [
-          {
-            label: 'Effectiveness',
-            data: [92, 85, 85, 67, 78, 65],
-            backgroundColor: ['#10b981', '#10b981', '#10b981', '#3b82f6', '#3b82f6', '#ef4444'],
-          },
-        ],
-      },
-      lifeStrategies: {
-        labels: [
-          'Everything you do Should Increase Choices',
-          'Ask "what would Jesus do?"',
-          'Choose to trust with observation',
-          'Practice nurturing your emotional intelligence',
-        ],
-        datasets: [
-          {
-            label: 'Impact',
-            data: [91, 89, 82, 78],
-            backgroundColor: ['#10b981', '#10b981', '#fbbf24', '#fbbf24'],
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'success',
-          title: 'Game Lesson Strategy',
-          message:
-            'The Game Lesson Strategy has been effective. Students respond well to interactive gameplay.',
-          action: 'Analyze Micro Lesson Strategies',
-        },
-        {
-          type: 'warning',
-          title: 'Conversation Practice',
-          message:
-            'Conversing practice showed room for improvement. Consider focusing more on practical applications.',
-          action: 'Learn about application strategies',
-        },
-      ],
-    },
-    '2': {
-      class: { id: '2', name: 'Grade 6B - Science', studentCount: 28, teacher: 'Mr. Smith' },
-      metrics: { classAverage: 85, completionRate: 92, engagementRate: 88, activeLearners: 26 },
-      changes: { classAverage: 5.2, completionRate: 8.5, engagementRate: 3.1, activeLearners: 4 },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 77, color: '#8b5cf6' },
-        { subject: 'Science', performance: 89, color: '#f59e0b' },
-        { subject: 'Mathematics', performance: 82, color: '#4f46e5' },
-        { subject: 'English', performance: 76, color: '#10b981' },
-        { subject: 'Tech & Innovation', performance: 85, color: '#06b6d4' },
-        { subject: 'Social Studies', performance: 71, color: '#8b5cf6' },
-        { subject: 'Health', performance: 67, color: '#ef4444' },
-        { subject: 'Values', performance: 84, color: '#84cc16' },
-      ],
-      teachingStrategies: {
-        labels: [
-          'Power Play',
-          'Experiment Lab',
-          'Nature Walk Discovery',
-          'Tech Exploration',
-          'Group Discussion',
-          'Video Analysis',
-        ],
-        datasets: [
-          {
-            label: 'Effectiveness',
-            data: [95, 90, 88, 82, 76, 70],
-            backgroundColor: ['#10b981', '#10b981', '#10b981', '#10b981', '#3b82f6', '#3b82f6'],
-          },
-        ],
-      },
-      lifeStrategies: {
-        labels: [
-          'Everything you do Should Increase Choices',
-          'Ask "what would Jesus do?"',
-          'Practice observation skills',
-          'Collaborative learning',
-        ],
-        datasets: [
-          {
-            label: 'Impact',
-            data: [94, 91, 86, 82],
-            backgroundColor: ['#10b981', '#10b981', '#10b981', '#fbbf24'],
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'success',
-          title: 'Excellent Performance',
-          message:
-            'Grade 6B is performing above average. The Experiment Lab strategy is highly effective.',
-          action: 'Review lesson plans',
-        },
-        {
-          type: 'info',
-          title: 'Growing Engagement',
-          message: 'Video Analysis is improving. Continue integrating multimedia into lessons.',
-          action: 'Explore more videos',
-        },
-      ],
-    },
-    '3': {
-      class: { id: '3', name: 'Grade 4C - English', studentCount: 22, teacher: 'Mrs. Davis' },
-      metrics: { classAverage: 72, completionRate: 78, engagementRate: 68, activeLearners: 18 },
-      changes: {
-        classAverage: -2.1,
-        completionRate: 1.5,
-        engagementRate: -5.3,
-        activeLearners: -1,
-      },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 60, color: '#8b5cf6' },
-        { subject: 'English', performance: 73, color: '#10b981' },
-        { subject: 'Mathematics', performance: 66, color: '#4f46e5' },
-        { subject: 'Science', performance: 61, color: '#f59e0b' },
-        { subject: 'Social Studies', performance: 58, color: '#8b5cf6' },
-        { subject: 'Health', performance: 54, color: '#ef4444' },
-        { subject: 'Tech & Innovation', performance: 64, color: '#06b6d4' },
-        { subject: 'Values', performance: 77, color: '#84cc16' },
-      ],
-      teachingStrategies: {
-        labels: [
-          'Story Time',
-          'Reading Circle',
-          'Creative Writing',
-          'Peer Review',
-          'Grammar Games',
-          'Silent Reading',
-        ],
-        datasets: [
-          {
-            label: 'Effectiveness',
-            data: [88, 85, 78, 72, 65, 58],
-            backgroundColor: ['#10b981', '#10b981', '#3b82f6', '#3b82f6', '#f59e0b', '#ef4444'],
-          },
-        ],
-      },
-      lifeStrategies: {
-        labels: [
-          'Everything you do Should Increase Choices',
-          'Ask "what would Jesus do?"',
-          'Practice patience while reading',
-          'Empathy in storytelling',
-        ],
-        datasets: [
-          {
-            label: 'Impact',
-            data: [85, 80, 72, 68],
-            backgroundColor: ['#10b981', '#10b981', '#fbbf24', '#ef4444'],
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'warning',
-          title: 'Below Average Performance',
-          message:
-            'Grade 4C needs additional support in English. Consider differentiated instruction.',
-          action: 'Review student assessments',
-        },
-        {
-          type: 'info',
-          title: 'Strength: Story Time',
-          message:
-            'Story Time is highly effective. Increase frequency of narrative-based activities.',
-          action: 'Plan story sessions',
-        },
-      ],
-    },
-  };
-  return classDataMap[classId] || classDataMap['1'];
-};
-
-const ClassPerformanceView = ({ filters }) => {
-  const [loading, setLoading] = useState(true);
-  const [classData, setClassData] = useState(null);
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  useEffect(() => {
-    const fetchClassData = async () => {
-      setLoading(true);
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      setClassData(getClassMockData(filters.classId));
-      setLoading(false);
-    };
-
-    if (filters.classId) {
-      fetchClassData();
-    } else {
-      setClassData(null);
-      setLoading(false);
-    }
-  }, [filters.classId, filters.subject, filters.dateRange]);
-
-  if (!filters.classId) {
-    return (
-      <div className={`${styles.emptyState} ${darkMode ? styles.darkMode : ''}`}>
-        <div className={styles.emptyContent}>
-          <i className="fa fa-users" aria-hidden="true" />
-          <h3>Select a Class</h3>
-          <p>
-            Choose a class from the filter above to view class performance analytics and insights.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.classPerformance} ${darkMode ? styles.darkMode : ''}`}>
-      {/* Key Metrics Row */}
-      <Row className={styles.metricsRow}>
-        <Col lg={3} md={6} className={styles.metricCol}>
-          <MetricCard
-            title="Class Average"
-            value={loading ? '...' : classData?.metrics.classAverage}
-            unit="%"
-            change={classData?.changes.classAverage}
-            changeType="positive"
-            icon="fa-chart-bar"
-            color="primary"
-            loading={loading}
-          />
-        </Col>
-        <Col lg={3} md={6} className={styles.metricCol}>
-          <MetricCard
-            title="Completion Rate"
-            value={loading ? '...' : classData?.metrics.completionRate}
-            unit="%"
-            change={classData?.changes.completionRate}
-            changeType="positive"
-            icon="fa-check-circle"
-            color="success"
-            loading={loading}
-          />
-        </Col>
-        <Col lg={3} md={6} className={styles.metricCol}>
-          <MetricCard
-            title="Engagement Rate"
-            value={loading ? '...' : classData?.metrics.engagementRate}
-            unit="%"
-            change={classData?.changes.engagementRate}
-            changeType="negative"
-            icon="fa-heart"
-            color="warning"
-            loading={loading}
-          />
-        </Col>
-        <Col lg={3} md={6} className={styles.metricCol}>
-          <MetricCard
-            title="Active Learners"
-            value={loading ? '...' : classData?.metrics.activeLearners}
-            unit=" students"
-            change={classData?.changes.activeLearners}
-            changeType="positive"
-            icon="fa-user-graduate"
-            color="info"
-            loading={loading}
-          />
-        </Col>
-      </Row>
-
-      <Row>
-        {/* Strengths & Gaps by Subject */}
-        <Col lg={12} className={styles.chartCol}>
-          <Card className={`${styles.reportCard} ${darkMode ? styles.darkMode : ''}`}>
-            <CardBody className={styles.cardBody}>
-              <div className={styles.cardHeader}>
-                <h4 className={styles.cardTitle}>Strengths & Gaps by Subject</h4>
-              </div>
-
-              {loading && (
-                <div className={styles.loading}>
-                  <i className="fa fa-spinner fa-spin" aria-hidden="true" />
-                  <p>Loading subject performance...</p>
-                </div>
-              )}
-
-              {!loading && (
-                <div className={styles.tableContainer}>
-                  <Table responsive className={styles.performanceTable}>
-                    <thead>
-                      <tr>
-                        <th>Subject</th>
-                        <th>Performance</th>
-                        <th>Status</th>
-                        <th>Visual Indicator</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {classData?.subjectPerformance?.map(item => (
-                        <tr key={item.subject}>
-                          <td className={styles.subjectCell}>{item.subject}</td>
-                          <td className={styles.performanceCell}>
-                            <div className={styles.performanceBar}>
-                              <div
-                                className={styles.performanceFill}
-                                style={{
-                                  width: `${item.performance}%`,
-                                  backgroundColor: item.color,
-                                }}
-                              />
-                              <span className={styles.performanceText}>{item.performance}%</span>
-                            </div>
-                          </td>
-                          <td>
-                            <span
-                              className={`${styles.statusBadge} ${
-                                styles[getStatusClass(item.performance)]
-                              }`}
-                            >
-                              {getStatusText(item.performance)}
-                            </span>
-                          </td>
-                          <td className={styles.visualCell}>
-                            <span className={styles.visualIndicator}>
-                              {getStatusIcon(item.performance)}
-                            </span>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </Table>
-                </div>
-              )}
-            </CardBody>
-          </Card>
-        </Col>
-
-        {/* Teaching Strategies Effectiveness */}
-        <Col lg={6} className={styles.chartCol}>
-          <Card className={`${styles.reportCard} ${darkMode ? styles.darkMode : ''}`}>
-            <CardBody className={styles.cardBody}>
-              <div className={styles.cardHeader}>
-                <h4 className={styles.cardTitle}>Effectiveness of Teaching Strategies</h4>
-              </div>
-
-              {loading ? (
-                <div className={styles.loading}>
-                  <i className="fa fa-spinner fa-spin" aria-hidden="true" />
-                  <p>Loading strategies data...</p>
-                </div>
-              ) : (
-                <div className={styles.chartContainer}>
-                  <ReportChart
-                    type="bar"
-                    data={classData?.teachingStrategies}
-                    height={350}
-                    showLegend={false}
-                  />
-                  <div className={styles.legend}>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.highlyEffective}`} />
-                      <span>Highly Effective (85%)</span>
-                    </div>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.effective}`} />
-                      <span>Effective (70%)</span>
-                    </div>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.needsImprovement}`} />
-                      <span>Needs Improvement (65%)</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </CardBody>
-          </Card>
-        </Col>
-
-        {/* Impact of Life Strategies */}
-        <Col lg={6} className={styles.chartCol}>
-          <Card className={`${styles.reportCard} ${darkMode ? styles.darkMode : ''}`}>
-            <CardBody className={styles.cardBody}>
-              <div className={styles.cardHeader}>
-                <h4 className={styles.cardTitle}>Impact of Life Strategies</h4>
-              </div>
-
-              {loading ? (
-                <div className={styles.loading}>
-                  <i className="fa fa-spinner fa-spin" aria-hidden="true" />
-                  <p>Loading impact data...</p>
-                </div>
-              ) : (
-                <div className={styles.chartContainer}>
-                  <ReportChart
-                    type="bar"
-                    data={classData?.lifeStrategies}
-                    height={350}
-                    showLegend={false}
-                  />
-                  <div className={styles.legend}>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.veryGood}`} />
-                      <span>Very Good (89%)</span>
-                    </div>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.good}`} />
-                      <span>Good Impact (76%)</span>
-                    </div>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.moderate}`} />
-                      <span>Moderate Impact (76%)</span>
-                    </div>
-                    <div className={styles.legendItem}>
-                      <span className={`${styles.legendColor} ${styles.low}`} />
-                      <span>Low Impact (76%)</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </CardBody>
-          </Card>
-        </Col>
-      </Row>
-
-      {/* Actionable Insights */}
-      <Row>
-        <Col>
-          <Card className={`${styles.reportCard} ${darkMode ? styles.darkMode : ''}`}>
-            <CardBody className={styles.cardBody}>
-              <h4 className={styles.cardTitle}>Actionable Insight</h4>
-              <div className={styles.insightsContainer}>
-                {loading ? (
-                  <div className={styles.loading}>
-                    <i className="fa fa-spinner fa-spin" aria-hidden="true" />
-                    <p>Generating insights...</p>
-                  </div>
-                ) : (
-                  classData?.insights.map(insight => (
-                    <div
-                      key={insight.title}
-                      role="alert"
-                      className={`${styles.insightAlert} ${
-                        styles[
-                          `insightAlert${insight.type.charAt(0).toUpperCase() +
-                            insight.type.slice(1)}`
-                        ]
-                      }`}
-                    >
-                      <div className={styles.insightContent}>
-                        <div className={styles.insightHeader}>
-                          <strong>{insight.title}:</strong>
-                        </div>
-                        <div className={styles.insightMessage}>{insight.message}</div>
-                        {insight.action && (
-                          <div className={styles.insightAction}>
-                            <button className={styles.actionButton} type="button">
-                              {insight.action}
-                            </button>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  ))
-                )}
-              </div>
-            </CardBody>
-          </Card>
-        </Col>
-      </Row>
-    </div>
-  );
-};
-
-export default ClassPerformanceView;
diff --git a/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.module.css b/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.module.css
deleted file mode 100644
index 0dcc1c1560..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ClassPerformanceView/ClassPerformanceView.module.css
+++ /dev/null
@@ -1,793 +0,0 @@
-/* ClassPerformanceView.module.css */
-
-.classPerformance {
-  padding: 1.5rem;
-  transition: all 0.3s ease;
-  animation: fade-in 0.5s ease-out;
-}
-
-.classPerformance.darkMode {
-  color: #fff;
-}
-
-/* Empty State */
-.emptyState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 400px;
-  padding: 2rem;
-}
-
-.emptyState.darkMode {
-  color: #fff;
-}
-
-.emptyContent {
-  text-align: center;
-  max-width: 400px;
-}
-
-.emptyContent i {
-  font-size: 4rem;
-  color: #d1d5db;
-  margin-bottom: 1rem;
-}
-
-.loading i {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-}
-
-.loading p {
-  margin: 0;
-  font-weight: 500;
-}
-
-.darkMode .emptyContent i {
-  color: #6b7280;
-}
-
-.emptyContent h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 0.5rem;
-}
-
-.darkMode .emptyContent h3 {
-  color: #f9fafb;
-}
-
-.emptyContent p {
-  color: #6b7280;
-  font-size: 1rem;
-  line-height: 1.6;
-  margin: 0;
-}
-
-.darkMode .emptyContent p {
-  color: #9ca3af;
-}
-
-/* Metrics Row */
-.metricsRow {
-  margin-bottom: 2rem;
-}
-
-.metricCol {
-  margin-bottom: 1rem;
-}
-
-/* Report Cards */
-.reportCard {
-  background-color: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-  margin-bottom: 1.5rem;
-  transition: all 0.3s ease;
-}
-
-/* Reactstrap <CardBody> wrapper */
-
-.darkMode .cardBody {
-  background-color: #0f172a;
-}
-
-.reportCard.darkMode {
-  background-color: #1f2937;
-  border-color: #374151;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-.reportCard:focus-within {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.reportCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-}
-
-.darkMode .reportCard:focus-within {
-  outline-color: #818cf8;
-}
-
-.darkMode .reportCard:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
-}
-
-/* Card Headers */
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.darkMode .cardHeader {
-  border-bottom-color: #374151;
-}
-
-.cardTitle {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #111827;
-  margin: 0;
-}
-
-.darkMode .cardTitle {
-  color: #f9fafb;
-}
-
-/* Chart Styles */
-.chartCol {
-  margin-bottom: 30px;
-}
-
-/* Table Styles (match ReportsView) */
-.tableContainer {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.performanceTable {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.performanceTable th {
-  background-color: #f9fafb;
-  color: #374151;
-  font-weight: 600;
-  border: none;
-  padding: 1rem 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 0.75rem;
-}
-
-.darkMode .performanceTable th {
-  background-color: #374151;
-  color: #d1d5db;
-}
-
-.performanceTable td {
-  padding: 1rem 0.75rem;
-  border-top: 1px solid #e5e7eb;
-  vertical-align: middle;
-}
-
-.darkMode .performanceTable td {
-  border-top-color: #374151;
-  color: #d1d5db;
-}
-
-.performanceTable tbody tr:hover {
-  background-color: #f9fafb;
-}
-
-.darkMode .performanceTable tbody tr:hover {
-  background-color: #374151;
-}
-
-.subjectCell {
-  font-weight: 500;
-  color: #111827;
-}
-
-.darkMode .subjectCell {
-  color: #f9fafb;
-}
-
-.performanceCell {
-  font-size: 0.875rem;
-}
-
-.performanceBar {
-  position: relative;
-  height: 20px;
-  background-color: #e5e7eb;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.darkMode .performanceBar {
-  background-color: rgb(255 255 255 / 12%);
-}
-
-.performanceFill {
-  height: 100%;
-  border-radius: 10px;
-  transition: width 0.6s ease;
-}
-
-.performanceText {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-  font-weight: 600;
-  color: #111827;
-  text-shadow: 0 1px 1px rgb(255 255 255 / 65%);
-}
-
-.darkMode .performanceText {
-  color: #f9fafb;
-  text-shadow: 0 1px 1px rgb(0 0 0 / 60%);
-}
-
-.visualCell {
-  text-align: center;
-}
-
-.chartContainer {
-  position: relative;
-  margin: 20px 0;
-}
-
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: center;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-}
-
-.darkMode .legend {
-  border-top-color: #374151;
-}
-
-.legendItem {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: #374151;
-}
-
-.darkMode .legendItem {
-  color: #d1d5db;
-}
-
-.legendColor {
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  display: inline-block;
-}
-
-.legendColor.highlyEffective {
-  background-color: #10b981;
-}
-
-.legendColor.effective {
-  background-color: #3b82f6;
-}
-
-.legendColor.needsImprovement {
-  background-color: #ef4444;
-}
-
-.legendColor.veryGood {
-  background-color: #10b981;
-}
-
-.legendColor.good {
-  background-color: #10b981;
-}
-
-.legendColor.moderate {
-  background-color: #fbbf24;
-}
-
-.legendColor.low {
-  background-color: #fbbf24;
-}
-
-/* Loading States */
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: #6b7280;
-}
-
-.darkMode .loading {
-  color: #9ca3af;
-}
-
-/* Insights Section */
-.insightsContainer {
-  margin-top: 1rem;
-}
-
-.insightAlert {
-  border: none;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  padding: 0.75rem 1rem;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-}
-
-/* Alert variants — match ReportsView colors exactly */
-.insightAlert.insightAlertInfo {
-  background-color: #d1ecf1;
-  border: 1px solid #bee5eb;
-  color: #0c5460;
-}
-
-.insightAlert.insightAlertSuccess {
-  background-color: #d4edda;
-  border: 1px solid #c3e6cb;
-  color: #155724;
-}
-
-.insightAlert.insightAlertWarning {
-  background-color: #fff3cd;
-  border: 1px solid #ffeeba;
-  color: #856404;
-}
-
-.insightAlert.insightAlertDanger {
-  background-color: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
-}
-
-.insightAlert.insightAlertPrimary {
-  background-color: #cce5ff;
-  border: 1px solid #b8daff;
-  color: #004085;
-}
-
-.darkMode .insightAlert {
-  color: #e2e8f0;
-  background-color: #1e293b;
-  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
-  border: 1px solid #334155;
-}
-
-.darkMode .insightAlert.insightAlertInfo {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.darkMode .insightAlert.insightAlertSuccess {
-  background-color: #052e16;
-  border-color: #166534;
-  color: #86efac;
-}
-
-.darkMode .insightAlert.insightAlertWarning {
-  background-color: #451a03;
-  border-color: #92400e;
-  color: #fde68a;
-}
-
-.darkMode .insightAlert.insightAlertDanger {
-  background-color: #450a0a;
-  border-color: #991b1b;
-  color: #fca5a5;
-}
-
-.darkMode .insightAlert.insightAlertPrimary {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.insightAlert:last-child {
-  margin-bottom: 0;
-}
-
-.insightContent {
-  line-height: 1.6;
-}
-
-.insightHeader {
-  margin-bottom: 0.5rem;
-}
-
-.insightHeader strong {
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.insightMessage {
-  margin-bottom: 1rem;
-  color: #374151;
-}
-
-.darkMode .insightMessage {
-  color: #d1d5db;
-}
-
-.insightAction {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid rgb(0 0 0 / 10%);
-}
-
-.darkMode .insightAction {
-  border-top-color: rgb(255 255 255 / 10%);
-}
-
-.actionButton {
-  background-color: #4f46e5;
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-}
-
-.actionButton:hover {
-  background-color: #3730a3;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgb(79 70 229 / 30%);
-}
-
-.actionButton:active {
-  transform: translateY(0);
-}
-
-.actionButton:focus {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.darkMode .actionButton {
-  background-color: #4338ca;
-}
-
-/* Keep buttons high-contrast on colored alerts */
-.insightAlertInfo .actionButton {
-  background: #0ea5e9;
-}
-
-.insightAlertSuccess .actionButton {
-  background: #22c55e;
-}
-
-.insightAlertWarning .actionButton {
-  background: #b45309;
-  color: #fff;
-}
-
-.insightAlertDanger .actionButton {
-  background: #ef4444;
-}
-
-.insightAlertInfo .actionButton:hover {
-  background: #0284c7;
-}
-
-.insightAlertSuccess .actionButton:hover {
-  background: #16a34a;
-}
-
-.insightAlertWarning .actionButton:hover {
-  background: #9a3412;
-}
-
-.insightAlertDanger .actionButton:hover {
-  background: #dc2626;
-}
-
-.darkMode .actionButton:hover {
-  background-color: #3730a3;
-}
-
-.darkMode .actionButton:focus {
-  outline-color: #818cf8;
-}
-
-.darkMode .insightAlert .actionButton {
-  color: #fff;
-}
-
-.darkMode .insightAlert.insightAlertInfo .actionButton {
-  background: #0284c7;
-}
-
-.darkMode .insightAlert.insightAlertSuccess .actionButton {
-  background: #16a34a;
-}
-
-.darkMode .insightAlert.insightAlertWarning .actionButton {
-  background: #b45309;
-}
-
-.darkMode .insightAlert.insightAlertDanger .actionButton {
-  background: #dc2626;
-}
-
-.darkMode .insightAlert.insightAlertInfo .actionButton:hover {
-  background: #0369a1;
-}
-
-.darkMode .insightAlert.insightAlertSuccess .actionButton:hover {
-  background: #15803d;
-}
-
-.darkMode .insightAlert.insightAlertWarning .actionButton:hover {
-  background: #9a3412;
-}
-
-.darkMode .insightAlert.insightAlertDanger .actionButton:hover {
-  background: #b91c1c;
-}
-
-/* Responsive Design */
-@media (width <= 992px) {
-  .classPerformance {
-    padding: 1rem;
-  }
-
-  .metricsRow {
-    margin-bottom: 1.5rem;
-  }
-
-  .chartCol {
-    margin-bottom: 1.5rem;
-  }
-
-  .legend {
-    gap: 0.75rem;
-  }
-
-  .legendItem {
-    font-size: 0.8rem;
-  }
-}
-
-@media (width <= 768px) {
-  .classPerformance {
-    padding: 0.5rem;
-  }
-
-  .reportCard {
-    margin: 0 -0.5rem 1.5rem;
-  }
-
-  .cardTitle {
-    font-size: 1.125rem;
-  }
-
-  .legend {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .legendItem {
-    justify-content: center;
-  }
-
-  .metricCol {
-    margin-bottom: 1rem;
-  }
-
-  .insightAction {
-    justify-content: center;
-  }
-
-  .actionButton {
-    width: 100%;
-    max-width: 200px;
-  }
-}
-
-@media (width <= 480px) {
-  .emptyContent i {
-    font-size: 3rem;
-  }
-
-  .emptyContent h3 {
-    font-size: 1.25rem;
-  }
-
-  .emptyContent p {
-    font-size: 0.9rem;
-  }
-
-  .cardTitle {
-    font-size: 1rem;
-  }
-
-  .legendColor {
-    width: 10px;
-    height: 10px;
-  }
-
-  .legendItem {
-    font-size: 0.75rem;
-  }
-
-  .actionButton {
-    font-size: 0.8rem;
-    padding: 0.4rem 0.8rem;
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Print Styles */
-@media print {
-  .classPerformance {
-    background: white !important;
-    color: black !important;
-  }
-
-  .reportCard {
-    background: white !important;
-    box-shadow: none;
-    border: 1px solid #ccc;
-    break-inside: avoid;
-    margin-bottom: 1rem;
-  }
-
-  .legend {
-    display: none;
-  }
-
-  .insightAlert {
-    background: transparent !important;
-    border: 1px solid currentcolor;
-  }
-
-  .actionButton {
-    background: transparent !important;
-    color: black !important;
-    border: 1px solid black;
-  }
-}
-
-/* Chart-specific adjustments */
-.chartContainer canvas {
-  max-height: 350px;
-}
-
-/* Strategy effectiveness colors for consistency */
-.strategyBar.highlyEffective {
-  background-color: #10b981;
-}
-
-.strategyBar.effective {
-  background-color: #3b82f6;
-}
-
-.strategyBar.needsImprovement {
-  background-color: #ef4444;
-}
-
-/* Impact colors for life strategies */
-.impactBar.veryGood {
-  background-color: #10b981;
-}
-
-.impactBar.good {
-  background-color: #10b981;
-}
-
-.impactBar.moderate {
-  background-color: #fbbf24;
-}
-
-.impactBar.low {
-  background-color: #fbbf24;
-}
-
-/* Status Badge Styles */
-.statusBadge {
-  display: inline-block;
-  padding: 5px 12px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 600;
-  text-align: center;
-  min-width: 80px;
-  border: 1px solid transparent;
-}
-
-.statusBadge.excellent {
-  background-color: #dcfce7;
-  color: #15803d;
-  border-color: #bbf7d0;
-}
-
-.statusBadge.good {
-  background-color: #fefce8;
-  color: #a16207;
-  border-color: #fef08a;
-}
-
-.statusBadge.needsImprovement,
-.statusBadge.needs-improvement {
-  background-color: #fff7ed;
-  color: #c2410c;
-  border-color: #fed7aa;
-}
-
-.statusBadge.critical {
-  background-color: #fee2e2;
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-
-.darkMode .statusBadge.excellent {
-  background-color: #064e3b;
-  color: #6ee7b7 !important;
-  border-color: #065f46;
-}
-
-.darkMode .statusBadge.good {
-  background-color: #78350f;
-  color: #fde68a !important;
-  border-color: #92400e;
-}
-
-.darkMode .statusBadge.needsImprovement,
-.darkMode .statusBadge.needs-improvement {
-  background-color: #7c2d12;
-  color: #fed7aa !important;
-  border-color: #9a3412;
-}
-
-.darkMode .statusBadge.critical {
-  background-color: #7f1d1d;
-  color: #fecaca !important;
-  border-color: #991b1b;
-}
-
-.visualIndicator {
-  font-size: 18px;
-  display: inline-block;
-}
diff --git a/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.jsx b/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.jsx
deleted file mode 100644
index c30c5138e2..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.jsx
+++ /dev/null
@@ -1,465 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Row, Col, Card, CardBody, Table } from 'reactstrap';
-import { useSelector } from 'react-redux';
-import styles from './IndividualReportView.module.css';
-import MetricCard from '../MetricCard/MetricCard';
-import ReportChart from '../ReportChart/ReportChart';
-import { getStatusClass, getStatusIcon, getStatusText } from '../../utils/statusUtils';
-
-const getStudentMockData = studentId => {
-  const studentDataMap = {
-    1: {
-      student: { id: '1', name: 'Alex Johnson', grade: '5A', avatar: null },
-      metrics: {
-        averageScore: 82,
-        lessonsCompleted: 45,
-        engagementRate: 78,
-        timeSpent: '24h 30min',
-      },
-      changes: { averageScore: 5.2, lessonsCompleted: 12.5, engagementRate: -2.1, timeSpent: 8.3 },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 85 },
-        { subject: 'English', performance: 88 },
-        { subject: 'Health', performance: 65 },
-        { subject: 'Mathematics', performance: 92 },
-        { subject: 'Science', performance: 78 },
-        { subject: 'Social Studies', performance: 71 },
-        { subject: 'Tech & Innovation', performance: 89 },
-        { subject: 'Values', performance: 95 },
-      ],
-      performanceTrend: {
-        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
-        datasets: [
-          {
-            label: 'Math',
-            data: [78, 82, 85, 88],
-            borderColor: '#4f46e5',
-            backgroundColor: '#4f46e520',
-          },
-          {
-            label: 'English',
-            data: [72, 75, 78, 82],
-            borderColor: '#10b981',
-            backgroundColor: '#10b98120',
-          },
-          {
-            label: 'Science',
-            data: [68, 70, 74, 78],
-            borderColor: '#f59e0b',
-            backgroundColor: '#f59e0b20',
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'success',
-          title: 'Strong Performance',
-          message: 'No concerns need to be addressed for this student.',
-        },
-        {
-          type: 'info',
-          title: 'Actionable Insight',
-          message:
-            'Student shows consistent improvement in Mathematics. Consider advancing to more challenging problems.',
-        },
-      ],
-    },
-    2: {
-      student: { id: '2', name: 'Sarah Williams', grade: '5A', avatar: null },
-      metrics: {
-        averageScore: 91,
-        lessonsCompleted: 52,
-        engagementRate: 88,
-        timeSpent: '32h 15min',
-      },
-      changes: { averageScore: 8.5, lessonsCompleted: 15.2, engagementRate: 5.3, timeSpent: 12.1 },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 92 },
-        { subject: 'English', performance: 95 },
-        { subject: 'Health', performance: 78 },
-        { subject: 'Mathematics', performance: 88 },
-        { subject: 'Science', performance: 85 },
-        { subject: 'Social Studies', performance: 82 },
-        { subject: 'Tech & Innovation', performance: 75 },
-        { subject: 'Values', performance: 98 },
-      ],
-      performanceTrend: {
-        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
-        datasets: [
-          {
-            label: 'Math',
-            data: [80, 84, 87, 91],
-            borderColor: '#4f46e5',
-            backgroundColor: '#4f46e520',
-          },
-          {
-            label: 'English',
-            data: [85, 88, 92, 95],
-            borderColor: '#10b981',
-            backgroundColor: '#10b98120',
-          },
-          {
-            label: 'Science',
-            data: [78, 80, 83, 85],
-            borderColor: '#f59e0b',
-            backgroundColor: '#f59e0b20',
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'success',
-          title: 'Top Performer',
-          message: 'Sarah is performing in the top 10% of the class across all subjects.',
-        },
-        {
-          type: 'info',
-          title: 'Recommendation',
-          message: 'Consider advanced placement or enrichment activities in English and Values.',
-        },
-      ],
-    },
-    3: {
-      student: { id: '3', name: 'Michael Brown', grade: '5A', avatar: null },
-      metrics: {
-        averageScore: 68,
-        lessonsCompleted: 32,
-        engagementRate: 62,
-        timeSpent: '18h 45min',
-      },
-      changes: {
-        averageScore: -3.2,
-        lessonsCompleted: -5.1,
-        engagementRate: -8.4,
-        timeSpent: -4.2,
-      },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 72 },
-        { subject: 'English', performance: 65 },
-        { subject: 'Health', performance: 58 },
-        { subject: 'Mathematics', performance: 75 },
-        { subject: 'Science', performance: 70 },
-        { subject: 'Social Studies', performance: 62 },
-        { subject: 'Tech & Innovation', performance: 78 },
-        { subject: 'Values', performance: 68 },
-      ],
-      performanceTrend: {
-        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
-        datasets: [
-          {
-            label: 'Math',
-            data: [78, 76, 75, 72],
-            borderColor: '#4f46e5',
-            backgroundColor: '#4f46e520',
-          },
-          {
-            label: 'English',
-            data: [70, 68, 66, 62],
-            borderColor: '#10b981',
-            backgroundColor: '#10b98120',
-          },
-          {
-            label: 'Science',
-            data: [72, 71, 70, 68],
-            borderColor: '#f59e0b',
-            backgroundColor: '#f59e0b20',
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'warning',
-          title: 'Needs Support',
-          message: 'Michael is struggling in English and Health. Consider additional tutoring.',
-        },
-        {
-          type: 'info',
-          title: 'Strength Area',
-          message:
-            'Tech & Innovation shows promise. Use this as engagement opportunity for other subjects.',
-        },
-      ],
-    },
-    4: {
-      student: { id: '4', name: 'Emily Davis', grade: '5A', avatar: null },
-      metrics: {
-        averageScore: 76,
-        lessonsCompleted: 41,
-        engagementRate: 72,
-        timeSpent: '21h 20min',
-      },
-      changes: { averageScore: 2.1, lessonsCompleted: 8.3, engagementRate: 1.2, timeSpent: 3.5 },
-      subjectPerformance: [
-        { subject: 'Arts/Trades', performance: 80 },
-        { subject: 'English', performance: 78 },
-        { subject: 'Health', performance: 72 },
-        { subject: 'Mathematics', performance: 68 },
-        { subject: 'Science', performance: 82 },
-        { subject: 'Social Studies', performance: 75 },
-        { subject: 'Tech & Innovation', performance: 85 },
-        { subject: 'Values', performance: 80 },
-      ],
-      performanceTrend: {
-        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
-        datasets: [
-          {
-            label: 'Math',
-            data: [65, 66, 67, 68],
-            borderColor: '#4f46e5',
-            backgroundColor: '#4f46e520',
-          },
-          {
-            label: 'English',
-            data: [74, 76, 77, 78],
-            borderColor: '#10b981',
-            backgroundColor: '#10b98120',
-          },
-          {
-            label: 'Science',
-            data: [78, 80, 81, 82],
-            borderColor: '#f59e0b',
-            backgroundColor: '#f59e0b20',
-          },
-        ],
-      },
-      insights: [
-        {
-          type: 'success',
-          title: 'Improving',
-          message: 'Emily shows consistent improvement across most subjects.',
-        },
-        {
-          type: 'info',
-          title: 'Focus Area',
-          message: 'Mathematics could benefit from additional practice. Excel in Science and Tech!',
-        },
-      ],
-    },
-  };
-  return studentDataMap[studentId] || studentDataMap['1'];
-};
-
-const IndividualReportView = ({ filters }) => {
-  const [loading, setLoading] = useState(true);
-  const [studentData, setStudentData] = useState(null);
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  useEffect(() => {
-    const fetchStudentData = async () => {
-      setLoading(true);
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      setStudentData(getStudentMockData(filters.studentId));
-      setLoading(false);
-    };
-
-    if (filters.studentId) {
-      fetchStudentData();
-    } else {
-      setStudentData(null);
-      setLoading(false);
-    }
-  }, [filters.studentId, filters.subject, filters.dateRange]);
-
-  const getStatusBadgeClass = performance => {
-    const status = getStatusClass(performance);
-    const statusMap = {
-      excellent: styles.statusBadgeExcellent,
-      good: styles.statusBadgeGood,
-      needsImprovement: styles.statusBadgeNeedsImprovement,
-      critical: styles.statusBadgeCritical,
-    };
-    return statusMap[status] || '';
-  };
-
-  const formatPerformance = performance => `${Math.round(performance)}%`;
-
-  if (!filters.studentId) {
-    return (
-      <div className={`${styles.emptyState} ${darkMode ? styles.darkMode : ''}`}>
-        <div className={styles.emptyContent}>
-          <i className="fa fa-user-circle" aria-hidden="true" />
-          <h3>Select a Student</h3>
-          <p>Choose a student from the filter above to view their individual performance report.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      <div className={`${styles.individualReport}`}>
-        {/* Key Metrics Row */}
-        <Row className={`${styles.metricsRow}`}>
-          <Col lg={3} md={6} className={styles.metricCol}>
-            <MetricCard
-              title="Average Score"
-              value={loading ? '...' : studentData?.metrics.averageScore}
-              unit="%"
-              change={studentData?.changes.averageScore}
-              changeType="positive"
-              icon="fa-chart-line"
-              color="primary"
-              loading={loading}
-            />
-          </Col>
-          <Col lg={3} md={6} className={styles.metricCol}>
-            <MetricCard
-              title="Lessons Completed"
-              value={loading ? '...' : studentData?.metrics.lessonsCompleted}
-              change={studentData?.changes.lessonsCompleted}
-              changeType="positive"
-              icon="fa-book"
-              color="success"
-              loading={loading}
-            />
-          </Col>
-          <Col lg={3} md={6} className={styles.metricCol}>
-            <MetricCard
-              title="Engagement Rate"
-              value={loading ? '...' : studentData?.metrics.engagementRate}
-              unit="%"
-              change={studentData?.changes.engagementRate}
-              changeType="negative"
-              icon="fa-heart"
-              color="warning"
-              loading={loading}
-            />
-          </Col>
-          <Col lg={3} md={6} className={styles.metricCol}>
-            <MetricCard
-              title="Time Spent"
-              value={loading ? '...' : studentData?.metrics.timeSpent}
-              change={studentData?.changes.timeSpent}
-              changeType="positive"
-              icon="fa-clock"
-              color="info"
-              loading={loading}
-            />
-          </Col>
-        </Row>
-
-        <Row>
-          {/* Strengths & Gaps Table */}
-          <Col className={`${styles.tableCol}`}>
-            <Card className={`${styles.reportCard}`}>
-              <CardBody className={`${styles.cardBody}`}>
-                <div className={`${styles.cardHeader}`}>
-                  <h4 className={`${styles.cardTitle}`}>Strengths & Gaps by Subject</h4>
-                  <div className={`${styles.headerActions}`}>
-                    <span className={`${styles.subjectCount}`}>All Subjects</span>
-                  </div>
-                </div>
-
-                {loading ? (
-                  <div className={`${styles.loading}`}>
-                    <i aria-hidden="true" />
-                    <p>Loading student data...</p>
-                  </div>
-                ) : (
-                  <div className={`${styles.tableContainer}`}>
-                    <Table responsive className={`${styles.performanceTable}`}>
-                      <thead>
-                        <tr>
-                          <th>Subject</th>
-                          <th>Performance</th>
-                          <th>Status</th>
-                          <th>Visual Indicator</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {studentData?.subjectPerformance.map(item => (
-                          <tr key={item.subject}>
-                            <td className={`${styles.subjectCell}`}>{item.subject}</td>
-                            <td className={`${styles.performanceCell}`}>
-                              <strong>{formatPerformance(item.performance)}</strong>
-                            </td>
-                            <td>
-                              <span
-                                className={`${styles.statusBadge} ${getStatusBadgeClass(
-                                  item.performance,
-                                )}`}
-                              >
-                                {getStatusText(item.performance)}
-                              </span>
-                            </td>
-                            <td className={`${styles.visualCell}`}>
-                              <span className={`${styles.visualIndicator}`}>
-                                {getStatusIcon(item.performance)}
-                              </span>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </Table>
-                  </div>
-                )}
-              </CardBody>
-            </Card>
-          </Col>
-
-          {/* Performance Trend Chart */}
-          <Col className={`${styles.chartCol}`}>
-            <Card className={`${styles.reportCard}`}>
-              <CardBody className={`${styles.cardBody}`}>
-                <h4 className={`${styles.cardTitle}`}>Performance Trend by Subject Over Time</h4>
-                <div className={`${styles.chartContainer}`}>
-                  {loading ? (
-                    <div className={`${styles.chartLoading}`}>
-                      <i aria-hidden="true" />
-                      <p>Loading chart data...</p>
-                    </div>
-                  ) : (
-                    <ReportChart
-                      type="line"
-                      data={studentData?.performanceTrend}
-                      height={300}
-                      showLegend
-                    />
-                  )}
-                </div>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-
-        {/* Actionable Insights */}
-        <Row>
-          <Col>
-            <Card className={`${styles.reportCard}`}>
-              <CardBody className={`${styles.cardBody}`}>
-                <h4 className={`${styles.cardTitle}`}>Actionable Insight</h4>
-                <div className={`${styles.insightsContainer}`}>
-                  {loading ? (
-                    <div className={`${styles.loading}`}>
-                      <i aria-hidden="true" />
-                      <p>Generating insights...</p>
-                    </div>
-                  ) : (
-                    studentData?.insights.map(insight => (
-                      <div
-                        key={`${insight.type || 'info'}-${insight.title}`}
-                        role="alert"
-                        className={`${styles.insightAlert} ${
-                          styles[
-                            `insightAlert${insight.type.charAt(0).toUpperCase() +
-                              insight.type.slice(1)}`
-                          ]
-                        }`}
-                      >
-                        <div className={`${styles.insightContent}`}>
-                          <strong>{insight.title}:</strong> {insight.message}
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    </div>
-  );
-};
-
-export default IndividualReportView;
diff --git a/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.module.css b/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.module.css
deleted file mode 100644
index 135116c9b8..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/IndividualReportView/IndividualReportView.module.css
+++ /dev/null
@@ -1,590 +0,0 @@
-/* IndividualReportView.module.css */
-
-.individualReport {
-  padding: 1.5rem;
-  transition: all 0.3s ease;
-  animation: fade-in 0.5s ease-out;
-}
-
-.darkMode .individualReport {
-  color: #fff;
-}
-
-/* Empty State */
-.emptyState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 400px;
-  padding: 2rem;
-}
-
-.emptyState.darkMode {
-  color: #fff;
-}
-
-.emptyContent {
-  text-align: center;
-  max-width: 400px;
-}
-
-.emptyContent i {
-  font-size: 4rem;
-  color: #d1d5db;
-  margin-bottom: 1rem;
-}
-
-.chartLoading i {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-}
-
-.chartLoading p {
-  margin: 0;
-  font-weight: 500;
-}
-
-.loading i {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-}
-
-.loading p {
-  margin: 0;
-  font-weight: 500;
-}
-
-.darkMode .emptyContent i {
-  color: #6b7280;
-}
-
-.emptyContent h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 0.5rem;
-}
-
-.darkMode .emptyContent h3 {
-  color: #f9fafb;
-}
-
-.emptyContent p {
-  color: #6b7280;
-  font-size: 1rem;
-  line-height: 1.6;
-  margin: 0;
-}
-
-.darkMode .emptyContent p {
-  color: #9ca3af;
-}
-
-/* Metrics Row */
-.metricsRow {
-  margin-bottom: 2rem;
-}
-
-.metricCol {
-  margin-bottom: 1rem;
-}
-
-/* Report Cards */
-.reportCard {
-  background-color: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-  margin-bottom: 1.5rem;
-  transition: all 0.3s ease;
-}
-
-.darkMode .reportCard {
-  background-color: #1f2937;
-  border-color: #374151;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-.reportCard:focus-within {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.reportCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-}
-
-.darkMode .reportCard:focus-within {
-  outline-color: #818cf8;
-}
-
-.darkMode .reportCard:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
-}
-
-/* Card Headers */
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.darkMode .cardHeader {
-  border-bottom-color: #374151;
-}
-
-.cardTitle {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #111827;
-  margin: 0;
-}
-
-.darkMode .cardTitle {
-  color: #f9fafb;
-}
-
-.headerActions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.subjectCount {
-  font-size: 0.875rem;
-  color: #374151;
-  background-color: #f3f4f6;
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-weight: 500;
-}
-
-.darkMode .subjectCount {
-  color: #d1d5db;
-  background-color: #374151;
-}
-
-/* Table Styles */
-.tableContainer {
-  overflow-x: auto;
-}
-
-.performanceTable {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.performanceTable th {
-  background-color: #f9fafb;
-  color: #374151;
-  font-weight: 600;
-  border: none;
-  padding: 1rem 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 0.75rem;
-}
-
-.darkMode .performanceTable th {
-  background-color: #374151;
-  color: #d1d5db;
-}
-
-.performanceTable td {
-  padding: 1rem 0.75rem;
-  border-top: 1px solid #e5e7eb;
-  vertical-align: middle;
-}
-
-.darkMode .performanceTable td {
-  border-top-color: #374151;
-  color: #d1d5db;
-}
-
-.performanceTable tbody tr:hover {
-  background-color: #f9fafb;
-}
-
-.darkMode .performanceTable tbody tr:hover {
-  background-color: #374151;
-}
-
-.subjectCell {
-  font-weight: 500;
-  color: #111827;
-}
-
-.darkMode .subjectCell {
-  color: #f9fafb;
-}
-
-.performanceCell {
-  font-size: 0.875rem;
-}
-
-.performanceCell strong {
-  color: #4f46e5;
-  font-weight: 600;
-}
-
-.insightContent strong {
-  font-weight: 600;
-}
-
-.darkMode .performanceCell strong {
-  color: #818cf8;
-}
-
-/* Status Badges */
-.statusBadge {
-  display: inline-block;
-  padding: 5px 12px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 600;
-  text-align: center;
-  min-width: 80px;
-  border: 1px solid transparent;
-}
-
-/* Visual Indicators */
-.visualCell {
-  text-align: center;
-}
-
-.visualIndicator {
-  font-size: 18px;
-  display: inline-block;
-}
-
-/* Chart Styles */
-.chartCol {
-  margin-bottom: 30px;
-}
-
-.darkMode .cardBody {
-  background-color: #0f172a !important;
-}
-
-.chartContainer {
-  height: 300px;
-  position: relative;
-  margin: 20px 0 60px;
-}
-
-.chartLoading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #6b7280;
-}
-
-.darkMode .chartLoading {
-  color: #9ca3af;
-}
-
-/* Loading States */
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: #6b7280;
-}
-
-.darkMode .loading {
-  color: #9ca3af;
-}
-
-/* Insights Section */
-.insightsContainer {
-  margin-top: 1rem;
-}
-
-.insightAlert {
-  border: none;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  padding: 0.75rem 1rem;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-}
-
-/* Insight alert variants — match ReportsView colors exactly */
-.insightAlert.insightAlertInfo {
-  background-color: #d1ecf1;
-  border: 1px solid #bee5eb;
-  color: #0c5460;
-}
-
-.insightAlert.insightAlertSuccess {
-  background-color: #d4edda;
-  border: 1px solid #c3e6cb;
-  color: #155724;
-}
-
-.insightAlert.insightAlertWarning {
-  background-color: #fff3cd;
-  border: 1px solid #ffeeba;
-  color: #856404;
-}
-
-.insightAlert.insightAlertDanger {
-  background-color: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
-}
-
-.insightAlert.insightAlertPrimary {
-  background-color: #cce5ff;
-  border: 1px solid #b8daff;
-  color: #004085;
-}
-
-.darkMode .insightAlert {
-  color: #e2e8f0;
-  background-color: #1e293b;
-  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
-  border: 1px solid #334155;
-}
-
-.darkMode .insightAlert.insightAlertInfo {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.darkMode .insightAlert.insightAlertSuccess {
-  background-color: #052e16;
-  border-color: #166534;
-  color: #86efac;
-}
-
-.darkMode .insightAlert.insightAlertWarning {
-  background-color: #451a03;
-  border-color: #92400e;
-  color: #fde68a;
-}
-
-.darkMode .insightAlert.insightAlertDanger {
-  background-color: #450a0a;
-  border-color: #991b1b;
-  color: #fca5a5;
-}
-
-.darkMode .insightAlert.insightAlertPrimary {
-  background-color: #172554;
-  border-color: #1e40af;
-  color: #93c5fd;
-}
-
-.insightAlert:last-child {
-  margin-bottom: 0;
-}
-
-.insightContent {
-  line-height: 1.6;
-}
-
-.darkMode .insightContent {
-  color: #e5e7eb;
-}
-
-.darkMode .insightContent strong {
-  color: #f9fafb;
-}
-
-/* Responsive Design */
-@media (width <= 992px) {
-  .individualReport {
-    padding: 1rem;
-  }
-
-  .metricsRow {
-    margin-bottom: 1.5rem;
-  }
-
-  .chartCol,
-  .tableCol {
-    margin-bottom: 1.5rem;
-  }
-
-  .cardHeader {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .headerActions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-}
-
-@media (width <= 768px) {
-  .individualReport {
-    padding: 0.5rem;
-  }
-
-  .reportCard {
-    margin: 0 -0.5rem 1.5rem;
-  }
-
-  .performanceTable {
-    font-size: 0.8rem;
-  }
-
-  .performanceTable th,
-  .performanceTable td {
-    padding: 0.75rem 0.5rem;
-  }
-
-  .cardTitle {
-    font-size: 1.125rem;
-  }
-
-  .chartContainer {
-    height: 250px;
-  }
-
-  .metricCol {
-    margin-bottom: 1rem;
-  }
-}
-
-@media (width <= 480px) {
-  .emptyContent i {
-    font-size: 3rem;
-  }
-
-  .emptyContent h3 {
-    font-size: 1.25rem;
-  }
-
-  .emptyContent p {
-    font-size: 0.9rem;
-  }
-
-  .performanceTable {
-    font-size: 0.75rem;
-  }
-
-  .statusBadge {
-    font-size: 0.7rem;
-    padding: 0.2rem 0.5rem;
-  }
-
-  .visualIndicator {
-    font-size: 1rem;
-  }
-
-  .chartContainer {
-    height: 200px;
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Print Styles */
-@media print {
-  .individualReport {
-    background: white !important;
-    color: black !important;
-  }
-
-  .reportCard {
-    background: white !important;
-    box-shadow: none;
-    border: 1px solid #ccc;
-    break-inside: avoid;
-    margin-bottom: 1rem;
-  }
-
-  .chartContainer {
-    height: 250px !important;
-  }
-
-  .statusBadge {
-    background: transparent !important;
-    border: 1px solid currentcolor;
-  }
-
-  .insightAlert {
-    background: transparent !important;
-    border: 1px solid currentcolor;
-  }
-}
-
-/* Accessibility */
-.performanceTable:focus-within {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.darkMode .performanceTable:focus-within {
-  outline-color: #818cf8;
-}
-
-.statusBadgeExcellent {
-  background-color: #dcfce7;
-  color: #15803d;
-  border-color: #bbf7d0;
-}
-
-.statusBadgeGood {
-  background-color: #fefce8;
-  color: #a16207;
-  border-color: #fef08a;
-}
-
-.statusBadgeNeedsImprovement {
-  background-color: #fff7ed;
-  color: #c2410c;
-  border-color: #fed7aa;
-}
-
-.statusBadgeCritical {
-  background-color: #fee2e2;
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-
-.darkMode .statusBadgeExcellent {
-  background-color: #064e3b;
-  color: #6ee7b7 !important;
-  border-color: #065f46;
-}
-
-.darkMode .statusBadgeGood {
-  background-color: #78350f;
-  color: #fde68a !important;
-  border-color: #92400e;
-}
-
-.darkMode .statusBadgeNeedsImprovement {
-  background-color: #7c2d12;
-  color: #fed7aa !important;
-  border-color: #9a3412;
-}
-
-.darkMode .statusBadgeCritical {
-  background-color: #7f1d1d;
-  color: #fecaca !important;
-  border-color: #991b1b;
-}
diff --git a/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.jsx b/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.jsx
deleted file mode 100644
index 44e3e7ff57..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faChartLine,
-  faBook,
-  faHeart,
-  faClock,
-  faChartBar,
-  faCheckCircle,
-  faUserGraduate,
-} from '@fortawesome/free-solid-svg-icons';
-import styles from './MetricCard.module.css';
-
-const iconMap = {
-  'fa-chart-line': faChartLine,
-  'fa-book': faBook,
-  'fa-heart': faHeart,
-  'fa-clock': faClock,
-  'fa-chart-bar': faChartBar,
-  'fa-check-circle': faCheckCircle,
-  'fa-user-graduate': faUserGraduate,
-};
-
-const MetricCard = ({
-  title,
-  value,
-  unit = '',
-  change,
-  changeType = 'neutral',
-  icon,
-  color = 'primary',
-  size = 'medium',
-  description,
-  loading = false,
-}) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  const getChangeIcon = () => {
-    switch (changeType) {
-      case 'positive':
-        return 'fa-arrow-up';
-      case 'negative':
-        return 'fa-arrow-down';
-      default:
-        return 'fa-minus';
-    }
-  };
-
-  const getChangeText = () => {
-    if (change === undefined || change === null) return null;
-
-    const sign = change > 0 ? '+' : '';
-    return `${sign}${change}%`;
-  };
-
-  if (loading) {
-    return (
-      <div
-        className={`${styles.metricCard} ${styles[size]} ${darkMode ? styles.darkMode : ''} ${
-          styles.loading
-        }`}
-      >
-        <div className={styles.loadingShimmer}>
-          <div className={styles.shimmerLine} />
-          <div className={styles.shimmerLine} />
-          <div className={styles.shimmerLine} />
-        </div>
-      </div>
-    );
-  }
-
-  const faIcon = iconMap[icon];
-
-  return (
-    <div
-      className={`${styles.metricCard} ${styles[size]} ${styles[color]} ${
-        darkMode ? styles.darkMode : ''
-      }`}
-    >
-      {/* Header with icon and title */}
-      <div className={styles.cardHeader}>
-        {icon && faIcon && (
-          <div className={styles.iconContainer}>
-            <FontAwesomeIcon icon={faIcon} />
-          </div>
-        )}
-        <h3 className={styles.title}>{title}</h3>
-      </div>
-
-      {/* Main value display */}
-      <div className={styles.valueContainer}>
-        <div className={styles.mainValue}>
-          <span className={styles.value}>{value}</span>
-          {unit && <span className={styles.unit}>{unit}</span>}
-        </div>
-
-        {/* Change indicator */}
-        {getChangeText() && (
-          <div className={`${styles.changeIndicator} ${styles[changeType]}`}>
-            <i className={`fa ${getChangeIcon()}`} aria-hidden="true" />
-            <span className={styles.changeValue}>{getChangeText()}</span>
-          </div>
-        )}
-      </div>
-
-      {/* Description */}
-      {description && (
-        <div className={styles.description}>
-          <p>{description}</p>
-        </div>
-      )}
-
-      {/* Visual accent */}
-      <div className={styles.accent} />
-    </div>
-  );
-};
-
-export default MetricCard;
diff --git a/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.module.css b/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.module.css
deleted file mode 100644
index 75469ab679..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/MetricCard/MetricCard.module.css
+++ /dev/null
@@ -1,473 +0,0 @@
-/* MetricCard.module.css */
-
-.metricCard {
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-  border: 1px solid #e5e7eb;
-  transition: all 0.3s ease;
-  position: relative;
-  animation: fade-in-scale 0.5s ease-out;
-  overflow: hidden;
-  height: fit-content;
-}
-
-.metricCard.darkMode {
-  background-color: #1f2937;
-  border-color: #374151;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-/* Size Variants */
-.small {
-  padding: 1rem;
-  min-height: 120px;
-}
-
-.medium {
-  padding: 1.5rem;
-  min-height: 140px;
-}
-
-.large {
-  padding: 2rem;
-  min-height: 180px;
-}
-
-/* Color Variants */
-.primary {
-  border-left: 4px solid #4f46e5;
-}
-
-.darkMode.primary {
-  border-left-color: #818cf8;
-}
-
-.success {
-  border-left: 4px solid #10b981;
-}
-
-.darkMode.success {
-  border-left-color: #34d399;
-}
-
-.warning {
-  border-left: 4px solid #f59e0b;
-}
-
-.darkMode.warning {
-  border-left-color: #fbbf24;
-}
-
-.danger {
-  border-left: 4px solid #ef4444;
-}
-
-.darkMode.danger {
-  border-left-color: #f87171;
-}
-
-.info {
-  border-left: 4px solid #06b6d4;
-}
-
-.darkMode.info {
-  border-left-color: #67e8f9;
-}
-
-.secondary {
-  border-left: 4px solid #8b5cf6;
-}
-
-.darkMode.secondary {
-  border-left-color: #a78bfa;
-}
-
-/* Header Section */
-.cardHeader {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.iconContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 8px;
-  background-color: #f3f4f6;
-  color: #374151;
-  font-size: 1.125rem;
-}
-
-.darkMode .iconContainer {
-  background-color: #374151;
-  color: #d1d5db;
-}
-
-.primary .iconContainer {
-  background-color: #eef2ff;
-  color: #4f46e5;
-}
-
-.success .iconContainer {
-  background-color: #ecfdf5;
-  color: #047857;
-}
-
-.warning .iconContainer {
-  background-color: #fffbeb;
-  color: #b45309;
-}
-
-.danger .iconContainer {
-  background-color: #fef2f2;
-  color: #b91c1c;
-}
-
-.info .iconContainer {
-  background-color: #ecfeff;
-  color: #0e7490;
-}
-
-.secondary .iconContainer {
-  background-color: #faf5ff;
-  color: #6d28d9;
-}
-
-.darkMode.primary .iconContainer {
-  background-color: #312e81;
-  color: #a5b4fc;
-}
-
-.darkMode.success .iconContainer {
-  background-color: #064e3b;
-  color: #34d399;
-}
-
-.darkMode.warning .iconContainer {
-  background-color: #78350f;
-  color: #fbbf24;
-}
-
-.darkMode.danger .iconContainer {
-  background-color: #7f1d1d;
-  color: #fca5a5;
-}
-
-.darkMode.info .iconContainer {
-  background-color: #164e63;
-  color: #67e8f9;
-}
-
-.darkMode.secondary .iconContainer {
-  background-color: #581c87;
-  color: #c4b5fd;
-}
-
-.title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #374151;
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.darkMode .title {
-  color: #d1d5db;
-}
-
-/* Value Section */
-.valueContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 1rem;
-}
-
-.mainValue {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.value {
-  font-size: 2.25rem;
-  font-weight: 700;
-  color: #111827;
-  line-height: 1;
-}
-
-.darkMode .value {
-  color: #f9fafb;
-}
-
-.small .value {
-  font-size: 1.75rem;
-}
-
-.large .value {
-  font-size: 2.75rem;
-}
-
-.unit {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #6b7280;
-  margin-left: 0.25rem;
-}
-
-.darkMode .unit {
-  color: #9ca3af;
-}
-
-/* Change Indicator */
-.changeIndicator {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  padding: 0.25rem 0.5rem;
-  border-radius: 6px;
-  white-space: nowrap;
-}
-
-.changeIndicator.positive {
-  background-color: #ecfdf5;
-  color: #047857;
-}
-
-.darkMode .changeIndicator.positive {
-  background-color: #064e3b;
-  color: #34d399;
-}
-
-.changeIndicator.negative {
-  background-color: #fef2f2;
-  color: #b91c1c;
-}
-
-.darkMode .changeIndicator.negative {
-  background-color: #7f1d1d;
-  color: #fca5a5;
-}
-
-.changeIndicator.neutral {
-  background-color: #f3f4f6;
-  color: #374151;
-}
-
-.darkMode .changeIndicator.neutral {
-  background-color: #374151;
-  color: #d1d5db;
-}
-
-.changeValue {
-  font-size: 0.8rem;
-}
-
-/* Description */
-.description {
-  margin-top: auto;
-}
-
-.description p {
-  font-size: 0.875rem;
-  color: #6b7280;
-  margin: 0;
-  line-height: 1.5;
-}
-
-.darkMode .description p {
-  color: #9ca3af;
-}
-
-/* Visual Accent */
-.accent {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100px;
-  height: 100px;
-  background: linear-gradient(135deg, transparent 50%, rgb(79 70 229 / 5%) 50%);
-  border-radius: 0 12px 0 100px;
-  pointer-events: none;
-}
-
-.darkMode .accent {
-  background: linear-gradient(135deg, transparent 50%, rgb(129 140 248 / 10%) 50%);
-}
-
-/* Loading State */
-.loading {
-  position: relative;
-  overflow: hidden;
-}
-
-.loadingShimmer {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem 0;
-}
-
-.shimmerLine {
-  height: 1rem;
-  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
-  background-size: 200% 100%;
-  border-radius: 4px;
-  animation: shimmer 1.5s infinite;
-}
-
-.darkMode .shimmerLine {
-  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
-  background-size: 200% 100%;
-}
-
-.shimmerLine:nth-child(1) {
-  width: 60%;
-  height: 0.75rem;
-}
-
-.shimmerLine:nth-child(2) {
-  width: 80%;
-  height: 2rem;
-}
-
-.shimmerLine:nth-child(3) {
-  width: 40%;
-  height: 0.75rem;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-/* Hover Effects */
-.metricCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-}
-
-/* Accessibility */
-.metricCard:focus-within {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.darkMode .metricCard:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
-}
-
-.darkMode .metricCard:focus-within {
-  outline-color: #818cf8;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .metricCard {
-    padding: 1rem;
-  }
-
-  .small,
-  .medium,
-  .large {
-    padding: 1rem;
-    min-height: auto;
-  }
-
-  .value {
-    font-size: 1.875rem;
-  }
-
-  .small .value {
-    font-size: 1.5rem;
-  }
-
-  .large .value {
-    font-size: 2rem;
-  }
-
-  .valueContainer {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-
-  .changeIndicator {
-    align-self: flex-end;
-  }
-
-  .iconContainer {
-    width: 2rem;
-    height: 2rem;
-    font-size: 1rem;
-  }
-
-  .title {
-    font-size: 0.8rem;
-  }
-}
-
-@media (width <= 480px) {
-  .cardHeader {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-
-  .iconContainer {
-    width: 1.75rem;
-    height: 1.75rem;
-    font-size: 0.875rem;
-  }
-
-  .accent {
-    width: 60px;
-    height: 60px;
-  }
-}
-
-/* Print Styles */
-@media print {
-  .metricCard {
-    background: white !important;
-    box-shadow: none;
-    border: 1px solid #ccc;
-    break-inside: avoid;
-    margin-bottom: 1rem;
-  }
-
-  .accent {
-    display: none;
-  }
-
-  .changeIndicator {
-    background: transparent !important;
-    border: 1px solid currentcolor;
-  }
-}
-
-@keyframes fade-in-scale {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
diff --git a/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.jsx b/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.jsx
deleted file mode 100644
index 4d25372872..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.jsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import React from 'react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-} from 'chart.js';
-import { Bar, Line, Pie } from 'react-chartjs-2';
-import { useSelector } from 'react-redux';
-import styles from './ReportChart.module.css';
-
-// Register Chart.js components
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-);
-
-const ReportChart = ({
-  type = 'bar',
-  data,
-  title,
-  height = 300,
-  showLegend = true,
-  backgroundColor,
-  borderColor,
-  gradient = false,
-}) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  // Default color schemes
-  const defaultColors = {
-    light: {
-      primary: '#4f46e5',
-      secondary: '#06b6d4',
-      success: '#10b981',
-      warning: '#f59e0b',
-      danger: '#ef4444',
-      info: '#8b5cf6',
-    },
-    dark: {
-      primary: '#818cf8',
-      secondary: '#67e8f9',
-      success: '#34d399',
-      warning: '#fbbf24',
-      danger: '#f87171',
-      info: '#a78bfa',
-    },
-  };
-
-  const colors = darkMode ? defaultColors.dark : defaultColors.light;
-
-  const getLegendOptions = () => ({
-    display: showLegend,
-    position: 'top',
-    labels: {
-      color: darkMode ? '#d1d5db' : '#374151',
-      usePointStyle: true,
-      padding: 20,
-      font: {
-        size: 12,
-        family: "'Inter', sans-serif",
-      },
-    },
-  });
-
-  const getTitleOptions = () => ({
-    display: !!title,
-    text: title,
-    color: darkMode ? '#f9fafb' : '#111827',
-    font: {
-      size: 16,
-      weight: '600',
-      family: "'Inter', sans-serif",
-    },
-    padding: {
-      top: 10,
-      bottom: 20,
-    },
-  });
-
-  const getTooltipOptions = () => ({
-    backgroundColor: darkMode ? '#1f2937' : '#ffffff',
-    titleColor: darkMode ? '#f9fafb' : '#111827',
-    bodyColor: darkMode ? '#d1d5db' : '#374151',
-    borderColor: darkMode ? '#374151' : '#e5e7eb',
-    borderWidth: 1,
-    cornerRadius: 8,
-    displayColors: true,
-  });
-
-  const getScalesOptions = () => {
-    if (type === 'pie') return {};
-
-    const tickColor = darkMode ? '#9ca3af' : '#6b7280';
-    const gridColor = darkMode ? '#374151' : '#f3f4f6';
-    const borderColor = darkMode ? '#4b5563' : '#d1d5db';
-
-    return {
-      x: {
-        ticks: {
-          color: tickColor,
-          font: {
-            size: 11,
-          },
-        },
-        grid: {
-          color: gridColor,
-          borderColor,
-        },
-      },
-      y: {
-        ticks: {
-          color: tickColor,
-          font: {
-            size: 11,
-          },
-        },
-        grid: {
-          color: gridColor,
-          borderColor,
-        },
-      },
-    };
-  };
-
-  // Common chart options
-  const getBaseOptions = () => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: getLegendOptions(),
-      title: getTitleOptions(),
-      tooltip: getTooltipOptions(),
-    },
-    scales: getScalesOptions(),
-  });
-
-  // Process data based on chart type
-  const processChartData = () => {
-    if (!data) return null;
-
-    const processedData = { ...data };
-
-    // Apply default colors if not provided
-    if (data.datasets) {
-      processedData.datasets = data.datasets.map((dataset, index) => {
-        const colorKeys = Object.keys(colors);
-        const colorKey = colorKeys[index % colorKeys.length];
-        const baseColor = colors[colorKey];
-
-        const processedDataset = {
-          ...dataset,
-          backgroundColor: (() => {
-            if (backgroundColor) return backgroundColor;
-            if (dataset.backgroundColor) return dataset.backgroundColor;
-            if (type === 'pie') return Object.values(colors);
-            if (gradient) return `linear-gradient(45deg, ${baseColor}, ${baseColor}99)`;
-            return `${baseColor}20`;
-          })(),
-          borderColor: borderColor || dataset.borderColor || baseColor,
-          borderWidth: dataset.borderWidth || (type === 'line' ? 3 : 2),
-        };
-
-        // Additional styling for line charts
-        if (type === 'line') {
-          processedDataset.fill = dataset.fill !== undefined ? dataset.fill : true;
-          processedDataset.tension = dataset.tension || 0.4;
-          processedDataset.pointBackgroundColor = baseColor;
-          processedDataset.pointBorderColor = '#ffffff';
-          processedDataset.pointBorderWidth = 2;
-          processedDataset.pointRadius = 4;
-          processedDataset.pointHoverRadius = 6;
-        }
-
-        // Additional styling for bar charts
-        if (type === 'bar') {
-          processedDataset.borderRadius = 4;
-          processedDataset.borderSkipped = false;
-        }
-
-        return processedDataset;
-      });
-    }
-
-    return processedData;
-  };
-
-  const chartData = processChartData();
-  const options = getBaseOptions();
-
-  if (!chartData) {
-    return (
-      <div className={`${styles.chartContainer} ${darkMode ? styles.darkMode : ''}`}>
-        <div className={styles.noData}>
-          <i className="fa fa-chart-bar" aria-hidden="true" />
-          <p>No data available</p>
-        </div>
-      </div>
-    );
-  }
-
-  const renderChart = () => {
-    switch (type) {
-      case 'line':
-        return <Line data={chartData} options={options} />;
-      case 'pie':
-        return <Pie data={chartData} options={options} />;
-      case 'bar':
-      default:
-        return <Bar data={chartData} options={options} />;
-    }
-  };
-
-  return (
-    <div className={`${styles.chartContainer} ${darkMode ? styles.darkMode : ''}`}>
-      <div className={styles.chartWrapper} style={{ height: `${height}px` }}>
-        {renderChart()}
-      </div>
-    </div>
-  );
-};
-
-export default ReportChart;
diff --git a/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.module.css b/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.module.css
deleted file mode 100644
index ca2ba6632b..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ReportChart/ReportChart.module.css
+++ /dev/null
@@ -1,185 +0,0 @@
-/* ReportChart.module.css */
-
-.chartContainer {
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-  border: 1px solid #e5e7eb;
-  transition: all 0.3s ease;
-  margin-bottom: 1.5rem;
-  animation: fade-in-up 0.5s ease-out;
-}
-
-.chartContainer.darkMode {
-  background-color: #1f2937;
-  border-color: #374151;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-.chartWrapper {
-  position: relative;
-  width: 100%;
-  height: 300px;
-  margin: 0 auto;
-}
-
-.noData {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: #6b7280;
-  font-size: 1rem;
-}
-
-.darkMode .noData {
-  color: #9ca3af;
-}
-
-.noData i {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.noData p {
-  margin: 0;
-  font-weight: 500;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .chartContainer {
-    padding: 1rem;
-    margin: 0 -0.5rem 1.5rem;
-  }
-
-  .chartWrapper {
-    height: 250px;
-  }
-}
-
-@media (width <= 480px) {
-  .chartContainer {
-    padding: 0.75rem;
-  }
-
-  .chartWrapper {
-    height: 200px;
-  }
-
-  .noData {
-    height: 150px;
-  }
-
-  .noData i {
-    font-size: 2rem;
-  }
-
-  .noData p {
-    font-size: 0.9rem;
-  }
-}
-
-/* Chart Loading Animation */
-.chartContainer.loading {
-  position: relative;
-  overflow: hidden;
-}
-
-.chartContainer.loading::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgb(79 70 229 / 10%), transparent);
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  0% {
-    left: -100%;
-  }
-
-  100% {
-    left: 100%;
-  }
-}
-
-/* Chart Hover Effects */
-.chartContainer:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  transform: translateY(-2px);
-}
-
-/* Accessibility */
-.chartContainer:focus-within {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.darkMode .chartContainer:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
-}
-
-.darkMode .chartContainer:focus-within {
-  outline-color: #818cf8;
-}
-
-/* Print Styles */
-@media print {
-  .chartContainer {
-    background: white !important;
-    box-shadow: none;
-    border: 1px solid #ccc;
-    break-inside: avoid;
-    margin-bottom: 1rem;
-  }
-
-  .chartWrapper {
-    height: 250px !important;
-  }
-}
-
-@keyframes fade-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Custom scrollbar for chart containers if needed */
-.chartContainer::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.chartContainer::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.chartContainer::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 3px;
-}
-
-.darkMode .chartContainer::-webkit-scrollbar-thumb {
-  background: #4b5563;
-}
-
-.chartContainer::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
-
-.darkMode .chartContainer::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
-}
diff --git a/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.jsx b/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.jsx
deleted file mode 100644
index db94860137..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React from 'react';
-import { Row, Col, Form, FormGroup, Label, Input } from 'reactstrap';
-import { useSelector } from 'react-redux';
-import styles from './ReportFilterBar.module.css';
-import { students, classes, filterSubjects, dateRanges } from '../../mockdata';
-
-const ReportFilterBar = ({ filters, onFilterChange, activeTab }) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-
-  const handleInputChange = (field, value) => {
-    onFilterChange({ [field]: value });
-  };
-
-  const handleExport = () => {
-    alert('Export functionality coming soon!');
-  };
-
-  return (
-    <div className={`${styles.filterBar} ${darkMode ? styles.darkMode : ''}`}>
-      <Form>
-        <Row className={styles.filterRow}>
-          {/* Student/Class Selection */}
-          <Col md={3} className={styles.filterCol}>
-            <FormGroup>
-              <Label for={`${activeTab}Select`} className={styles.filterLabel}>
-                {activeTab === 'individual' ? 'Select Student' : 'Select Class'}
-              </Label>
-              <Input
-                type="select"
-                id={`${activeTab}Select`}
-                value={activeTab === 'individual' ? filters.studentId : filters.classId}
-                onChange={e =>
-                  handleInputChange(
-                    activeTab === 'individual' ? 'studentId' : 'classId',
-                    e.target.value,
-                  )
-                }
-                className={styles.filterSelect}
-              >
-                <option value="">
-                  {activeTab === 'individual' ? 'Choose a student...' : 'Choose a class...'}
-                </option>
-                {(activeTab === 'individual' ? students : classes).map(item => (
-                  <option key={item.id} value={item.id}>
-                    {item.name}
-                  </option>
-                ))}
-              </Input>
-            </FormGroup>
-          </Col>
-
-          {/* Subject Filter */}
-          <Col md={3} className={styles.filterCol}>
-            <FormGroup>
-              <Label for="subjectSelect" className={styles.filterLabel}>
-                Subject
-              </Label>
-              <Input
-                type="select"
-                id="subjectSelect"
-                value={filters.subject}
-                onChange={e => handleInputChange('subject', e.target.value)}
-                className={styles.filterSelect}
-              >
-                {filterSubjects.map(subject => (
-                  <option key={subject.value} value={subject.value}>
-                    {subject.label}
-                  </option>
-                ))}
-              </Input>
-            </FormGroup>
-          </Col>
-
-          {/* Date Range Filter */}
-          <Col md={3} className={styles.filterCol}>
-            <FormGroup>
-              <Label for="dateRangeSelect" className={styles.filterLabel}>
-                Date Range
-              </Label>
-              <Input
-                type="select"
-                id="dateRangeSelect"
-                value={filters.dateRange}
-                onChange={e => handleInputChange('dateRange', e.target.value)}
-                className={styles.filterSelect}
-              >
-                {dateRanges.map(range => (
-                  <option key={range.value} value={range.value}>
-                    {range.label}
-                  </option>
-                ))}
-              </Input>
-            </FormGroup>
-          </Col>
-
-          {/* Action Buttons */}
-          <Col md={3} className={styles.filterCol}>
-            <div className={styles.actionButtons}>
-              <button
-                type="button"
-                className={`${styles.actionBtn} ${styles.refreshBtn}`}
-                onClick={() => window.location.reload()}
-                title="Refresh Data"
-              >
-                <i className="fa fa-refresh" aria-hidden="true" /> Refresh
-              </button>
-              <button
-                type="button"
-                className={`${styles.actionBtn} ${styles.exportBtn}`}
-                onClick={handleExport}
-                title="Export Report"
-              >
-                <i className="fa fa-download" aria-hidden="true" /> Export
-              </button>
-            </div>
-          </Col>
-        </Row>
-
-        {/* Custom Date Range Inputs (shown when custom is selected) */}
-        {filters.dateRange === 'custom' && (
-          <Row className={styles.customDateRow}>
-            <Col md={3}>
-              <FormGroup>
-                <Label for="startDate" className={styles.filterLabel}>
-                  Start Date
-                </Label>
-                <Input
-                  type="date"
-                  id="startDate"
-                  className={styles.filterSelect}
-                  onChange={e => handleInputChange('startDate', e.target.value)}
-                />
-              </FormGroup>
-            </Col>
-            <Col md={3}>
-              <FormGroup>
-                <Label for="endDate" className={styles.filterLabel}>
-                  End Date
-                </Label>
-                <Input
-                  type="date"
-                  id="endDate"
-                  className={styles.filterSelect}
-                  onChange={e => handleInputChange('endDate', e.target.value)}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
-        )}
-      </Form>
-    </div>
-  );
-};
-
-export default ReportFilterBar;
diff --git a/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.module.css b/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.module.css
deleted file mode 100644
index fb74cf8b5b..0000000000
--- a/src/components/EductionPortal/EducatorReports/components/ReportFilterBar/ReportFilterBar.module.css
+++ /dev/null
@@ -1,285 +0,0 @@
-/* ReportFilterBar.module.css */
-
-.filterBar {
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
-  border: 1px solid #e5e7eb;
-  transition: all 0.3s ease;
-  animation: slide-down 0.3s ease-out;
-}
-
-.filterBar.darkMode {
-  background-color: #1f2937;
-  border-color: #374151;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-.filterRow {
-  align-items: end;
-  margin: 0 -0.5rem;
-}
-
-.filterCol {
-  padding: 0 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.filterLabel {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 0.5rem;
-  display: block;
-}
-
-.darkMode .filterLabel {
-  color: #d1d5db;
-}
-
-.filterSelect {
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  background-color: #fff;
-  color: #374151;
-  transition: all 0.2s ease;
-  width: 100%;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1.125em 1.125em;
-  padding-right: 2.5rem;
-}
-
-.filterSelect:focus {
-  outline: none;
-  border-color: #4f46e5;
-  box-shadow: 0 0 0 3px rgb(79 70 229 / 10%);
-}
-
-.filterSelect:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.darkMode .filterSelect {
-  background-color: #374151;
-  border-color: #4b5563;
-  color: #d1d5db;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%259ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-}
-
-.darkMode .filterSelect:focus {
-  border-color: #818cf8;
-  box-shadow: 0 0 0 3px rgb(129 140 248 / 10%);
-}
-
-/* Action Buttons */
-.actionButtons {
-  display: flex;
-  gap: 0.75rem;
-  height: 100%;
-  align-items: end;
-}
-
-.actionBtn {
-  background-color: #4f46e5;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  white-space: nowrap;
-}
-
-.actionBtn:hover {
-  background-color: #3730a3;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgb(79 70 229 / 30%);
-}
-
-.actionBtn:active {
-  transform: translateY(0);
-}
-
-.refreshBtn {
-  background-color: #059669;
-}
-
-.refreshBtn:hover {
-  background-color: #047857;
-  box-shadow: 0 4px 8px rgb(5 150 105 / 30%);
-}
-
-.exportBtn {
-  background-color: #dc2626;
-}
-
-.exportBtn:hover {
-  background-color: #b91c1c;
-  box-shadow: 0 4px 8px rgb(220 38 38 / 30%);
-}
-
-.actionBtn:focus {
-  outline: 2px solid #4f46e5;
-  outline-offset: 2px;
-}
-
-.actionBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.darkMode .actionBtn {
-  background-color: #4338ca;
-}
-
-.darkMode .actionBtn:focus {
-  outline-color: #818cf8;
-}
-
-.darkMode .actionBtn:hover {
-  background-color: #3730a3;
-}
-
-.actionBtn:disabled:hover {
-  transform: none;
-  box-shadow: none;
-}
-
-.darkMode .refreshBtn {
-  background-color: #047857;
-}
-
-.darkMode .refreshBtn:hover {
-  background-color: #065f46;
-}
-
-.darkMode .exportBtn {
-  background-color: #b91c1c;
-}
-
-.darkMode .exportBtn:hover {
-  background-color: #991b1b;
-}
-
-/* Custom Date Range */
-.customDateRow {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.darkMode .customDateRow {
-  border-top-color: #374151;
-}
-
-/* Responsive Design */
-@media (width <= 992px) {
-  .filterRow {
-    margin: 0 -0.25rem;
-  }
-
-  .filterCol {
-    padding: 0 0.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .actionButtons {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .actionBtn {
-    justify-content: center;
-    margin-bottom: 0.5rem;
-  }
-}
-
-@media (width <= 768px) {
-  .filterBar {
-    padding: 1rem;
-    margin: 0 -0.5rem 1.5rem;
-    border-radius: 8px;
-  }
-
-  .filterRow {
-    flex-direction: column;
-    margin: 0;
-  }
-
-  .filterCol {
-    padding: 0;
-    margin-bottom: 1rem;
-    width: 100%;
-  }
-
-  .actionButtons {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .actionBtn {
-    flex: 1;
-    margin-bottom: 0;
-    font-size: 0.8rem;
-    padding: 0.65rem 0.5rem;
-  }
-}
-
-@media (width <= 480px) {
-  .actionButtons {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .actionBtn {
-    width: 100%;
-  }
-
-  .filterLabel {
-    font-size: 0.8rem;
-  }
-
-  .filterSelect {
-    font-size: 0.8rem;
-    padding: 0.65rem 0.75rem;
-  }
-}
-
-/* Animation */
-@keyframes slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Icon Spacing */
-.actionBtn i {
-  font-size: 0.875rem;
-}
-
-/* Form Group Spacing */
-.filterCol .form-group {
-  margin-bottom: 0;
-}
diff --git a/src/components/EductionPortal/EducatorReports/config/layoutConfig.js b/src/components/EductionPortal/EducatorReports/config/layoutConfig.js
deleted file mode 100644
index 36507af9cb..0000000000
--- a/src/components/EductionPortal/EducatorReports/config/layoutConfig.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// Layout configuration for the Educator Reports dashboard
-export const LAYOUT_CONFIG = {
-  // Header height - adjust this value to match your application's header
-  HEADER_HEIGHT: '110px', // Increased for better clearance below top nav
-
-  // Sidebar width
-  SIDEBAR_WIDTH: '250px',
-
-  // Responsive breakpoints
-  MOBILE_BREAKPOINT: '768px',
-  TABLET_BREAKPOINT: '992px',
-
-  // Z-index values
-  HEADER_Z_INDEX: 1100,
-  SIDEBAR_Z_INDEX: 1000,
-  MODAL_Z_INDEX: 1200,
-};
-
-// CSS custom properties for use in components
-export const getCSSVariables = () => ({
-  '--header-height': LAYOUT_CONFIG.HEADER_HEIGHT,
-  '--sidebar-width': LAYOUT_CONFIG.SIDEBAR_WIDTH,
-});
diff --git a/src/components/EductionPortal/EducatorReports/index.js b/src/components/EductionPortal/EducatorReports/index.js
deleted file mode 100644
index 97613ad2ec..0000000000
--- a/src/components/EductionPortal/EducatorReports/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './ReportsView';
-export { default as IndividualReportView } from './components/IndividualReportView/IndividualReportView';
-export { default as ClassPerformanceView } from './components/ClassPerformanceView/ClassPerformanceView';
-export { default as ReportFilterBar } from './components/ReportFilterBar/ReportFilterBar';
diff --git a/src/components/EductionPortal/EducatorReports/mockdata.js b/src/components/EductionPortal/EducatorReports/mockdata.js
deleted file mode 100644
index cecba18558..0000000000
--- a/src/components/EductionPortal/EducatorReports/mockdata.js
+++ /dev/null
@@ -1,198 +0,0 @@
-export const strengthsGapsData = [
-  { subject: 'Arts/Trades', performance: 95, status: 'excellent', color: '#10b981' },
-  { subject: 'English', performance: 90, status: 'excellent', color: '#10b981' },
-  { subject: 'Health', performance: 48, status: 'needs-improvement', color: '#f59e0b' },
-  { subject: 'Mathematics', performance: 67, status: 'good', color: '#fbbf24' },
-  { subject: 'Science', performance: 83, status: 'good', color: '#f59e0b' },
-  { subject: 'Social Studies', performance: 84, status: 'excellent', color: '#10b981' },
-  { subject: 'Tech & Innovation', performance: 35, status: 'needs-improvement', color: '#ef4444' },
-  { subject: 'Values', performance: 72, status: 'good', color: '#10b981' },
-];
-
-export const performanceTrendData = {
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-  datasets: [
-    {
-      label: 'Arts/Trades',
-      data: [95, 94, 95, 96, 95, 95],
-      borderColor: '#10b981',
-      backgroundColor: '#10b981',
-    },
-    {
-      label: 'English',
-      data: [88, 89, 90, 91, 90, 90],
-      borderColor: '#3b82f6',
-      backgroundColor: '#3b82f6',
-    },
-    {
-      label: 'Health',
-      data: [45, 46, 47, 48, 48, 48],
-      borderColor: '#f59e0b',
-      backgroundColor: '#f59e0b',
-    },
-    {
-      label: 'Mathematics',
-      data: [65, 66, 67, 68, 67, 67],
-      borderColor: '#fbbf24',
-      backgroundColor: '#fbbf24',
-    },
-    {
-      label: 'Science',
-      data: [80, 81, 82, 83, 83, 83],
-      borderColor: '#06b6d4',
-      backgroundColor: '#06b6d4',
-    },
-    {
-      label: 'Social Studies',
-      data: [82, 83, 84, 85, 84, 84],
-      borderColor: '#8b5cf6',
-      backgroundColor: '#8b5cf6',
-    },
-    {
-      label: 'Tech & Innovation',
-      data: [32, 33, 34, 35, 35, 35],
-      borderColor: '#ef4444',
-      backgroundColor: '#ef4444',
-    },
-    {
-      label: 'Values',
-      data: [70, 71, 72, 73, 72, 72],
-      borderColor: '#10b981',
-      backgroundColor: '#10b981',
-    },
-  ],
-};
-
-export const teachingStrategiesData = {
-  labels: [
-    'Game Genius',
-    'Power Play',
-    'Body Smart Exploration',
-    'Crazy Creative Combo Competition',
-    'Existential Smart Exploration',
-    'Curious Dropout',
-  ],
-  datasets: [
-    {
-      label: 'Effectiveness',
-      data: [92, 88, 85, 82, 78, 65],
-      backgroundColor: ['#10b981', '#10b981', '#10b981', '#3b82f6', '#3b82f6', '#ef4444'],
-    },
-  ],
-};
-
-export const lifeStrategiesData = {
-  labels: [
-    'Everything you do should increase choices',
-    'Ask "what would Jesus do?"',
-    'Choose to trust with observation',
-    'Practice improving your emotional intelligence',
-  ],
-  datasets: [
-    {
-      label: 'Impact',
-      data: [92, 85, 82, 76],
-      backgroundColor: ['#10b981', '#10b981', '#fbbf24', '#fbbf24'],
-    },
-  ],
-};
-
-export const subjects = [
-  { name: 'All Subjects', color: '#6b7280' },
-  { name: 'Arts/Trades', color: '#ff8c00' },
-  { name: 'English', color: '#9c27b0' },
-  { name: 'Health', color: '#4caf50' },
-  { name: 'Mathematics', color: '#2196f3' },
-  { name: 'Science', color: '#009688' },
-  { name: 'Social Studies', color: '#ff9800' },
-  { name: 'Tech & Innovation', color: '#607d8b' },
-  { name: 'Values', color: '#f44336' },
-];
-
-export const filterSubjects = [
-  { value: 'all', label: 'All Subjects' },
-  { value: 'mathematics', label: 'Mathematics' },
-  { value: 'science', label: 'Science' },
-  { value: 'english', label: 'English' },
-  { value: 'history', label: 'History' },
-  { value: 'art', label: 'Art' },
-  { value: 'health', label: 'Health' },
-  { value: 'social-studies', label: 'Social Studies' },
-  { value: 'tech-innovation', label: 'Tech & Innovation' },
-  { value: 'values', label: 'Values' },
-];
-
-export const students = [
-  { id: '1', name: 'Alex Johnson' },
-  { id: '2', name: 'Sarah Williams' },
-  { id: '3', name: 'Michael Brown' },
-  { id: '4', name: 'Emily Davis' },
-];
-
-export const classes = [
-  { id: '1', name: 'Grade 5A - Mathematics' },
-  { id: '2', name: 'Grade 6B - Science' },
-  { id: '3', name: 'Grade 4C - English' },
-];
-
-export const dateRanges = [
-  { value: 'lastWeek', label: 'Last Week' },
-  { value: 'lastMonth', label: 'Last Month' },
-  { value: 'lastQuarter', label: 'Last Quarter' },
-  { value: 'lastSemester', label: 'Last Semester' },
-  { value: 'lastYear', label: 'Last Year' },
-  { value: 'custom', label: 'Custom Range' },
-];
-
-export const sidebarMenuItems = [
-  {
-    icon: '🏠',
-    label: 'Homepage',
-    path: '',
-    isActive: false,
-  },
-  {
-    icon: '📊',
-    label: 'Knowledge Evaluation',
-    path: '',
-    isActive: false,
-  },
-  {
-    icon: '📋',
-    label: 'Past Lesson Plans',
-    path: '/educator/reports',
-    isActive: false,
-  },
-  {
-    icon: '⭐',
-    label: 'My Saved Interests',
-    path: '/saved-interests',
-    isActive: false,
-  },
-  {
-    icon: '📈',
-    label: 'Evaluation results',
-    path: '/evaluation-results',
-    isActive: false,
-  },
-  {
-    icon: '🏗️',
-    label: 'Build Lesson Plan',
-    path: '/build-lesson-plan',
-    isActive: false,
-  },
-];
-
-export const sidebarBottomMenuItems = [
-  {
-    icon: '⚙️',
-    label: 'Settings',
-    path: '/settings',
-  },
-  {
-    icon: '🚪',
-    label: 'Log out',
-    path: '/logout',
-    isLogout: true,
-  },
-];
diff --git a/src/components/EductionPortal/EducatorReports/utils/statusUtils.js b/src/components/EductionPortal/EducatorReports/utils/statusUtils.js
deleted file mode 100644
index 8a0e1615ac..0000000000
--- a/src/components/EductionPortal/EducatorReports/utils/statusUtils.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Shared status helpers for report tables.
-
-const toNumber = value => {
-  if (typeof value === 'number') return value;
-  if (typeof value === 'string') {
-    const parsed = Number.parseFloat(value.replace('%', '').trim());
-    return Number.isFinite(parsed) ? parsed : 0;
-  }
-  return 0;
-};
-
-export const getStatusIcon = performance => {
-  const p = toNumber(performance);
-  if (p >= 85) return '🟢';
-  if (p >= 70) return '🟡';
-  if (p >= 50) return '🟠';
-  return '🔴';
-};
-
-export const getStatusText = performance => {
-  const p = toNumber(performance);
-  if (p >= 85) return 'Excellent';
-  if (p >= 70) return 'Good';
-  if (p >= 50) return 'Needs Improvement';
-  return 'Critical';
-};
-
-export const getStatusClass = performance => {
-  const p = toNumber(performance);
-  if (p >= 85) return 'excellent';
-  if (p >= 70) return 'good';
-  if (p >= 50) return 'needsImprovement';
-  return 'critical';
-};
diff --git a/src/components/EductionPortal/EvaluationResults/EvaluationResults.jsx b/src/components/EductionPortal/EvaluationResults/EvaluationResults.jsx
index 8d59e67330..92a2b52e29 100644
--- a/src/components/EductionPortal/EvaluationResults/EvaluationResults.jsx
+++ b/src/components/EductionPortal/EvaluationResults/EvaluationResults.jsx
@@ -15,10 +15,13 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 
 import styles from './EvaluationResults.module.css';
+import SideBar from '../SideBar/SideBar';
+import { useSidebar } from '../SidebarContext';
 import EvaluationNotificationService from './evaluationNotificationService';
 import { mockEvaluationData } from './mockData_new';
 
 const EvaluationResults = ({ auth }) => {
+  const { isMinimized } = useSidebar();
   const [evaluationData, setEvaluationData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [selectedCategory, setSelectedCategory] = useState('all');
@@ -184,384 +187,393 @@ const EvaluationResults = ({ auth }) => {
   };
 
   return (
-    <div className={styles.evaluationResultsPage}>
-      {/* New Clean Header */}
-      <div className={styles.headerSection}>
-        <Container>
-          <div className={styles.headerContent}>
-            <div className={styles.headerLeft}>
-              <h1 className={styles.pageTitle}>Evaluation Results</h1>
-              <p className={styles.pageSubtitle}>
-                Comprehensive overview of your grades, performance on assignments, and detailed
-                feedback from teachers
-              </p>
-            </div>
-            <div className={styles.headerRight}>
-              <div className={styles.userWelcome}>
-                <FontAwesomeIcon icon={faUser} className={styles.userIcon} />
-                <span>Welcome, {auth?.user?.firstName || 'Student Name'}</span>
+    <>
+      <SideBar />
+      <div className={styles.evaluationResultsPage} data-sidebar-minimized={isMinimized}>
+        {/* New Clean Header */}
+        <div className={styles.headerSection}>
+          <Container>
+            <div className={styles.headerContent}>
+              <div className={styles.headerLeft}>
+                <h1 className={styles.pageTitle}>Evaluation Results</h1>
+                <p className={styles.pageSubtitle}>
+                  Comprehensive overview of your grades, performance on assignments, and detailed
+                  feedback from teachers
+                </p>
+              </div>
+              <div className={styles.headerRight}>
+                <div className={styles.userWelcome}>
+                  <FontAwesomeIcon icon={faUser} className={styles.userIcon} />
+                  <span>Welcome, {auth?.user?.firstName || 'Student Name'}</span>
+                </div>
+                <FontAwesomeIcon icon={faBell} className={styles.notificationIcon} />
               </div>
-              <FontAwesomeIcon icon={faBell} className={styles.notificationIcon} />
             </div>
-          </div>
-        </Container>
-      </div>
+          </Container>
+        </div>
 
-      <Container className={styles.mainContent}>
-        {/* Overall Performance Summary */}
-        <div className={styles.overallSection}>
-          <div className={styles.sectionHeader}>
-            <h3>Overall Performance Summary</h3>
-            <div className={styles.overallScore}>
-              <span className={styles.scoreText}>{percentageScore}%</span>
-              <span className={styles.scoreLabel}>Overall Grade</span>
-            </div>
-          </div>
-          <div className={styles.progressSection}>
-            <div className={styles.progressBar}>
-              <div className={styles.progressFill} style={{ width: `${percentageScore}%` }}></div>
+        <Container className={styles.mainContent}>
+          {/* Overall Performance Summary */}
+          <div className={styles.overallSection}>
+            <div className={styles.sectionHeader}>
+              <h3>Overall Performance Summary</h3>
+              <div className={styles.overallScore}>
+                <span className={styles.scoreText}>{percentageScore}%</span>
+                <span className={styles.scoreLabel}>Overall Grade</span>
+              </div>
             </div>
-            <div className={styles.scoreDetails}>
-              <span>
-                Total Score: {totalEarnedPoints}/{totalPossiblePoints} points
-              </span>
+            <div className={styles.progressSection}>
+              <div className={styles.progressBar}>
+                <div className={styles.progressFill} style={{ width: `${percentageScore}%` }}></div>
+              </div>
+              <div className={styles.scoreDetails}>
+                <span>
+                  Total Score: {totalEarnedPoints}/{totalPossiblePoints} points
+                </span>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Category Performance Table */}
-        <div className={styles.categorySection}>
-          <h3 className={styles.sectionTitle}>Overall Performance Summary</h3>
-          <div className={styles.tableContainer}>
-            <table className={styles.performanceTable}>
-              <thead>
-                <tr>
-                  <th>Category</th>
-                  <th>Weightage</th>
-                  <th>Items</th>
-                  <th>Total Points</th>
-                  <th>Your Score</th>
-                  <th>Percentage</th>
-                  <th>Performance</th>
-                </tr>
-              </thead>
-              <tbody>
-                {categories.map(category => (
-                  <tr key={category.id}>
-                    <td className={styles.categoryName}>{category.name}</td>
-                    <td>{category.weightage}%</td>
-                    <td>{category.completedItems}</td>
-                    <td>{category.totalMarks}</td>
-                    <td>{category.earnedMarks}</td>
-                    <td>{Math.round(category.percentage)}%</td>
-                    <td>
-                      <div className={styles.performanceBar}>
-                        <div
-                          className={`${styles.performanceFill} ${
-                            styles[getPerformanceColor(category.percentage)]
-                          }`}
-                          style={{ width: `${category.percentage}%` }}
-                        ></div>
-                      </div>
-                    </td>
+          {/* Category Performance Table */}
+          <div className={styles.categorySection}>
+            <h3 className={styles.sectionTitle}>Overall Performance Summary</h3>
+            <div className={styles.tableContainer}>
+              <table className={styles.performanceTable}>
+                <thead>
+                  <tr>
+                    <th>Category</th>
+                    <th>Weightage</th>
+                    <th>Items</th>
+                    <th>Total Points</th>
+                    <th>Your Score</th>
+                    <th>Percentage</th>
+                    <th>Performance</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {categories.map(category => (
+                    <tr key={category.id}>
+                      <td className={styles.categoryName}>{category.name}</td>
+                      <td>{category.weightage}%</td>
+                      <td>{category.completedItems}</td>
+                      <td>{category.totalMarks}</td>
+                      <td>{category.earnedMarks}</td>
+                      <td>{Math.round(category.percentage)}%</td>
+                      <td>
+                        <div className={styles.performanceBar}>
+                          <div
+                            className={`${styles.performanceFill} ${
+                              styles[getPerformanceColor(category.percentage)]
+                            }`}
+                            style={{ width: `${category.percentage}%` }}
+                          ></div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
-        </div>
 
-        {/* Performance Insights */}
-        <div className={styles.insightsSection}>
-          <div className={styles.insightsBox}>
-            <h4>Performance Insights</h4>
-            <p>
-              You performed strongly in <strong>{strongText}</strong>.
-              {hasImprovementAreas && (
-                <>
-                  {' '}
-                  You may improve your performance in <strong>{improvementText}</strong> - consider
-                  reviewing preparation strategies.
-                </>
-              )}
-            </p>
-            <div className={styles.actionButtons}>
-              <button className={styles.actionButton}>Review Assignment Messages</button>
-              <button className={styles.actionButton}>Study Schedule Tips</button>
+          {/* Performance Insights */}
+          <div className={styles.insightsSection}>
+            <div className={styles.insightsBox}>
+              <h4>Performance Insights</h4>
+              <p>
+                You performed strongly in <strong>{strongText}</strong>.
+                {hasImprovementAreas && (
+                  <>
+                    {' '}
+                    You may improve your performance in <strong>{improvementText}</strong> -
+                    consider reviewing preparation strategies.
+                  </>
+                )}
+              </p>
+              <div className={styles.actionButtons}>
+                <button className={styles.actionButton}>Review Assignment Messages</button>
+                <button className={styles.actionButton}>Study Schedule Tips</button>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Individual Assignment & Task Results */}
-        <div className={styles.assignmentSection}>
-          <h3 className={styles.sectionTitle}>Individual Assignment & Task Results</h3>
-          <div className={styles.tableContainer}>
-            <table className={styles.assignmentTable}>
-              <thead>
-                <tr>
-                  <th>Assignment Name</th>
-                  <th>Weightage</th>
-                  <th>Your Marks</th>
-                  <th>Percentage</th>
-                  <th>Status</th>
-                  <th>Feedback</th>
-                </tr>
-              </thead>
-              <tbody>
-                {tasks.slice(0, 6).map(task => (
-                  <tr key={task.id}>
-                    <td>
-                      <div className={styles.assignmentInfo}>
-                        <div className={styles.assignmentName}>{task.name}</div>
-                        <div className={styles.assignmentDate}>
-                          Submitted: {new Date(task.submissionDate).toLocaleDateString()}
-                        </div>
-                      </div>
-                    </td>
-                    <td>{task.weightage || '8'}%</td>
-                    <td>
-                      {task.earnedMarks}/{task.totalMarks}
-                    </td>
-                    <td>
-                      <span className={getPerformanceColorClass(task.percentage)}>
-                        {Math.round(task.percentage)}%
-                      </span>
-                    </td>
-                    <td>
-                      <span
-                        className={`${styles.statusBadge} ${styles[getStatusClass(task.status)]}`}
-                      >
-                        {task.status || 'On time'}
-                      </span>
-                    </td>
-                    <td>
-                      <button
-                        className={styles.feedbackButton}
-                        onClick={() => openFeedbackModal(task)}
-                      >
-                        <FontAwesomeIcon icon={faEye} className={styles.buttonIcon} />
-                        View Feedback
-                      </button>
-                    </td>
+          {/* Individual Assignment & Task Results */}
+          <div className={styles.assignmentSection}>
+            <h3 className={styles.sectionTitle}>Individual Assignment & Task Results</h3>
+            <div className={styles.tableContainer}>
+              <table className={styles.assignmentTable}>
+                <thead>
+                  <tr>
+                    <th>Assignment Name</th>
+                    <th>Weightage</th>
+                    <th>Your Marks</th>
+                    <th>Percentage</th>
+                    <th>Status</th>
+                    <th>Feedback</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+                </thead>
+                <tbody>
+                  {tasks.slice(0, 6).map(task => (
+                    <tr key={task.id}>
+                      <td>
+                        <div className={styles.assignmentInfo}>
+                          <div className={styles.assignmentName}>{task.name}</div>
+                          <div className={styles.assignmentDate}>
+                            Submitted: {new Date(task.submissionDate).toLocaleDateString()}
+                          </div>
+                        </div>
+                      </td>
+                      <td>{task.weightage || '8'}%</td>
+                      <td>
+                        {task.earnedMarks}/{task.totalMarks}
+                      </td>
+                      <td>
+                        <span className={getPerformanceColorClass(task.percentage)}>
+                          {Math.round(task.percentage)}%
+                        </span>
+                      </td>
+                      <td>
+                        <span
+                          className={`${styles.statusBadge} ${styles[getStatusClass(task.status)]}`}
+                        >
+                          {task.status || 'On time'}
+                        </span>
+                      </td>
+                      <td>
+                        <button
+                          className={styles.feedbackButton}
+                          onClick={() => openFeedbackModal(task)}
+                        >
+                          <FontAwesomeIcon icon={faEye} className={styles.buttonIcon} />
+                          View Feedback
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
 
-          {/* Mobile Cards (shown on small screens) */}
-          <div className={styles.mobileAssignments}>
-            {tasks.slice(0, 6).map(task => (
-              <div className={styles.assignmentCard} key={task.id}>
-                <div className={styles.cardHeader}>
-                  <div className={styles.assignmentName}>{task.name}</div>
-                  <span className={`${styles.statusBadge} ${styles[getStatusClass(task.status)]}`}>
-                    {task.status || 'On time'}
-                  </span>
-                </div>
-                <div className={styles.cardMeta}>
-                  <div className={styles.cardMetaItem}>
-                    <strong>Weightage:</strong> {task.weightage || '8'}%
-                  </div>
-                  <div className={styles.cardMetaItem}>
-                    <strong>Score:</strong> {task.earnedMarks}/{task.totalMarks}
-                    <span className={getPerformanceColorClass(task.percentage)}>
-                      {' '}
-                      ({Math.round(task.percentage)}%)
+            {/* Mobile Cards (shown on small screens) */}
+            <div className={styles.mobileAssignments}>
+              {tasks.slice(0, 6).map(task => (
+                <div className={styles.assignmentCard} key={task.id}>
+                  <div className={styles.cardHeader}>
+                    <div className={styles.assignmentName}>{task.name}</div>
+                    <span
+                      className={`${styles.statusBadge} ${styles[getStatusClass(task.status)]}`}
+                    >
+                      {task.status || 'On time'}
                     </span>
                   </div>
-                  <div className={styles.cardMetaItem}>
-                    <strong>Submitted:</strong> {new Date(task.submissionDate).toLocaleDateString()}
+                  <div className={styles.cardMeta}>
+                    <div className={styles.cardMetaItem}>
+                      <strong>Weightage:</strong> {task.weightage || '8'}%
+                    </div>
+                    <div className={styles.cardMetaItem}>
+                      <strong>Score:</strong> {task.earnedMarks}/{task.totalMarks}
+                      <span className={getPerformanceColorClass(task.percentage)}>
+                        {' '}
+                        ({Math.round(task.percentage)}%)
+                      </span>
+                    </div>
+                    <div className={styles.cardMetaItem}>
+                      <strong>Submitted:</strong>{' '}
+                      {new Date(task.submissionDate).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className={styles.cardActions}>
+                    <button
+                      className={styles.feedbackButton}
+                      onClick={() => openFeedbackModal(task)}
+                    >
+                      <FontAwesomeIcon icon={faEye} className={styles.buttonIcon} />
+                      View Feedback
+                    </button>
                   </div>
                 </div>
-                <div className={styles.cardActions}>
-                  <button className={styles.feedbackButton} onClick={() => openFeedbackModal(task)}>
-                    <FontAwesomeIcon icon={faEye} className={styles.buttonIcon} />
-                    View Feedback
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Teacher Feedback Section */}
-        <div className={styles.teacherFeedbackSection}>
-          <div className={styles.sectionHeader}>
-            <h3 className={styles.sectionTitle}>
-              <FontAwesomeIcon icon={faGraduationCap} className={styles.sectionIcon} />
-              Teacher Feedback - Structured feedback display with strengths and recommendations
-            </h3>
-            <div className={styles.teacherInfo}>
-              <span className={styles.teacherName}>
-                {evaluationData.teacherFeedback.teacherName}
-              </span>
-              <span className={styles.teacherTitle}>
-                {evaluationData.teacherFeedback.teacherTitle}
-              </span>
+              ))}
             </div>
           </div>
 
-          <div className={styles.feedbackContent}>
-            {/* Overall Feedback */}
-            <div className={styles.overallFeedback}>
-              <h4 className={styles.feedbackSubtitle}>Overall Assessment</h4>
-              <p className={styles.feedbackText}>{evaluationData.teacherFeedback.overall}</p>
+          {/* Teacher Feedback Section */}
+          <div className={styles.teacherFeedbackSection}>
+            <div className={styles.sectionHeader}>
+              <h3 className={styles.sectionTitle}>
+                <FontAwesomeIcon icon={faGraduationCap} className={styles.sectionIcon} />
+                Teacher Feedback - Structured feedback display with strengths and recommendations
+              </h3>
+              <div className={styles.teacherInfo}>
+                <span className={styles.teacherName}>
+                  {evaluationData.teacherFeedback.teacherName}
+                </span>
+                <span className={styles.teacherTitle}>
+                  {evaluationData.teacherFeedback.teacherTitle}
+                </span>
+              </div>
             </div>
 
-            {/* Strengths and Improvements */}
-            <div className={styles.feedbackColumns}>
-              <div className={styles.strengthsSection}>
-                <h4 className={styles.feedbackSubtitle}>
-                  <FontAwesomeIcon icon={faUser} className={styles.feedbackIcon} />
-                  Strengths
-                </h4>
-                <ul className={styles.feedbackList}>
-                  {evaluationData.teacherFeedback.strengths.map((strength, index) => (
-                    <li key={index} className={styles.feedbackItem}>
-                      <span className={styles.checkmark}>✓</span>
-                      <span className={styles.feedbackTextItem}>{strength}</span>
-                    </li>
-                  ))}
-                </ul>
+            <div className={styles.feedbackContent}>
+              {/* Overall Feedback */}
+              <div className={styles.overallFeedback}>
+                <h4 className={styles.feedbackSubtitle}>Overall Assessment</h4>
+                <p className={styles.feedbackText}>{evaluationData.teacherFeedback.overall}</p>
               </div>
 
-              <div className={styles.improvementsSection}>
-                <h4 className={styles.feedbackSubtitle}>
-                  <FontAwesomeIcon icon={faExclamationTriangle} className={styles.feedbackIcon} />
-                  Areas for Improvement
-                </h4>
-                <ul className={styles.feedbackList}>
-                  {evaluationData.teacherFeedback.improvements.map((improvement, index) => (
-                    <li key={index} className={styles.feedbackItem}>
-                      <span className={styles.arrow}>→</span>
-                      <span className={styles.feedbackTextItem}>{improvement}</span>
-                    </li>
-                  ))}
-                </ul>
+              {/* Strengths and Improvements */}
+              <div className={styles.feedbackColumns}>
+                <div className={styles.strengthsSection}>
+                  <h4 className={styles.feedbackSubtitle}>
+                    <FontAwesomeIcon icon={faUser} className={styles.feedbackIcon} />
+                    Strengths
+                  </h4>
+                  <ul className={styles.feedbackList}>
+                    {evaluationData.teacherFeedback.strengths.map((strength, index) => (
+                      <li key={index} className={styles.feedbackItem}>
+                        <span className={styles.checkmark}>✓</span>
+                        <span className={styles.feedbackTextItem}>{strength}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className={styles.improvementsSection}>
+                  <h4 className={styles.feedbackSubtitle}>
+                    <FontAwesomeIcon icon={faExclamationTriangle} className={styles.feedbackIcon} />
+                    Areas for Improvement
+                  </h4>
+                  <ul className={styles.feedbackList}>
+                    {evaluationData.teacherFeedback.improvements.map((improvement, index) => (
+                      <li key={index} className={styles.feedbackItem}>
+                        <span className={styles.arrow}>→</span>
+                        <span className={styles.feedbackTextItem}>{improvement}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Summary Cards */}
-        <div className={styles.summaryCards}>
-          <div className={styles.summaryCard}>
-            <div className={`${styles.cardNumber} ${styles.total}`}>{totalAssignments}</div>
-            <div className={styles.cardLabel}>Total Assignments</div>
-          </div>
-          <div className={styles.summaryCard}>
-            <div className={`${styles.cardNumber} ${styles.onTime}`}>{onTimeCount}</div>
-            <div className={styles.cardLabel}>On Time</div>
-          </div>
-          <div className={styles.summaryCard}>
-            <div className={`${styles.cardNumber} ${styles.late}`}>{lateCount}</div>
-            <div className={styles.cardLabel}>Late Submissions</div>
-          </div>
-          <div className={styles.summaryCard}>
-            <div className={`${styles.cardNumber} ${styles.average}`}>{averageScore}%</div>
-            <div className={styles.cardLabel}>Avg Score</div>
+          {/* Summary Cards */}
+          <div className={styles.summaryCards}>
+            <div className={styles.summaryCard}>
+              <div className={`${styles.cardNumber} ${styles.total}`}>{totalAssignments}</div>
+              <div className={styles.cardLabel}>Total Assignments</div>
+            </div>
+            <div className={styles.summaryCard}>
+              <div className={`${styles.cardNumber} ${styles.onTime}`}>{onTimeCount}</div>
+              <div className={styles.cardLabel}>On Time</div>
+            </div>
+            <div className={styles.summaryCard}>
+              <div className={`${styles.cardNumber} ${styles.late}`}>{lateCount}</div>
+              <div className={styles.cardLabel}>Late Submissions</div>
+            </div>
+            <div className={styles.summaryCard}>
+              <div className={`${styles.cardNumber} ${styles.average}`}>{averageScore}%</div>
+              <div className={styles.cardLabel}>Avg Score</div>
+            </div>
           </div>
-        </div>
-      </Container>
+        </Container>
 
-      {/* Feedback Detail Modal */}
-      <Modal
-        isOpen={feedbackModal.isOpen}
-        toggle={closeFeedbackModal}
-        size="lg"
-        className={styles.feedbackModal}
-        scrollable={true}
-        centered={true}
-      >
-        <ModalHeader toggle={closeFeedbackModal} className={styles.modalHeader}>
-          <FontAwesomeIcon icon={faAward} className={styles.modalIcon} />
-          <span className={styles.modalTitle}>Assignment Feedback Details</span>
-        </ModalHeader>
-        <ModalBody className={styles.modalBody}>
-          {feedbackModal.task && (
-            <div className={styles.feedbackModalContent}>
-              {/* Assignment Header */}
-              <div className={styles.assignmentHeader}>
-                <h4 className={styles.assignmentTitle}>{feedbackModal.task.name}</h4>
-                <div className={styles.assignmentMeta}>
-                  <span className={styles.assignmentType}>
-                    <FontAwesomeIcon icon={faGraduationCap} />
-                    {feedbackModal.task.type}
-                  </span>
-                  <span className={styles.assignmentDate}>
-                    <FontAwesomeIcon icon={faCalendarAlt} />
-                    Due: {new Date(feedbackModal.task.dueDate).toLocaleDateString()}
-                  </span>
+        {/* Feedback Detail Modal */}
+        <Modal
+          isOpen={feedbackModal.isOpen}
+          toggle={closeFeedbackModal}
+          size="lg"
+          className={styles.feedbackModal}
+          scrollable={true}
+          centered={true}
+        >
+          <ModalHeader toggle={closeFeedbackModal} className={styles.modalHeader}>
+            <FontAwesomeIcon icon={faAward} className={styles.modalIcon} />
+            <span className={styles.modalTitle}>Assignment Feedback Details</span>
+          </ModalHeader>
+          <ModalBody className={styles.modalBody}>
+            {feedbackModal.task && (
+              <div className={styles.feedbackModalContent}>
+                {/* Assignment Header */}
+                <div className={styles.assignmentHeader}>
+                  <h4 className={styles.assignmentTitle}>{feedbackModal.task.name}</h4>
+                  <div className={styles.assignmentMeta}>
+                    <span className={styles.assignmentType}>
+                      <FontAwesomeIcon icon={faGraduationCap} />
+                      {feedbackModal.task.type}
+                    </span>
+                    <span className={styles.assignmentDate}>
+                      <FontAwesomeIcon icon={faCalendarAlt} />
+                      Due: {new Date(feedbackModal.task.dueDate).toLocaleDateString()}
+                    </span>
+                  </div>
                 </div>
-              </div>
 
-              {/* Performance Summary */}
-              <div className={styles.performanceSummary}>
-                <div className={styles.performanceItem}>
-                  <div className={styles.performanceLabel}>Your Score</div>
-                  <div
-                    className={`${styles.performanceValue} ${getPerformanceColorClass(
-                      feedbackModal.task.percentage,
-                    )}`}
-                  >
-                    {feedbackModal.task.earnedMarks}/{feedbackModal.task.totalMarks}
-                    <span className={styles.percentage}>({feedbackModal.task.percentage}%)</span>
+                {/* Performance Summary */}
+                <div className={styles.performanceSummary}>
+                  <div className={styles.performanceItem}>
+                    <div className={styles.performanceLabel}>Your Score</div>
+                    <div
+                      className={`${styles.performanceValue} ${getPerformanceColorClass(
+                        feedbackModal.task.percentage,
+                      )}`}
+                    >
+                      {feedbackModal.task.earnedMarks}/{feedbackModal.task.totalMarks}
+                      <span className={styles.percentage}>({feedbackModal.task.percentage}%)</span>
+                    </div>
                   </div>
-                </div>
-                <div className={styles.performanceItem}>
-                  <div className={styles.performanceLabel}>Weightage</div>
-                  <div className={styles.performanceValue}>
-                    <FontAwesomeIcon icon={faPercent} />
-                    {feedbackModal.task.weightage}%
+                  <div className={styles.performanceItem}>
+                    <div className={styles.performanceLabel}>Weightage</div>
+                    <div className={styles.performanceValue}>
+                      <FontAwesomeIcon icon={faPercent} />
+                      {feedbackModal.task.weightage}%
+                    </div>
                   </div>
-                </div>
-                <div className={styles.performanceItem}>
-                  <div className={styles.performanceLabel}>Status</div>
-                  <div
-                    className={`${styles.statusValue} ${
-                      styles[getStatusClass(feedbackModal.task.status)]
-                    }`}
-                  >
-                    {feedbackModal.task.status}
+                  <div className={styles.performanceItem}>
+                    <div className={styles.performanceLabel}>Status</div>
+                    <div
+                      className={`${styles.statusValue} ${
+                        styles[getStatusClass(feedbackModal.task.status)]
+                      }`}
+                    >
+                      {feedbackModal.task.status}
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              {/* Teacher Feedback */}
-              <div className={styles.teacherFeedbackDetail}>
-                <h5 className={styles.feedbackTitle}>
-                  <FontAwesomeIcon icon={faUser} />
-                  Teacher Feedback
-                </h5>
-                <div className={styles.feedbackText}>{feedbackModal.task.teacherFeedback}</div>
-              </div>
-
-              {/* Additional Details */}
-              <div className={styles.additionalDetails}>
-                <div className={styles.detailItem}>
-                  <span className={styles.detailLabel}>Submission Date:</span>
-                  <span className={styles.detailValue}>
-                    {new Date(feedbackModal.task.submissionDate).toLocaleDateString()} at{' '}
-                    {new Date(feedbackModal.task.submissionDate).toLocaleTimeString()}
-                  </span>
+                {/* Teacher Feedback */}
+                <div className={styles.teacherFeedbackDetail}>
+                  <h5 className={styles.feedbackTitle}>
+                    <FontAwesomeIcon icon={faUser} />
+                    Teacher Feedback
+                  </h5>
+                  <div className={styles.feedbackText}>{feedbackModal.task.teacherFeedback}</div>
                 </div>
-                <div className={styles.detailItem}>
-                  <span className={styles.detailLabel}>Grade Category:</span>
-                  <span className={styles.detailValue}>{feedbackModal.task.category}</span>
+
+                {/* Additional Details */}
+                <div className={styles.additionalDetails}>
+                  <div className={styles.detailItem}>
+                    <span className={styles.detailLabel}>Submission Date:</span>
+                    <span className={styles.detailValue}>
+                      {new Date(feedbackModal.task.submissionDate).toLocaleDateString()} at{' '}
+                      {new Date(feedbackModal.task.submissionDate).toLocaleTimeString()}
+                    </span>
+                  </div>
+                  <div className={styles.detailItem}>
+                    <span className={styles.detailLabel}>Grade Category:</span>
+                    <span className={styles.detailValue}>{feedbackModal.task.category}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        </ModalBody>
-        <ModalFooter className={styles.modalFooter}>
-          <Button color="primary" onClick={closeFeedbackModal}>
-            <FontAwesomeIcon icon={faTimes} className="me-2" />
-            Close
-          </Button>
-        </ModalFooter>
-      </Modal>
-    </div>
+            )}
+          </ModalBody>
+          <ModalFooter className={styles.modalFooter}>
+            <Button color="primary" onClick={closeFeedbackModal}>
+              <FontAwesomeIcon icon={faTimes} className="me-2" />
+              Close
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    </>
   );
 };
 
diff --git a/src/components/EductionPortal/EvaluationResults/EvaluationResults.module.css b/src/components/EductionPortal/EvaluationResults/EvaluationResults.module.css
index 558acbdf98..785ca6d60d 100644
--- a/src/components/EductionPortal/EvaluationResults/EvaluationResults.module.css
+++ b/src/components/EductionPortal/EvaluationResults/EvaluationResults.module.css
@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-property-value-keyword-no-deprecated, no-descending-specificity */
+
 /* ============================================================================
    EVALUATION RESULTS - CLEAN ACADEMIC DASHBOARD
    Modern table-based design matching the provided mockup
@@ -28,8 +30,53 @@
   min-height: 100vh;
   background-color: var(--bg-light);
   padding: 0;
-  margin-left: 0;
-  transition: none;
+  margin-left: 200px;
+  transition: margin-left 0.3s ease;
+}
+
+/* When sidebar is minimized, expand the content */
+.evaluationResultsPage[data-sidebar-minimized='true'] {
+  margin-left: 70px;
+}
+
+@media (width <= 991px) {
+  .evaluationResultsPage {
+    margin-left: 180px;
+  }
+
+  .evaluationResultsPage[data-sidebar-minimized='true'] {
+    margin-left: 70px;
+  }
+}
+
+@media (width <= 767px) {
+  .evaluationResultsPage {
+    margin-left: 240px;
+  }
+
+  .evaluationResultsPage[data-sidebar-minimized='true'] {
+    margin-left: 70px;
+  }
+}
+
+@media (width <= 480px) {
+  .evaluationResultsPage {
+    margin-left: 220px;
+  }
+
+  .evaluationResultsPage[data-sidebar-minimized='true'] {
+    margin-left: 70px;
+  }
+}
+
+@media (width <= 359px) {
+  .evaluationResultsPage {
+    margin-left: 200px;
+  }
+
+  .evaluationResultsPage[data-sidebar-minimized='true'] {
+    margin-left: 70px;
+  }
 }
 
 /* ============================================================================
@@ -451,6 +498,7 @@
   color: var(--text-dark);
   font-size: 0.9rem;
   line-height: 1.3;
+  word-break: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -768,6 +816,14 @@
     padding: 0 1rem;
   }
 
+  /* Keep headers visible when scrolling horizontally */
+  .assignmentTable thead th {
+    position: sticky;
+    top: 0;
+    background: #f8f9fa;
+    z-index: 1;
+  }
+
   .categoryTable,
   .assignmentTable {
     min-width: 600px;
@@ -782,14 +838,6 @@
     white-space: nowrap;
   }
 
-  /* Keep headers visible when scrolling horizontally */
-  .assignmentTable thead th {
-    position: sticky;
-    top: 0;
-    background: #f8f9fa;
-    z-index: 1;
-  }
-
   .teacherFeedbackSection {
     padding: 1.25rem;
     margin: 0 0 1.25rem;
@@ -1193,7 +1241,8 @@
 .feedbackTextItem {
   flex: 1 1 auto;
   min-width: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 /* ============================================================================
@@ -1415,16 +1464,16 @@
    ============================================================================ */
 
 /* Tablets (768px and below) */
-@media (768px <= width <= 991px) {
+@media (width <= 991px) and (width >= 768px) {
   .evaluationResultsPage {
-    margin-left: 0;
+    margin-left: 180px;
   }
 }
 
 /* Mobile phones (767px and below) */
 @media (width <= 767px) {
   .evaluationResultsPage {
-    margin-left: 0;
+    margin-left: 240px;
   }
 
   .headerSection {
@@ -1533,7 +1582,7 @@
 /* Mobile phones (480px and below) */
 @media (width <= 480px) {
   .evaluationResultsPage {
-    margin-left: 0;
+    margin-left: 220px;
   }
 
   .headerSection {
@@ -1631,7 +1680,7 @@
 /* Small phones (below 360px) */
 @media (width <= 359px) {
   .evaluationResultsPage {
-    margin-left: 0;
+    margin-left: 200px;
   }
 
   .pageTitle {
diff --git a/src/components/EductionPortal/EvaluationResultsWrapper.jsx b/src/components/EductionPortal/EvaluationResultsWrapper.jsx
index 0fc32b7484..db7046e553 100644
--- a/src/components/EductionPortal/EvaluationResultsWrapper.jsx
+++ b/src/components/EductionPortal/EvaluationResultsWrapper.jsx
@@ -1,3 +1,13 @@
+import React from 'react';
+import { SidebarProvider } from './SidebarContext';
 import EvaluationResults from './EvaluationResults/EvaluationResults';
 
-export default EvaluationResults;
+const EvaluationResultsWithSidebar = props => {
+  return (
+    <SidebarProvider>
+      <EvaluationResults {...props} />
+    </SidebarProvider>
+  );
+};
+
+export default EvaluationResultsWithSidebar;
diff --git a/src/components/EductionPortal/Login/EPLogin.jsx b/src/components/EductionPortal/Login/EPLogin.jsx
index 1e75393946..99d506140c 100644
--- a/src/components/EductionPortal/Login/EPLogin.jsx
+++ b/src/components/EductionPortal/Login/EPLogin.jsx
@@ -20,19 +20,12 @@ function EPLogin(props) {
 
   // push to dashboard if user is authenticated
   useEffect(() => {
-    if (auth.user.access) {
-      const access = auth.user.access;
-      const hasGEFlag = Object.hasOwn(access, 'canAccessGEPortal');
-      const canAccessEP = hasGEFlag ? access.canAccessGEPortal : access.canAccessBMPortal;
-      if (!canAccessEP) return;
-
-      sessionStorage.removeItem('gePortalLoggedOut');
+    if (auth.user.access && auth.user.access.canAccessGEPortal) {
       history.push(prevLocation.pathname);
     }
-  }, [auth.user.access, history, prevLocation.pathname]);
+  }, []);
   useEffect(() => {
     if (hasAccess) {
-      sessionStorage.removeItem('gePortalLoggedOut');
       history.push(prevLocation.pathname);
     }
   }, [hasAccess, history, prevLocation.pathname]);
@@ -71,20 +64,19 @@ function EPLogin(props) {
     }
     const res = await dispatch(loginBMUser({ email: enteredEmail, password: enterPassword }));
     // server side error validation
-    if (res.statusText !== 'OK') {
-      if (res.status === 422) {
+    if (!res || res.status !== 200) {
+      if (res && res.status === 422) {
         return setValidationError({
           label: res.data.label,
           message: res.data.message,
         });
       }
       return setValidationError({
-        label: '',
-        message: '',
+        label: 'form',
+        message: 'Login failed. Please check your credentials and try again.',
       });
     }
     // initiate push to EP if validated (ie received token)
-    sessionStorage.removeItem('gePortalLoggedOut');
     return setHasAccess(!!res.data.token);
   };
 
@@ -125,6 +117,9 @@ function EPLogin(props) {
             <FormFeedback>{validationError.message}</FormFeedback>
           )}
         </FormGroup>
+        {validationError && validationError.label === 'form' && (
+          <p style={{ color: 'red', marginTop: '0.5rem' }}>{validationError.message}</p>
+        )}
         <Button disabled={!enteredEmail || !enterPassword}>Submit</Button>
       </Form>
     </div>
diff --git a/src/components/EductionPortal/SideBar/SideBar.jsx b/src/components/EductionPortal/SideBar/SideBar.jsx
new file mode 100644
index 0000000000..309e8f951a
--- /dev/null
+++ b/src/components/EductionPortal/SideBar/SideBar.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { useSidebar } from '../SidebarContext';
+import styles from './SideBar.module.css';
+
+const SideBar = () => {
+  const location = useLocation();
+  const authUser = useSelector(state => state.auth?.user);
+  const { isMinimized, setIsMinimized } = useSidebar();
+
+  const menuItems = [
+    { icon: '🏠', label: 'Homepage', path: '/educationportal' },
+    { icon: '📊', label: 'Knowledge Evaluation', path: '#' },
+    { icon: '📋', label: 'Past Lesson Plans', path: '#' },
+    { icon: '⭐', label: 'My Saved Interests', path: '#' },
+    { icon: '📈', label: 'Evaluation results', path: '/educationportal/evaluation-results' },
+    { icon: '🏗️', label: 'Build Lesson Plan', path: '#' },
+  ];
+
+  const isActive = path => path !== '#' && location.pathname === path;
+
+  return (
+    <aside className={`${styles.sidebar} ${isMinimized ? styles.minimized : ''}`}>
+      {/* User Welcome Section */}
+      <div className={styles.userSection}>
+        <div className={styles.welcomeIcon}>👋</div>
+        {!isMinimized && (
+          <>
+            <div className={styles.welcomeText}>
+              <div className={styles.welcomeLabel}>Welcome</div>
+              <div className={styles.userName}>{authUser?.firstName || 'Student'}</div>
+            </div>
+            <div className={styles.notifyIcon}>🔔</div>
+          </>
+        )}
+        {isMinimized && (
+          <button
+            className={styles.toggleButton}
+            onClick={() => setIsMinimized(!isMinimized)}
+            title="Expand sidebar"
+            aria-label="Expand sidebar"
+          >
+            ➜
+          </button>
+        )}
+      </div>
+
+      {/* Toggle Button - Only show when expanded */}
+      {!isMinimized && (
+        <div className={styles.toggleButtonContainer}>
+          <button
+            className={styles.minimizeBtn}
+            onClick={() => setIsMinimized(!isMinimized)}
+            title="Minimize sidebar"
+            aria-label="Minimize sidebar"
+          >
+            ⬅️
+          </button>
+        </div>
+      )}
+
+      {/* Navigation Menu */}
+      <nav className={styles.nav}>
+        <ul className={styles.menuList}>
+          {menuItems.map(item => (
+            <li key={item.label} className={styles.menuItem}>
+              {item.path !== '#' ? (
+                <NavLink
+                  to={item.path}
+                  className={`${styles.menuLink} ${isActive(item.path) ? styles.active : ''}`}
+                >
+                  <span className={styles.icon}>{item.icon}</span>
+                  <span className={styles.label}>{item.label}</span>
+                </NavLink>
+              ) : (
+                <div className={styles.menuLink}>
+                  <span className={styles.icon}>{item.icon}</span>
+                  <span className={styles.label}>{item.label}</span>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+};
+
+export default SideBar;
diff --git a/src/components/EductionPortal/SideBar/SideBar.module.css b/src/components/EductionPortal/SideBar/SideBar.module.css
new file mode 100644
index 0000000000..b1695c0692
--- /dev/null
+++ b/src/components/EductionPortal/SideBar/SideBar.module.css
@@ -0,0 +1,449 @@
+/* stylelint-disable declaration-property-value-keyword-no-deprecated, no-descending-specificity */
+
+/* ===== SIDEBAR CONTAINER ===== */
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 100vh;
+  background-color: #f5f5f5;
+  border-right: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  z-index: 1000;
+  transition: width 0.3s ease;
+}
+
+.sidebar.minimized {
+  width: 70px;
+}
+
+.sidebar.minimized .label,
+.sidebar.minimized .welcomeText,
+.sidebar.minimized .toggleButtonContainer {
+  display: none;
+}
+
+/* ===== USER SECTION ===== */
+.userSection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.welcomeIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.welcomeText {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.welcomeLabel {
+  font-size: 11px;
+  color: #999;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.userName {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  word-break: break-word;
+}
+
+.notifyIcon {
+  font-size: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* ===== NAVIGATION ===== */
+.nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.menuList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menuItem {
+  margin: 0;
+  padding: 0;
+}
+
+.menuLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  color: #333;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+  min-height: 44px;
+}
+
+.menuLink:hover {
+  background-color: #efefef;
+}
+
+.menuLink.active {
+  background-color: #e0e7ff;
+  color: #4f46e5;
+}
+
+.icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  width: 18px;
+  text-align: center;
+}
+
+.label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== TOGGLE BUTTONS ===== */
+.toggleButtonContainer {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.minimizeBtn {
+  background: none;
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.minimizeBtn:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.2s ease;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.toggleButton:hover {
+  background-color: #efefef;
+}
+
+/* ===== RESPONSIVE - DESKTOP (≥992px) ===== */
+@media (width >= 992px) {
+  /* Desktop: sidebar visible by default */
+}
+
+/* ===== RESPONSIVE - TABLET (768px - 991px) ===== */
+@media (width <= 991px) {
+  .sidebar {
+    width: 180px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .userSection {
+    padding: 10px;
+    gap: 6px;
+  }
+
+  .welcomeIcon {
+    font-size: 16px;
+  }
+
+  .welcomeLabel {
+    font-size: 10px;
+  }
+
+  .userName {
+    font-size: 11px;
+  }
+
+  .notifyIcon {
+    font-size: 14px;
+  }
+
+  .menuLink {
+    padding: 8px 10px;
+    font-size: 12px;
+    gap: 6px;
+  }
+
+  .icon {
+    font-size: 12px;
+    width: 16px;
+  }
+}
+
+/* ===== RESPONSIVE - MOBILE (≤767px) ===== */
+@media (width <= 767px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 240px;
+    height: 100vh;
+    background-color: #f5f5f5;
+    border-right: 1px solid #ddd;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    z-index: 1000;
+    transition: width 0.3s ease;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 12px;
+    border-bottom: 1px solid #ddd;
+    background-color: #fff;
+  }
+
+  .welcomeIcon {
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .welcomeText {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .welcomeLabel {
+    font-size: 10px;
+    color: #999;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .userName {
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    word-break: break-word;
+  }
+
+  .notifyIcon {
+    font-size: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+  }
+
+  .notifyIcon:active {
+    background-color: #e0e0e0;
+  }
+
+  .nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+  }
+
+  .menuList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .menuItem {
+    margin: 0;
+    padding: 0;
+  }
+
+  .menuLink {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    color: #333;
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    min-height: 48px;
+  }
+
+  .menuLink:active {
+    background-color: #f0f0f0;
+  }
+
+  .menuLink:hover {
+    background-color: #efefef;
+  }
+
+  .menuLink.active {
+    background-color: #e0e7ff;
+    color: #4f46e5;
+    border-left: 3px solid #4f46e5;
+    padding-left: 11px;
+  }
+
+  .icon {
+    font-size: 16px;
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+  }
+
+  .label {
+    flex: 1;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: break-word;
+  }
+}
+
+/* ===== RESPONSIVE - SMALL PHONES (≤480px) ===== */
+@media (width <= 480px) {
+  .sidebar {
+    width: 220px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    padding: 12px 10px;
+  }
+
+  .welcomeIcon {
+    font-size: 16px;
+  }
+
+  .userName {
+    font-size: 11px;
+  }
+
+  .menuLink {
+    padding: 11px 12px;
+    font-size: 12px;
+    gap: 8px;
+  }
+
+  .icon {
+    font-size: 14px;
+    width: 18px;
+  }
+}
+
+/* ===== RESPONSIVE - EXTRA SMALL (≤360px) ===== */
+@media (width <= 359px) {
+  .sidebar {
+    width: 200px;
+  }
+
+  .sidebar.minimized {
+    width: 70px;
+  }
+
+  .sidebar.minimized .label,
+  .sidebar.minimized .welcomeText,
+  .sidebar.minimized .toggleButtonContainer {
+    display: none;
+  }
+
+  .userSection {
+    padding: 10px 8px;
+    gap: 6px;
+  }
+
+  .welcomeIcon {
+    font-size: 14px;
+  }
+
+  .welcomeLabel {
+    font-size: 9px;
+  }
+
+  .userName {
+    font-size: 10px;
+  }
+
+  .menuLink {
+    padding: 10px;
+    font-size: 11px;
+    gap: 6px;
+    min-height: 44px;
+  }
+
+  .icon {
+    font-size: 12px;
+    width: 16px;
+  }
+}
diff --git a/src/components/EductionPortal/SidebarContext.jsx b/src/components/EductionPortal/SidebarContext.jsx
index 574745d655..51664b0fd1 100644
--- a/src/components/EductionPortal/SidebarContext.jsx
+++ b/src/components/EductionPortal/SidebarContext.jsx
@@ -1,28 +1,15 @@
-import React, { createContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useState } from 'react';
 
 export const SidebarContext = createContext();
 
 export const SidebarProvider = ({ children }) => {
-  const [isMinimized, setIsMinimized] = useState(() => {
-    try {
-      return localStorage.getItem('ep.sidebar.minimized') === 'true';
-    } catch {
-      // localStorage unavailable (private browsing / SSR)
-      return false;
-    }
-  });
+  const [isMinimized, setIsMinimized] = useState(false);
 
-  useEffect(() => {
-    try {
-      localStorage.setItem('ep.sidebar.minimized', isMinimized ? 'true' : 'false');
-    } catch {
-      // localStorage unavailable — silently ignore
-    }
-  }, [isMinimized]);
-
-  const value = useMemo(() => ({ isMinimized, setIsMinimized }), [isMinimized]);
-
-  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
+  return (
+    <SidebarContext.Provider value={{ isMinimized, setIsMinimized }}>
+      {children}
+    </SidebarContext.Provider>
+  );
 };
 
 export const useSidebar = () => {
diff --git a/src/components/EductionPortal/StudentTasks/StudentDashboard.jsx b/src/components/EductionPortal/StudentTasks/StudentDashboard.jsx
index d64a5b4598..2f3f7746f5 100644
--- a/src/components/EductionPortal/StudentTasks/StudentDashboard.jsx
+++ b/src/components/EductionPortal/StudentTasks/StudentDashboard.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import Sidebar from './StudentSidebar';
 import styles from './StudentDashboard.module.css';
 
 const LIFE_CARD_IDS = ['lc-a', 'lc-b', 'lc-c', 'lc-d', 'lc-e', 'lc-f'];
@@ -43,6 +44,7 @@ export default function StudentDashboard() {
 
   return (
     <div className={`${styles.pageLayout} ${darkMode ? styles.pageLayoutDark : ''}`}>
+      <Sidebar active="home" />
       <div className={`${styles.content} ${darkMode ? styles.contentDark : ''}`}>
         <div className={styles.headerRow}>
           <h1 className={styles.title}>Dashboard</h1>
diff --git a/src/components/EductionPortal/StudentTasks/StudentDashboard.module.css b/src/components/EductionPortal/StudentTasks/StudentDashboard.module.css
index f5515ef8dc..fe18de7f51 100644
--- a/src/components/EductionPortal/StudentTasks/StudentDashboard.module.css
+++ b/src/components/EductionPortal/StudentTasks/StudentDashboard.module.css
@@ -1,5 +1,6 @@
 /* stylelint-disable  */
 .pageLayout {
+  display: flex;
   min-height: calc(100vh - 72px);
   background: #f9fafb;
 }
diff --git a/src/components/EductionPortal/StudentTasks/StudentSidebar.jsx b/src/components/EductionPortal/StudentTasks/StudentSidebar.jsx
new file mode 100644
index 0000000000..1aab8f1904
--- /dev/null
+++ b/src/components/EductionPortal/StudentTasks/StudentSidebar.jsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import styles from './StudentSidebar.module.css';
+
+function Icon({ name }) {
+  const commonProps = { 'aria-hidden': 'true', focusable: 'false' };
+  const icons = {
+    menu: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M3 6h18M3 12h18M3 18h18"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    home: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+    chart: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M4 20V6m6 14V10m6 10V4"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    folder: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+        />
+      </svg>
+    ),
+    star: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="m12 3 2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17.8 6.2 20.8l1.1-6.5L2.6 9.8l6.5-.9z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+        />
+      </svg>
+    ),
+    calendar: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M7 3v3m10-3v3M4 8h16M5 6h14a1 1 0 0 1 1 1v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a1 1 0 0 1 1-1z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    pencil: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M3 21l3.8-1 11-11a2.2 2.2 0 0 0-3.1-3.1L3.7 16.9 3 21z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+    cog: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm8 4a7.9 7.9 0 0 0-.1-1l2-1.6-1.9-3.3-2.4 1a8 8 0 0 0-1.7-1l-.3-2.6H10.4l-.3 2.6a8 8 0 0 0-1.7 1l-2.4-1-1.9 3.3 2 1.6a8 8 0 0 0 0 2l-2 1.6 1.9 3.3 2.4-1a8 8 0 0 0 1.7 1l.3 2.6h3.6l.3-2.6a8 8 0 0 0 1.7-1l2.4 1 1.9-3.3-2-1.6c.1-.3.1-.7.1-1Z"
+          stroke="currentColor"
+          strokeWidth="1.2"
+          fill="none"
+        />
+      </svg>
+    ),
+    logout: (
+      <svg viewBox="0 0 24 24" {...commonProps}>
+        <path
+          d="M9 8V4a2 2 0 0 1 2-2h8v20h-8a2 2 0 0 1-2-2v-4M5 12h10M12 9l3 3-3 3"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  };
+  return <span className={styles.icon}>{icons[name] || null}</span>;
+}
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default function Sidebar({ active, onLogout }) {
+  const darkMode = useSelector(state => state.theme?.darkMode);
+  const safeLogout = onLogout || (() => {});
+
+  return (
+    <aside
+      className={`${styles.sidebar} ${darkMode ? styles.sidebarDark : ''}`}
+      aria-label="Section navigation"
+    >
+      <button className={styles.hamburger} type="button" aria-label="Open menu">
+        <Icon name="menu" />
+      </button>
+
+      <nav className={styles.nav} aria-label="Primary">
+        {['home', 'chart', 'folder', 'star', 'calendar', 'pencil'].map(icon => (
+          <button
+            key={icon}
+            className={`${styles.navItem} ${active === icon ? styles.active : ''}`}
+            type="button"
+            aria-label={icon}
+          >
+            <Icon name={icon} />
+          </button>
+        ))}
+      </nav>
+
+      <div className={styles.bottom}>
+        <button className={styles.bottomIcon} type="button" aria-label="Settings">
+          <Icon name="cog" />
+        </button>
+        <button
+          className={styles.bottomIcon}
+          type="button"
+          onClick={safeLogout}
+          aria-label="Log out"
+        >
+          <Icon name="logout" />
+        </button>
+      </div>
+    </aside>
+  );
+}
+
+Sidebar.propTypes = {
+  active: PropTypes.string,
+  onLogout: PropTypes.func,
+};
+
+Sidebar.defaultProps = {
+  active: 'home',
+  onLogout: undefined,
+};
diff --git a/src/components/EductionPortal/StudentTasks/StudentSidebar.module.css b/src/components/EductionPortal/StudentTasks/StudentSidebar.module.css
new file mode 100644
index 0000000000..74bef09372
--- /dev/null
+++ b/src/components/EductionPortal/StudentTasks/StudentSidebar.module.css
@@ -0,0 +1,142 @@
+/* stylelint-disable  */
+:root {
+  --rail-w: 72px;
+  --header-h: 72px;
+  --rail-bg: #fff;
+  --rail-border: #ececec;
+  --icon: #000;
+  --pill: #dedede;
+  --pill-hover: #e9e9e9;
+  --radius: 10px;
+}
+
+/* ✅ Fixed to viewport, not within scrollable container */
+.sidebar {
+  position: sticky;
+  top: 72px;
+  width: 72px;
+  height: calc(100vh - 72px);
+  background: #fff;
+  border-right: 1px solid #ececec;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden auto;
+  scrollbar-width: thin;
+}
+
+.hamburger {
+  width: 44px;
+  height: 44px;
+  margin: 8px 0 6px;
+  border: none;
+  background: transparent;
+  color: var(--icon);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.icon {
+  width: 22px;
+  height: 22px;
+  color: var(--icon);
+  display: inline-grid;
+  place-items: center;
+}
+
+.nav {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  flex: 1;
+  padding-bottom: 110px;
+  box-sizing: border-box;
+}
+
+.navItem {
+  width: 100%;
+  height: 56px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.navItem:hover {
+  background: var(--pill-hover);
+}
+
+.active {
+  background: var(--pill);
+}
+
+.bottom {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  border-top: 1px solid #ececec;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0 12px;
+  box-sizing: border-box;
+  z-index: 5;
+}
+
+.bottomIcon {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: #000;
+  cursor: pointer;
+}
+
+.bottomIcon:hover {
+  background: var(--pill-hover);
+}
+
+/* ===== Dark mode for sidebar ===== */
+.sidebarDark {
+  background: #0f172a;
+  border-right: 1px solid #1f2937;
+}
+
+.sidebarDark .icon {
+  color: #e5e7eb;
+}
+
+.sidebarDark .navItem:hover {
+  background: #111827;
+}
+
+.sidebarDark .active {
+  background: #1f2937;
+}
+
+.sidebarDark .bottom {
+  background: #0f172a;
+  border-top: 1px solid #1f2937;
+}
+
+.sidebarDark .bottomIcon {
+  color: #e5e7eb;
+}
+
+.sidebarDark .bottomIcon:hover {
+  background: #111827;
+}
diff --git a/src/components/EductionPortal/StudentTasks/StudentTasks.jsx b/src/components/EductionPortal/StudentTasks/StudentTasks.jsx
index d521f3aaaf..d56ad0e5aa 100644
--- a/src/components/EductionPortal/StudentTasks/StudentTasks.jsx
+++ b/src/components/EductionPortal/StudentTasks/StudentTasks.jsx
@@ -1,15 +1,51 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import Sidebar from './StudentSidebar';
 import TaskCard from './TaskCard';
 import RubricModal from './RubricModal';
+import { fetchStudentTasks } from '../../../actions/studentTasks';
 import styles from './StudentTasks.module.css';
 
 const FILTER_OPTIONS = ['All', 'Incomplete', 'Submitted', 'Graded'];
 const GROUP_OPTIONS = ['subject', 'colorLevel', 'activityGroup', 'strategy'];
 const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
+// Map API status values to display labels used by TaskCard / filters
+const STATUS_DISPLAY_MAP = {
+  assigned: 'Incomplete',
+  in_progress: 'Incomplete',
+  completed: 'Submitted',
+  graded: 'Graded',
+};
+
+// Normalise a Redux task (flat format from actions) into the shape TaskCard expects
+const normalizeTask = task => ({
+  ...task,
+  title: task.subtitle || task.course_name || 'Untitled Task',
+  subject: task.subject?.name || task.course_name || 'Unknown Subject',
+  colorLevel: task.color_level || 'Unknown',
+  activityGroup: task.activity_group || 'Unassigned',
+  strategy: task.strategy || 'General',
+  description: task.subtitle || '',
+  status: STATUS_DISPLAY_MAP[task.status] || 'Incomplete',
+  progress:
+    task.suggested_total_hours > 0
+      ? Math.round((task.logged_hours / task.suggested_total_hours) * 100)
+      : 0,
+  dueDate: task.dueAt ? new Date(task.dueAt).toISOString().split('T')[0] : 'N/A',
+  logged_hours: task.logged_hours || 0,
+  suggested_total_hours: task.suggested_total_hours || 0,
+});
+
 const StudentTasks = () => {
+  const dispatch = useDispatch();
   const darkMode = useSelector(state => state.theme?.darkMode);
+  const reduxTasks = useSelector(state => state.studentTasks?.taskItems || []);
+  const loading = useSelector(state => state.studentTasks?.fetching);
+
+  useEffect(() => {
+    dispatch(fetchStudentTasks());
+  }, [dispatch]);
 
   useEffect(() => {
     const htmlEl = document.documentElement;
@@ -31,50 +67,7 @@ const StudentTasks = () => {
     };
   }, [darkMode]);
 
-  const [tasks] = useState([
-    {
-      id: 1,
-      title: 'Activity 1: Technology, Art, Trades, Health',
-      subject: 'Technology / Art / Health',
-      colorLevel: 'Red',
-      activityGroup: 'Creative Projects',
-      strategy: 'Teaching Strategy',
-      description:
-        'Choose a person listed in the Technology Subject Page and a related trade. Visit at least 1 location and observe 5 professionals in action. Create a blog post or video.',
-      status: 'Incomplete',
-      progress: 25,
-      dueDate: '2025-10-15',
-      rubric: ['Clarity', 'Creativity', 'Effort'],
-    },
-    {
-      id: 2,
-      title: 'Activity 2: Math, Science, Innovation',
-      subject: 'Math / Science',
-      colorLevel: 'Blue',
-      activityGroup: 'Research Assignments',
-      strategy: 'Life Strategy',
-      description:
-        'Research patterns of climate bands and write a pamphlet showing your findings. Distribute pamphlets to students.',
-      status: 'Submitted',
-      progress: 50,
-      dueDate: '2025-10-20',
-      rubric: ['Accuracy', 'Presentation', 'Depth of Research'],
-    },
-    {
-      id: 3,
-      title: 'Activity 3: Social Sciences, English, Values',
-      subject: 'Social Sciences / English',
-      colorLevel: 'Violet',
-      activityGroup: 'Written Work',
-      strategy: 'Teaching Strategy',
-      description:
-        'Write a 10–15 page research paper on cultural development. Include fictional story and empathy-driven examples.',
-      status: 'Graded',
-      progress: 80,
-      dueDate: '2025-10-25',
-      rubric: ['Critical Thinking', 'Empathy', 'Writing Style'],
-    },
-  ]);
+  const tasks = useMemo(() => reduxTasks.map(normalizeTask), [reduxTasks]);
 
   const [selectedTask, setSelectedTask] = useState(null);
   const [filter, setFilter] = useState('All');
@@ -139,6 +132,8 @@ const StudentTasks = () => {
       {darkMode && <div className={styles.darkBackdrop} aria-hidden="true" />}
 
       <div className={`${styles.pageLayout} ${darkMode ? styles.pageLayoutDark : ''}`}>
+        <Sidebar />
+
         <div
           className={`${styles.content} ${darkMode ? styles.contentDark : ''}`}
           style={{ paddingBottom: '4.5rem' }}
@@ -171,7 +166,12 @@ const StudentTasks = () => {
             ))}
           </div>
 
+          {loading && <p className={styles.loadingMsg}>Loading tasks…</p>}
+
           <div className={styles.taskList}>
+            {!loading && groupKeys.length === 0 && (
+              <p className={styles.emptyMsg}>No tasks found.</p>
+            )}
             {groupKeys.map(key => (
               <div key={key} className={styles.subjectGroup}>
                 <button
diff --git a/src/components/EductionPortal/StudentTasks/StudentTasks.module.css b/src/components/EductionPortal/StudentTasks/StudentTasks.module.css
index 2bd5b62fd7..c7009e44c5 100644
--- a/src/components/EductionPortal/StudentTasks/StudentTasks.module.css
+++ b/src/components/EductionPortal/StudentTasks/StudentTasks.module.css
@@ -4,6 +4,8 @@
    PAGE LAYOUT
 =========================== */
 .pageLayout {
+  display: flex;
+  flex-direction: row;
   width: 100%;
   min-height: calc(100vh - 72px);
   background-color: #f9fafb;
diff --git a/src/components/EductionPortal/StudentTasks/TaskDetails.jsx b/src/components/EductionPortal/StudentTasks/TaskDetails.jsx
index 0579625843..33a10ff48c 100644
--- a/src/components/EductionPortal/StudentTasks/TaskDetails.jsx
+++ b/src/components/EductionPortal/StudentTasks/TaskDetails.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams, useLocation } from 'react-router-dom';
+import Sidebar from './StudentSidebar';
 import styles from './TaskDetails.module.css';
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 
@@ -51,6 +52,8 @@ const TaskDetails = () => {
 
   return (
     <div className={`${styles.pageLayout} ${darkMode ? styles.pageLayoutDark : ''}`}>
+      <Sidebar />
+
       <div className={`${styles.content} ${darkMode ? styles.contentDark : ''}`}>
         <header className={styles.header}>
           <h2 className={styles.title}>{task.title}</h2>
diff --git a/src/components/EductionPortal/StudentTasks/TaskDetails.module.css b/src/components/EductionPortal/StudentTasks/TaskDetails.module.css
index 789fcc82b7..65b8f76f87 100644
--- a/src/components/EductionPortal/StudentTasks/TaskDetails.module.css
+++ b/src/components/EductionPortal/StudentTasks/TaskDetails.module.css
@@ -3,6 +3,8 @@
    PAGE LAYOUT
 =========================== */
 .pageLayout {
+  display: flex;
+  flex-direction: row;
   min-height: 100vh;
   background-color: #f9fafb;
 
@@ -13,7 +15,7 @@
 
 .content {
   flex: 1;
-  margin-left: 0;
+  margin-left: 72px; /* matches sidebar width */
   padding: 2rem 3rem;
   background-color: #f9fafb;
   z-index: 1;
diff --git a/src/components/EductionPortal/Tasks/Sidebar.jsx b/src/components/EductionPortal/Tasks/Sidebar.jsx
new file mode 100644
index 0000000000..c7bb208e55
--- /dev/null
+++ b/src/components/EductionPortal/Tasks/Sidebar.jsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import styles from './Sidebar.module.css';
+
+function Icon({ name }) {
+  // simple inline SVGs so we don’t pull extra libs
+  const icons = {
+    menu: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M3 6h18M3 12h18M3 18h18"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    home: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+    chart: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M4 20V6m6 14V10m6 10V4"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    folder: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+        />
+      </svg>
+    ),
+    star: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="m12 3 2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17.8 6.2 20.8l1.1-6.5L2.6 9.8l6.5-.9z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+        />
+      </svg>
+    ),
+    calendar: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M7 3v3m10-3v3M4 8h16M5 6h14a1 1 0 0 1 1 1v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a1 1 0 0 1 1-1z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+    pencil: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M3 21l3.8-1 11-11a2.2 2.2 0 0 0-3.1-3.1L3.7 16.9 3 21z"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+    cog: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm8 4a7.9 7.9 0 0 0-.1-1l2-1.6-1.9-3.3-2.4 1a8 8 0 0 0-1.7-1l-.3-2.6H10.4l-.3 2.6a8 8 0 0 0-1.7 1l-2.4-1-1.9 3.3 2 1.6a8 8 0 0 0 0 2l-2 1.6 1.9 3.3 2.4-1a8 8 0 0 0 1.7 1l.3 2.6h3.6l.3-2.6a8 8 0 0 0 1.7-1l2.4 1 1.9-3.3-2-1.6c.1-.3.1-.7.1-1Z"
+          stroke="currentColor"
+          strokeWidth="1.2"
+          fill="none"
+        />
+      </svg>
+    ),
+    logout: (
+      <svg viewBox="0 0 24 24">
+        <path
+          d="M9 8V4a2 2 0 0 1 2-2h8v20h-8a2 2 0 0 1-2-2v-4M5 12h10M12 9l3 3-3 3"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  };
+  return <span className={styles.icon}>{icons[name]}</span>;
+}
+
+export default function Sidebar({ active = 'home', onLogout }) {
+  return (
+    <aside className={styles.sidebar} aria-label="Section navigation">
+      <button className={styles.hamburger} aria-label="Open menu">
+        <Icon name="menu" />
+      </button>
+
+      <nav className={styles.nav}>
+        {[
+          { id: 'home', icon: 'home' },
+          { id: 'chart', icon: 'chart' },
+          { id: 'folder', icon: 'folder' },
+          { id: 'star', icon: 'star' },
+          { id: 'calendar', icon: 'calendar' },
+          { id: 'pencil', icon: 'pencil' },
+        ].map(item => (
+          <button
+            key={item.id}
+            className={`${styles.navItem} ${active === item.id ? styles.active : ''}`}
+            aria-current={active === item.id ? 'page' : undefined}
+          >
+            <Icon name={item.icon} />
+          </button>
+        ))}
+      </nav>
+
+      <div className={styles.bottom}>
+        <button className={styles.bottomItem}>
+          <Icon name="cog" />
+          <span>Settings</span>
+        </button>
+        <button className={styles.bottomItem} onClick={onLogout}>
+          <Icon name="logout" />
+          <span>Log out</span>
+        </button>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/EductionPortal/Tasks/Sidebar.module.css b/src/components/EductionPortal/Tasks/Sidebar.module.css
new file mode 100644
index 0000000000..cfa02c05b3
--- /dev/null
+++ b/src/components/EductionPortal/Tasks/Sidebar.module.css
@@ -0,0 +1,100 @@
+/* stylelint-disable  */
+:root {
+  --rail-w: 72px; /* nav width */
+  --rail-bg: #fff;
+  --rail-border: #ececec;
+  --icon: #000; /* black icons */
+  --pill: #dedede; /* active bg */
+  --pill-hover: #e9e9e9;
+  --radius: 10px;
+}
+
+/* Fixed left rail below your site header */
+.sidebar {
+  position: fixed;
+  top: 64px; /* adjust if your top header is different */
+  left: 0;
+  width: var(--rail-w);
+  height: calc(100vh - 64px);
+  background: var(--rail-bg);
+  border-right: 1px solid var(--rail-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 5;
+}
+
+/* “three lines” button */
+.hamburger {
+  width: 44px;
+  height: 44px;
+  margin: 8px 0 6px;
+  border: 0;
+  background: transparent;
+  color: var(--icon);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.icon {
+  width: 22px;
+  height: 22px;
+  color: var(--icon);
+  display: inline-grid;
+  place-items: center;
+}
+
+.nav {
+  width: 100%;
+  display: grid;
+  gap: 18px;
+  padding: 10px 12px 0;
+}
+
+.navItem {
+  width: 100%;
+  height: 56px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius);
+  display: grid;
+  place-items: center;
+  transition: background 0.15s ease;
+}
+
+.navItem:hover {
+  background: var(--pill-hover);
+}
+
+.active {
+  background: var(--pill);
+}
+
+.bottom {
+  margin-top: auto;
+  width: 100%;
+  padding: 16px 8px 18px;
+  display: grid;
+  gap: 10px;
+}
+
+.bottomItem {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  align-items: center;
+  gap: 10px;
+  background: transparent;
+  border: 0;
+  padding: 8px 10px;
+  color: #000;
+  font-size: 13px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.bottomItem:hover {
+  background: var(--pill-hover);
+}
diff --git a/src/components/EductionPortal/Tasks/UploadPanel.jsx b/src/components/EductionPortal/Tasks/UploadPanel.jsx
index 69941b8941..ed384347a1 100644
--- a/src/components/EductionPortal/Tasks/UploadPanel.jsx
+++ b/src/components/EductionPortal/Tasks/UploadPanel.jsx
@@ -173,7 +173,7 @@ export default function UploadPanel({ id, maxBytes = 10 * 1024 * 1024, onFilesUp
   const notesInputId = 'notes-to-teacher';
 
   return (
-    <div className={`${styles.outer}`} id={id}>
+    <div className={styles.outer} id={id}>
       {/* DROP ZONE */}
       <div
         className={`${styles.dropzone} ${isDragOver ? styles.over : ''}`}
@@ -189,31 +189,31 @@ export default function UploadPanel({ id, maxBytes = 10 * 1024 * 1024, onFilesUp
         }}
         aria-label="File upload drop zone"
       >
-        <CloudUp className={`${styles.cloud}`} />
-        <div className={`${styles.dzTitle}`}>{dzLabel}</div>
+        <CloudUp className={styles.cloud} />
+        <div className={styles.dzTitle}>{dzLabel}</div>
 
         {isUploading ? (
-          <div className={`${styles.progressWrap}`} aria-live="polite">
-            <div className={`${styles.progressTrack}`}>
-              <div className={`${styles.progressFill}`} style={{ width: `${progress}%` }} />
+          <div className={styles.progressWrap} aria-live="polite">
+            <div className={styles.progressTrack}>
+              <div className={styles.progressFill} style={{ width: `${progress}%` }} />
             </div>
-            <div className={`${styles.progressPct}`}>{progress}%</div>
+            <div className={styles.progressPct}>{progress}%</div>
           </div>
         ) : (
           <>
-            <div className={`${styles.or}`}>OR</div>
-            <div className={`${styles.actions}`}>
+            <div className={styles.or}>OR</div>
+            <div className={styles.actions}>
               <input
                 ref={inputRef}
                 type="file"
                 multiple
                 onChange={onBrowse}
-                className={`${styles.hiddenInput}`}
+                className={styles.hiddenInput}
                 aria-label="Choose files"
               />
               <button
                 type="button"
-                className={`${styles.browseBtn}`}
+                className={styles.browseBtn}
                 // eslint-disable-next-line testing-library/no-node-access
                 onClick={() => inputRef.current?.click()}
               >
@@ -222,7 +222,7 @@ export default function UploadPanel({ id, maxBytes = 10 * 1024 * 1024, onFilesUp
 
               <button
                 type="button"
-                className={`${styles.uploadBtn}`}
+                className={styles.uploadBtn}
                 onClick={doUpload}
                 disabled={pendingFiles.length === 0}
                 title={
@@ -238,17 +238,17 @@ export default function UploadPanel({ id, maxBytes = 10 * 1024 * 1024, onFilesUp
           </>
         )}
 
-        {sizeError ? <div className={`${styles.sizeError}`}>{sizeError}</div> : null}
+        {sizeError ? <div className={styles.sizeError}>{sizeError}</div> : null}
       </div>
 
       {/* Notes to Teacher (optional) */}
-      <div className={`${styles.notesBlock}`}>
-        <label className={`${styles.notesLabel}`} htmlFor={notesInputId}>
-          Notes to Teacher <span className={`${styles.muted}`}>(Optional)</span>
+      <div className={styles.notesBlock}>
+        <label className={styles.notesLabel} htmlFor={notesInputId}>
+          Notes to Teacher <span className={styles.muted}>(Optional)</span>
         </label>
         <textarea
           id={notesInputId}
-          className={`${styles.notes}`}
+          className={styles.notes}
           placeholder="Add any notes for the teacher here"
           value={notes}
           onChange={e => setNotes(e.target.value)}
diff --git a/src/components/EductionPortal/layout/EducationPortalLayout.jsx b/src/components/EductionPortal/layout/EducationPortalLayout.jsx
deleted file mode 100644
index 89b888a7ee..0000000000
--- a/src/components/EductionPortal/layout/EducationPortalLayout.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useLocation } from 'react-router-dom';
-import { Menu } from 'lucide-react';
-import EducationPortalSidebar from './EducationPortalSidebar';
-import styles from './EducationPortalLayout.module.css';
-import { useSelector } from 'react-redux';
-
-export default function EducationPortalLayout({ children }) {
-  const location = useLocation();
-  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
-  const darkMode = useSelector(state => state.theme.darkMode);
-  const closeMobileNav = () => setIsMobileNavOpen(false);
-
-  const routeKey = useMemo(() => location.pathname, [location.pathname]);
-
-  const headerTitle = useMemo(() => {
-    return 'Education Portal';
-  }, []);
-
-  return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      <div className={`${styles.shell}`}>
-        <EducationPortalSidebar
-          key={routeKey}
-          mobileOpen={isMobileNavOpen}
-          onRequestClose={closeMobileNav}
-        />
-
-        <div className={`${styles.main}`}>
-          <header className={`${styles.header}`}>
-            <button
-              type="button"
-              className={`${styles.mobileMenuButton}`}
-              aria-label="Open navigation"
-              aria-controls="ep-sidebar"
-              aria-expanded={isMobileNavOpen}
-              onClick={() => setIsMobileNavOpen(true)}
-            >
-              <span className={`${styles.mobileMenuIcon}`} aria-hidden="true">
-                <Menu size={16} />
-              </span>
-              <span className={`${styles.mobileMenuLabel}`}>Menu</span>
-            </button>
-
-            <div className={`${styles.headerTitle}`} aria-label="Section title">
-              {headerTitle}
-            </div>
-          </header>
-
-          <div className={`${styles.content}`}>{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-EducationPortalLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
diff --git a/src/components/EductionPortal/layout/EducationPortalLayout.module.css b/src/components/EductionPortal/layout/EducationPortalLayout.module.css
deleted file mode 100644
index 54c405b79e..0000000000
--- a/src/components/EductionPortal/layout/EducationPortalLayout.module.css
+++ /dev/null
@@ -1,131 +0,0 @@
-/* ── Light mode base ─────────────────────────────────────────── */
-
-.shell {
-  min-height: 100vh;
-  display: block;
-  background: #f8fafc;
-  color: #1e293b;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.main {
-  position: relative;
-  min-width: 0;
-}
-
-.header {
-  position: sticky;
-  top: 0;
-  z-index: 30;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 18px;
-  background: #ffffffb0;
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid #0000001a;
-}
-
-.headerTitle {
-  font-weight: 800;
-  letter-spacing: 0.01em;
-  color: #1e2332f2;
-  white-space: nowrap;
-}
-
-.content {
-  min-height: 100vh;
-  padding: 28px 28px 64px;
-}
-
-.content > :global(*) {
-  max-width: 100%;
-}
-
-.mobileMenuButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 10px 14px;
-  border-radius: 999px;
-  border: 1px solid #00000020;
-  background: #f1f5f9;
-  color: #1e293b;
-  box-shadow: 0 10px 24px #00000018;
-  backdrop-filter: blur(10px);
-  cursor: pointer;
-}
-
-.mobileMenuButton:focus-visible {
-  outline: 3px solid #56b4d0;
-  outline-offset: 3px;
-}
-
-.mobileMenuButton:hover {
-  background: #e2e8f0;
-}
-
-.mobileMenuIcon {
-  display: inline-flex;
-  width: 18px;
-  height: 18px;
-  border-radius: 6px;
-  align-items: center;
-  justify-content: center;
-  background: #c8e8f5;
-  border: 1px solid #a0cce0;
-  line-height: 1;
-}
-
-.mobileMenuLabel {
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
-
-@media (width <= 960px) {
-  .content {
-    padding: 22px 18px 56px;
-  }
-
-  .header {
-    padding: 10px 14px;
-  }
-}
-
-/* ── Dark mode overrides ─────────────────────────────────────── */
-
-.darkMode .shell {
-  background: #0f172a;
-  color: #e2e8f0;
-}
-
-.darkMode .header {
-  background: #0f172a;
-  border-bottom-color: #334155;
-}
-
-.darkMode .headerTitle {
-  color: #f1f5f9;
-}
-
-.darkMode .mobileMenuButton {
-  border-color: #2a2a3a;
-  background: #1e1e2a;
-  color: #e2e8f0;
-  box-shadow: 0 10px 24px #00000047;
-}
-
-.darkMode .mobileMenuButton:focus-visible {
-  outline-color: #56b4d088;
-}
-
-.darkMode .mobileMenuButton:hover {
-  background: #252532;
-}
-
-.darkMode .mobileMenuIcon {
-  background: #1a2e42;
-  border-color: #2a4058;
-  color: #93c5fd;
-}
diff --git a/src/components/EductionPortal/layout/EducationPortalSidebar.jsx b/src/components/EductionPortal/layout/EducationPortalSidebar.jsx
deleted file mode 100644
index 67a1b4434c..0000000000
--- a/src/components/EductionPortal/layout/EducationPortalSidebar.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { NavLink, useHistory, useLocation } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import styles from './EducationPortalSidebar.module.css';
-
-function isEducatorRole(role) {
-  return role === 'Administrator' || role === 'Owner' || role === 'Manager';
-}
-
-export default function EducationPortalSidebar({ mobileOpen, onRequestClose }) {
-  const history = useHistory();
-  const location = useLocation();
-  const authUser = useSelector(state => state.auth?.user);
-  const role = authUser?.role;
-  const darkMode = useSelector(state => state.theme.darkMode);
-  const canSeeEducator = isEducatorRole(role);
-
-  const menu = useMemo(() => {
-    const base = [
-      { label: 'Home', icon: '🏠', to: '/educationportal' },
-      { label: 'Lesson Library', icon: '📚', to: '/educationportal/lesson-library' },
-      { label: 'Insight Widget', icon: '💡', to: '/educationportal/InsightWidget' },
-    ];
-
-    const student = [
-      { label: 'Student Dashboard', icon: '📈', to: '/educationportal/dashboard' },
-      { label: 'Student Tasks', icon: '📋', to: '/educationportal/student/tasks' },
-      { label: 'Evaluation Results', icon: '🏆', to: '/educationportal/evaluation-results' },
-    ];
-
-    const educator = [
-      { label: 'Educator Reports', icon: '📊', to: '/educationportal/reports' },
-      { label: 'Groups', icon: '👥', to: '/educationportal/groups' },
-      { label: 'Assign Atoms', icon: '🧬', to: '/educationportal/assignAtoms' },
-      { label: 'Upload Task', icon: '📤', to: '/educationportal/tasks/upload' },
-      { label: 'Intermediate Tasks', icon: '🧱', to: '/educationportal/tasks/intermediate' },
-      { label: 'Report Download', icon: '📥', to: '/educationportal/reportButton' },
-    ];
-
-    if (canSeeEducator) return [...base, ...educator, ...student];
-    return [...base, ...student];
-  }, [canSeeEducator]);
-
-  const onLogout = () => {
-    const storage = globalThis?.sessionStorage;
-    const rawViewingUser = storage ? storage.getItem('viewingUser') : null;
-    if (rawViewingUser) {
-      try {
-        const sessionStorageData = JSON.parse(rawViewingUser);
-        if (sessionStorageData) {
-          storage.removeItem('viewingUser');
-          if (
-            typeof globalThis?.dispatchEvent === 'function' &&
-            typeof globalThis?.Event === 'function'
-          ) {
-            globalThis.dispatchEvent(new globalThis.Event('storage'));
-          }
-        }
-      } catch {
-        // Malformed JSON in sessionStorage — clear it to avoid repeated parse errors.
-        storage.removeItem('viewingUser');
-      }
-    }
-
-    if (storage) storage.setItem('gePortalLoggedOut', 'true');
-    if (mobileOpen) onRequestClose();
-    history.push('/dashboard');
-  };
-
-  const sidebarClassName = [styles.sidebar, mobileOpen ? styles.mobileOpen : '']
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className={`${darkMode ? styles.darkMode : ''}`}>
-      {mobileOpen && (
-        <button
-          type="button"
-          className={`${styles.overlay}`}
-          aria-label="Close navigation"
-          onClick={onRequestClose}
-        />
-      )}
-
-      <aside
-        id="ep-sidebar"
-        className={`${sidebarClassName}`}
-        aria-label="Education Portal navigation"
-      >
-        <div className={`${styles.brandRow}`}>
-          <div className={`${styles.brandMark}`} aria-hidden="true">
-            GE
-          </div>
-          <div className={`${styles.brandText}`}>
-            <div className={`${styles.brandName}`}>Good Education</div>
-            <div className={`${styles.brandSub}`}>
-              {authUser?.firstName ? `Welcome, ${authUser.firstName}` : 'Welcome'}
-            </div>
-          </div>
-        </div>
-
-        <nav className={`${styles.nav}`} aria-label="Primary">
-          {menu.map(item => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              exact={item.to === '/educationportal'}
-              className={`${styles.link}`}
-              activeClassName={`${styles.active}`}
-              onClick={() => {
-                if (mobileOpen) onRequestClose();
-              }}
-              aria-current={location.pathname === item.to ? 'page' : undefined}
-            >
-              <span className={`${styles.icon}`} aria-hidden="true">
-                {item.icon}
-              </span>
-              <span className={`${styles.label}`}>{item.label}</span>
-            </NavLink>
-          ))}
-        </nav>
-
-        <div className={`${styles.footer}`}>
-          <button type="button" className={`${styles.logout}`} onClick={onLogout}>
-            <span className={`${styles.icon}`} aria-hidden="true">
-              🚪
-            </span>
-            <span className={`${styles.label}`}>Logout</span>
-          </button>
-        </div>
-      </aside>
-    </div>
-  );
-}
-
-EducationPortalSidebar.propTypes = {
-  mobileOpen: PropTypes.bool,
-  onRequestClose: PropTypes.func,
-};
-
-EducationPortalSidebar.defaultProps = {
-  mobileOpen: false,
-  onRequestClose: () => {},
-};
diff --git a/src/components/EductionPortal/layout/EducationPortalSidebar.module.css b/src/components/EductionPortal/layout/EducationPortalSidebar.module.css
deleted file mode 100644
index 9436d1190b..0000000000
--- a/src/components/EductionPortal/layout/EducationPortalSidebar.module.css
+++ /dev/null
@@ -1,211 +0,0 @@
-.sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100dvh;
-  width: min(320px, 86vw);
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid #e2e8f0;
-  background: #fff;
-  box-shadow: inset 0 0 0 1px #00000008;
-  backdrop-filter: blur(12px);
-  z-index: 1001;
-  transform: translateX(-110%);
-  transition: transform 180ms ease;
-}
-
-.brandRow {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 14px 14px;
-  border-bottom: 1px solid #00000014;
-}
-
-.brandMark {
-  width: 44px;
-  height: 44px;
-  border-radius: 14px;
-  display: grid;
-  place-items: center;
-  font-weight: 800;
-  letter-spacing: 0.02em;
-  background: #ddf0fb;
-  border: 1px solid #b6dff5;
-  box-shadow: 0 4px 12px #00000014;
-}
-
-.brandText {
-  min-width: 0;
-  display: grid;
-  gap: 2px;
-}
-
-.brandName {
-  font-weight: 800;
-  font-size: 14px;
-  line-height: 1.05;
-}
-
-.brandSub {
-  font-size: 12px;
-  color: #64748b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.nav {
-  display: grid;
-  gap: 6px;
-  padding: 14px;
-  overflow: auto;
-}
-
-.link {
-  display: grid;
-  grid-template-columns: 34px 1fr;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border-radius: 14px;
-  color: #1e2332eb;
-  text-decoration: none;
-  border: 1px solid transparent;
-  background: transparent;
-  transition:
-    background 140ms ease,
-    border-color 140ms ease,
-    transform 140ms ease;
-}
-
-.link:hover {
-  background: #0000000d;
-  border-color: #00000014;
-  transform: translateY(-1px);
-}
-
-.active {
-  background: #ddf0fb;
-  border-color: #9dd4ef;
-  box-shadow: 0 4px 16px #00000014;
-}
-
-.icon {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  border-radius: 12px;
-  background: #0000000d;
-  border: 1px solid #00000012;
-  font-size: 15px;
-}
-
-.label {
-  font-weight: 650;
-  font-size: 13px;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.footer {
-  margin-top: auto;
-  padding: 14px;
-  border-top: 1px solid #00000014;
-}
-
-.logout {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 34px 1fr;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border-radius: 14px;
-  border: 1px solid #0000001a;
-  background: #f8fafc;
-  color: #1e293b;
-  cursor: pointer;
-}
-
-.logout:hover {
-  background: #e2e8f0;
-}
-
-.overlay {
-  display: block;
-  position: fixed;
-  inset: 0;
-  border: 0;
-  background: #00000040;
-  backdrop-filter: blur(2px);
-  z-index: 1000;
-  cursor: pointer;
-}
-
-.mobileOpen {
-  transform: translateX(0);
-}
-
-/* ── Dark mode overrides ─────────────────────────────────────── */
-
-.darkMode .sidebar {
-  background: #0f172a;
-  box-shadow: inset 0 0 0 1px #1e1e26;
-}
-
-.darkMode .brandRow {
-  border-bottom-color: #2a2a36;
-}
-
-.darkMode .brandMark {
-  background: #1a2a3a;
-  border-color: #2a3a4a;
-  box-shadow: 0 18px 40px #00000080;
-}
-
-.darkMode .link {
-  color: #eaf0ff;
-}
-
-.darkMode .link:hover {
-  background: #1e1e2a;
-  border-color: #2a2a38;
-}
-
-.darkMode .active {
-  background: #1a2e42;
-  border-color: #2a4058;
-  box-shadow: 0 12px 30px #00000080;
-}
-
-.darkMode .icon {
-  background: #1e1e2a;
-  border-color: #2a2a38;
-}
-
-.darkMode .brandSub {
-  color: #94a3b8;
-}
-
-.darkMode .footer {
-  border-top-color: #2a2a36;
-}
-
-.darkMode .logout {
-  border-color: #2a2a38;
-  background: #1e1e2a;
-  color: #e2e8f0;
-}
-
-.darkMode .logout:hover {
-  background: #252532;
-}
-
-.darkMode .overlay {
-  background: #0009;
-}
diff --git a/src/components/Header/HeaderRenderer.jsx b/src/components/Header/HeaderRenderer.jsx
index a2e98e9bde..879fb1281f 100644
--- a/src/components/Header/HeaderRenderer.jsx
+++ b/src/components/Header/HeaderRenderer.jsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { getWeeklySummaries } from '~/actions/weeklySummaries';
 import { Header } from './Header';
+
 import { getHeaderData } from '../../actions/authActions';
 import { getAllRoles } from '../../actions/role';
 import hasPermission from '../../utils/permissions';
@@ -12,10 +13,10 @@ export function HeaderRenderer(props) {
   const location = useLocation();
   const isKitchenAndInventory = location.pathname.startsWith('/kitchenandinventory');
   const isCommunityPortal = location.pathname.startsWith('/communityportal');
-  const isEducatorReports = location.pathname.startsWith('/educator');
+  const isEducationEvaluation = location.pathname.startsWith('/educationportal/evaluation-results');
 
-  // Hide header for educator reports page
-  if (isEducatorReports) {
+  // Hide header or education portal evaluation results page
+  if (isEducationEvaluation) {
     return null;
   }
 
@@ -24,7 +25,7 @@ export function HeaderRenderer(props) {
     return <KIHeader {...props} />;
   }
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
+// eslint-disable-next-line react/jsx-props-no-spreading
   return isCommunityPortal ? <CPHeader {...props} /> : <Header {...props}/>;
 }
 
@@ -43,4 +44,4 @@ export default connect(mapStateToProps, {
   getAllRoles,
   hasPermission,
   getWeeklySummaries,
-})(HeaderRenderer);
+})(HeaderRenderer);
\ No newline at end of file
diff --git a/src/components/LBDashboard/Login/Login.module.css b/src/components/LBDashboard/Login/Login.module.css
index b8a2e05325..69d176e193 100644
--- a/src/components/LBDashboard/Login/Login.module.css
+++ b/src/components/LBDashboard/Login/Login.module.css
@@ -153,11 +153,6 @@
   background-color: #203844 !important;
 }
 
-.darkMain h2,
-.darkMain > p {
-  color: #e2e8f0;
-}
-
 .darkPswd{
   background-color: #1a1a1a !important ;
   border-color:  #404040 !important;
diff --git a/src/components/LBDashboard/Register/LBRegister.jsx b/src/components/LBDashboard/Register/LBRegister.jsx
index 0c1c5ff867..a353a5c75f 100644
--- a/src/components/LBDashboard/Register/LBRegister.jsx
+++ b/src/components/LBDashboard/Register/LBRegister.jsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { toast } from 'react-toastify';
-import { useSelector } from 'react-redux';
 import { ENDPOINTS } from '../../../utils/URL';
-import HeaderRenderer from '../../Header/HeaderRenderer';
 import styles from './LBRegister.module.css';
 import logo from '../../../assets/images/logo2.png';
 
@@ -17,28 +15,19 @@ function LBRegister() {
   });
 
   const [errors, setErrors] = useState({});
-  const darkMode = useSelector(state => state.theme.darkMode);
 
   const regex = {
     firstName: /^[A-Za-z]{2,}$/,
     lastName: /^[A-Za-z]{2,}$/,
     email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
     // eslint-disable-next-line
-    phone: /^(?=(?:\D*\d){7,15}\D*$)(?:\+?\d{1,4})?[\s\-().]*\d{1,4}[\s\-().]*\d{1,4}[\s\-().]*\d{1,4}[\s\-().]*\d{1,4}$/,
+    phone: /^(?:\+?\d{1,4})?[\s\-.\()]*\d{1,4}[\s\-.\()]*\d{1,4}[\s\-.\()]*\d{1,4}[\s\-.\()]*\d{1,4}$/,
     password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$%^&*()\-_=+{};:,<.>]{8,}$/,
   };
 
-  const errorMessages = {
-    firstName: 'First name must be at least 2 letters (letters only)',
-    lastName: 'Last name must be at least 2 letters (letters only)',
-    email: 'Please enter a valid email address',
-    phone: 'Please enter a valid phone number (7-15 digits)',
-    password: 'Password must be at least 8 characters and include a letter and a number',
-  };
-
   const validateInput = (name, value) => {
     if (!regex[name].test(value)) {
-      return errorMessages[name];
+      return `Invalid ${name}`;
     }
     return '';
   };
@@ -70,104 +59,84 @@ function LBRegister() {
       await axios.post(ENDPOINTS.LB_REGISTER, formData);
       window.location.href = '/lbdashboard/login';
     } catch (error) {
-      const status = error?.response?.status;
-      const msg = error?.response?.data?.message;
-
-      if (status === 409) {
-        toast.error(msg || 'Email already registered.');
-      } else if (status) {
-        toast.error(msg || 'Error registering! Please try again.');
-      } else {
-        toast.error('Network error. Check your connection and try again.');
-      }
+      toast.error('Error registering! Please try again.');
     }
   };
 
-  const pageClassName = darkMode
-    ? `${styles.lbRegisterPage} ${styles.lbRegisterDark}`
-    : styles.lbRegisterPage;
-
   return (
-    <>
-      <HeaderRenderer />
-      <div className={pageClassName}>
-        <div className={`${styles.lbRegisterLogo}`}>
-          <img src={logo} alt="One Community Logo" />
-        </div>
-        <div className={`${styles.lbRegisterContainer}`}>
-          <div className={`${styles.lbRegisterTop}`} />
-          <div className={`${styles.lbRegisterMain}`}>
-            <h2>Registration Page</h2>
-            <p>
-              Filling the details below will allow you to bid or rent a unit from a village of your
-              choice in our property. Clicking the submit button will confirm all your details with
-              us and will take you to our login page.
-            </p>
-            <div className={`${styles.lbRegisterFormWrapper}`}>
-              <form className={`${styles.lbRegisterForm}`} onSubmit={handleSubmit}>
-                <input
-                  type="text"
-                  name="firstName"
-                  placeholder="First Name"
-                  value={formData.firstName}
-                  onChange={handleChange}
-                  required
-                />
-                {errors.firstName && (
-                  <p className={`${styles.lbRegisterError}`}>{errors.firstName}</p>
-                )}
-
-                <input
-                  type="text"
-                  name="lastName"
-                  placeholder="Last Name"
-                  value={formData.lastName}
-                  onChange={handleChange}
-                  required
-                />
-                {errors.lastName && (
-                  <p className={`${styles.lbRegisterError}`}>{errors.lastName}</p>
-                )}
-
-                <input
-                  type="email"
-                  name="email"
-                  placeholder="Email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  required
-                />
-                {errors.email && <p className={`${styles.lbRegisterError}`}>{errors.email}</p>}
-
-                <input
-                  type="text"
-                  name="phone"
-                  placeholder="Phone Number"
-                  value={formData.phone}
-                  onChange={handleChange}
-                  required
-                />
-                {errors.phone && <p className={`${styles.lbRegisterError}`}>{errors.phone}</p>}
-
-                <input
-                  type="password"
-                  name="password"
-                  placeholder="New Password"
-                  value={formData.password}
-                  onChange={handleChange}
-                  required
-                />
-                {errors.password && (
-                  <p className={`${styles.lbRegisterError}`}>{errors.password}</p>
-                )}
-
-                <button type="submit">Click to Register</button>
-              </form>
-            </div>
+    <div className={`${styles.lbRegisterPage}`}>
+      <div className={`${styles.lbRegisterLogo}`}>
+        <img src={logo} alt="One Community Logo" />
+      </div>
+      <div className={`${styles.lbRegisterContainer}`}>
+        <div className={`${styles.lbRegisterTop}`} />
+        <div className={`${styles.lbRegisterMain}`}>
+          <h2>Registration Page</h2>
+          <p>
+            Filling the details below will allow you to bid or rent a unit from a village of your
+            choice in our property. Clicking the submit button will confirm all your details with us
+            and will take you to our login page.
+          </p>
+          <div className={`${styles.lbRegisterFormWrapper}`}>
+            <form className={`${styles.lbRegisterForm}`} onSubmit={handleSubmit}>
+              <input
+                type="text"
+                name="firstName"
+                placeholder="First Name"
+                value={formData.firstName}
+                onChange={handleChange}
+                required
+              />
+              {errors.firstName && (
+                <p className={`${styles.lbRegisterError}`}>{errors.firstName}</p>
+              )}
+
+              <input
+                type="text"
+                name="lastName"
+                placeholder="Last Name"
+                value={formData.lastName}
+                onChange={handleChange}
+                required
+              />
+              {errors.lastName && <p className={`${styles.lbRegisterError}`}>{errors.lastName}</p>}
+
+              <input
+                type="email"
+                name="email"
+                placeholder="Email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+              {errors.email && <p className={`${styles.lbRegisterError}`}>{errors.email}</p>}
+
+              <input
+                type="text"
+                name="phone"
+                placeholder="Phone Number"
+                value={formData.phone}
+                onChange={handleChange}
+                required
+              />
+              {errors.phone && <p className={`${styles.lbRegisterError}`}>{errors.phone}</p>}
+
+              <input
+                type="password"
+                name="password"
+                placeholder="New Password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+              />
+              {errors.password && <p className={`${styles.lbRegisterError}`}>{errors.password}</p>}
+
+              <button type="submit">Click to Register</button>
+            </form>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/LBDashboard/Register/LBRegister.module.css b/src/components/LBDashboard/Register/LBRegister.module.css
index 7b8f5943cd..9aa8126cd7 100644
--- a/src/components/LBDashboard/Register/LBRegister.module.css
+++ b/src/components/LBDashboard/Register/LBRegister.module.css
@@ -108,37 +108,4 @@
   margin-top: -10px;
   margin-bottom: 10px;
   width: 100%;
-}
-
-/* ===== DARK MODE ===== */
-.lbRegisterDark {
-  background-color: #0f172a;
-}
-
-.lbRegisterDark .lbRegisterContainer {
-  background-color: #1e293b;
-  border-color: #334155;
-}
-
-.lbRegisterDark .lbRegisterMain {
-  background-color: #1e293b;
-}
-
-.lbRegisterDark .lbRegisterMain h2,
-.lbRegisterDark .lbRegisterMain > p {
-  color: #e2e8f0;
-}
-
-.lbRegisterDark .lbRegisterError {
-  color: #f87171;
-}
-
-.lbRegisterDark .lbRegisterForm input {
-  background-color: #0f172a;
-  color: #e2e8f0;
-  border-color: #475569;
-}
-
-.lbRegisterDark .lbRegisterForm input::placeholder {
-  color: #94a3b8;
 }
\ No newline at end of file
diff --git a/src/components/PRPromotions/DisplayBox.jsx b/src/components/PRPromotions/DisplayBox.jsx
index 3a3d298596..606d40c13c 100644
--- a/src/components/PRPromotions/DisplayBox.jsx
+++ b/src/components/PRPromotions/DisplayBox.jsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styles from './DisplayBox.module.css';
 
@@ -52,25 +52,9 @@ export default function DisplayBox({ onClose, darkMode = false }) {
     onClose();
   };
 
-  const modalRef = useRef(null);
-  const overlayRef = useRef(null);
-
-  useEffect(() => {
-    const overlayClickHandler = e => {
-      if (e.target.id === 'overlay') onClose();
-    };
-
-    document.addEventListener('click', overlayClickHandler);
-    return () => document.removeEventListener('click', overlayClickHandler);
-  }, []);
-
   return (
-    <div className={styles.overlay} ref={overlayRef} id="overlay">
-      <div
-        className={`${styles.popup} ${darkMode ? styles.popupDark : ''}`}
-        ref={modalRef}
-        id="modal"
-      >
+    <div className={styles.overlay}>
+      <div className={`${styles.popup} ${darkMode ? styles.popupDark : ''}`}>
         <h2 className={`${styles.popupHeading} ${darkMode ? styles.popupHeadingDark : ''}`}>
           Are you sure you want to promote these PR reviewers?
         </h2>
diff --git a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
index 4d361a8c0e..d961cd206a 100644
--- a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
+++ b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
@@ -43,10 +43,6 @@
   margin-bottom: 12px;
 }
 
-.text-light .people-pie-charts-header {
-  color: #f5f5f5;
-}
-
 .show-all-tasks-button {
   margin-left: auto;
   margin-right: 0;
diff --git a/src/components/Reports/PeopleReport/selectors.jsx b/src/components/Reports/PeopleReport/selectors.jsx
index 138438af3d..8ba11ba305 100644
--- a/src/components/Reports/PeopleReport/selectors.jsx
+++ b/src/components/Reports/PeopleReport/selectors.jsx
@@ -21,7 +21,7 @@ export const getPeopleReportData = state => ({
   classificationList: state.classificationList,
   priorityList: state.priorityList,
   statusList: state.statusList,
-  tangibleHoursReportedThisWeek: Number.parseFloat(state.userProfile.tangibleHoursReportedThisWeek) || 0,
+  tangibleHoursReportedThisWeek: parseFloat(state.userProfile.tangibleHoursReportedThisWeek),
   darkMode: state.theme.darkMode,
 });
 
diff --git a/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.jsx b/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.jsx
deleted file mode 100644
index bc07c6e91c..0000000000
--- a/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.jsx
+++ /dev/null
@@ -1,400 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faXmark, faSync, faFilter, faTimes } from '@fortawesome/free-solid-svg-icons';
-import {
-  getStatusColor,
-  getPriorityColor,
-  filterByStatus,
-  getRequestStats,
-} from '../utils/resourceRequestUtils';
-import {
-  getMockPMRequests,
-  updateMockRequestStatus,
-} from '../../../__mocks__/resourceRequestMockData';
-import styles from './ResourceManagementDashboard.module.css';
-
-const ResourceManagementDashboard = () => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-  const [requests, setRequests] = useState([]);
-  const [filterStatus, setFilterStatus] = useState('all');
-  const [selectedRequest, setSelectedRequest] = useState(null);
-  const [showModal, setShowModal] = useState(false);
-  const [actionLoading, setActionLoading] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-
-  const theme = darkMode ? styles.dark : '';
-
-  useEffect(() => {
-    fetchRequests();
-  }, [filterStatus]);
-
-  const fetchRequests = async () => {
-    setLoading(true);
-    setError('');
-    try {
-      const data = getMockPMRequests(filterStatus === 'all' ? null : filterStatus);
-      setRequests(data || []);
-    } catch (err) {
-      setError(err.message || 'Failed to load requests');
-    }
-    setLoading(false);
-  };
-
-  const handleApprove = async requestId => {
-    setActionLoading(true);
-    try {
-      updateMockRequestStatus(requestId, 'approved');
-      fetchRequests();
-      setShowModal(false);
-      setSelectedRequest(null);
-    } catch (err) {
-      setError(err.message || 'Failed to approve request');
-    }
-    setActionLoading(false);
-  };
-
-  const handleDeny = async requestId => {
-    setActionLoading(true);
-    try {
-      updateMockRequestStatus(requestId, 'denied');
-      fetchRequests();
-      setShowModal(false);
-      setSelectedRequest(null);
-    } catch (err) {
-      setError(err.message || 'Failed to deny request');
-    }
-    setActionLoading(false);
-  };
-
-  const openRequestDetail = request => {
-    setSelectedRequest(request);
-    setShowModal(true);
-  };
-
-  const filteredRequests = filterByStatus(requests, filterStatus);
-  const stats = getRequestStats(requests);
-
-  if (loading) {
-    return (
-      <div className={`${styles.page} ${theme}`}>
-        <div className={styles.loadingContainer}>
-          <div className={styles.spinner} />
-          <p>Loading resource requests...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.page} ${theme}`}>
-      <div className={styles.header}>
-        <h1>Resource Request Management</h1>
-        <p>Review and respond to educator resource requests</p>
-      </div>
-
-      {filteredRequests.length > 0 && (
-        <div className={styles.summaryStatsTop}>
-          <div className={styles.statCard}>
-            <div className={styles.statValue}>{stats.total}</div>
-            <div className={styles.statLabel}>Total Requests</div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={styles.statValue} style={{ color: getStatusColor('pending') }}>
-              {stats.pending}
-            </div>
-            <div className={styles.statLabel}>Pending</div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={styles.statValue} style={{ color: getStatusColor('approved') }}>
-              {stats.approved}
-            </div>
-            <div className={styles.statLabel}>Approved</div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={styles.statValue} style={{ color: getStatusColor('denied') }}>
-              {stats.denied}
-            </div>
-            <div className={styles.statLabel}>Denied</div>
-          </div>
-        </div>
-      )}
-
-      {error && <div className={styles.errorAlert}>{error}</div>}
-
-      <div className={styles.controlsBar}>
-        <div className={styles.filterSection}>
-          <FontAwesomeIcon icon={faFilter} className={styles.filterIcon} />
-          <select
-            value={filterStatus}
-            onChange={e => setFilterStatus(e.target.value)}
-            className={styles.filterSelect}
-          >
-            <option value="all">All Requests</option>
-            <option value="pending">Pending Review</option>
-            <option value="approved">Approved</option>
-            <option value="denied">Denied</option>
-          </select>
-        </div>
-        <button
-          type="button"
-          onClick={fetchRequests}
-          disabled={loading}
-          className={styles.refreshBtn}
-        >
-          <FontAwesomeIcon icon={faSync} className={loading ? styles.spinning : ''} />
-          <span className={styles.refreshText}>Refresh</span>
-        </button>
-      </div>
-
-      {filteredRequests.length === 0 ? (
-        <div className={styles.emptyState}>
-          <div className={styles.emptyIcon}>📬</div>
-          <h3>No requests found</h3>
-          <p>
-            {filterStatus === 'all'
-              ? 'There are no resource requests at this time.'
-              : `There are no ${filterStatus} requests.`}
-          </p>
-        </div>
-      ) : (
-        <>
-          <div className={styles.tableWrapper}>
-            <table className={styles.requestsTable}>
-              <thead>
-                <tr>
-                  <th>Educator</th>
-                  <th>Request Title</th>
-                  <th>Priority</th>
-                  <th>Status</th>
-                  <th>Submitted Date</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredRequests.map(request => (
-                  <tr key={request.id} className={styles.tableRow}>
-                    <td>{request.educatorName || 'Unknown Educator'}</td>
-                    <td>{request.title}</td>
-                    <td>
-                      <span
-                        className={styles.priorityBadge}
-                        style={{ backgroundColor: getPriorityColor(request.priority) }}
-                      >
-                        {request.priority?.toUpperCase()}
-                      </span>
-                    </td>
-                    <td>
-                      <span
-                        className={styles.statusBadge}
-                        style={{ backgroundColor: getStatusColor(request.status) }}
-                      >
-                        {request.status?.charAt(0).toUpperCase() + request.status?.slice(1)}
-                      </span>
-                    </td>
-                    <td className={styles.dateCell}>
-                      {new Date(request.createdAt).toLocaleDateString()}
-                    </td>
-                    <td className={styles.actionCell}>
-                      <button
-                        type="button"
-                        onClick={() => openRequestDetail(request)}
-                        className={styles.viewBtn}
-                      >
-                        View
-                      </button>
-                      {request.status === 'pending' && (
-                        <>
-                          <button
-                            type="button"
-                            onClick={() => handleApprove(request.id)}
-                            disabled={actionLoading}
-                            className={styles.approveBtn}
-                          >
-                            <FontAwesomeIcon icon={faCheck} /> Approve
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleDeny(request.id)}
-                            disabled={actionLoading}
-                            className={styles.denyBtn}
-                          >
-                            <FontAwesomeIcon icon={faXmark} /> Deny
-                          </button>
-                        </>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          <div className={styles.mobileCards}>
-            {filteredRequests.map(request => (
-              <div key={request.id} className={styles.requestCard}>
-                <div className={styles.cardHeader}>
-                  <h4 className={styles.cardTitle}>{request.title}</h4>
-                  <span
-                    className={styles.statusBadge}
-                    style={{ backgroundColor: getStatusColor(request.status) }}
-                  >
-                    {request.status?.charAt(0).toUpperCase() + request.status?.slice(1)}
-                  </span>
-                </div>
-                <div className={styles.cardBody}>
-                  <div className={styles.cardMeta}>
-                    <div className={styles.metaItem}>
-                      <strong>Educator:</strong> {request.educatorName || 'Unknown'}
-                    </div>
-                    <div className={styles.metaItem}>
-                      <strong>Priority:</strong>{' '}
-                      <span
-                        className={styles.priorityBadge}
-                        style={{ backgroundColor: getPriorityColor(request.priority) }}
-                      >
-                        {request.priority?.toUpperCase()}
-                      </span>
-                    </div>
-                    <div className={styles.metaItem}>
-                      <strong>Submitted:</strong> {new Date(request.createdAt).toLocaleDateString()}
-                    </div>
-                  </div>
-                </div>
-                <div className={styles.cardActions}>
-                  <button
-                    type="button"
-                    onClick={() => openRequestDetail(request)}
-                    className={styles.fullWidthBtn}
-                  >
-                    View Details
-                  </button>
-                  {request.status === 'pending' && (
-                    <>
-                      <button
-                        type="button"
-                        onClick={() => handleApprove(request.id)}
-                        disabled={actionLoading}
-                        className={styles.approveBtnFull}
-                      >
-                        <FontAwesomeIcon icon={faCheck} /> Approve
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleDeny(request.id)}
-                        disabled={actionLoading}
-                        className={styles.denyBtnFull}
-                      >
-                        <FontAwesomeIcon icon={faXmark} /> Deny
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-
-      {showModal && (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        <div className={styles.modalOverlay} onClick={() => setShowModal(false)}>
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-          <div className={styles.modalPopup} onClick={e => e.stopPropagation()}>
-            <div className={styles.modalHeader}>
-              <h2>Request Details</h2>
-              <button
-                type="button"
-                onClick={() => setShowModal(false)}
-                className={styles.modalClose}
-              >
-                <FontAwesomeIcon icon={faTimes} />
-              </button>
-            </div>
-            <div className={styles.modalBody}>
-              {selectedRequest && (
-                <>
-                  <div className={styles.detailGroup}>
-                    <span className={styles.detailLabel}>Educator Name</span>
-                    <p>{selectedRequest.educatorName || 'Unknown'}</p>
-                  </div>
-                  <div className={styles.detailGroup}>
-                    <span className={styles.detailLabel}>Request Title</span>
-                    <p>{selectedRequest.title}</p>
-                  </div>
-                  <div className={styles.detailGroup}>
-                    <span className={styles.detailLabel}>Details</span>
-                    <p>{selectedRequest.details}</p>
-                  </div>
-                  <div className={styles.detailsRow}>
-                    <div className={styles.detailGroup}>
-                      <span className={styles.detailLabel}>Priority</span>
-                      <p>
-                        <span
-                          className={styles.priorityBadge}
-                          style={{ backgroundColor: getPriorityColor(selectedRequest.priority) }}
-                        >
-                          {selectedRequest.priority?.toUpperCase()}
-                        </span>
-                      </p>
-                    </div>
-                    <div className={styles.detailGroup}>
-                      <span className={styles.detailLabel}>Status</span>
-                      <p>
-                        <span
-                          className={styles.statusBadge}
-                          style={{ backgroundColor: getStatusColor(selectedRequest.status) }}
-                        >
-                          {selectedRequest.status?.charAt(0).toUpperCase() +
-                            selectedRequest.status?.slice(1)}
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                  <div className={styles.detailsRow}>
-                    <div className={styles.detailGroup}>
-                      <span className={styles.detailLabel}>Submitted Date</span>
-                      <p>{new Date(selectedRequest.createdAt).toLocaleDateString()}</p>
-                    </div>
-                    <div className={styles.detailGroup}>
-                      <span className={styles.detailLabel}>Updated Date</span>
-                      <p>{new Date(selectedRequest.updatedAt).toLocaleDateString()}</p>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-            <div className={styles.modalFooter}>
-              {selectedRequest?.status === 'pending' && (
-                <>
-                  <button
-                    type="button"
-                    onClick={() => handleApprove(selectedRequest.id)}
-                    disabled={actionLoading}
-                    className={styles.approveBtnFull}
-                  >
-                    <FontAwesomeIcon icon={faCheck} /> Approve
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => handleDeny(selectedRequest.id)}
-                    disabled={actionLoading}
-                    className={styles.denyBtnFull}
-                  >
-                    <FontAwesomeIcon icon={faXmark} /> Deny
-                  </button>
-                </>
-              )}
-              <button type="button" onClick={() => setShowModal(false)} className={styles.closeBtn}>
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResourceManagementDashboard;
diff --git a/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.module.css b/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.module.css
deleted file mode 100644
index 28c6727f5c..0000000000
--- a/src/components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard.module.css
+++ /dev/null
@@ -1,946 +0,0 @@
-/* Page */
-.page {
-  padding: 4rem 3rem 6rem;
-  min-width: 100%;
-  min-height: 100%;
-  margin: 0;
-  background-color: #f8f9fa;
-  box-sizing: border-box;
-}
-
-.dark.page {
-  background-color: #0f172a;
-}
-
-/* Header */
-.header {
-  background: linear-gradient(135deg, #0050a0 0%, #003d7a 100%);
-  color: #fff;
-  padding: 3rem 2rem;
-  border-radius: 12px;
-  margin-bottom: 2rem;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-}
-
-.dark .header {
-  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-}
-
-.header h1 {
-  margin: 0;
-  font-size: 2.5rem;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  color: #fff;
-}
-
-.header p {
-  margin: 0.5rem 0 0;
-  font-size: 1rem;
-  opacity: 0.98;
-  font-weight: 300;
-  color: #fff;
-}
-
-/* Summary Stats - Top */
-.summaryStatsTop {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2.5rem;
-}
-
-.statCard {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 10px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-  border-left: 4px solid #007bff;
-}
-
-.dark .statCard {
-  background: #1e293b;
-  border-left-color: #7dd3fc;
-}
-
-.statCard:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
-}
-
-.dark .statCard:hover {
-  box-shadow: 0 8px 16px rgb(0 0 0 / 40%);
-}
-
-.statValue {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #007bff;
-  margin-bottom: 0.5rem;
-}
-
-.dark .statValue {
-  color: #7dd3fc;
-}
-
-.statLabel {
-  font-size: 0.9rem;
-  color: #6c757d;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 500;
-}
-
-.dark .statLabel {
-  color: #94a3b8;
-}
-
-/* Error Alert */
-.errorAlert {
-  margin-bottom: 2rem;
-  padding: 1rem 1.25rem;
-  border-radius: 8px;
-  background-color: #f8d7da;
-  color: #842029;
-  font-size: 0.95rem;
-}
-
-.dark .errorAlert {
-  background-color: #451a21;
-  color: #fca5a5;
-}
-
-/* Controls Bar */
-.controlsBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2.5rem;
-  flex-wrap: wrap;
-}
-
-.filterSection {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex: 1;
-  min-width: 280px;
-}
-
-.filterIcon {
-  color: #6c757d;
-  font-size: 1rem;
-}
-
-.dark .filterIcon {
-  color: #94a3b8;
-}
-
-.filterSelect {
-  padding: 0.75rem 1rem;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  font-size: 0.95rem;
-  background-color: #fff;
-  color: #212529;
-  flex: 1;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-weight: 500;
-}
-
-.dark .filterSelect {
-  background-color: #334155;
-  color: #e2e8f0;
-  border-color: #475569;
-}
-
-.filterSelect:hover {
-  border-color: #007bff;
-}
-
-.filterSelect:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 4px rgb(0 123 255 / 10%);
-}
-
-.dark .filterSelect:hover {
-  border-color: #7dd3fc;
-}
-
-.dark .filterSelect:focus {
-  border-color: #7dd3fc;
-  box-shadow: 0 0 0 4px rgb(125 211 252 / 20%);
-}
-
-.refreshBtn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  border: 2px solid #dee2e6;
-  border-radius: 8px;
-  background-color: #fff;
-  color: #495057;
-  font-weight: 500;
-  font-size: 0.95rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.dark .refreshBtn {
-  border-color: #475569;
-  color: #e2e8f0;
-  background-color: #334155;
-}
-
-.refreshBtn:hover {
-  border-color: #0056b3;
-  color: #0056b3;
-  background-color: #f8f9fa;
-}
-
-.refreshBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.dark .refreshBtn:hover {
-  border-color: #7dd3fc;
-  color: #7dd3fc;
-  background-color: #1e293b;
-}
-
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.refreshText {
-  display: none;
-}
-
-@media (width >= 768px) {
-  .refreshText {
-    display: inline;
-  }
-}
-
-/* Table Wrapper */
-.tableWrapper {
-  overflow-x: auto;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
-  margin-bottom: 2.5rem;
-}
-
-.dark .tableWrapper {
-  background: #1e293b;
-  box-shadow: 0 2px 12px rgb(0 0 0 / 30%);
-}
-
-.requestsTable {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 0;
-}
-
-.requestsTable thead {
-  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
-  border-bottom: 2px solid #dee2e6;
-}
-
-.dark .requestsTable thead {
-  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
-  border-bottom-color: #475569;
-}
-
-.requestsTable thead th {
-  padding: 1.25rem;
-  text-align: left;
-  font-weight: 600;
-  color: #212529;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.dark .requestsTable thead th {
-  color: #f1f5f9;
-}
-
-.requestsTable tbody tr {
-  border-bottom: 1px solid #f0f0f0;
-  transition: background-color 0.2s ease;
-}
-
-.dark .requestsTable tbody tr {
-  background-color: #1e293b;
-  border-bottom-color: #334155;
-}
-
-.requestsTable tbody tr:hover {
-  background-color: #f8f9fa;
-}
-
-.requestsTable tbody tr:last-child {
-  border-bottom: none;
-}
-
-.dark .requestsTable tbody tr:hover {
-  background-color: #334155;
-}
-
-.requestsTable tbody td {
-  padding: 1.25rem;
-  color: #495057;
-  vertical-align: middle;
-  font-size: 0.95rem;
-}
-
-.dark .requestsTable tbody td {
-  color: #cbd5e1;
-}
-
-.dark .requestsTable thead tr:hover {
-  background-color: #3e5468 !important;
-}
-
-.dateCell {
-  font-size: 0.9rem;
-  color: #6c757d;
-  white-space: nowrap;
-}
-
-.dark .dateCell {
-  color: #94a3b8;
-}
-
-.actionCell {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-/* Buttons */
-.viewBtn,
-.approveBtn,
-.denyBtn {
-  padding: 0.5rem 1rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    transform 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  color: #f1f5f9;
-  height: 36px;
-}
-
-.viewBtn {
-  background-color: #0284c7;
-}
-
-.approveBtn {
-  background-color: #16a34a;
-}
-
-.denyBtn {
-  background-color: #dc2626;
-}
-
-.viewBtn:disabled,
-.approveBtn:disabled,
-.denyBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.viewBtn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  background-color: #0369a1;
-}
-
-.approveBtn:hover:not(:disabled),
-.denyBtn:hover:not(:disabled) {
-  transform: translateY(-2px);
-}
-
-.approveBtn:hover:not(:disabled) {
-  background-color: #15803d;
-  box-shadow: 0 4px 8px rgb(22 163 74 / 30%);
-}
-
-.denyBtn:hover:not(:disabled) {
-  background-color: #b91c1c;
-  box-shadow: 0 4px 8px rgb(220 38 38 / 30%);
-}
-
-/* Status & Priority Badges */
-.statusBadge {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: #fff;
-  text-align: center;
-  min-width: 90px;
-}
-
-.priorityBadge {
-  display: inline-block;
-  padding: 0.4rem 0.85rem;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  text-align: center;
-  min-width: 70px;
-}
-
-/* Mobile Cards */
-.mobileCards {
-  display: none;
-}
-
-.requestCard {
-  background: #fff;
-  border: 1px solid #e9ecef;
-  border-radius: 10px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.dark .requestCard {
-  background: #1e293b;
-  border-color: #475569;
-}
-
-.requestCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
-}
-
-.dark .requestCard:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
-}
-
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid #f0f0f0;
-}
-
-.dark .cardHeader {
-  border-bottom-color: #334155;
-}
-
-.cardTitle {
-  margin: 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: #212529;
-  flex: 1;
-}
-
-.dark .cardTitle {
-  color: #f1f5f9;
-}
-
-.cardBody {
-  margin-bottom: 1rem;
-}
-
-.cardMeta {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0.75rem;
-}
-
-.metaItem {
-  font-size: 0.9rem;
-  color: #495057;
-}
-
-.dark .metaItem {
-  color: #cbd5e1;
-}
-
-.metaItem strong {
-  display: block;
-  font-weight: 600;
-  color: #212529;
-  margin-bottom: 0.25rem;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.dark .metaItem strong {
-  color: #f1f5f9;
-}
-
-.cardActions {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.fullWidthBtn,
-.approveBtnFull,
-.denyBtnFull {
-  width: 100%;
-  padding: 0.65rem 1rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  color: #f1f5f9;
-}
-
-.fullWidthBtn {
-  background-color: #0284c7;
-}
-
-.fullWidthBtn:hover {
-  background-color: #0369a1;
-}
-
-.approveBtnFull {
-  background-color: #16a34a;
-}
-
-.denyBtnFull {
-  background-color: #dc2626;
-}
-
-.approveBtnFull:disabled,
-.denyBtnFull:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.modalFooter .approveBtnFull,
-.modalFooter .denyBtnFull {
-  width: auto;
-}
-
-.approveBtnFull:hover:not(:disabled) {
-  background-color: #15803d;
-}
-
-.denyBtnFull:hover:not(:disabled) {
-  background-color: #b91c1c;
-}
-
-.closeBtn {
-  width: 100%;
-  padding: 0.65rem 1rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  border-radius: 6px;
-  border: 2px solid #dee2e6;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background-color: #fff;
-  color: #495057;
-}
-
-.dark .closeBtn {
-  border-color: #475569;
-  color: #e2e8f0;
-  background-color: #334155;
-}
-
-.closeBtn:hover {
-  background-color: #f8f9fa;
-}
-
-.dark .closeBtn:hover {
-  background-color: #475569;
-}
-
-/* Loading State */
-.loadingContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 1rem;
-  min-height: 400px;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.dark .loadingContainer {
-  background: #1e293b;
-}
-
-.spinner {
-  width: 60px;
-  height: 60px;
-  border: 4px solid #f0f0f0;
-  border-top-color: #007bff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 1.5rem;
-}
-
-.dark .spinner {
-  border-color: #334155;
-  border-top-color: #7dd3fc;
-}
-
-.loadingContainer p {
-  color: #6c757d;
-  font-size: 1rem;
-  margin: 0;
-  font-weight: 500;
-}
-
-/* Empty State */
-.emptyState {
-  text-align: center;
-  padding: 4rem 2rem;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  margin-bottom: 2.5rem;
-}
-
-.dark .emptyState {
-  background: #1e293b;
-}
-
-.emptyIcon {
-  font-size: 3.5rem;
-  margin-bottom: 1rem;
-  opacity: 0.8;
-}
-
-.emptyState h3 {
-  margin: 1rem 0 0.5rem;
-  color: #212529;
-  font-size: 1.4rem;
-  font-weight: 600;
-}
-
-.dark .emptyState h3 {
-  color: #f1f5f9;
-}
-
-.emptyState p {
-  margin: 0;
-  color: #6c757d;
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-.detailGroup p {
-  margin: 0;
-  color: #495057;
-  padding: 0.875rem;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  font-size: 0.95rem;
-  word-break: normal;
-  overflow-wrap: break-word;
-  border-left: 3px solid #007bff;
-}
-
-.dark .loadingContainer p {
-  color: #94a3b8;
-}
-
-.dark .emptyState p {
-  color: #94a3b8;
-}
-
-.dark .detailGroup p {
-  color: #cbd5e1;
-  background-color: #334155;
-  border-left-color: #7dd3fc;
-}
-
-/* Modal */
-.modalOverlay {
-  position: fixed;
-  inset: 0;
-  background: rgb(0 0 0 / 50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modalPopup {
-  background: #fff;
-  border-radius: 12px;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
-}
-
-.dark .modalPopup {
-  background: #1e293b;
-}
-
-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 2rem;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.dark .modalHeader {
-  border-bottom-color: #334155;
-}
-
-.modalHeader h2 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #212529;
-}
-
-.dark .modalHeader h2 {
-  color: #f1f5f9;
-}
-
-.modalClose {
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  color: #6c757d;
-  padding: 0.5rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.dark .modalClose {
-  color: #94a3b8;
-}
-
-.modalClose:hover {
-  background-color: #f8f9fa;
-  color: #212529;
-}
-
-.dark .modalClose:hover {
-  background-color: #334155;
-  color: #f1f5f9;
-}
-
-.modalBody {
-  padding: 2rem 2.5rem;
-}
-
-.detailGroup {
-  margin-bottom: 1.5rem;
-}
-
-.detailGroup label,
-.detailLabel {
-  display: block;
-  font-weight: 600;
-  color: #212529;
-  margin-bottom: 0.5rem;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.dark .detailGroup label,
-.dark .detailLabel {
-  color: #f1f5f9;
-}
-
-.detailsRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-}
-
-.modalFooter {
-  display: flex;
-  gap: 0.75rem;
-  padding: 1.5rem 2rem;
-  border-top: 1px solid #e9ecef;
-  justify-content: flex-end;
-}
-
-.dark .modalFooter {
-  border-top-color: #334155;
-}
-
-/* Responsive Design */
-@media (width <= 1024px) {
-  .summaryStatsTop {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (width <= 768px) {
-  .page {
-    padding: 1.5rem 1rem;
-  }
-
-  .header {
-    padding: 1.5rem 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .header h1 {
-    font-size: 1.5rem;
-  }
-
-  .header p {
-    font-size: 0.85rem;
-  }
-
-  .tableWrapper {
-    display: none;
-  }
-
-  .mobileCards {
-    display: block;
-  }
-
-  .summaryStatsTop {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-  }
-
-  .detailsRow {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .filterSelect {
-    min-width: auto;
-  }
-}
-
-@media (width <= 480px) {
-  .page {
-    padding: 1rem 0.75rem;
-  }
-
-  .header {
-    padding: 1rem 0.75rem;
-    margin-bottom: 1rem;
-    border-radius: 6px;
-  }
-
-  .header h1 {
-    font-size: 1.25rem;
-  }
-
-  .header p {
-    font-size: 0.8rem;
-  }
-
-  .filterSection {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .filterSelect {
-    width: 100%;
-    font-size: 1rem;
-  }
-
-  .refreshBtn {
-    width: 100%;
-  }
-
-  .mobileCards {
-    padding: 0 0.25rem;
-  }
-
-  .requestCard {
-    padding: 1rem;
-    margin-bottom: 1rem;
-    border-radius: 6px;
-  }
-
-  .cardHeader {
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .cardTitle {
-    font-size: 1rem;
-  }
-
-  .cardActions {
-    gap: 0.5rem;
-  }
-
-  .fullWidthBtn,
-  .approveBtnFull,
-  .denyBtnFull {
-    padding: 0.4rem 0.75rem;
-    font-size: 0.85rem;
-  }
-
-  .emptyState {
-    padding: 2rem 1rem;
-  }
-
-  .emptyIcon {
-    font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .emptyState h3 {
-    font-size: 1.1rem;
-    margin: 0.75rem 0 0.25rem;
-  }
-
-  .emptyState p {
-    font-size: 0.85rem;
-  }
-}
diff --git a/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.jsx b/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.jsx
deleted file mode 100644
index a13f4f660f..0000000000
--- a/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPaperPlane, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import { useHistory } from 'react-router-dom';
-import { createMockRequest } from '../../../__mocks__/resourceRequestMockData';
-import styles from './ResourceRequestForm.module.css';
-
-const ResourceRequestForm = ({ onClose }) => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-  const history = useHistory();
-  const [formData, setFormData] = useState({
-    title: '',
-    details: '',
-    priority: 'medium',
-  });
-  const [message, setMessage] = useState({ type: '', text: '' });
-  const [loading, setLoading] = useState(false);
-
-  const theme = darkMode ? styles.dark : '';
-
-  const handleInputChange = e => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSubmit = async e => {
-    e.preventDefault();
-    setMessage({ type: '', text: '' });
-    setLoading(true);
-
-    try {
-      createMockRequest(formData.title, formData.details, formData.priority);
-      setMessage({
-        type: 'success',
-        text: 'Your resource request has been submitted successfully!',
-      });
-
-      setFormData({ title: '', details: '', priority: 'medium' });
-
-      setTimeout(() => {
-        if (onClose) {
-          onClose();
-        } else {
-          history.push('/educator/requests');
-        }
-      }, 2000);
-    } catch (err) {
-      setMessage({
-        type: 'error',
-        text: err.message || 'An error occurred while submitting your request.',
-      });
-    }
-    setLoading(false);
-  };
-
-  const handleCancel = () => {
-    if (onClose) {
-      onClose();
-    } else {
-      history.push('/educator/requests');
-    }
-  };
-
-  return (
-    <div className={onClose ? theme : `${styles.page} ${theme}`}>
-      <div className={styles.formWrapper}>
-        <div className={styles.formHeader}>
-          <h1>Submit a Resource Request</h1>
-          <p>Tell us what resources you need for your educational programs</p>
-        </div>
-
-        {message.text && (
-          <div className={message.type === 'success' ? styles.successAlert : styles.errorAlert}>
-            {message.text}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className={styles.form}>
-          <div className={styles.formGroup}>
-            <label htmlFor="title">
-              Request Title <span className={styles.required}>*</span>
-            </label>
-            <input
-              type="text"
-              id="title"
-              name="title"
-              value={formData.title}
-              onChange={handleInputChange}
-              placeholder="e.g., Math Learning Materials"
-              className={styles.input}
-              required
-              maxLength="100"
-            />
-            <small className={styles.help}>Maximum 100 characters</small>
-          </div>
-
-          <div className={styles.formGroup}>
-            <label htmlFor="details">
-              Request Details <span className={styles.required}>*</span>
-            </label>
-            <textarea
-              id="details"
-              name="details"
-              value={formData.details}
-              onChange={handleInputChange}
-              placeholder="Provide detailed information about what resources you need and why..."
-              className={styles.textarea}
-              required
-              rows="6"
-              maxLength="1000"
-            />
-            <small className={styles.help}>{formData.details.length}/1000 characters</small>
-          </div>
-
-          <div className={styles.formGroup}>
-            <label htmlFor="priority">
-              Priority Level <span className={styles.required}>*</span>
-            </label>
-            <select
-              id="priority"
-              name="priority"
-              value={formData.priority}
-              onChange={handleInputChange}
-              className={styles.select}
-            >
-              <option value="low">Low</option>
-              <option value="medium">Medium</option>
-              <option value="high">High</option>
-              <option value="urgent">Urgent</option>
-            </select>
-            <small className={styles.help}>Select the priority level for this request</small>
-          </div>
-
-          <div className={styles.formActions}>
-            <button
-              type="button"
-              onClick={handleCancel}
-              disabled={loading}
-              className={styles.cancelButton}
-            >
-              <FontAwesomeIcon icon={faArrowLeft} /> Cancel
-            </button>
-            <button type="submit" disabled={loading} className={styles.submitButton}>
-              <FontAwesomeIcon icon={faPaperPlane} /> {loading ? 'Submitting...' : 'Submit Request'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default ResourceRequestForm;
diff --git a/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.module.css b/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.module.css
deleted file mode 100644
index efc19fc645..0000000000
--- a/src/components/ResourceRequest/ResourceRequestForm/ResourceRequestForm.module.css
+++ /dev/null
@@ -1,318 +0,0 @@
-/* Page */
-.page {
-  padding: 4rem 3rem 6rem;
-  min-width: 100%;
-  min-height: 100%;
-  margin: 0;
-  background-color: #f8f9fa;
-  box-sizing: border-box;
-}
-
-.dark.page {
-  background-color: #0f172a;
-}
-
-/* Form Wrapper */
-.formWrapper {
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
-  padding: 3rem;
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.dark .formWrapper {
-  background: #1e293b;
-}
-
-.formHeader {
-  margin-bottom: 2.5rem;
-  text-align: center;
-  padding-bottom: 2rem;
-  border-bottom: 2px solid #e9ecef;
-}
-
-.dark .formHeader {
-  border-bottom-color: #334155;
-}
-
-.formHeader h1 {
-  font-size: 2rem;
-  color: #212529;
-  margin: 0 0 0.75rem;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-}
-
-.dark .formHeader h1 {
-  color: #f1f5f9;
-}
-
-.formHeader p {
-  color: #6c757d;
-  font-size: 1rem;
-  margin: 0;
-  line-height: 1.6;
-}
-
-.dark .formHeader p {
-  color: #94a3b8;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.formGroup label {
-  font-weight: 600;
-  color: #212529;
-  font-size: 0.9rem;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.dark .formGroup label {
-  color: #f1f5f9;
-}
-
-.required {
-  color: #dc3545;
-  margin-left: 0.25rem;
-}
-
-.input,
-.textarea,
-.select {
-  padding: 0.875rem 1rem;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  font-size: 0.95rem;
-  font-family: inherit;
-  color: #495057;
-  background: #fff;
-  transition: all 0.2s ease;
-}
-
-.textarea {
-  resize: vertical;
-  min-height: 140px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.dark .input,
-.dark .textarea,
-.dark .select {
-  background: #334155;
-  color: #e2e8f0;
-  border-color: #475569;
-}
-
-.input:hover,
-.textarea:hover,
-.select:hover {
-  border-color: #007bff;
-}
-
-.input:focus,
-.textarea:focus,
-.select:focus {
-  outline: none;
-  border-color: #0056b3;
-  box-shadow: 0 0 0 3px rgb(0 123 255 / 25%);
-  background: #fff;
-}
-
-.dark .input:hover,
-.dark .textarea:hover,
-.dark .select:hover {
-  border-color: #7dd3fc;
-}
-
-.dark .input:focus,
-.dark .textarea:focus,
-.dark .select:focus {
-  border-color: #7dd3fc;
-  box-shadow: 0 0 0 3px rgb(125 211 252 / 25%);
-  background: #334155;
-}
-
-.input::placeholder,
-.textarea::placeholder {
-  color: #adb5bd;
-}
-
-.dark .input::placeholder,
-.dark .textarea::placeholder {
-  color: #cbd5e1;
-}
-
-.help {
-  font-size: 0.8rem;
-  color: #6c757d;
-  margin-top: 0.5rem;
-  line-height: 1.4;
-}
-
-.dark .help {
-  color: #94a3b8;
-}
-
-.formActions {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  border-top: 1px solid #e9ecef;
-  justify-content: flex-end;
-}
-
-.dark .formActions {
-  border-top-color: #334155;
-}
-
-.submitButton,
-.cancelButton {
-  padding: 0.875rem 2rem;
-  font-weight: 600;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 0.95rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.submitButton {
-  background: linear-gradient(135deg, #0050a0 0%, #003d7a 100%);
-  color: #fff;
-  box-shadow: 0 4px 8px rgb(0 123 255 / 20%);
-}
-
-.dark .submitButton {
-  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
-}
-
-.submitButton:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.submitButton:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgb(0 123 255 / 30%);
-}
-
-.cancelButton {
-  background: #fff;
-  color: #0056b3;
-  border: 2px solid #0056b3;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
-}
-
-.dark .cancelButton {
-  background: #334155;
-  color: #7dd3fc;
-  border-color: #7dd3fc;
-}
-
-.cancelButton:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.cancelButton:hover:not(:disabled) {
-  background: #0050a0;
-  color: #fff;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgb(0 123 255 / 20%);
-}
-
-.dark .cancelButton:hover:not(:disabled) {
-  background: #7dd3fc;
-  color: #0f172a;
-}
-
-/* Alerts */
-.successAlert {
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-  font-size: 0.95rem;
-  background: #d1fae5;
-  color: #065f46;
-  border-left: 4px solid #16a34a;
-}
-
-.dark .successAlert {
-  background: #064e3b;
-  color: #6ee7b7;
-}
-
-.errorAlert {
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-  font-size: 0.95rem;
-  background: #f8d7da;
-  color: #842029;
-  border-left: 4px solid #dc3545;
-}
-
-.dark .errorAlert {
-  background: #451a21;
-  color: #fca5a5;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .formWrapper {
-    padding: 2rem;
-  }
-
-  .formHeader h1 {
-    font-size: 1.5rem;
-  }
-
-  .form {
-    gap: 1.25rem;
-  }
-
-  .formActions {
-    flex-direction: column-reverse;
-  }
-
-  .submitButton,
-  .cancelButton {
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-@media (width <= 480px) {
-  .page {
-    padding: 1rem;
-  }
-
-  .formWrapper {
-    padding: 1rem;
-  }
-
-  .formHeader h1 {
-    font-size: 1.25rem;
-  }
-
-  .formHeader p {
-    font-size: 0.9rem;
-  }
-}
diff --git a/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.jsx b/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.jsx
deleted file mode 100644
index cbdaa5af65..0000000000
--- a/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.jsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faSync, faFilter } from '@fortawesome/free-solid-svg-icons';
-import {
-  getStatusColor,
-  getPriorityColor,
-  filterByStatus,
-  getRequestStats,
-} from '../utils/resourceRequestUtils';
-import { getMockEducatorRequests } from '../../../__mocks__/resourceRequestMockData';
-import ResourceRequestForm from '../ResourceRequestForm/ResourceRequestForm';
-import styles from './ResourceRequestList.module.css';
-
-const ResourceRequestList = () => {
-  const darkMode = useSelector(state => state.theme?.darkMode || false);
-  const [requests, setRequests] = useState([]);
-  const [filterStatus, setFilterStatus] = useState('all');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [showFormModal, setShowFormModal] = useState(false);
-
-  const theme = darkMode ? styles.dark : '';
-
-  useEffect(() => {
-    fetchRequests();
-    const handleFocus = () => fetchRequests();
-    window.addEventListener('focus', handleFocus);
-    return () => window.removeEventListener('focus', handleFocus);
-  }, []);
-
-  const fetchRequests = async () => {
-    setLoading(true);
-    setError('');
-    try {
-      const data = getMockEducatorRequests();
-      setRequests(data || []);
-    } catch (err) {
-      setError(err.message || 'Failed to load requests');
-    }
-    setLoading(false);
-  };
-
-  const getStatusBadge = status => (
-    <span className={styles.statusBadge} style={{ backgroundColor: getStatusColor(status) }}>
-      {status?.charAt(0).toUpperCase() + status?.slice(1)}
-    </span>
-  );
-
-  const getPriorityBadge = priority => (
-    <span className={styles.priorityBadge} style={{ backgroundColor: getPriorityColor(priority) }}>
-      {priority?.toUpperCase()}
-    </span>
-  );
-
-  const filteredRequests = filterByStatus(requests, filterStatus);
-  const stats = getRequestStats(requests);
-
-  const handleNewRequest = () => {
-    setShowFormModal(true);
-  };
-
-  const handleCloseFormModal = () => {
-    setShowFormModal(false);
-    fetchRequests();
-  };
-
-  if (loading) {
-    return (
-      <div className={`${styles.page} ${theme}`}>
-        <div className={styles.loadingContainer}>
-          <div className={styles.spinner} />
-          <p>Loading your requests...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`${styles.page} ${theme}`}>
-      <div className={styles.header}>
-        <div className={styles.headerContent}>
-          <h1>My Resource Requests</h1>
-          <p>Track the status of all your resource requests to Project Managers</p>
-        </div>
-        <button type="button" onClick={handleNewRequest} className={styles.newRequestBtn}>
-          <FontAwesomeIcon icon={faPlus} /> New Request
-        </button>
-      </div>
-
-      {error && <div className={styles.errorAlert}>{error}</div>}
-
-      <div className={styles.filterBar}>
-        <div className={styles.filterGroup}>
-          <FontAwesomeIcon icon={faFilter} className={styles.filterIcon} />
-          <select
-            value={filterStatus}
-            onChange={e => setFilterStatus(e.target.value)}
-            className={styles.filterSelect}
-          >
-            <option value="all">All Requests</option>
-            <option value="pending">Pending</option>
-            <option value="approved">Approved</option>
-            <option value="denied">Denied</option>
-          </select>
-        </div>
-        <button
-          type="button"
-          onClick={fetchRequests}
-          disabled={loading}
-          className={styles.refreshBtn}
-        >
-          <FontAwesomeIcon icon={faSync} />
-        </button>
-      </div>
-
-      {filteredRequests.length === 0 ? (
-        <div className={styles.emptyState}>
-          <div className={styles.emptyIcon}>📋</div>
-          <h3>No requests found</h3>
-          <p>
-            {filterStatus === 'all'
-              ? "You haven't submitted any resource requests yet."
-              : `You have no ${filterStatus} requests.`}
-          </p>
-          <button type="button" onClick={handleNewRequest} className={styles.submitFirstBtn}>
-            <FontAwesomeIcon icon={faPlus} /> Submit Your First Request
-          </button>
-        </div>
-      ) : (
-        <>
-          <div className={styles.tableWrapper}>
-            <table className={styles.requestsTable}>
-              <thead>
-                <tr>
-                  <th>Title</th>
-                  <th>Priority</th>
-                  <th>Status</th>
-                  <th>Submitted</th>
-                  <th>Last Updated</th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredRequests.map(request => (
-                  <tr key={request.id} className={styles.tableRow}>
-                    <td className={styles.titleCell}>
-                      <div className={styles.titleText}>{request.title}</div>
-                      <small className={styles.details}>
-                        {request.details?.substring(0, 50)}...
-                      </small>
-                    </td>
-                    <td>{getPriorityBadge(request.priority)}</td>
-                    <td>{getStatusBadge(request.status)}</td>
-                    <td className={styles.dateCell}>
-                      {new Date(request.createdAt).toLocaleDateString()}
-                    </td>
-                    <td className={styles.dateCell}>
-                      {new Date(request.updatedAt).toLocaleDateString()}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          <div className={styles.mobileCards}>
-            {filteredRequests.map(request => (
-              <div key={request.id} className={styles.requestCard}>
-                <div className={styles.cardHeader}>
-                  <h4 className={styles.cardTitle}>{request.title}</h4>
-                  {getStatusBadge(request.status)}
-                </div>
-                <div className={styles.cardBody}>
-                  <p className={styles.cardDetails}>{request.details}</p>
-                  <div className={styles.cardMeta}>
-                    <div className={styles.metaItem}>
-                      <strong>Priority:</strong> {getPriorityBadge(request.priority)}
-                    </div>
-                    <div className={styles.metaItem}>
-                      <strong>Submitted:</strong> {new Date(request.createdAt).toLocaleDateString()}
-                    </div>
-                    <div className={styles.metaItem}>
-                      <strong>Updated:</strong> {new Date(request.updatedAt).toLocaleDateString()}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-
-      {filteredRequests.length > 0 && (
-        <div className={styles.summaryStats}>
-          <div className={styles.statItem}>
-            <div className={styles.statNumber}>{stats.total}</div>
-            <div className={styles.statLabel}>Total</div>
-          </div>
-          <div className={styles.statItem}>
-            <div className={styles.statNumber}>{stats.pending}</div>
-            <div className={styles.statLabel}>Pending</div>
-          </div>
-          <div className={styles.statItem}>
-            <div className={styles.statNumber}>{stats.approved}</div>
-            <div className={styles.statLabel}>Approved</div>
-          </div>
-          <div className={styles.statItem}>
-            <div className={styles.statNumber}>{stats.denied}</div>
-            <div className={styles.statLabel}>Denied</div>
-          </div>
-        </div>
-      )}
-      {showFormModal && (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        <div className={styles.modalOverlay} onClick={handleCloseFormModal}>
-          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
-          <div className={styles.modalPopup} onClick={e => e.stopPropagation()}>
-            <ResourceRequestForm onClose={handleCloseFormModal} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResourceRequestList;
diff --git a/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.module.css b/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.module.css
deleted file mode 100644
index a5f53064d9..0000000000
--- a/src/components/ResourceRequest/ResourceRequestList/ResourceRequestList.module.css
+++ /dev/null
@@ -1,704 +0,0 @@
-/* Page */
-.page {
-  padding: 4rem 3rem 6rem;
-  min-width: 100%;
-  min-height: 100%;
-  margin: 0;
-  background-color: #f8f9fa;
-  box-sizing: border-box;
-}
-
-.dark.page {
-  background-color: #0f172a;
-}
-
-/* Header */
-.header {
-  background: linear-gradient(135deg, #0050a0 0%, #003d7a 100%);
-  color: #fff;
-  padding: 3rem 2rem;
-  border-radius: 12px;
-  margin-bottom: 2rem;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.dark .header {
-  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-}
-
-.headerContent h1 {
-  font-size: 2.5rem;
-  color: #fff;
-  margin: 0 0 0.5rem;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-}
-
-.headerContent p {
-  color: #fff;
-  font-size: 1rem;
-  margin: 0;
-  opacity: 0.98;
-  font-weight: 300;
-}
-
-.newRequestBtn {
-  white-space: nowrap;
-  padding: 0.875rem 1.75rem;
-  font-weight: 600;
-  background: #15803d;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgb(22 163 74 / 30%);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  font-size: 1rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dark .newRequestBtn {
-  background: #22c55e;
-  color: #0f172a;
-}
-
-.newRequestBtn:hover {
-  background: #15803d;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgb(22 163 74 / 40%);
-}
-
-.dark .newRequestBtn:hover {
-  background: #16a34a;
-}
-
-/* Error Alert */
-.errorAlert {
-  padding: 1rem 1.25rem;
-  border-radius: 8px;
-  margin-bottom: 1.5rem;
-  background-color: #f8d7da;
-  color: #842029;
-  font-size: 0.95rem;
-}
-
-.dark .errorAlert {
-  background-color: #451a21;
-  color: #fca5a5;
-}
-
-/* Filter Bar */
-.filterBar {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.dark .filterBar {
-  background: #1e293b;
-}
-
-.filterGroup {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex: 1;
-}
-
-.filterIcon {
-  color: #007bff;
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.dark .filterIcon {
-  color: #7dd3fc;
-}
-
-.filterSelect {
-  padding: 0.75rem 1rem;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  background-color: #fff;
-  cursor: pointer;
-  font-size: 0.95rem;
-  color: #495057;
-  transition: all 0.2s ease;
-  min-width: 200px;
-}
-
-.dark .filterSelect {
-  background-color: #334155;
-  color: #e2e8f0;
-  border-color: #475569;
-}
-
-.filterSelect:hover {
-  border-color: #007bff;
-  box-shadow: 0 0 0 3px rgb(0 123 255 / 10%);
-}
-
-.filterSelect:focus {
-  outline: none;
-  border-color: #0056b3;
-  box-shadow: 0 0 0 3px rgb(0 123 255 / 25%);
-}
-
-.dark .filterSelect:hover {
-  border-color: #7dd3fc;
-  box-shadow: 0 0 0 3px rgb(125 211 252 / 10%);
-}
-
-.dark .filterSelect:focus {
-  border-color: #7dd3fc;
-  box-shadow: 0 0 0 3px rgb(125 211 252 / 25%);
-}
-
-.refreshBtn {
-  padding: 0.75rem 1.25rem;
-  background: #fff;
-  color: #0056b3;
-  border: 2px solid #0056b3;
-  border-radius: 8px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.95rem;
-}
-
-.dark .refreshBtn {
-  background: #334155;
-  color: #7dd3fc;
-  border-color: #7dd3fc;
-}
-
-.refreshBtn:hover {
-  background: #0050a0;
-  color: #fff;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgb(0 123 255 / 30%);
-}
-
-.dark .refreshBtn:hover {
-  background: #7dd3fc;
-  color: #0f172a;
-}
-
-/* Table Wrapper */
-.tableWrapper {
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  overflow: hidden;
-  margin-bottom: 2rem;
-}
-
-.dark .tableWrapper {
-  background: #1e293b;
-}
-
-.requestsTable {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.requestsTable thead {
-  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
-  border-bottom: 2px solid #dee2e6;
-}
-
-.dark .requestsTable thead {
-  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
-  border-bottom-color: #475569;
-}
-
-.requestsTable thead th {
-  padding: 1.25rem;
-  text-align: left;
-  font-weight: 600;
-  color: #212529;
-  font-size: 0.95rem;
-}
-
-.dark .requestsTable thead th {
-  color: #f1f5f9;
-}
-
-.requestsTable td {
-  padding: 1.25rem;
-  border-bottom: 1px solid #e9ecef;
-  font-size: 0.95rem;
-  color: #495057;
-}
-
-.dark .requestsTable td {
-  border-bottom-color: #334155;
-  color: #cbd5e1;
-}
-
-.tableRow:hover {
-  background-color: #f8f9fa;
-}
-
-.dark .tableRow:hover {
-  background-color: #334155;
-}
-
-.dark .requestsTable thead tr:hover {
-  background-color: #3e5468 !important;
-}
-
-.titleCell {
-  max-width: 300px;
-}
-
-.titleText {
-  font-weight: 600;
-  color: #212529;
-  margin-bottom: 0.25rem;
-}
-
-.dark .titleText {
-  color: #f1f5f9;
-}
-
-.details {
-  color: #6c757d;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.85rem;
-}
-
-.dark .details {
-  color: #94a3b8;
-}
-
-.dateCell {
-  white-space: nowrap;
-  color: #6c757d;
-  font-size: 0.9rem;
-}
-
-.dark .dateCell {
-  color: #94a3b8;
-}
-
-.statusBadge {
-  padding: 0.5rem 1rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  border-radius: 20px;
-  display: inline-block;
-  text-transform: capitalize;
-  min-width: 90px;
-  text-align: center;
-  color: #fff;
-}
-
-.priorityBadge {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: #fff;
-  text-transform: capitalize;
-  min-width: 70px;
-  text-align: center;
-}
-
-/* Mobile Cards */
-.mobileCards {
-  display: none;
-}
-
-.requestCard {
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  border-left: 4px solid #007bff;
-  transition: all 0.2s ease;
-}
-
-.dark .requestCard {
-  background: #1e293b;
-  border-left-color: #7dd3fc;
-}
-
-.requestCard:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
-}
-
-.dark .requestCard:hover {
-  box-shadow: 0 8px 16px rgb(0 0 0 / 40%);
-}
-
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-  gap: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.dark .cardHeader {
-  border-bottom-color: #334155;
-}
-
-.cardTitle {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #212529;
-  margin: 0;
-}
-
-.dark .cardTitle {
-  color: #f1f5f9;
-}
-
-.cardBody {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.cardDetails {
-  color: #6c757d;
-  font-size: 0.95rem;
-  margin: 0;
-  line-height: 1.5;
-}
-
-.dark .cardDetails {
-  color: #94a3b8;
-}
-
-.cardMeta {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e9ecef;
-}
-
-.dark .cardMeta {
-  border-top-color: #334155;
-}
-
-.metaItem {
-  font-size: 0.85rem;
-  color: #495057;
-}
-
-.dark .metaItem {
-  color: #cbd5e1;
-}
-
-.metaItem strong {
-  color: #212529;
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.dark .metaItem strong {
-  color: #f1f5f9;
-}
-
-/* Empty State */
-.emptyState {
-  background: #fff;
-  border-radius: 10px;
-  padding: 4rem 2rem;
-  text-align: center;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  margin-bottom: 2rem;
-}
-
-.dark .emptyState {
-  background: #1e293b;
-}
-
-.emptyIcon {
-  font-size: 3.5rem;
-  margin-bottom: 1.5rem;
-  opacity: 0.8;
-}
-
-.emptyState h3 {
-  font-size: 1.6rem;
-  color: #212529;
-  margin: 0 0 0.75rem;
-  font-weight: 700;
-}
-
-.dark .emptyState h3 {
-  color: #f1f5f9;
-}
-
-.emptyState p {
-  color: #6c757d;
-  margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-.loadingContainer p {
-  color: #6c757d;
-  font-size: 1rem;
-  margin: 0;
-  font-weight: 500;
-}
-
-.dark .emptyState p {
-  color: #94a3b8;
-}
-
-.dark .loadingContainer p {
-  color: #94a3b8;
-}
-
-.submitFirstBtn {
-  margin-top: 1.5rem;
-  padding: 0.875rem 1.75rem;
-  font-weight: 600;
-  background: #0050a0;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 1rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.2s ease;
-}
-
-.dark .submitFirstBtn {
-  background: #0284c7;
-}
-
-.submitFirstBtn:hover {
-  background: #0056b3;
-  transform: translateY(-2px);
-}
-
-/* Loading State */
-.loadingContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.dark .loadingContainer {
-  background: #1e293b;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #007bff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 1rem;
-}
-
-.dark .spinner {
-  border-color: #334155;
-  border-top-color: #7dd3fc;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Summary Stats */
-.summaryStats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.statItem {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 10px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-  border-left: 4px solid #007bff;
-}
-
-.dark .statItem {
-  background: #1e293b;
-  border-left-color: #7dd3fc;
-}
-
-.statItem:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
-}
-
-.dark .statItem:hover {
-  box-shadow: 0 8px 16px rgb(0 0 0 / 40%);
-}
-
-.statValue {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #007bff;
-  margin-bottom: 0.5rem;
-}
-
-.dark .statValue {
-  color: #7dd3fc;
-}
-
-.statLabel {
-  font-size: 0.9rem;
-  color: #6c757d;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 500;
-}
-
-.dark .statLabel {
-  color: #94a3b8;
-}
-
-.statNumber {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #007bff;
-  margin-bottom: 0.5rem;
-}
-
-.dark .statNumber {
-  color: #7dd3fc;
-}
-
-/* Modal */
-.modalOverlay {
-  position: fixed;
-  inset: 0;
-  background: rgb(0 0 0 / 50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modalPopup {
-  background: #fff;
-  border-radius: 12px;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
-}
-
-.dark .modalPopup {
-  background: #1e293b;
-}
-
-/* Responsive Design */
-@media (width <= 1024px) {
-  .header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .newRequestBtn {
-    width: 100%;
-  }
-}
-
-@media (width <= 768px) {
-  .page {
-    padding: 1rem;
-  }
-
-  .tableWrapper {
-    display: none;
-  }
-
-  .mobileCards {
-    display: block;
-  }
-
-  .filterBar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .filterGroup {
-    width: 100%;
-  }
-
-  .filterSelect {
-    width: 100%;
-  }
-
-  .summaryStats {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (width <= 480px) {
-  .headerContent h1 {
-    font-size: 1.5rem;
-  }
-
-  .summaryStats {
-    grid-template-columns: 1fr;
-  }
-
-  .requestCard {
-    padding: 1rem;
-  }
-
-  .cardMeta {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/components/ResourceRequest/hooks/useResourceFetch.js b/src/components/ResourceRequest/hooks/useResourceFetch.js
deleted file mode 100644
index f02ee9a26c..0000000000
--- a/src/components/ResourceRequest/hooks/useResourceFetch.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useState, useCallback } from 'react';
-
-/**
- * Custom hook to handle resource fetching with consistent error handling
- * Reduces code duplication across ResourceRequest components
- */
-export const useResourceFetch = () => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const fetchWithErrorHandling = useCallback(async (url, options = {}) => {
-    setLoading(true);
-    setError('');
-
-    try {
-      const response = await fetch(url, {
-        method: options.method || 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          ...options.headers,
-        },
-        ...(options.body && { body: JSON.stringify(options.body) }),
-      });
-
-      if (!response.ok) {
-        const contentType = response.headers.get('content-type');
-        if (contentType?.includes('text/html')) {
-          throw new Error(
-            'Backend endpoint not found. Please ensure the API server is running and the endpoint is configured.',
-          );
-        }
-        throw new Error(`Server error: ${response.status} ${response.statusText}`);
-      }
-
-      let data;
-      try {
-        data = await response.json();
-      } catch {
-        const contentType = response.headers.get('content-type') || 'unknown format';
-        throw new Error(
-          `Invalid response format from server. Expected JSON but received: ${contentType}`,
-        );
-      }
-
-      setLoading(false);
-      return { success: true, data };
-    } catch (err) {
-      const errorMessage = err.message || 'An unexpected error occurred';
-      setError(errorMessage);
-      setLoading(false);
-      return { success: false, error: errorMessage };
-    }
-  }, []);
-
-  return { loading, error, setLoading, setError, fetchWithErrorHandling };
-};
-
-export default useResourceFetch;
diff --git a/src/components/ResourceRequest/utils/resourceRequestUtils.js b/src/components/ResourceRequest/utils/resourceRequestUtils.js
deleted file mode 100644
index a5f86d8813..0000000000
--- a/src/components/ResourceRequest/utils/resourceRequestUtils.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Shared utility functions and constants for Resource Request components
- * Reduces code duplication across multiple components
- */
-
-// Status and Priority color mappings
-export const STATUS_COLORS = {
-  pending: '#ffc107',
-  approved: '#28a745',
-  denied: '#dc3545',
-};
-
-export const PRIORITY_COLORS = {
-  low: '#17a2b8',
-  medium: '#007bff',
-  high: '#fd7e14',
-  urgent: '#dc3545',
-};
-
-// Get color for status
-export const getStatusColor = status => STATUS_COLORS[status] || '#6c757d';
-
-// Get color for priority
-export const getPriorityColor = priority => PRIORITY_COLORS[priority] || '#6c757d';
-
-// Filter requests by status
-export const filterByStatus = (requests, status) => {
-  if (status === 'all') return requests;
-  return requests.filter(req => req.status === status);
-};
-
-// Calculate request statistics
-export const getRequestStats = requests => ({
-  total: requests.length,
-  pending: requests.filter(r => r.status === 'pending').length,
-  approved: requests.filter(r => r.status === 'approved').length,
-  denied: requests.filter(r => r.status === 'denied').length,
-});
-
-// Get status badge configuration
-export const getStatusBadgeConfig = status => {
-  const configs = {
-    pending: { color: 'warning', icon: '⏳', label: 'Pending' },
-    approved: { color: 'success', icon: '✓', label: 'Approved' },
-    denied: { color: 'danger', icon: '✕', label: 'Denied' },
-  };
-  return configs[status] || configs.pending;
-};
-
-// Get priority badge configuration
-export const getPriorityBadgeConfig = priority => {
-  const configs = {
-    low: { color: 'info', bgColor: '#d1ecf1' },
-    medium: { color: 'primary', bgColor: '#cfe2ff' },
-    high: { color: 'warning', bgColor: '#fff3cd' },
-    urgent: { color: 'danger', bgColor: '#f8d7da' },
-  };
-  return configs[priority] || configs.medium;
-};
-
-export default {
-  STATUS_COLORS,
-  PRIORITY_COLORS,
-  getStatusColor,
-  getPriorityColor,
-  filterByStatus,
-  getRequestStats,
-  getStatusBadgeConfig,
-  getPriorityBadgeConfig,
-};
diff --git a/src/components/Teams/TeamMembersPopup.jsx b/src/components/Teams/TeamMembersPopup.jsx
index 9d4933df7d..0128a9a5d9 100644
--- a/src/components/Teams/TeamMembersPopup.jsx
+++ b/src/components/Teams/TeamMembersPopup.jsx
@@ -69,8 +69,8 @@ export const TeamMembersPopup = React.memo(props => {
   const darkMode = useSelector(state => state.theme.darkMode);
   const hasVisibilityIconPermission = hasPermission('seeVisibilityIcon');
   const canAssignTeamToUsers = hasPermission('assignTeamToUsers');
-  const [filterMode, setFilterMode] = useState('active'); // 'active' | 'all' | 'inactive'
 
+  const [filterMode, setFilterMode] = useState('all');
   const [selectedUser, setSelectedUser] = useState(undefined);
   const [isValidUser, setIsValidUser] = useState(true);
   const [searchText, setSearchText] = useState('');
@@ -403,9 +403,10 @@ export const TeamMembersPopup = React.memo(props => {
                       whiteSpace: 'nowrap',
                     }}
                   >
-                    {filterMode}
+                    {labelForFilter(filterMode)}
                   </button>
                 </th>
+
                 <th
                   className="def-width"
                   style={{ width: 56, textAlign: 'center', verticalAlign: 'middle' }}
@@ -470,6 +471,26 @@ export const TeamMembersPopup = React.memo(props => {
           </Button>
         </ModalFooter>
       </Modal>
+
+      {/* <Modal
+        isOpen={deletedPopup}
+        toggle={closeDeletedPopup}
+        className={darkMode ? 'dark-mode text-light' : ''}
+      >
+        <ModalHeader
+          toggle={closeDeletedPopup}
+          className={`${darkMode ? 'bg-space-cadet' : ''} text-danger font-weight-bold`}
+        >
+          Member Deleted!
+        </ModalHeader>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
+          <p>
+            Team member successfully deleted! Ryunosuke Satoro famously said, &ldquo;Individually we
+            are one drop, together we are an ocean.&rdquo; Through the action you just took, this
+            ocean is now one drop smaller.
+          </p>
+        </ModalBody>
+      </Modal> */}
     </Container>
   );
 });
diff --git a/src/components/TotalOrgSummary/TotalOrgSummary.jsx b/src/components/TotalOrgSummary/TotalOrgSummary.jsx
index acfedb736c..87e91642e5 100644
--- a/src/components/TotalOrgSummary/TotalOrgSummary.jsx
+++ b/src/components/TotalOrgSummary/TotalOrgSummary.jsx
@@ -601,6 +601,132 @@ function TotalOrgSummary(props) {
       )}
     >
       <div ref={rootRef} data-pdf-root>
+        <Row className={styles.totalOrgReportHeaderRow} data-pdf-title-row>
+          <div className={styles.reportHeaderTitle} data-pdf-title-col>
+            <h3 className="my-0">Total Org Summary</h3>
+          </div>
+          <div className={styles.reportHeaderActions}>
+            <Dropdown
+              isOpen={dateRangeDropdownOpen}
+              toggle={() => setDateRangeDropdownOpen(!dateRangeDropdownOpen)}
+            >
+              <DropdownToggle caret>{selectedDateRange}</DropdownToggle>
+              <DropdownMenu className={styles.menuDropdownColor}>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => handleDateRangeSelect('Current Week')}
+                >
+                  Current Week
+                </DropdownItem>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => handleDateRangeSelect('Previous Week')}
+                >
+                  Previous Week
+                </DropdownItem>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => handleDateRangeSelect('Select Date Range')}
+                >
+                  Select Date Range
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown
+              isOpen={comparisonDropdownOpen}
+              toggle={() => setComparisonDropdownOpen(!comparisonDropdownOpen)}
+            >
+              <DropdownToggle caret>{selectedComparison}</DropdownToggle>
+              <DropdownMenu className={styles.menuDropdownColor}>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => setSelectedComparison('No Comparison')}
+                >
+                  No Comparison
+                </DropdownItem>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => setSelectedComparison('Week Over Week')}
+                >
+                  Week Over Week
+                </DropdownItem>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => setSelectedComparison('Month Over Month')}
+                >
+                  Month Over Month
+                </DropdownItem>
+                <DropdownItem
+                  className={styles.colorOptionsText}
+                  onClick={() => setSelectedComparison('Year Over Year')}
+                >
+                  Year Over Year
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+            <Button
+              className={styles.sharePdfBtn}
+              data-pdf-hide
+              onClick={handleSaveAsPDF}
+              disabled={isGeneratingPDF}
+            >
+              {isGeneratingPDF ? 'Generating PDF...' : 'Save as PDF'}
+            </Button>
+          </div>
+        </Row>
+        <Modal isOpen={showDatePicker} toggle={() => setShowDatePicker(!showDatePicker)}>
+          <ModalHeader toggle={() => setShowDatePicker(!showDatePicker)}>
+            Select Date Range
+          </ModalHeader>
+          <ModalBody>
+            <div className="d-flex flex-column gap-4">
+              <div>
+                <label htmlFor="start-date" style={{ display: 'block', marginBottom: '1rem' }}>
+                  Start Date
+                </label>
+                <div style={{ padding: '0.5rem 0' }}>
+                  <DatePicker
+                    id="start-date"
+                    selected={startDate}
+                    onChange={date => setStartDate(date)}
+                    className="form-control"
+                    dateFormat="MM/dd/yyyy"
+                    placeholderText="Select start date"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="end-date" style={{ display: 'block', marginBottom: '1rem' }}>
+                  End Date
+                </label>
+                <div style={{ padding: '0.5rem 0' }}>
+                  <DatePicker
+                    id="end-date"
+                    selected={endDate}
+                    onChange={date => setEndDate(date)}
+                    className="form-control"
+                    dateFormat="MM/dd/yyyy"
+                    placeholderText="Select end date"
+                    minDate={startDate}
+                  />
+                </div>
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={() => setShowDatePicker(false)}>
+              Cancel
+            </Button>
+            <Button
+              color="primary"
+              onClick={handleDatePickerSubmit}
+              disabled={!startDate || !endDate}
+            >
+              Apply
+            </Button>
+          </ModalFooter>
+        </Modal>
         <ReportHeader
           darkMode={darkMode}
           selectedDateRange={selectedDateRange}
diff --git a/src/components/UserProfile/AssignBadgePopup.jsx b/src/components/UserProfile/AssignBadgePopup.jsx
index 7604ea69f6..ed1cb4bac3 100644
--- a/src/components/UserProfile/AssignBadgePopup.jsx
+++ b/src/components/UserProfile/AssignBadgePopup.jsx
@@ -63,18 +63,11 @@ function AssignBadgePopup(props) {
     } catch (error) {}
   };
 
- const formatSearchInput = text => {
-    return text
-      .toLowerCase()
-      .replace(/\s+/g, '')
-      .trim();
-  };
-
   const filterBadges = (allBadges = []) => {
     // guard against non-array inputs
     if (!Array.isArray(allBadges)) return [];
     return allBadges.filter(({ badgeName }) =>
-      formatSearchInput(badgeName).includes(formatSearchInput(searchedName)),
+      badgeName.toLowerCase().includes(searchedName.toLowerCase()),
     );
   };
 
@@ -95,19 +88,6 @@ function AssignBadgePopup(props) {
 
   return (
     <div data-testid="test-assignbadgepopup">
-      {/* Comprehensive dark mode hover style fix */}
-      {darkMode && (
-        <style>{`
-          .dark-mode-table tbody tr:hover,
-          .dark-mode-table tbody tr:hover td,
-          .dark-mode-table thead tr:hover,
-          .dark-mode-table thead tr:hover th,
-          .dark-mode-table thead tr:hover i {
-            background-color: #2b3553 !important;
-            color: #ffffff !important;
-          }
-        `}</style>
-      )}
       <input
         data-testid="test-searchBadgeName"
         type="text"
@@ -119,10 +99,7 @@ function AssignBadgePopup(props) {
       />
       <div style={{ overflowY: 'scroll', height: '75vh' }}>
         {!isLoadingBadge && (props.isTableOpen !== undefined ? props.isTableOpen : filteredBadges.length > 0) ? (
-          <Table 
-            data-testid="test-badgeResults" 
-            className={darkMode ? 'text-light dark-mode-table' : ''}
-          >
+          <Table data-testid="test-badgeResults" className={darkMode ? 'text-light' : ''}>
             <thead
               style={
                 darkMode
diff --git a/src/components/UserProfile/TeamsAndProjects/UserProjectsTable.jsx b/src/components/UserProfile/TeamsAndProjects/UserProjectsTable.jsx
index 7f1e6e9a7a..80b9a91c2b 100644
--- a/src/components/UserProfile/TeamsAndProjects/UserProjectsTable.jsx
+++ b/src/components/UserProfile/TeamsAndProjects/UserProjectsTable.jsx
@@ -18,8 +18,6 @@ const UserProjectsTable = React.memo(props => {
     return fallback;
   };
 
-  const getProjectId = project => project?._id || project?.projectId;
-
   const [tooltipOpen, setTooltip] = useState(false);
   const canAssignProjectToUsers = props.hasPermission('assignProjectToUsers');
   const canUpdateTask = props.hasPermission('updateTask');
@@ -47,18 +45,16 @@ const UserProjectsTable = React.memo(props => {
 }, [userTasks]);
 
   const tasksByProject = userProjects?.map(project => {
-    const projectId = getProjectId(project);
-    const tasks = sortedTasksByNumber?.filter(task => task.projectId?.includes(projectId));
-    return { ...project, projectId, tasks };
+    const tasks = sortedTasksByNumber?.filter(task => task.projectId?.includes(project.projectId));
+    return { ...project, tasks };
   });
 
   const filterTasksByUserTaskSituation = useMemo(() => {
     return (situation) => {
       if (sortedTasksByNumber) {
         return userProjects?.map(project => {
-          const projectId = getProjectId(project);
           const filteredTasks = sortedTasksByNumber.filter(task => {
-            const isTaskForProject = task.projectId?.includes(projectId);
+            const isTaskForProject = task.projectId?.includes(project.projectId);
             const isCompletedTask = task.resources?.find(user => user.userID === props.userId)?.completedTask;
     
             if (isTaskForProject) {
@@ -73,7 +69,7 @@ const UserProjectsTable = React.memo(props => {
             return false;
           });
     
-          return { ...project, projectId, tasks: filteredTasks };
+          return { ...project, tasks: filteredTasks };
         });
       }
     };
@@ -115,9 +111,9 @@ const removeOrAddTaskFromUser = (task, method) => {
 };
 
   //For updating tasks visually but not saving until user clicks save changes
-  const deleteTasksTemporarily = (projectId) => {
-    setFilteredTasks(filteredTasks?.filter(project => getProjectId(project) !== projectId));
-  };
+  const deleteTasksTemporarily = (project_id) => {
+    setFilteredTasks(filteredTasks?.filter(project => project.projectId !== project_id ));
+  }
 
   useEffect(()=>{
     setFilteredTasks(() => filterTasksByUserTaskSituation('active'));
@@ -184,17 +180,15 @@ const removeOrAddTaskFromUser = (task, method) => {
               </thead>
               <tbody>
                 {props.userProjectsById.length > 0 ? (
-                  tasksByProject?.map((project, index) => {
-                    const projectId = getProjectId(project);
-                    return (
-                    <tr key={projectId} className={darkMode ? 'bg-yinmn-blue' : ''}>
+                  tasksByProject?.map((project, index) => (
+                    <tr key={project.projectId} className={darkMode ? 'bg-yinmn-blue' : ''}>
                       <td>{index + 1}</td>
                       <td className="taskName">{project.projectName}</td>
                       {props.role && canPostTask && (
                         <td className='table-cell'>
-                          <Link to={`/project/wbs/${projectId}`}>
+                          <Link to={`/project/wbs/${project.projectId}`}>
                             <button
-                              id={`wbs-tooltip-${projectId}`}
+                              id={`wbs-tooltip-${project.projectId}`}
                               type="button"
                               className="btn btn-outline-info"
                               style={darkMode ? {} : boxStyle}
@@ -205,7 +199,7 @@ const removeOrAddTaskFromUser = (task, method) => {
 
                           <UncontrolledTooltip
                             placement="left"
-                            target={`wbs-tooltip-${projectId}`}
+                            target={`wbs-tooltip-${project.projectId}`}
                             delay={{ show: 250, hide: 100 }} // Optional: smoother UX
                           >
                             Click to access the Work Breakdown Structures &#40;WBSs&#41; for this project
@@ -218,8 +212,8 @@ const removeOrAddTaskFromUser = (task, method) => {
                             color="danger"
                             disabled={!canUpdateTask}
                             onClick={e => {
-                              props.onDeleteClick(projectId);
-                              deleteTasksTemporarily(projectId);
+                              props.onDeleteClick(project.projectId);
+                              deleteTasksTemporarily(project.projectId);
                             }}
                             style={darkMode ? boxStyleDark : boxStyle}
                           >
@@ -228,8 +222,7 @@ const removeOrAddTaskFromUser = (task, method) => {
                         </td>
                       )}
                     </tr>
-                    );
-                  })
+                  ))
                 ) : (
                   <></>
                 )}
@@ -390,7 +383,7 @@ const removeOrAddTaskFromUser = (task, method) => {
               <tbody>
                 {props.userProjectsById.length > 0 ? (
                   filteredTasks?.map((project, index) => (
-                    <tr key={getProjectId(project)}>
+                    <tr key={project.projectId}>
                       <td>{index + 1}</td>
                       <td className="taskName">{`${project.projectName}`}</td>
                       {props.edit && props.role && canDeleteProjects && (
@@ -399,7 +392,7 @@ const removeOrAddTaskFromUser = (task, method) => {
                             color="danger"
                             disabled={!canUpdateTask}
                             onClick={e => {
-                              props.onDeleteClick(getProjectId(project));
+                              props.onDeleteClick(project.projectId);
                             }}
                             style={darkMode ? boxStyleDark : boxStyle}
                           >
diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx
index 30ea3cff31..7058d95e00 100644
--- a/src/components/UserProfile/UserProfile.jsx
+++ b/src/components/UserProfile/UserProfile.jsx
@@ -449,14 +449,9 @@ function UserProfile(props) {
         );
         const normalized = (data || []).map(row => {
           // common shapes: {project: {...}}, {projectId: {...}}, or already {...}
-          let project;
-          if (row?.project?.projectName) project = row.project;
-          else if (row?.projectId?.projectName) project = row.projectId;
-          else project = row; // fallback if API already returns the project document
-          return {
-            ...project,
-            projectId: project?._id || project?.projectId,
-          };
+          if (row?.project?.projectName) return row.project;
+          if (row?.projectId?.projectName) return row.projectId;
+          return row; // fallback if API already returns the project document
         });
         setProjects(normalized);
         setOriginalProjects(normalized);
@@ -598,12 +593,7 @@ const onAssignProject = async (assignedProject) => {
     return;
   }
 
-  const normalizedProject = {
-    ...assignedProject,
-    projectId: assignedProject._id || assignedProject.projectId,
-  };
-
-  const updatedProjects = [...currentProjects, normalizedProject];
+  const updatedProjects = [...currentProjects, assignedProject];
   setProjects(updatedProjects);
 
   const updatedUserProfile = {
diff --git a/src/components/common/EPDashboard/EPProtectedRoute/EPProtectedRoute.jsx b/src/components/common/EPDashboard/EPProtectedRoute/EPProtectedRoute.jsx
index 46b4f837fa..ca862370be 100644
--- a/src/components/common/EPDashboard/EPProtectedRoute/EPProtectedRoute.jsx
+++ b/src/components/common/EPDashboard/EPProtectedRoute/EPProtectedRoute.jsx
@@ -2,7 +2,6 @@
 import { Redirect, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { Suspense } from 'react';
-import EducationPortalLayout from '~/components/EductionPortal/layout/EducationPortalLayout';
 
 // eslint-disable-next-line react/function-component-definition
 const EPProtectedRoute = ({ component: Component, render, auth, fallback, ...rest }) => {
@@ -13,41 +12,15 @@ const EPProtectedRoute = ({ component: Component, render, auth, fallback, ...res
         if (!auth.isAuthenticated) {
           return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
         }
-
-        // If the user explicitly logged out of the Education Portal, require EP login again.
-        const epLoggedOut =
-          typeof window !== 'undefined' && window.sessionStorage
-            ? window.sessionStorage.getItem('gePortalLoggedOut') === 'true'
-            : false;
-        if (epLoggedOut) {
+        if (auth.user.access && !auth.user.access.canAccessBMPortal) {
           return (
             <Redirect
               to={{ pathname: '/educationportal/login', state: { from: props.location } }}
             />
           );
         }
-
-        // Only enforce portal access check once access flags are available.
-        // Some environments expose EP access as `canAccessGEPortal`, others as `canAccessBMPortal`.
-        if (auth.user.access) {
-          const access = auth.user.access;
-          const hasGEFlag = Object.hasOwn(access, 'canAccessGEPortal');
-          const canAccessEP = hasGEFlag ? access.canAccessGEPortal : access.canAccessBMPortal;
-
-          if (!canAccessEP) {
-            return (
-              <Redirect
-                to={{ pathname: '/educationportal/login', state: { from: props.location } }}
-              />
-            );
-          }
-        }
-
-        const Page = Component ? <Component {...props} /> : render(props);
-        const Wrapped = <EducationPortalLayout>{Page}</EducationPortalLayout>;
-
         // eslint-disable-next-line no-nested-ternary
-        return fallback ? (
+        return Component && fallback ? (
           <Suspense
             fallback={
               // eslint-disable-next-line react/jsx-wrap-multilines
@@ -56,10 +29,12 @@ const EPProtectedRoute = ({ component: Component, render, auth, fallback, ...res
               </div>
             }
           >
-            {Wrapped}
+            <Component {...props} />
           </Suspense>
+        ) : Component ? (
+          <Component {...props} />
         ) : (
-          Wrapped
+          render(props)
         );
       }}
     />
diff --git a/src/components/common/PieChart/PieChart.module.css b/src/components/common/PieChart/PieChart.module.css
index f515a2f1d4..f7c9de2da5 100644
--- a/src/components/common/PieChart/PieChart.module.css
+++ b/src/components/common/PieChart/PieChart.module.css
@@ -36,7 +36,7 @@
 
 :global(.slider::before) {
   position: absolute;
-  content: '';
+  content: "";
   height: 14px;
   width: 14px;
   left: 3px;
@@ -54,6 +54,7 @@
   transform: translateX(14px);
 }
 
+
 .pie-chart-wrapper {
   display: flex;
   align-items: center;
@@ -73,10 +74,10 @@
 
 .pie-chart-legend-table {
   width: 100%;
-  table-layout: fixed;
+  table-layout: fixed; 
 }
 
-.project-chart-legend {
+.project-chart-legend{
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -117,7 +118,7 @@ div.pie-chart-legend-container {
 }
 
 .pie-chart-legend-container {
-  margin-top: 20px;
+  margin-top: 20px; 
   height: 100%;
   width: 60%;
 }
@@ -133,29 +134,23 @@ div.pie-chart-legend-container {
 }
 
 .text-light input:checked + .slider {
-  background-color: #4caf50;
+  background-color: #4CAF50;
 }
 
 .pie-chart-legend-table th:nth-child(1),
-.pie-chart-legend-table td:nth-child(1),
-.pie-chart-legend-table-dark th:nth-child(1),
-.pie-chart-legend-table-dark td:nth-child(1) {
+.pie-chart-legend-table td:nth-child(1) {
   text-align: center;
   width: 60px; /* Color */
 }
 
 .pie-chart-legend-table th:nth-child(2),
-.pie-chart-legend-table td:nth-child(2),
-.pie-chart-legend-table-dark th:nth-child(2),
-.pie-chart-legend-table-dark td:nth-child(2) {
+.pie-chart-legend-table td:nth-child(2) {
   text-align: center;
   width: 60%; /* Name column */
 }
 
 .pie-chart-legend-table th:nth-child(3),
-.pie-chart-legend-table td:nth-child(3),
-.pie-chart-legend-table-dark th:nth-child(3),
-.pie-chart-legend-table-dark td:nth-child(3) {
+.pie-chart-legend-table td:nth-child(3) {
   width: 80px; /* Hours column */
   text-align: right;
 }
@@ -169,20 +164,10 @@ div.pie-chart-legend-container {
   background-color: white;
 }
 
-.pie-chart-legend-table td,
-.pie-chart-legend-table-dark td {
+.pie-chart-legend-table td {
   padding: 8px 0;
 }
 
-.pie-chart-legend-table-dark th {
-  background-color: #1f2937;
-  color: #f9fafb;
-}
-
-.pie-chart-legend-table-dark td {
-  color: #f9fafb;
-}
-
 .data-total-value {
   font-weight: bold;
   margin-top: 10px;
@@ -191,6 +176,4 @@ div.pie-chart-legend-container {
 
 .strong-text.text-light,
 .text-light strong,
-.text-light .strong-text {
-  color: #f5f5f5 !important;
-}
+.text-light .strong-text { color:#f5f5f5 !important; }
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index fdcefdbbf7..b643baf9d3 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -1,64 +1,66 @@
 import { lazy } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+
 import ApplicantsChart from './components/ApplicantsChart';
-import EducationExperienceDonutChart from './components/EducationExperienceDonutChart/EducationExperienceDonutChart';
+import ApplicationAnalyticsContainer from './components/ApplicationAnalytics';
+import ApplicationTimeChartPage from './components/ApplicationTimeChart';
 import AutoUpdate from './components/AutoUpdate';
-import AnimalManagement from './components/KitchenandInventory/AnimalManagement';
-import TaskEditSuggestions from './components/TaskEditSuggestions/TaskEditSuggestions';
-import RoutePermissions from './utils/routePermissions';
 import Dashboard from './components/Dashboard';
+import ForcePasswordUpdate from './components/ForcePasswordUpdate';
+import PRDashboardDetails from './components/HGNPRDashboard/PRDashboardDetails';
+import PRDashboardOverview from './components/HGNPRDashboard/PRDashboardOverview';
+import PRDashboardPromotionEligibility from './components/HGNPRDashboard/PRDashboardPromotionEligibility';
+import PRDashboardTopReviewedPRs from './components/HGNPRDashboard/PRDashboardTopReviewedPRs';
+import UserSkillsProfile from './components/HGNSkillsDashboard/SkillsProfilePage/components/UserSkillsProfile';
 import Login from './components/Login';
-import Logout from './components/Logout/Logout';
 import ForgotPassword from './components/Login/ForgotPassword';
-import ForcePasswordUpdate from './components/ForcePasswordUpdate';
-import UpdatePassword from './components/UpdatePassword';
+import Logout from './components/Logout/Logout';
 import NotFoundPage from './components/NotFound/NotFoundPage';
+import PRDashboard from './components/PRDashboard/PRDashboard';
 import SetupProfile from './components/SetupProfile/SetupProfile';
+import TaskEditSuggestions from './components/TaskEditSuggestions/TaskEditSuggestions';
 import Timelog from './components/Timelog';
-import UserProfileEdit from './components/UserProfile/UserProfileEdit';
+import UpdatePassword from './components/UpdatePassword';
 import EditableInfoModal from './components/UserProfile/EditableModal/EditableInfoModal';
-import PRDashboard from './components/PRDashboard/PRDashboard';
-import ApplicationTimeChartPage from './components/ApplicationTimeChart';
-import ApplicationAnalyticsContainer from './components/ApplicationAnalytics';
+import UserProfileEdit from './components/UserProfile/UserProfileEdit';
+import RoutePermissions from './utils/routePermissions';
+import EmailSender from './components/common/EmailSender/EmailSender';
 import CountryOfApplicationMapChart from './components/CountryOfApplicationMapChart';
-import UserSkillsProfile from './components/HGNSkillsDashboard/SkillsProfilePage/components/UserSkillsProfile';
-import WeeklySummaryPage from './components/VolunteerweeklysummaryBBC/WeeklySummaryPage';
+import { EmailTemplateManager } from './components/EmailManagement';
 import SubscribePage from './components/EmailSubscribeForm/SubscribePage';
 import UnsubscribePage from './components/EmailSubscribeForm/UnsubscribePage';
-import EmailSender from './components/common/EmailSender/EmailSender';
+import WeeklySummaryPage from './components/VolunteerweeklysummaryBBC/WeeklySummaryPage';
 import FormEditor from './components/Forms/FormEditor';
 import FormViewer from './components/Forms/FormViewer';
-import HeaderRenderer from './components/Header/HeaderRenderer';
 import Announcements from './components/Announcements';
+import HeaderRenderer from './components/Header/HeaderRenderer';
 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 EquipmentUpdateLog from './components/BMDashboard/Equipment/EHistory';
+import Issue from './components/BMDashboard/Issue/Issue';
+import IssueChart from './components/BMDashboard/Issues/issueCharts';
+import IssueDashboard from './components/BMDashboard/Issues/IssueDashboard';
+import LessonForm from './components/BMDashboard/Lesson/LessonForm';
+import LessonList from './components/BMDashboard/LessonList/LessonListForm';
 import LogTools from './components/BMDashboard/LogTools/LogTools';
-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 IssueChart from './components/BMDashboard/Issues/issueCharts';
-import BMTimeLogger from './components/BMDashboard/BMTimeLogger/BMTimeLogger';
-import AddTeamMember from './components/BMDashboard/AddTeamMember/AddTeamMember';
+import Toolslist from './components/BMDashboard/Tools/ToolsList';
+import WeeklyProjectSummary from './components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary';
 import AnalyticsDashboard from './components/JobCCDashboard/JobAnalytics/JobAnalytics';
-import FaqSearch from './components/Faq/FaqSearch';
-import FaqManagement from './components/Faq/FaqManagement';
+import { ExperienceDonutChart } from './components/ExperienceDonutChart';
 import FaqHistory from './components/Faq/FaqHistory';
+import FaqManagement from './components/Faq/FaqManagement';
+import FaqSearch from './components/Faq/FaqSearch';
 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';
+
 import Page1 from './components/HGNForm/pages/Page1';
 import Page2 from './components/HGNForm/pages/Page2';
 import Page3 from './components/HGNForm/pages/Page3';
@@ -73,145 +75,140 @@ import TSAFormPage5 from './components/TSAForm/pages/TSAFormPage5';
 import TSAFormPage6 from './components/TSAForm/pages/TSAFormPage6';
 import TSAFormPage7 from './components/TSAForm/pages/TSAFormPage7';
 import TSAFormPage8 from './components/TSAForm/pages/TSAFormPage8';
-import PlannedCostDonutChart from './components/PlannedCostDonutChart';
+
 import TopCommunityMembers from './components/HGNForm/TopCommunityMembers';
 import HelpPage from './components/LandingPage/HelpPage';
-import TeamCard from './components/HGNHelpSkillsDashboard/TeamCard/TeamCard';
-import LandingPage from './components/HGNHelpSkillsDashboard/LandingPage';
-import SkillsOverviewPage from './components/HGNHelpSkillsDashboard/SkillsOverviewPage';
 import CommunityMembersPage from './components/HGNHelpSkillsDashboard/CommunityMembersPage';
-import UserProfilePage from './components/HGNHelpSkillsDashboard/UserProfilePage';
 import FeedbackModal from './components/HGNHelpSkillsDashboard/FeedbackModal';
-import ActivityAttendance from './components/CommunityPortal/Activities/ActivityAttendance';
+import ActivityFeedback from './components/CommunityPortal/Activities/activityId/ActivityFeedback';
+import SkillsOverviewPage from './components/HGNHelpSkillsDashboard/SkillsOverviewPage';
+import TeamCard from './components/HGNHelpSkillsDashboard/TeamCard/TeamCard';
+import UserProfilePage from './components/HGNHelpSkillsDashboard/UserProfilePage';
+
 import ActivityAgenda from './components/CommunityPortal/Activities/ActivityAgenda';
-import EventList from './components/CommunityPortal/Event/EventList/EventList';
+
 import ResourcesUsage from './components/CommunityPortal/Activities/activityId/ResourcesUsage';
+import EventNoShowChart from './components/CommunityPortal/Attendence/NoshowViz';
+import EventList from './components/CommunityPortal/Event/EventList/EventList';
 import EventParticipation from './components/CommunityPortal/Reports/Participation/EventParticipation';
-import NoShowList from './components/CommunityPortal/Activities/NoShow/NoShowList';
-
 import MaterialSummary from './components/MaterialSummary/MaterialSummary';
-// Activity Feedback Modal
 import FeedbackRatingEntry from './components/FeedbackActivityModal/FeedbackActivityEntry';
-import TeamLocations from './components/TeamLocations';
-import Inventory from './components/Inventory';
+import AddLessons from './components/BMDashboard/Lessons/AddLessons';
 import Collaboration from './components/Collaboration';
 import SuggestedJobsList from './components/Collaboration/SuggestedJobsList';
+import Inventory from './components/Inventory';
+import TeamLocations from './components/TeamLocations';
 import TestEventRegistration from './components/EventRegistration/TestEventRegistration';
+
+import ApplicantVolunteerRatio from './components/ApplicantVolunteerRatio/ApplicantVolunteerRatio';
+import EventPopularity from './components/EventPopularity/EventPopularity';
 import MemberList from './components/QuestionnaireDashboard/MemberList';
 import PromotionTable from './components/QuestionnaireDashboard/PromotionTable';
-import EventPopularity from './components/EventPopularity/EventPopularity';
-import ApplicantSourceDonutChart from './components/ApplicantSourceDonutChart/ApplicantSourceDonutChart';
-import ApplicantVolunteerRatio from './components/ApplicantVolunteerRatio/ApplicantVolunteerRatio';
 import { JobAnalyticsCompetitiveRolesPage } from './components/Reports/JobAnalytics';
-// LB Dashboard
+
+import InjurySeverityChart from './components/BMDashboard/Injuries/InjurySeverityChart';
 import LBProtectedRoute from './components/common/LBDashboard/LBProtectedRoute/LBProtectedRoute';
-import LBHome from './components/LBDashboard/Home/Home';
+
 import LBDashboard from './components/LBDashboard';
+import BiddingHomepage from './components/LBDashboard/BiddingHomepage/BiddingHomepage';
+import LBBidOverview from './components/LBDashboard/BiddingOverview/BiddingOverview';
+import LBHome from './components/LBDashboard/Home/Home';
+import ListOveriew from './components/LBDashboard/ListingOverview/ListOverview';
 import LBLogin from './components/LBDashboard/Login';
-import LBRegister from './components/LBDashboard/Register/LBRegister';
-import LBMessaging from './components/LBDashboard/Messaging/LBMessaging';
 import MasterPlan from './components/LBDashboard/Map/MasterPlan/MasterPlan';
-import ListOveriew from './components/LBDashboard/ListingOverview/ListOverview';
-import LBBidOverview from './components/LBDashboard/BiddingOverview/BiddingOverview';
-import BiddingHomepage from './components/LBDashboard/BiddingHomepage/BiddingHomepage';
-import WishList from './components/LBDashboard/WishList/WishList';
+import LBMessaging from './components/LBDashboard/Messaging/LBMessaging';
+import LBRegister from './components/LBDashboard/Register/LBRegister';
 import WishListItem from './components/LBDashboard/WishList/ItemOverview';
-
-// Most Wasted Materials
+import WishList from './components/LBDashboard/WishList/WishList';
+import WeeklyProgressDashboard from './components/WeeklyProgress/WeeklyProgressDashboard';
 import MostWastedMaterials from './components/MostWastedMaterials/MostWastedMaterials.jsx';
-
-// BM Dashboard
-import BMProtectedRoute from './components/common/BMDashboard/BMProtectedRoute';
-import BMDashboard from './components/BMDashboard';
-import BMLogin from './components/BMDashboard/Login';
-import EquipmentList from './components/BMDashboard/Equipment/List';
-import EquipmentDetail from './components/BMDashboard/Equipment/Detail/EquipmentDetail';
-import UpdateEquipment from './components/BMDashboard/Equipment/Update/UpdateEquipment';
-import ToolDetailPage from './components/BMDashboard/Tools/ToolDetailPage';
-import CheckTypes from './components/BMDashboard/shared/CheckTypes';
+import AttendanceStatistics from './components/AttendanceStats/AttendanceDashboard';
 import AttendanceNoShow from './components/AttendanceSystem/AttendanceNoShowCharts.jsx';
+
 import LessonsLearntChart from './components/BMDashboard/LessonsLearnt/LessonsLearntChart';
 import UtilizationChart from './components/BMDashboard/UtilizationChart/UtilizationChart';
 import InjuriesDonutChart from './components/InjuriesAnalytics/InjuriesDonutChart';
 import CostPredictionPage from './components/BMDashboard/CostPrediction/CostPredictionPage';
-//import MostSusceptibleTools from './components/MostSusceptible/toolBreakdownChart';
+import ProjectRiskProfileOverview from './components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview';
 import JobsHitsApplicationsChart from './components/JobAnalytics/JobsHitsApplicationsChart/JobsHitsApplicationsChart';
-
+import BMDashboard from './components/BMDashboard';
+import EquipmentDetail from './components/BMDashboard/Equipment/Detail/EquipmentDetail';
+import EquipmentList from './components/BMDashboard/Equipment/List';
+import UpdateEquipment from './components/BMDashboard/Equipment/Update/UpdateEquipment';
+import CheckTypes from './components/BMDashboard/shared/CheckTypes';
+import ToolDetailPage from './components/BMDashboard/Tools/ToolDetailPage';
+import HoursPledgedChart from './components/JobAnalytics/HoursPledgedChart/HoursPledgedChart';
+import BMLogin from './components/BMDashboard/Login';
+import BMProtectedRoute from './components/common/BMDashboard/BMProtectedRoute';
+import InteractiveMap from './components/BMDashboard/InteractiveMap/InteractiveMap';
 import RentalChart from './components/BMDashboard/RentalChart/RentalChart';
 import ReturnedLateChart from './components/BMDashboard/RentalChart/ReturnedLateChart';
 import CreateNewTeam from './components/BMDashboard/Team/CreateNewTeam/CreateNewTeam';
-// import MostSusceptibleTools from './components/MostSusceptible/toolBreakdownChart';
-import HoursPledgedChart from './components/JobAnalytics/HoursPledgedChart/HoursPledgedChart';
-import InjurySeverityDashboard from './components/BMDashboard/Injuries/InjurySeverityChart';
-// Community Portal
+
 import CPProtectedRoute from './components/common/CPDashboard/CPProtectedRoute';
-import CPLogin from './components/CommunityPortal/Login';
 import CPDashboard from './components/CommunityPortal';
 import ActivityList from './components/CommunityPortal/Activities/ActivityList';
+import FaqSection from './components/CommunityPortal/Activities/FaqSection';
+import ActivityAttendance from './components/CommunityPortal/Activities/ActivityAttendance';
 import ActivityComments from './components/CommunityPortal/Activities/activityId/ActivityComments';
+
 import Feedbackform from './components/CommunityPortal/Activities/Feedbackform';
-import FollowUpEmailTemplate from './components/CommunityPortal/Activities/FollowUpEmailTemplate';
-// import AddActivities from './components/CommunityPortal/Activities/AddActivities';
-// import ActvityDetailPage from './components/CommunityPortal/Activities/ActivityDetailPage';
+
 import Register from './components/CommunityPortal/Activities/Register/Register';
+
+import CPLogin from './components/CommunityPortal/Login';
 import ActivitiesPage from './components/CommunityPortal/Activities/ActivitiesPage';
 import EventStats from './components/CommunityPortal/EventPersonalization/EventStats';
+import VirtualVsInPerson from './components/CommunityPortal/Reports/Participation/VirtualVsInPerson';
+import EventValue from './components/CommunityPortal/Reports/Participation/EventValue';
+import ParticipationTrends from './components/CommunityPortal/Reports/Participation/ParticipationTrends';
+import EventPerformance from './components/CommunityPortal/Reports/Participation/EventPerformance';
+
 // Community Calendar
 import CommunityCalendar from './components/CommunityPortal/Calendar/CommunityCalendar';
-// Kicthen and Inventory Portal
-import KitchenandInventoryLogin from './components/KitchenandInventory/Login';
 
+import PRGradingDashboard from './components/PRGradingDashboard/PRGradingDashboard';
+import RegistrationPopup from './components/CommunityPortal/RegistrationConfirmation/Registration';
+import KICalendar from './components/KitchenandInventory/KICalendar/KICalendar';
 import KIDashboard from './components/KitchenandInventory/KIDashboard/KIDashboard';
-import RecipesLandingPage from './components/KitchenandInventory/Recipes';
 import KIINVENTORY from './components/KitchenandInventory/KIInventory/KIInventory';
-import KICalendar from './components/KitchenandInventory/KICalendar/KICalendar';
+import KitchenandInventoryLogin from './components/KitchenandInventory/Login';
 import OrchardManagement from './components/KitchenandInventory/OrchardManagement/OrchardManagement';
+import RecipesLandingPage from './components/KitchenandInventory/Recipes';
 
-// Education Portal
 import EPProtectedRoute from './components/common/EPDashboard/EPProtectedRoute';
-import EPLogin from './components/EductionPortal/Login';
-import BrowseLessonPlan from './components/EductionPortal/BrowseLessonPlan/BrowseLP';
 import EPDashboard from './components/EductionPortal';
-import TaskSubmissions from './components/EductionPortal/Educators/TaskSubmissions';
-
-import StudentProfilePage from './components/EductionPortal/StudentProfile/StudentProfilePage';
-import AssignAtoms from './components/EductionPortal/AssignAtoms/AssignAtoms';
+import InsightWidget from './components/EductionPortal/AnalyticsDashboard/InsightsWidget';
 import ReportDownloadButton from './components/EductionPortal/AnalyticsDashboard/ReportDownloadButton';
-import GroupList from './components/EductionPortal/GroupList/GroupList';
+import AnnouncementsPage from './components/EductionPortal/Announcements/AnnouncementsPage';
+import BrowseLessonPlan from './components/EductionPortal/BrowseLessonPlan/BrowseLP';
+import TaskSubmissions from './components/EductionPortal/Educators/TaskSubmissions';
 import EvaluationResultsWrapper from './components/EductionPortal/EvaluationResultsWrapper';
-import InsightWidget from './components/EductionPortal/AnalyticsDashboard/InsightsWidget';
+import GroupList from './components/EductionPortal/GroupList/GroupList';
+import EPLogin from './components/EductionPortal/Login';
+import StudentProfile from './components/EductionPortal/StudentProfile';
+import StudentProfilePage from './components/EductionPortal/StudentProfile/StudentProfilePage';
+import BookingConfirmPage from './components/Booking/BookingConfirmPage';
+import BookingPage from './components/Booking/BookingPage';
 import StudentDashboard from './components/EductionPortal/StudentTasks/StudentDashboard';
 import StudentTasks from './components/EductionPortal/StudentTasks/StudentTasks';
 import TaskDetails from './components/EductionPortal/StudentTasks/TaskDetails';
-import EducatorReports from './components/EductionPortal/EducatorReports';
 import PRReviewTeamAnalytics from './components/HGNPRDashboard/PRReviewTeamAnalytics';
-import PRDashboardOverview from './components/HGNPRDashboard/PRDashboardOverview';
-import PRDashboardPromotionEligibility from './components/HGNPRDashboard/PRDashboardPromotionEligibility';
-import PRDashboardTopReviewedPRs from './components/HGNPRDashboard/PRDashboardTopReviewedPRs';
-import PRDashboardDetails from './components/HGNPRDashboard/PRDashboardDetails';
-import PromotionEligibility from './components/HGNPRDashboard/PromotionEligibility';
-import BookingPage from './components/Booking/BookingPage';
-import BookingConfirmPage from './components/Booking/BookingConfirmPage';
 import PRPromotionsPage from './components/PRPromotions/PRPromotionsPage';
-import ReviewersStackedBarChart from './components/HGNPRDashboard/ReviewersStackedBarChart/ReviewersStackedBarChart';
-import PRGradingDashboard from './components/PRGradingDashboard/PRGradingDashboard';
-import PRGradingScreen from './components/PRGradingScreen';
-import PRGradingTest from './components/PRGradingScreen/PRGradingTest'; //temporary route for testing - delete after testing
+import SimpleToolChart from './components/BMDashboard/Tools/SimpleToolChart';
+import ActivityLogs from './components/ActivityLog/DailyLogPage';
 import ProtectedRoute from './components/common/ProtectedRoute';
-import { UserRole } from './utils/enums';
-import WriteTaskUpload from './components/EductionPortal/Tasks/WriteTaskUpload';
 import IntermediateTaskList from './components/EductionPortal/IntermediateTasks/IntermediateTaskList';
-import InteractiveMap from './components/BMDashboard/InteractiveMap/InteractiveMap';
-import SimpleToolChart from './components/BMDashboard/Tools/SimpleToolChart';
-import SupportLogin from './components/SupportPortal/SupportLogin';
+import WriteTaskUpload from './components/EductionPortal/Tasks/WriteTaskUpload';
+import OptStatusPieChart from './components/OptStatusPieChart/OptStatusPieChart';
 import SupportDashboard from './components/SupportPortal/SupportDashboard';
+import SupportLogin from './components/SupportPortal/SupportLogin';
 import SupportLogViewer from './components/SupportPortal/SupportLogViewer';
-import MaterialUtilizationChart from './components/MaterialUtilization/MaterialUtilizationChart';
-
-// Social Architecture
-
+import { UserRole } from './utils/enums';
 import JobApplicationForm from './components/Collaboration/JobApplicationForm/JobApplicationForm';
-// Social Architecture
+import ReviewsInsight from './components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight';
+import ProjectsGlobalDistribution from './components/ProjectsGlobalDistribution/ProjectsGlobalDistribution';
+
 const ResourceManagement = lazy(() => import('./components/ResourceManagement/ResourceManagement'));
 const RequestResources = lazy(() => import('./components/SocialArchitecture/RequestResources'));
 const ReusableListView = lazy(() => import('./components/BMDashboard/ReusableList'));
@@ -224,16 +221,12 @@ const PurchaseReusables = lazy(() =>
   import('./components/BMDashboard/PurchaseRequests/ReusablePurchaseRequest'),
 );
 const BMTimeLogCard = lazy(() => import('./components/BMDashboard/BMTimeLogger/BMTimeLogCard'));
-const ProjectTeams = lazy(() =>
-  import('./components/BMDashboard/Projects/ProjectTeams/ProjectTeams'),
-);
 const ProjectDetails = lazy(() =>
   import('./components/BMDashboard/Projects/ProjectDetails/ProjectDetails'),
 );
 const UpdateMaterialsBulk = lazy(() =>
   import('./components/BMDashboard/UpdateMaterials/UpdateMaterialsBulk/UpdateMaterialsBulk'),
 );
-
 const UpdateReusablesBulk = lazy(() =>
   import('./components/BMDashboard/UpdateReusables/UpdateReusablesBulk/UpdateReusablesBulk'),
 );
@@ -244,12 +237,10 @@ const PurchaseTools = lazy(() => import('./components/BMDashboard/ToolPurchaseRe
 const PurchaseEquipment = lazy(() => import('./components/BMDashboard/EquipmentPurchaseRequest'));
 const AddMaterial = lazy(() => import('./components/BMDashboard/AddMaterial/AddMaterial'));
 const AddConsumable = lazy(() => import('./components/BMDashboard/AddConsumable/AddConsumable'));
-
 const InjuriesOverTimeChart = lazy(() =>
   import('./components/BMDashboard/InjuriesOverTime/InjuriesOverTimeChart'),
 );
 
-// Code-Splitting
 const Projects = lazy(() => import('./components/Projects'));
 const WeeklySummariesReport = lazy(() => import('./components/WeeklySummariesReport'));
 const TotalOrgSummary = lazy(() => import('./components/TotalOrgSummary'));
@@ -269,6 +260,9 @@ const PermissionsManagement = lazy(() =>
   import('./components/PermissionsManagement/PermissionsManagement'),
 );
 const UserRoleTab = lazy(() => import('./components/PermissionsManagement/UserRoleTab'));
+const BlueSquareEmailManagement = lazy(() =>
+  import('./components/BlueSquareEmailManagement/BlueSquareEmailManagement'),
+);
 const Teams = lazy(() => import('./components/Teams/Teams'));
 const JobFormBuilder = lazy(() => import('./components/Collaboration/JobFormbuilder'));
 const PopularityTimelineChart = lazy(() =>
@@ -280,30 +274,22 @@ const MonthsPledgedChart = lazy(() =>
 const EnhancedPopularityTimelineChart = lazy(() =>
   import('./components/EnhancedPopularityTimelineAnalytics/EnhancedPopularityTimelineChart'),
 );
-// PR Analytics Dashboard
-import ReviewsInsight from './components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight';
-import ProjectsGlobalDistribution from './components/ProjectsGlobalDistribution/ProjectsGlobalDistribution';
 const JobAnalyticsPage = lazy(() =>
   import('./components/Reports/HitsAndApplicationRatio/JobAnalyticsPage'),
 );
-const ResourceManagementDashboard = lazy(() =>
-  import('./components/ResourceRequest/ResourceManagementDashboard/ResourceManagementDashboard'),
-);
-const ResourceRequestList = lazy(() =>
-  import('./components/ResourceRequest/ResourceRequestList/ResourceRequestList'),
-);
+const SuggestedJobsListBuilder = lazy(() => import('./components/Collaboration/SuggestedJobsList'));
 const ProcessingLandingPage = lazy(() =>
   import('./components/KitchenInterfaces/Processing/ProcessingLandingPage'),
 );
+const AnimalManagement = lazy(() =>
+  import('./components/KitchenInterfaces/Production/AnimalManagement/AnimalManagement'),
+);
 
-const SuggestedJobsListBuilder = lazy(() => import('./components/Collaboration/SuggestedJobsList'));
 export default (
   <Switch>
-    {/* ----- LB Dashboard Routing Starts----- */}
-    {/* If it's possible incorporate this route with others without the header, please do */}
     <Route path="/lbdashboard/login" component={LBLogin} />
     <Route path="/lbdashboard/register" component={LBRegister} />
-    {/* Protected Routes for lbdashboard */}
+
     <LBProtectedRoute path="/lbdashboard" exact component={LBDashboard} />
     <LBProtectedRoute
       path="/lbdashboard/listingshome"
@@ -330,9 +316,10 @@ export default (
         </>
       )}
     />
+
     <LBProtectedRoute
       exact
-      path="/lbdashboard/wishlist/:id"
+      path="/lbdashboard/wishlist/:id/availability"
       render={() => (
         <>
           <AutoUpdate />
@@ -342,33 +329,57 @@ export default (
       )}
     />
 
-    <LBProtectedRoute path="/lbdashboard/home" component={LBHome} />
-    {/* ----- LB Dashboard Routing Ends----- */}
+    <LBProtectedRoute
+      exact
+      path="/lbdashboard/wishlist/:id"
+      render={() => (
+        <>
+          <AutoUpdate />
+          <ToastContainer />
+          <WishListItem />
+        </>
+      )}
+    />
 
-    <Route path="/EventPopularity" component={EventPopularity} />
+    <Route
+      path="/EventPopularity"
+      render={() => (
+        <>
+          <HeaderRenderer />
+          <AutoUpdate />
+          <ToastContainer />
+          <EventPopularity />
+        </>
+      )}
+    />
     <Route path="/MaterialSummary" component={MaterialSummary} />
     <Route path="/form" component={FormEditor} />
     <Route path="/formviewer" component={FormViewer} />
     <Route path="/ProfileInitialSetup/:token" component={SetupProfile} />
     <Route path="/hours-pledged-chart" component={HoursPledgedChart} />
     <Route path="/TestEventReg" component={TestEventRegistration} />
-    <>
-      {/* Comment out the Header component and its import during phase 2 development. */}
-      {/* Uncomment BMHeader and its import during phase 2 development. */}
+    <Route path="/logattendance" component={AttendanceNoShow} />
+    <Route path="/Participation" component={AttendanceStatistics} />
 
-      {/* <BMHeader /> */}
-
-      {/* This will render CPHeader to the page whose path starts with /communityportal i.e Phase III */}
+    <>
       <HeaderRenderer />
-
       <AutoUpdate />
       <ToastContainer />
       <Switch>
         <ProtectedRoute path="/weekly-summary" exact component={WeeklySummaryPage} />
         <ProtectedRoute path="/hgnhelp" exact component={HelpPage} />
         <ProtectedRoute path="/dashboard" exact component={Dashboard} />
+        <ProtectedRoute
+          path="/dashboard/project-risk-profile"
+          exact
+          component={ProjectRiskProfileOverview}
+        />
+        <ProtectedRoute
+          path="/kitchenandinventory/processing"
+          component={ProcessingLandingPage}
+          fallback
+        />
         <ProtectedRoute path="/dashboard/:userId" exact component={Dashboard} />
-        <Route path="/logattendance" component={AttendanceNoShow} />
         <ProtectedRoute path="/project/members/:projectId" fallback component={Members} />
         <ProtectedRoute path="/timelog/" exact render={() => <Timelog userId={null} />} />
         <ProtectedRoute path="/booking" exact component={BookingPage} />
@@ -436,6 +447,13 @@ export default (
           fallback
           routePermissions={RoutePermissions.reports}
         />
+        <ProtectedRoute
+          path="/weeklyprogress"
+          exact
+          component={WeeklyProgressDashboard}
+          fallback
+          routePermissions={RoutePermissions.weeklySummariesReport}
+        />
         <ProtectedRoute path="/teamlocations" exact component={TeamLocations} />
         <ProtectedRoute path="/job-analytics" component={JobAnalyticsPage} fallback />
         <ProtectedRoute
@@ -515,6 +533,13 @@ export default (
           fallback
           routePermissions={RoutePermissions.permissionsManagement}
         />
+        <ProtectedRoute
+          path="/bluesquare-email-management"
+          exact
+          component={BlueSquareEmailManagement}
+          fallback
+          routePermissions={['resendBlueSquareAndSummaryEmails']}
+        />
         <ProtectedRoute
           path="/teams"
           exact
@@ -524,12 +549,6 @@ export default (
           routePermissions={RoutePermissions.teams}
         />
         <ProtectedRoute path="/applicants-chart" exact component={ApplicantsChart} fallback />
-        <ProtectedRoute
-          path="/applicant-source-chart"
-          exact
-          component={ApplicantSourceDonutChart}
-          fallback
-        />
         <ProtectedRoute
           path="/applicant-volunteer-ratio"
           exact
@@ -559,6 +578,186 @@ export default (
           component={Announcements}
           routePermissions={RoutePermissions.announcements}
         />
+        <ProtectedRoute
+          path="/announcements/email"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/send"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/outbox"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/sender"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/templates"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/templates/:templateId"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/templates/create"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/emails"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/email/batches"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/x"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/facebook"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/linkedin"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/pinterest"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/instagram"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/threads"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/mastodon"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/bluesky"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/youtube"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/reddit"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/tumblr"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/imgur"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/diigo"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/myspace"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/medium"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/plurk"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/bitily"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/livejournal"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/slashdot"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/blogger"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
+        <ProtectedRoute
+          path="/announcements/truthsocial"
+          exact
+          component={Announcements}
+          routePermissions={RoutePermissions.announcements}
+        />
         <ProtectedRoute
           path="/sendemail"
           exact
@@ -566,6 +765,13 @@ export default (
           allowedRoles={[UserRole.Administrator, UserRole.Owner]}
           routePermissions={RoutePermissions.projects}
         />
+        <ProtectedRoute
+          path="/email-templates"
+          exact
+          component={EmailTemplateManager}
+          allowedRoles={[UserRole.Administrator, UserRole.Owner, UserRole.Manager]}
+          routePermissions={RoutePermissions.projects}
+        />
         <ProtectedRoute path="/faq" exact component={FaqSearch} />
         <ProtectedRoute
           path="/faq-management"
@@ -597,22 +803,6 @@ export default (
             UserRole.Owner,
             UserRole.Mentor,
           ]}
-          // setting permission as Weeklysummariesreport for now. Later it will be changed to weeklyVolunteerSummary. - H
-          routePermissions={RoutePermissions.weeklySummariesReport}
-        />
-        <ProtectedRoute
-          path="/TotalOrgSummaryEmail"
-          exact
-          component={TotalOrgSummaryEmail}
-          fallback
-          allowedRoles={[
-            UserRole.Administrator,
-            UserRole.Manager,
-            UserRole.CoreTeam,
-            UserRole.Owner,
-            UserRole.Mentor,
-          ]}
-          // setting permission as Weeklysummariesreport for now. Later it will be changed to weeklyVolunteerSummary. - H
           routePermissions={RoutePermissions.weeklySummariesReport}
         />
         <ProtectedRoute
@@ -622,7 +812,7 @@ export default (
           fallback
           allowedRoles={[UserRole.Owner]}
         />
-        <ProtectedRoute path="/materials/utilization" component={MaterialUtilizationChart} />
+        <Route path="/ActivityLogs/DailyLog" component={ActivityLogs} />
         <ProtectedRoute path="/job-application" exact component={JobApplicationForm} />
         <ProtectedRoute path="/popularity" component={PopularityTimelineChart} fallback />
         <ProtectedRoute
@@ -670,21 +860,23 @@ export default (
           exact
           component={AnalyticsDashboard}
           fallback
-          // allowedRoles={[UserRole.Administrator, UserRole.Owner]}
+          allowedRoles={[UserRole.Administrator, UserRole.Owner]}
         />
-
         <ProtectedRoute
           path="/analytics/roles-hits-and-applications"
           exact
           component={JobsHitsApplicationsChart}
         />
 
-        {/* ----- BEGIN BM Dashboard Routing ----- */}
         <BMProtectedRoute path="/bmdashboard" exact component={BMDashboard} />
         <Route path="/bmdashboard/login" component={BMLogin} />
-        <Route path="/LessonsLearntChart" component={LessonsLearntChart} />
+        <BMProtectedRoute
+          path="/bmdashboard/lessons-learnt-chart"
+          fallback
+          component={LessonsLearntChart}
+        />
         <Route path="/UtilizationChart" component={UtilizationChart} />
-        <BMProtectedRoute path="/mostsusceptibletoolschart" component={SimpleToolChart} />
+        <Route path="/mostsusceptibletoolschart" component={SimpleToolChart} />
         <Route path="/projectglobaldistribution" component={ProjectsGlobalDistribution} />
         <BMProtectedRoute
           path="/bmdashboard/materials/purchase"
@@ -702,11 +894,6 @@ export default (
           component={PurchaseEquipment}
         />
         <BMProtectedRoute path="/bmdashboard/tools/purchase" fallback component={PurchaseTools} />
-        <BMProtectedRoute
-          path="/bmdashboard/projects/:projectId/teams"
-          fallback
-          component={ProjectTeams}
-        />
         <BMProtectedRoute
           path="/bmdashboard/projects/:projectId"
           fallback
@@ -726,17 +913,11 @@ export default (
         <BMProtectedRoute path="/bmdashboard/materials/add" fallback component={AddMaterial} />
         <BMProtectedRoute path="/bmdashboard/equipment/add" component={AddEquipmentType} />
         <BMProtectedRoute path="/bmdashboard/T/EDailyActivityLog" component={EDailyActivityLog} />
-        <BMProtectedRoute
-          path="/bmdashboard/equipment-history"
-          exact
-          component={EquipmentUpdateLog}
-        />
         <BMProtectedRoute
           path="/bmdashboard/consumables/purchase"
           fallback
           component={PurchaseConsumable}
         />
-
         <BMProtectedRoute path="/bmdashboard/cost-prediction" component={CostPredictionPage} />
         <BMProtectedRoute path="/bmdashboard/rentalchart" component={RentalChart} />
         <BMProtectedRoute path="/bmdashboard/returned-late-chart" component={ReturnedLateChart} />
@@ -747,13 +928,13 @@ export default (
         <BMProtectedRoute path="/bmdashboard/materials" fallback component={MaterialListView} />
         <BMProtectedRoute path="/bmdashboard/consumables/add" fallback component={AddConsumable} />
         <BMProtectedRoute path="/bmdashboard/reusables" fallback component={ReusableListView} />
-        {/* Note: equipment detail route defined above; duplicates removed */}
         <BMProtectedRoute
           path="/bmdashboard/tools/:equipmentId/update"
           component={UpdateEquipment}
         />
         <BMProtectedRoute path="/bmdashboard/tools" exact component={Toolslist} />
         <BMProtectedRoute path="/bmdashboard/AddTeamMember" component={AddTeamMember} />
+        <BMProtectedRoute path="/bmdashboard/InteractiveMap" component={InteractiveMap} />
         <BMProtectedRoute path="/bmdashboard/tools/add" exact component={AddTool} />
         <BMProtectedRoute path="/bmdashboard/tools/log" exact component={LogTools} />
         <BMProtectedRoute
@@ -764,6 +945,7 @@ export default (
         <BMProtectedRoute path="/bmdashboard/tools/:toolId" component={ToolDetailPage} />
         <BMProtectedRoute path="/bmdashboard/lessonform/:projectId" component={LessonForm} />
         <BMProtectedRoute path="/bmdashboard/lessonform/" component={LessonForm} />
+        <BMProtectedRoute path="/bmdashboard/lessons/add" component={AddLessons} />
         <BMProtectedRoute
           path="/bmdashboard/inventorytypes"
           fallback
@@ -781,13 +963,12 @@ export default (
           path="/bmdashboard/injuries-severity"
           fallback
           exact
-          component={InjurySeverityDashboard}
+          component={InjurySeverityChart}
         />
         <BMProtectedRoute path="/bmdashboard/issues/add/:projectId" component={Issue} />
         <BMProtectedRoute path="/bmdashboard/issuechart" component={IssueChart} />
         <BMProtectedRoute path="/bmdashboard/timelog/" component={BMTimeLogger} />
         <BMProtectedRoute path="/bmdashboard/issues/" component={IssueDashboard} />
-        <BMProtectedRoute path="/bmdashboard/InteractiveMap" component={InteractiveMap} />
         <BMProtectedRoute
           path="/bmdashboard/timelog/:projectId"
           fallback
@@ -810,37 +991,50 @@ export default (
           exact
           component={InjuriesOverTimeChart}
         />
-        {/* PR Analytics Dashboard */}
+
         <Route path="/pull-request-analytics/reviews-insight" component={ReviewsInsight} />
-        {/* Community Portal Routes */}
+
         <CPProtectedRoute path="/communityportal" exact component={CPDashboard} />
         <Route path="/communityportal/login" component={CPLogin} />
+        <CPProtectedRoute
+          path="/communityportal/activities/:activityid/faq"
+          exact
+          component={FaqSection}
+        />
+        <CPProtectedRoute path="/communityportal/activities" exact component={ActivityList} />
+        <CPProtectedRoute path="/communityportal/Activities" exact component={ActivityList} />
         {/* ----- Community Calendar Routing ----- */}
         <CPProtectedRoute path="/communityportal/calendar" exact component={CommunityCalendar} />
         <CPProtectedRoute path="/communityportal/database/design" exact component={EventList} />
-        <CPProtectedRoute path="/communityportal/activities" exact component={ActivityList} />
+
         <CPProtectedRoute
-          path="/communityportal/profile/:userId"
-          fallback
-          component={UserProfile}
+          path="/communityportal/activity/:activityId/ActivityFeedback"
+          exact
+          component={ActivityFeedback}
         />
         <CPProtectedRoute
           path="/communityportal/ActivityAttendance"
           exact
           component={ActivityAttendance}
         />
+        <CPProtectedRoute
+          path="/communityportal/activities/registration"
+          exact
+          component={RegistrationPopup}
+        />
         <CPProtectedRoute
           path="/communityportal/activities/Feedbackform/:eventId/:email"
           component={Feedbackform}
         />
         <CPProtectedRoute
-          path="/communityportal/activities/FollowUpEmailTemplate"
-          component={FollowUpEmailTemplate}
+          path="/communityportal/activities/:activityid"
+          exact
+          component={ActivityFeedback}
         />
         <CPProtectedRoute
-          path="/communityportal/activity/:activityId/logattendance"
+          path="/communityportal/activities/TestEventReg"
           exact
-          component={NoShowList}
+          component={TestEventRegistration}
         />
         <CPProtectedRoute
           path="/communityportal/reports/participation"
@@ -852,7 +1046,7 @@ export default (
           exact
           component={EventStats}
         />
-        <CPProtectedRoute path="/communityportal/AcrivitiesPage" exact component={ActivitiesPage} />
+        <CPProtectedRoute path="/communityportal/ActivitiesPage" exact component={ActivitiesPage} />
         <CPProtectedRoute
           path="/communityportal/Activities/Register/:activityId"
           exact
@@ -869,97 +1063,43 @@ export default (
           exact
           component={ResourcesUsage}
         />
-        <ProtectedRoute path="/educator/requests" exact component={ResourceRequestList} fallback />
-        <ProtectedRoute
-          path="/pm/dashboard/resources"
-          exact
-          component={ResourceManagementDashboard}
-          fallback
-        />
         <CPProtectedRoute
-          path="/communityportal/activity/:activityId/ResourceManagement"
+          path="/communityportal/activity/:activityId/resources"
           exact
           component={ResourceManagement}
           fallback
           routePermissions={RoutePermissions.resourceManagement}
         />
-        {/* Listing and Bidding Routes - Additional routes with parameters */}
-        <LBProtectedRoute path="/lbdashboard/listOverview/:id" exact component={ListOveriew} />
-        <LBProtectedRoute path="/lbdashboard/masterplan" exact component={MasterPlan} />
-        <Route path="/lbdashboard/login" component={LBLogin} />
-        <Route path="/lbdashboard/register" component={LBRegister} />
-        <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} />
-        <Route
-          path="/lbdashboard/listingshome"
-          render={() => (
-            <>
-              <AutoUpdate />
-              <LBHome />
-            </>
-          )}
-        />
-        <Route path="/lbdashboard/bidoverview" exact component={LBBidOverview} />
-        <LBProtectedRoute path="/lbdashboard/bidding" exact component={BiddingHomepage} />
-        {/* Good Education  Portal Routes */}
-        <EPProtectedRoute path="/educationportal" exact component={EPDashboard} />
-        <Route path="/educationportal/login" component={EPLogin} />
-        <EPProtectedRoute path="/educationportal/tasks/upload" exact component={WriteTaskUpload} />
-        <EPProtectedRoute
-          path="/educationportal/educator/task-submissions"
-          exact
-          component={TaskSubmissions}
-        />
-
-        <EPProtectedRoute path="/student/profile" exact component={StudentProfilePage} />
-        {/* PR Analytics Dashboard */}
-        <Route path="/pull-request-analytics/reviews-insight" component={ReviewsInsight} />
-        <EPProtectedRoute
-          path="/educationportal/evaluation-results"
-          exact
-          component={EvaluationResultsWrapper}
+        <CPProtectedRoute
+          path="/communityportal/reports/EventNoShowChart"
+          component={EventNoShowChart}
         />
-        <Route path="/educationportal/login" component={EPLogin} />
-        <EPProtectedRoute path="/educationportal/InsightWidget" component={InsightWidget} />
-        <EPProtectedRoute
-          path="/educationportal/lesson-library"
+        <CPProtectedRoute
+          path="/communityportal/reports/resourceusage"
           exact
-          component={BrowseLessonPlan}
+          component={ResourceUsage}
         />
-        <EPProtectedRoute path="/educationportal/assignAtoms" exact component={AssignAtoms} />
-        <EPProtectedRoute path="/educationportal/tasks/upload" exact component={WriteTaskUpload} />
-        <EPProtectedRoute path="/educationportal/reportButton" component={ReportDownloadButton} />
-        <EPProtectedRoute path="/educationportal/groups" exact component={GroupList} />
-        <EPProtectedRoute path="/educationportal/reports" exact component={EducatorReports} />
-        <EPProtectedRoute
-          path="/educationportal/tasks/intermediate"
+        <CPProtectedRoute
+          path="/communityportal/reports/participation/virtual-vs-inperson"
           exact
-          component={IntermediateTaskList}
+          component={VirtualVsInPerson}
         />
-        <EPProtectedRoute path="/educationportal/dashboard" exact component={StudentDashboard} />
-        <EPProtectedRoute path="/educationportal/student/tasks" exact component={StudentTasks} />
-        <EPProtectedRoute path="/educationportal/student/tasks/:id" exact component={TaskDetails} />
-        <Redirect exact from="/student/tasks" to="/educationportal/student/tasks" />
-        <Redirect exact from="/student/tasks/:id" to="/educationportal/student/tasks/:id" />
         <CPProtectedRoute
-          path="/communityportal/reports/resourceusage"
+          path="/communityportal/reports/participation/event-value"
           exact
-          component={ResourceUsage}
+          component={EventValue}
         />
         <CPProtectedRoute
-          path="/communityportal/activity/:activityid"
+          path="/communityportal/reports/participation/trends"
           exact
-          component={ActivityAgenda}
+          component={ParticipationTrends}
         />
         <CPProtectedRoute
-          path="/communityportal/database/design"
+          path="/communityportal/reports/participation/performance"
           exact
-          component={DatabaseDesign}
+          component={EventPerformance}
         />
-        {/* <BMProtectedRoute path="/bmdashboard/tools/add" exact component={AddTool} /> */}
-        {/* Temporary route to redirect all subdirectories to login if unauthenticated */}
-        {/* <BMProtectedRoute path="/bmdashboard/:path" component={BMDashboard} /> */}
-        {/* ----- END BM Dashboard Routing ----- */}
-        {/* ----- Kitchen and Inventory Portal Routes ----- */}
+
         <ProtectedRoute path="/kitchenandinventory" exact component={KIDashboard} />
         <ProtectedRoute path="/kitchenandinventory/inventory" exact component={KIINVENTORY} />
         <ProtectedRoute path="/kitchenandinventory/calendar" exact component={KICalendar} />
@@ -975,15 +1115,59 @@ export default (
         />
         <Route path="/kitchenandinventory/login" exact component={KitchenandInventoryLogin} />
         <ProtectedRoute path="/kitchenandinventory/recipes" exact component={RecipesLandingPage} />
-        {/* ----- End of Kitchen and Inventory Portal Routes ----- */}
+
+        <EPProtectedRoute path="/educationportal" exact component={EPDashboard} />
+        <Route path="/educationportal/login" component={EPLogin} />
+        <ProtectedRoute
+          path="/educationportal/student/:studentId"
+          exact
+          component={StudentProfile}
+        />
+        <EPProtectedRoute path="/educationportal/tasks/upload" exact component={WriteTaskUpload} />
+        <EPProtectedRoute
+          path="/educationportal/announcements"
+          exact
+          component={AnnouncementsPage}
+        />
+        <EPProtectedRoute
+          path="/educationportal/educator/task-submissions"
+          exact
+          component={TaskSubmissions}
+        />
+        <EPProtectedRoute path="/student/profile" exact component={StudentProfilePage} />
+        <EPProtectedRoute
+          path="/educationportal/evaluation-results"
+          exact
+          component={EvaluationResultsWrapper}
+        />
+        <Route path="/educationportal/InsightWidget" component={InsightWidget} />
+        <Route path="/educationportal/lesson-library" exact component={BrowseLessonPlan} />
+        <Route path="/educationportal/reportButton" component={ReportDownloadButton} />
+        <Route path="/educator/groups" exact component={GroupList} />
+        <EPProtectedRoute
+          path="/educationportal/tasks/intermediate"
+          exact
+          component={IntermediateTaskList}
+        />
+        <EPProtectedRoute path="/educationportal/dashboard" exact component={StudentDashboard} />
+        <EPProtectedRoute path="/educationportal/student/tasks" exact component={StudentTasks} />
+        <EPProtectedRoute path="/educationportal/student/tasks/:id" exact component={TaskDetails} />
+        <Redirect exact from="/student/tasks" to="/educationportal/student/tasks" />
+        <Redirect exact from="/student/tasks/:id" to="/educationportal/student/tasks/:id" />
+
         <Route path="/login" component={Login} />
         <Route path="/forgotpassword" component={ForgotPassword} />
         <Route path="/subscribe" component={SubscribePage} />
         <Route path="/unsubscribe" component={UnsubscribePage} />
         <Route path="/collaboration" component={Collaboration} />
         <Route path="/suggestedjobslist" component={SuggestedJobsList} />
-        <ProtectedRoute path="/jobformbuilder" fallback component={JobFormBuilder} />
-        <ProtectedRoute path="/materials/mostwastedmaterials" component={MostWastedMaterials} />
+        <ProtectedRoute
+          path="/jobformbuilder"
+          fallback
+          component={JobFormBuilder}
+          allowedRoles={[UserRole.Owner]}
+          routePermissions={RoutePermissions.jobFormManagement}
+        />
         <ProtectedRoute path="/infoCollections" component={EditableInfoModal} />
         <ProtectedRoute path="/userprofile/:userId" fallback component={UserProfile} />
         <ProtectedRoute path="/userprofileedit/:userId" component={UserProfileEdit} />
@@ -992,8 +1176,7 @@ export default (
         <ProtectedRoute path="/memberlist" exact component={MemberList} />
         <Route path="/Logout" component={Logout} />
         <Route path="/forcePasswordUpdate/:userId" component={ForcePasswordUpdate} />
-        {/* ----- HGN Help Community Skills Dashboard Routes ----- */}
-        <ProtectedRoute path="/hgnhelp" exact component={LandingPage} />
+
         <ProtectedRoute path="/hgnteam" exact component={TeamCard} />
         <ProtectedRoute path="/hgnhelp/skills-overview" exact component={SkillsOverviewPage} />
         <ProtectedRoute path="/hgnhelp/community" exact component={CommunityMembersPage} />
@@ -1006,7 +1189,6 @@ export default (
         <ProtectedRoute path="/hgnform/page5" exact component={Page5} />
         <ProtectedRoute path="/hgnform/page6" exact component={Page6} />
         <ProtectedRoute path="/hgn/profile/skills" exact component={UserSkillsProfile} />
-        <ProtectedRoute path="/hgn-skills/profile" exact component={UserSkillsProfile} />
         <ProtectedRoute
           path="/hgn/profile/skills/:userId?"
           exact
@@ -1033,39 +1215,12 @@ export default (
         <ProtectedRoute path="/tsaformpage7" exact component={TSAFormPage7} />
         <ProtectedRoute path="/tsaformpage8" exact component={TSAFormPage8} />
         <ProtectedRoute path="/ExperienceDonutChart" component={ExperienceDonutChart} fallback />
-        <ProtectedRoute
-          path="/education-experience-donut-chart"
-          component={EducationExperienceDonutChart}
-          fallback
-        />
-        <ProtectedRoute path="/actual-cost-breakdown" component={ActualCostBreakdown} fallback />
         <ProtectedRoute path="/prPromotionsPage" component={PRPromotionsPage} fallback />
-        <ProtectedRoute path="/pr-grading-screen" exact component={PRGradingScreen} />
-        <ProtectedRoute path="/pr-grading-test" exact component={PRGradingTest} />
-        {/* //temporary route for testing - delete after testing */}
         <ProtectedRoute path="/" exact component={Dashboard} />
-        <ProtectedRoute
-          path="/collaboration/analytics"
-          exact
-          component={ApplicantSourceDonutChart}
-        />
-        {/* ----- PR Dashboard  ----- */}
-        <ProtectedRoute
-          path="/pr-dashboard/promotion-eligibility"
-          exact
-          component={PromotionEligibility}
-        />
-        <ProtectedRoute path="/planned-costs" exact component={PlannedCostDonutChart} />
-        <ProtectedRoute
-          path="/pr-team-analytics/reviewers-stacked-bar-chart"
-          exact
-          component={ReviewersStackedBarChart}
-        />
-        {/* /*  for support team*/}
+
         <Route path="/support/login" component={SupportLogin} />
         <Route path="/support/dashboard" component={SupportDashboard} />
         <Route path="/support/log/:studentId" component={SupportLogViewer} />
-        {/* PR Routes */}
         <ProtectedRoute
           path="/pr-team-analytics/popular-prs"
           exact
@@ -1078,7 +1233,6 @@ export default (
           fallback
         />
         <ProtectedRoute path="/pr-dashboard/overview" exact component={PRDashboardOverview} />
-        <ProtectedRoute path="/pr-dashboard/analytics" exact component={PRReviewTeamAnalytics} />
         <ProtectedRoute
           path="/pr-dashboard/promotion-eligibility"
           exact
@@ -1090,6 +1244,8 @@ export default (
           component={PRDashboardTopReviewedPRs}
         />
         <ProtectedRoute path="/pr-dashboard/details" exact component={PRDashboardDetails} />
+        <ProtectedRoute path="/analytics/opt-status" exact component={OptStatusPieChart} />
+
         <Route path="*" component={NotFoundPage} />
       </Switch>
     </>
diff --git a/src/services/projectCostService.js b/src/services/projectCostService.js
index 8b4ab2435a..66f0f1dfcb 100644
--- a/src/services/projectCostService.js
+++ b/src/services/projectCostService.js
@@ -1,10 +1,7 @@
 import httpService from './httpService';
 import { ApiEndpoint } from '../utils/URL';
 
-// ApiEndpoint already includes the `/api` segment, so it must NOT carry a
-// trailing slash here — otherwise requests resolve to `/api//project/...`
-// (the double-slash bug that made the cost/prediction endpoints 404).
-const ApiUri = ApiEndpoint;
+const ApiUri = `${ApiEndpoint}/`;
 
 const getProjectCosts = projectId => {
   return httpService.get(`${ApiUri}/project/${projectId}/costs`);
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 29e9d92401..3948d5e062 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -1,7 +1,6 @@
 const APIEndpoint =
   process.env.REACT_APP_APIENDPOINT || 'http://localhost:4500/api';
 
-
 export const ENDPOINTS = {
   APIEndpoint: () => APIEndpoint,
   USER_PROFILE: userId => `${APIEndpoint}/userprofile/${userId}`,