diff --git a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx
index e9510b3226..931a23b331 100644
--- a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx
+++ b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx
@@ -80,11 +80,11 @@ const IntermediateTaskForm = ({ task, onSubmit, onCancel }) => {
   };
 
   return (
-    <Modal isOpen={true} toggle={onCancel} size="lg" className={styles.formModal}>
+    <Modal isOpen={true} toggle={onCancel} size="lg">
       <ModalHeader toggle={onCancel}>
         {task ? 'Edit Intermediate Task' : 'Add Intermediate Task'}
       </ModalHeader>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className={styles.formModal}>
         <ModalBody>
           <FormGroup>
             <Label for="title">Title *</Label>
diff --git a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx
index 32c2d08232..5a31d531de 100644
--- a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx
+++ b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx
@@ -17,6 +17,7 @@ const IntermediateTaskList = () => {
   const dispatch = useDispatch();
   const authUser = useSelector(state => state.auth.user);
   const { taskItems: parentTasks } = useSelector(state => state.studentTasks);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   const [expandedTasks, setExpandedTasks] = useState({});
   const [intermediateTasks, setIntermediateTasks] = useState({});
diff --git a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.module.css b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.module.css
index 02de19b1c1..0d839036e9 100644
--- a/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.module.css
+++ b/src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.module.css
@@ -364,3 +364,283 @@
   }
 }
 
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .dashboard {
+  background-color: #1a1a1a;
+}
+
+:global(.dark-mode) .title {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .subtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskCard {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskCard:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .taskSubtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskStatus {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .progressInfo {
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .expandButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .expandButton:hover {
+  background-color: #363636;
+  border-color: #525252;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .subTasksContainer {
+  border-top-color: #404040;
+}
+
+:global(.dark-mode) .loadingState {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .spinner {
+  border-color: #404040;
+  border-top-color: #60a5fa;
+}
+
+:global(.dark-mode) .emptySubTasks {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskItem {
+  background-color: #252525;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .subTaskItem:hover {
+  background-color: #2a2a2a;
+  border-color: #525252;
+}
+
+:global(.dark-mode) .subTaskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .subTaskDescription {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskHours {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .subTaskDueDate {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .statuspending {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .statusin_progress {
+  background-color: #1e3a5f;
+  color: #93c5fd;
+}
+
+:global(.dark-mode) .statuscompleted {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .editButton,
+:global(.dark-mode) .deleteButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .editButton:hover {
+  background-color: #1e3a5f;
+  border-color: #60a5fa;
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .deleteButton:hover {
+  background-color: #4a1a1a;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+:global(.dark-mode) .markDoneButton {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markDoneButton:hover {
+  background-color: #1d4ed8;
+}
+
+:global(.dark-mode) .completedBadge {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .emptyState {
+  color: #9ca3af;
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+/* Form Modal Dark Mode Styles - Using global selectors for reactstrap Modal */
+:global(.dark-mode .modal-content) {
+  background-color: #2d2d2d !important;
+  border-color: #404040 !important;
+}
+
+:global(.dark-mode .modal-header) {
+  background-color: #2d2d2d !important;
+  border-bottom-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .modal-header .close) {
+  color: #ffffff !important;
+  opacity: 0.8;
+}
+
+:global(.dark-mode .modal-header .close:hover) {
+  opacity: 1;
+}
+
+:global(.dark-mode .modal-body) {
+  background-color: #2d2d2d !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .modal-footer) {
+  background-color: #2d2d2d !important;
+  border-top-color: #404040 !important;
+}
+
+:global(.dark-mode .form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .form-control:focus) {
+  background-color: #1a1a1a !important;
+  border-color: #60a5fa !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
+}
+
+:global(.dark-mode .form-control::placeholder) {
+  color: #6b7280 !important;
+}
+
+:global(.dark-mode label) {
+  color: #d1d5db !important;
+}
+
+:global(.dark-mode .btn-secondary) {
+  background-color: #404040 !important;
+  border-color: #525252 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .btn-secondary:hover) {
+  background-color: #525252 !important;
+  border-color: #636363 !important;
+}
+
+:global(.dark-mode .btn-primary) {
+  background-color: #2563eb !important;
+  border-color: #2563eb !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .btn-primary:hover) {
+  background-color: #1d4ed8 !important;
+  border-color: #1d4ed8 !important;
+}
+
+:global(.dark-mode select.form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode select.form-control option) {
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+}
+
+/* Additional styles for form inputs when using bg-yinmn-blue and bg-space-cadet */
+:global(.bg-yinmn-blue .form-control),
+:global(.bg-space-cadet .form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.bg-yinmn-blue .form-control:focus),
+:global(.bg-space-cadet .form-control:focus) {
+  background-color: #1a1a1a !important;
+  border-color: #60a5fa !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
+}
+
+:global(.bg-yinmn-blue .form-control::placeholder),
+:global(.bg-space-cadet .form-control::placeholder) {
+  color: #6b7280 !important;
+}
+
+:global(.bg-yinmn-blue label),
+:global(.bg-space-cadet label) {
+  color: #d1d5db !important;
+}
+
+:global(.bg-yinmn-blue select.form-control),
+:global(.bg-space-cadet select.form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.bg-yinmn-blue select.form-control option),
+:global(.bg-space-cadet select.form-control option) {
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+}
+
diff --git a/src/components/EductionPortal/StudentDashboard/NavigationBar.jsx b/src/components/EductionPortal/StudentDashboard/NavigationBar.jsx
index caa8f0cd47..3a0cfc8c04 100644
--- a/src/components/EductionPortal/StudentDashboard/NavigationBar.jsx
+++ b/src/components/EductionPortal/StudentDashboard/NavigationBar.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styles from './NavigationBar.module.css';
 
-const NavigationBar = () => {
+const NavigationBar = ({ darkMode = false }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
 
   const toggleDropdown = dropdown => {
diff --git a/src/components/EductionPortal/StudentDashboard/NavigationBar.module.css b/src/components/EductionPortal/StudentDashboard/NavigationBar.module.css
index 1007bfac5a..8fd5f70961 100644
--- a/src/components/EductionPortal/StudentDashboard/NavigationBar.module.css
+++ b/src/components/EductionPortal/StudentDashboard/NavigationBar.module.css
@@ -103,3 +103,22 @@
     display: none;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .navigationBar {
+  background-color: #1e3a5f;
+}
+
+:global(.dark-mode) .dropdownContent {
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .dropdownItem {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .dropdownItem:hover {
+  background-color: #363636;
+  color: #ffffff;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx b/src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx
index c4c3a14b2a..21df510c50 100644
--- a/src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx
+++ b/src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx
@@ -24,6 +24,7 @@ const StudentDashboard = () => {
   const dispatch = useDispatch();
   const authUser = useSelector(state => state.auth.user);
   const { taskItems: tasks, fetching: loading, error } = useSelector(state => state.studentTasks);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   // Fetch tasks from API
   useEffect(() => {
@@ -150,7 +151,7 @@ const StudentDashboard = () => {
 
   return (
     <div className={styles.dashboard}>
-      <NavigationBar />
+      <NavigationBar darkMode={darkMode} />
 
       <Container className={styles.mainContainer}>
         {/* Header */}
@@ -160,7 +161,7 @@ const StudentDashboard = () => {
         </div>
 
         {/* Summary Cards */}
-        <SummaryCards data={summaryData} />
+        <SummaryCards data={summaryData} darkMode={darkMode} />
 
         {/* Recent Time Logs Section */}
         <div className={styles.timeLogsSection}>
@@ -219,6 +220,7 @@ const StudentDashboard = () => {
               expandedTasks={expandedTasks}
               onToggleIntermediateTasks={toggleIntermediateTasks}
               onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
+              darkMode={darkMode}
             />
           ) : (
             <TaskListView
@@ -228,6 +230,7 @@ const StudentDashboard = () => {
               expandedTasks={expandedTasks}
               onToggleIntermediateTasks={toggleIntermediateTasks}
               onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
+              darkMode={darkMode}
             />
           )}
         </div>
diff --git a/src/components/EductionPortal/StudentDashboard/StudentDashboard.module.css b/src/components/EductionPortal/StudentDashboard/StudentDashboard.module.css
index fe8cddf9ca..e79fb57933 100644
--- a/src/components/EductionPortal/StudentDashboard/StudentDashboard.module.css
+++ b/src/components/EductionPortal/StudentDashboard/StudentDashboard.module.css
@@ -141,3 +141,56 @@
     align-self: flex-end;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .dashboard {
+  background-color: #1a1a1a;
+}
+
+:global(.dark-mode) .title {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .subtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .sectionTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .viewToggle {
+  background-color: #2d2d2d;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .toggleButton {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .toggleButton:hover {
+  background-color: #363636;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .toggleButton.active {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .loadingContainer {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .spinner {
+  border-color: #404040;
+  border-top-color: #60a5fa;
+}
+
+:global(.dark-mode) .errorContainer {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .errorMessage {
+  color: #f87171;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/SummaryCards.jsx b/src/components/EductionPortal/StudentDashboard/SummaryCards.jsx
index 29a7e3b7de..2ff95bd4dc 100644
--- a/src/components/EductionPortal/StudentDashboard/SummaryCards.jsx
+++ b/src/components/EductionPortal/StudentDashboard/SummaryCards.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './SummaryCards.module.css';
 
-const SummaryCards = ({ data }) => {
+const SummaryCards = ({ data, darkMode = false }) => {
   const cards = [
     {
       title: 'Total Time Logged',
diff --git a/src/components/EductionPortal/StudentDashboard/SummaryCards.module.css b/src/components/EductionPortal/StudentDashboard/SummaryCards.module.css
index d7b5fb1359..115e696cfd 100644
--- a/src/components/EductionPortal/StudentDashboard/SummaryCards.module.css
+++ b/src/components/EductionPortal/StudentDashboard/SummaryCards.module.css
@@ -82,3 +82,31 @@
     font-size: 1.75rem;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .card {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .card:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .cardIcon {
+  background-color: #363636;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .cardTitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .cardValue {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .cardDescription {
+  color: #9ca3af;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/TaskCard.jsx b/src/components/EductionPortal/StudentDashboard/TaskCard.jsx
index e2b90b1ff4..2036c240d3 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskCard.jsx
+++ b/src/components/EductionPortal/StudentDashboard/TaskCard.jsx
@@ -11,6 +11,7 @@ const TaskCard = ({
   isExpanded = false,
   onToggleIntermediateTasks,
   onMarkIntermediateAsDone,
+  darkMode = false,
 }) => {
   const {
     progressPercentage,
diff --git a/src/components/EductionPortal/StudentDashboard/TaskCard.module.css b/src/components/EductionPortal/StudentDashboard/TaskCard.module.css
index 2b1a43b061..8fb711fde2 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskCard.module.css
+++ b/src/components/EductionPortal/StudentDashboard/TaskCard.module.css
@@ -382,3 +382,181 @@
     width: 100%;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .taskCard {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskCard:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .statusBadge {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .commentsBadge {
+  background-color: #7c2d12;
+  color: #fed7aa;
+}
+
+:global(.dark-mode) .hoursMetBadge {
+  background-color: #1a4d2e;
+  color: #bbf7d0;
+}
+
+:global(.dark-mode) .pendingBadge {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .completedBadge {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .taskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .taskSubtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .timeInfo {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .progressInfo {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .progressBar {
+  background-color: #404040;
+}
+
+:global(.dark-mode) .progressFill {
+  background-color: #60a5fa;
+}
+
+:global(.dark-mode) .clockButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .clockButton:hover {
+  background-color: #363636;
+  border-color: #525252;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .markDoneButton {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markDoneButton:hover:not(.disabled) {
+  background-color: #1d4ed8;
+}
+
+:global(.dark-mode) .markDoneButton.disabled {
+  background-color: #404040;
+  color: #6b7280;
+}
+
+:global(.dark-mode) .completedButton {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .intermediateTasksSection {
+  border-top-color: #404040;
+}
+
+:global(.dark-mode) .toggleIntermediateButton {
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .toggleIntermediateButton:hover {
+  color: #93c5fd;
+  background-color: #1e3a5f;
+}
+
+:global(.dark-mode) .noIntermediateTasks {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskItem {
+  background-color: #252525;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .intermediateTaskItem:hover {
+  background-color: #2a2a2a;
+}
+
+:global(.dark-mode) .intermediateTaskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .intermediateTaskDescription {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskProgressBar {
+  background-color: #404040;
+}
+
+:global(.dark-mode) .subTaskProgressFill {
+  background-color: #10b981;
+}
+
+:global(.dark-mode) .subTaskProgressText {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskHours {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .intermediateTaskStatus {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .intermediateTaskStatus.statuscompleted {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .intermediateTaskStatus.statuspending {
+  background-color: #4a3a1a;
+  color: #fbbf24;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #10b981;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton:hover:not(.disabled) {
+  background-color: #10b981;
+  border-color: #10b981;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton.disabled {
+  background-color: #252525;
+  border-color: #363636;
+  color: #525252;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/TaskCardView.jsx b/src/components/EductionPortal/StudentDashboard/TaskCardView.jsx
index 6638d63fe4..8791dbe99a 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskCardView.jsx
+++ b/src/components/EductionPortal/StudentDashboard/TaskCardView.jsx
@@ -9,6 +9,7 @@ const TaskCardView = ({
   expandedTasks,
   onToggleIntermediateTasks,
   onMarkIntermediateAsDone,
+  darkMode = false,
 }) => {
   if (!tasks || tasks.length === 0) {
     return (
@@ -29,6 +30,7 @@ const TaskCardView = ({
           isExpanded={expandedTasks[task.id] || false}
           onToggleIntermediateTasks={onToggleIntermediateTasks}
           onMarkIntermediateAsDone={onMarkIntermediateAsDone}
+          darkMode={darkMode}
         />
       ))}
     </div>
diff --git a/src/components/EductionPortal/StudentDashboard/TaskCardView.module.css b/src/components/EductionPortal/StudentDashboard/TaskCardView.module.css
index a1647c2cbb..7a0e8d3db9 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskCardView.module.css
+++ b/src/components/EductionPortal/StudentDashboard/TaskCardView.module.css
@@ -22,3 +22,8 @@
     gap: 1rem;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .emptyState {
+  color: #9ca3af;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/TaskListItem.jsx b/src/components/EductionPortal/StudentDashboard/TaskListItem.jsx
index 4347ab6e5b..7b665ca353 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskListItem.jsx
+++ b/src/components/EductionPortal/StudentDashboard/TaskListItem.jsx
@@ -11,6 +11,7 @@ const TaskListItem = ({
   isExpanded = false,
   onToggleIntermediateTasks,
   onMarkIntermediateAsDone,
+  darkMode = false,
 }) => {
   const {
     progressPercentage,
diff --git a/src/components/EductionPortal/StudentDashboard/TaskListItem.module.css b/src/components/EductionPortal/StudentDashboard/TaskListItem.module.css
index b51b12d4a3..8900d5c638 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskListItem.module.css
+++ b/src/components/EductionPortal/StudentDashboard/TaskListItem.module.css
@@ -367,3 +367,183 @@
     width: 100%;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .taskListItem {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskListItem:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .statusBadge {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .commentsBadge {
+  background-color: #7c2d12;
+  color: #fed7aa;
+}
+
+:global(.dark-mode) .hoursMetBadge {
+  background-color: #1a4d2e;
+  color: #bbf7d0;
+}
+
+:global(.dark-mode) .pendingBadge {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .completedBadge {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .taskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .taskSubtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .timeInfo {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .progressInfo {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .progressBar {
+  background-color: #404040;
+}
+
+:global(.dark-mode) .progressFill {
+  background-color: #60a5fa;
+}
+
+:global(.dark-mode) .clockButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .clockButton:hover {
+  background-color: #363636;
+  border-color: #525252;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .markDoneButton {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markDoneButton:hover:not(.disabled) {
+  background-color: #1d4ed8;
+}
+
+:global(.dark-mode) .markDoneButton.disabled {
+  background-color: #404040;
+  color: #6b7280;
+}
+
+:global(.dark-mode) .completedButton {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .toggleIntermediateButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .toggleIntermediateButton:hover {
+  background-color: #1e3a5f;
+  border-color: #60a5fa;
+}
+
+:global(.dark-mode) .intermediateTasksWrapper {
+  border-top-color: #404040;
+}
+
+:global(.dark-mode) .noIntermediateTasks {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskItem {
+  background-color: #252525;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .intermediateTaskItem:hover {
+  background-color: #2a2a2a;
+}
+
+:global(.dark-mode) .intermediateTaskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .intermediateTaskDescription {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskProgressBar {
+  background-color: #404040;
+}
+
+:global(.dark-mode) .subTaskProgressFill {
+  background-color: #10b981;
+}
+
+:global(.dark-mode) .subTaskProgressText {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .intermediateTaskHours {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .intermediateTaskStatus {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .intermediateTaskStatus.statuscompleted {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .intermediateTaskStatus.statuspending {
+  background-color: #4a3a1a;
+  color: #fbbf24;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #10b981;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton:hover:not(.disabled) {
+  background-color: #10b981;
+  border-color: #10b981;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markIntermediateDoneButton.disabled {
+  background-color: #252525;
+  border-color: #363636;
+  color: #525252;
+}
diff --git a/src/components/EductionPortal/StudentDashboard/TaskListView.jsx b/src/components/EductionPortal/StudentDashboard/TaskListView.jsx
index a0de5d30a8..4c3270c31c 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskListView.jsx
+++ b/src/components/EductionPortal/StudentDashboard/TaskListView.jsx
@@ -9,6 +9,7 @@ const TaskListView = ({
   expandedTasks,
   onToggleIntermediateTasks,
   onMarkIntermediateAsDone,
+  darkMode = false,
 }) => {
   if (!tasks || tasks.length === 0) {
     return (
@@ -29,6 +30,7 @@ const TaskListView = ({
           isExpanded={expandedTasks[task.id] || false}
           onToggleIntermediateTasks={onToggleIntermediateTasks}
           onMarkIntermediateAsDone={onMarkIntermediateAsDone}
+          darkMode={darkMode}
         />
       ))}
     </div>
diff --git a/src/components/EductionPortal/StudentDashboard/TaskListView.module.css b/src/components/EductionPortal/StudentDashboard/TaskListView.module.css
index 761def10a0..9fdd6b04e9 100644
--- a/src/components/EductionPortal/StudentDashboard/TaskListView.module.css
+++ b/src/components/EductionPortal/StudentDashboard/TaskListView.module.css
@@ -14,3 +14,8 @@
 .emptyState p {
   margin: 0;
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .emptyState {
+  color: #9ca3af;
+}