From 91233372002c92f84ab64e47a6805e9b0f84d98e Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Tue, 3 Mar 2026 11:11:06 -0300
Subject: [PATCH] feat: Enhance UI with improved dark mode styling and color
 palette adjustments across course pages.

---
 .../src/app/courses/[id]/analytics/page.tsx   |  84 ++++-----
 .../app/courses/[id]/announcements/page.tsx   |  42 ++---
 .../src/app/courses/[id]/calendar/page.tsx    |   8 +-
 .../src/app/courses/[id]/grades/page.tsx      |  26 +--
 .../src/app/courses/[id]/grading/page.tsx     |  50 ++---
 .../courses/[id]/lessons/[lessonId]/page.tsx  | 174 +++++++++---------
 web/studio/src/app/courses/[id]/page.tsx      |  46 ++---
 .../[id]/settings/TeamManagementSection.tsx   |  32 ++--
 .../src/app/courses/[id]/settings/page.tsx    | 128 ++++++-------
 .../src/app/courses/[id]/students/page.tsx    |   6 +-
 web/studio/src/app/courses/[id]/team/page.tsx |  26 +--
 web/studio/src/app/globals.css                |  25 ++-
 .../Analytics/DropoutRiskDashboard.tsx        |  38 ++--
 .../src/components/CourseEditorLayout.tsx     |   8 +-
 .../src/components/Courses/LiveSessions.tsx   |  42 ++---
 15 files changed, 374 insertions(+), 361 deletions(-)

diff --git a/web/studio/src/app/courses/[id]/analytics/page.tsx b/web/studio/src/app/courses/[id]/analytics/page.tsx
index e2ed49e..072a534 100644
--- a/web/studio/src/app/courses/[id]/analytics/page.tsx
+++ b/web/studio/src/app/courses/[id]/analytics/page.tsx
@@ -66,12 +66,12 @@ export default function AnalyticsPage() {
     );
 
     if (authError) return (
-        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white flex flex-col items-center justify-center p-20 text-center gap-6">
-            <div className="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center text-red-500">
+        <div className="min-h-screen bg-transparent text-slate-900 dark:text-white flex flex-col items-center justify-center p-20 text-center gap-6">
+            <div className="w-20 h-20 bg-red-600/10 rounded-full flex items-center justify-center text-red-600 dark:text-red-500">
                 <AlertTriangle size={40} />
             </div>
-            <h2 className="text-2xl font-bold">Access Denied</h2>
-            <p className="text-gray-600 dark:text-gray-400 max-w-md">{authError}</p>
+            <h2 className="text-2xl font-black">Access Denied</h2>
+            <p className="text-slate-500 dark:text-gray-400 max-w-md font-medium">{authError}</p>
             <button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button>
         </div>
     );
@@ -96,7 +96,7 @@ export default function AnalyticsPage() {
                     <select
                         value={selectedCohortId}
                         onChange={(e) => setSelectedCohortId(e.target.value)}
-                        className="bg-white/5 text-gray-900 dark:text-white border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[160px]"
+                        className="bg-slate-100 dark:bg-white/5 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[160px]"
                     >
                         <option value="">Todos los Estudiantes</option>
                         {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -107,7 +107,7 @@ export default function AnalyticsPage() {
                     >
                         <Layers size={14} /> Insights Avanzados
                     </button>
-                    <div className="bg-blue-500/10 text-blue-400 text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-lg border border-blue-500/20">
+                    <div className="bg-blue-600/10 text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-lg border border-blue-600/20">
                         {user?.role} View
                     </div>
                 </div>
@@ -115,61 +115,61 @@ export default function AnalyticsPage() {
         >
             <div className="space-y-12">
                 {/* Tab Selector */}
-                <div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
+                <div className="flex items-center gap-1 mb-10 p-1.5 bg-slate-100 dark:bg-white/5 rounded-2xl w-fit border border-slate-200 dark:border-white/5">
                     <button
                         onClick={() => setActiveAnalyticsTab("overview")}
-                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                        className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-white hover:bg-white/5"}`}
                     >
-                        <BarChart3 size={16} /> Overview
+                        <BarChart3 size={14} /> Overview
                     </button>
                     <button
                         onClick={() => setActiveAnalyticsTab("risks")}
-                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? "bg-red-600 text-white shadow-lg shadow-red-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                        className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? "bg-red-600 text-white shadow-lg shadow-red-500/20" : "text-slate-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-white hover:bg-white/5"}`}
                     >
-                        <ShieldAlert size={16} /> Predictive Risks
+                        <ShieldAlert size={14} /> Predictive Risks
                     </button>
                     <button
                         onClick={() => setActiveAnalyticsTab("live")}
-                        className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`}
+                        className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-white hover:bg-white/5"}`}
                     >
-                        <Video size={16} /> Live Sessions
+                        <Video size={14} /> Live Sessions
                     </button>
                 </div>
 
                 {activeAnalyticsTab === "overview" && (
                     <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
                                 <div className="flex items-center gap-4 mb-4">
-                                    <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
+                                    <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                                         <Users size={24} />
                                     </div>
-                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
+                                    <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Enrollments</span>
                                 </div>
-                                <div className="text-4xl font-black">{analytics.total_enrollments}</div>
-                                <div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
+                                <div className="text-4xl font-black text-slate-900 dark:text-white">{analytics.total_enrollments}</div>
+                                <div className="text-xs text-green-600 dark:text-green-400 font-black uppercase mt-2 tracking-wider">Active Learners</div>
                             </div>
 
-                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
                                 <div className="flex items-center gap-4 mb-4">
-                                    <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
+                                    <div className="w-12 h-12 rounded-2xl bg-purple-600/10 flex items-center justify-center text-purple-600 dark:text-purple-400">
                                         <TrendingUp size={24} />
                                     </div>
-                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
+                                    <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Average Score</span>
                                 </div>
-                                <div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
-                                <div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
+                                <div className="text-4xl font-black text-slate-900 dark:text-white">{Math.round(analytics.average_score * 100)}%</div>
+                                <div className="text-xs text-slate-500 dark:text-gray-500 font-black uppercase mt-2 tracking-wider">Across all assessments</div>
                             </div>
 
-                            <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
+                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
                                 <div className="flex items-center gap-4 mb-4">
-                                    <div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
+                                    <div className="w-12 h-12 rounded-2xl bg-orange-600/10 flex items-center justify-center text-orange-600 dark:text-orange-400">
                                         <AlertTriangle size={24} />
                                     </div>
-                                    <span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
+                                    <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Attention Needed</span>
                                 </div>
-                                <div className="text-4xl font-black">{difficultLessons.length}</div>
-                                <div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
+                                <div className="text-4xl font-black text-slate-900 dark:text-white">{difficultLessons.length}</div>
+                                <div className="text-xs text-orange-600 dark:text-orange-400 font-black uppercase mt-2 tracking-wider">Struggling Lessons</div>
                             </div>
                         </div>
 
@@ -181,19 +181,19 @@ export default function AnalyticsPage() {
                                 </h2>
                                 <div className="space-y-4">
                                     {analytics.lessons.map((lesson) => (
-                                        <div key={lesson.lesson_id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl p-6 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
+                                        <div key={lesson.lesson_id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm">
                                             <div className="flex items-start justify-between mb-4">
                                                 <div>
-                                                    <h3 className="font-bold">{lesson.lesson_title}</h3>
-                                                    <p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
+                                                    <h3 className="font-bold text-slate-800 dark:text-white">{lesson.lesson_title}</h3>
+                                                    <p className="text-xs text-slate-500 dark:text-gray-500 mt-1 font-medium">{lesson.submission_count} submissions</p>
                                                 </div>
-                                                <div className={`text-xl font-black ${lesson.average_score < 0.6 ? "text-red-400" : lesson.average_score < 0.8 ? "text-orange-400" : "text-green-400"}`}>
+                                                <div className={`text-xl font-black ${lesson.average_score < 0.6 ? "text-red-500" : lesson.average_score < 0.8 ? "text-orange-500" : "text-emerald-500"}`}>
                                                     {Math.round(lesson.average_score * 100)}%
                                                 </div>
                                             </div>
-                                            <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
+                                            <div className="h-2 bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
                                                 <div
-                                                    className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? "bg-red-500" : lesson.average_score < 0.8 ? "bg-orange-500" : "bg-green-500"}`}
+                                                    className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? "bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.4)]" : lesson.average_score < 0.8 ? "bg-orange-500 shadow-[0_0_10px_rgba(249,115,22,0.4)]" : "bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.4)]"}`}
                                                     style={{ width: `${lesson.average_score * 100}%` }}
                                                 />
                                             </div>
@@ -211,14 +211,14 @@ export default function AnalyticsPage() {
                                     {difficultLessons.length > 0 ? (
                                         <div className="space-y-4">
                                             {difficultLessons.map(l => (
-                                                <div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
+                                                <div key={l.lesson_id} className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-2xl p-6 flex items-center justify-between shadow-sm">
                                                     <div>
-                                                        <h4 className="font-bold text-red-400">{l.lesson_title}</h4>
-                                                        <p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
+                                                        <h4 className="font-bold text-red-600 dark:text-red-400">{l.lesson_title}</h4>
+                                                        <p className="text-xs text-red-700/60 dark:text-red-300/60 mt-1 text-balance max-w-xs font-medium">
                                                             Average score is below 70%. Consider reviewing the material or difficulty of questions.
                                                         </p>
                                                     </div>
-                                                    <div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
+                                                    <div className="text-2xl font-black text-red-600 dark:text-red-500">{Math.round(l.average_score * 100)}%</div>
                                                 </div>
                                             ))}
                                         </div>
@@ -230,12 +230,12 @@ export default function AnalyticsPage() {
                                         </div>
                                     )}
                                 </div>
-                                <div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
-                                    <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
-                                        <BookOpen className="text-blue-400" />
+                                <div className="bg-blue-50 dark:bg-blue-600/10 border border-blue-200 dark:border-blue-500/20 rounded-3xl p-8 shadow-sm">
+                                    <h3 className="text-lg font-black mb-4 flex items-center gap-2 uppercase tracking-wide text-blue-700 dark:text-white">
+                                        <BookOpen className="text-blue-600 dark:text-blue-400" />
                                         Content Strategy Tip
                                     </h3>
-                                    <p className="text-sm text-blue-200/70 leading-relaxed">
+                                    <p className="text-sm text-blue-800/70 dark:text-blue-200/70 leading-relaxed font-medium">
                                         High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
                                     </p>
                                 </div>
diff --git a/web/studio/src/app/courses/[id]/announcements/page.tsx b/web/studio/src/app/courses/[id]/announcements/page.tsx
index 463cd93..c10cf91 100644
--- a/web/studio/src/app/courses/[id]/announcements/page.tsx
+++ b/web/studio/src/app/courses/[id]/announcements/page.tsx
@@ -83,7 +83,7 @@ export default function AnnouncementsPage() {
                                 placeholder="Search announcements..."
                                 value={searchTerm}
                                 onChange={(e) => setSearchTerm(e.target.value)}
-                                className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all"
+                                className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
                             />
                         </div>
                     </div>
@@ -97,7 +97,7 @@ export default function AnnouncementsPage() {
                     ) : filteredAnnouncements.length > 0 ? (
                         <div className="grid gap-6">
                             {filteredAnnouncements.map((a) => (
-                                <div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-white/5 border-white/10 hover:border-white/20'}`}>
+                                <div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 hover:border-slate-200 dark:hover:border-white/20'}`}>
                                     <div className="flex items-start justify-between mb-4">
                                         <div className="flex items-center gap-3">
                                             <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
@@ -108,8 +108,8 @@ export default function AnnouncementsPage() {
                                                 )}
                                             </div>
                                             <div>
-                                                <h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4>
-                                                <div className="flex items-center gap-2 text-sm text-gray-400">
+                                                <h4 className="font-semibold text-slate-900 dark:text-white">{a.author_name}</h4>
+                                                <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-gray-400">
                                                     <span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
                                                     {a.cohort_ids && a.cohort_ids.length > 0 && (
                                                         <>
@@ -133,8 +133,8 @@ export default function AnnouncementsPage() {
                                             </button>
                                         </div>
                                     </div>
-                                    <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3>
-                                    <p className="text-gray-300 whitespace-pre-wrap">{a.content}</p>
+                                    <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{a.title}</h3>
+                                    <p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap">{a.content}</p>
 
                                     {/* Display Target Cohort Names if segmented */}
                                     {a.cohort_ids && a.cohort_ids.length > 0 && (
@@ -153,10 +153,10 @@ export default function AnnouncementsPage() {
                             ))}
                         </div>
                     ) : (
-                        <div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center">
-                            <Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">No announcements found</h3>
-                            <p className="text-gray-400">Start by creating a new announcement for your students.</p>
+                        <div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-20 text-center">
+                            <Megaphone className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
+                            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No announcements found</h3>
+                            <p className="text-slate-500 dark:text-gray-400">Start by creating a new announcement for your students.</p>
                         </div>
                     )}
                 </div>
@@ -212,14 +212,14 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
     };
 
     return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-            <div className="bg-[#1a1c1e] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
-                <div className="p-6 border-b border-white/5 flex items-center justify-between">
-                    <h2 className="text-xl font-bold flex items-center gap-2">
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+            <div className="bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
+                <div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
+                    <h2 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                         <Megaphone className="w-5 h-5 text-orange-500" />
                         Create New Announcement
                     </h2>
-                    <button onClick={onClose} className="text-gray-500 hover:text-gray-900 dark:text-white transition-colors">
+                    <button onClick={onClose} className="text-slate-400 hover:text-slate-900 dark:text-gray-500 dark:hover:text-white transition-colors">
                         <Plus className="w-6 h-6 rotate-45" />
                     </button>
                 </div>
@@ -230,7 +230,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                             required
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50"
+                            className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
                             placeholder="Announcement title"
                         />
                     </div>
@@ -241,7 +241,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                             rows={5}
                             value={content}
                             onChange={(e) => setContent(e.target.value)}
-                            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 resize-none"
+                            className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 resize-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
                             placeholder="Type your message here..."
                         />
                     </div>
@@ -258,7 +258,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                                     key={c.id}
                                     type="button"
                                     onClick={() => toggleCohort(c.id)}
-                                    className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-gray-900 dark:text-white' : 'bg-white/5 border-white/10 text-gray-400 hover:bg-white/10'}`}
+                                    className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:bg-slate-100 dark:hover:bg-white/10'}`}
                                 >
                                     {c.name}
                                 </button>
@@ -272,9 +272,9 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                             id="pin"
                             checked={isPinned}
                             onChange={(e) => setIsPinned(e.target.checked)}
-                            className="w-5 h-5 rounded border-white/10 bg-white/5 text-orange-600 focus:ring-orange-500/50"
+                            className="w-5 h-5 rounded border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-orange-600 focus:ring-orange-500/50"
                         />
-                        <label htmlFor="pin" className="text-sm font-medium text-gray-300 cursor-pointer">
+                        <label htmlFor="pin" className="text-sm font-medium text-slate-600 dark:text-gray-300 cursor-pointer">
                             Pin this announcement to the top
                         </label>
                     </div>
@@ -286,7 +286,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                         <button
                             type="submit"
                             disabled={loading}
-                            className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-gray-900 dark:text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
+                            className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
                         >
                             {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />}
                             Publish Announcement
diff --git a/web/studio/src/app/courses/[id]/calendar/page.tsx b/web/studio/src/app/courses/[id]/calendar/page.tsx
index fa7e56f..ec07377 100644
--- a/web/studio/src/app/courses/[id]/calendar/page.tsx
+++ b/web/studio/src/app/courses/[id]/calendar/page.tsx
@@ -107,10 +107,10 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
                 <div className="flex items-center justify-between mb-8">
                     <div className="flex items-center gap-6">
                         <h3 className="text-2xl font-black uppercase tracking-tight">{monthName} <span className="text-blue-500">{year}</span></h3>
-                        <div className="flex items-center gap-2 bg-white/5 rounded-xl p-1 border border-white/10">
-                            <button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronLeft className="w-5 h-5" /></button>
-                            <button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest hover:text-blue-400 transition-colors">Hoy</button>
-                            <button onClick={nextMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronRight className="w-5 h-5" /></button>
+                        <div className="flex items-center gap-2 bg-slate-100 dark:bg-white/5 rounded-xl p-1 border border-slate-200 dark:border-white/10">
+                            <button onClick={prevMonth} className="p-2 hover:bg-slate-200 dark:hover:bg-white/10 rounded-lg transition-colors text-slate-600 dark:text-gray-400"><ChevronLeft className="w-5 h-5" /></button>
+                            <button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest text-slate-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Hoy</button>
+                            <button onClick={nextMonth} className="p-2 hover:bg-slate-200 dark:hover:bg-white/10 rounded-lg transition-colors text-slate-600 dark:text-gray-400"><ChevronRight className="w-5 h-5" /></button>
                         </div>
                     </div>
 
diff --git a/web/studio/src/app/courses/[id]/grades/page.tsx b/web/studio/src/app/courses/[id]/grades/page.tsx
index d60ef59..0eee583 100644
--- a/web/studio/src/app/courses/[id]/grades/page.tsx
+++ b/web/studio/src/app/courses/[id]/grades/page.tsx
@@ -166,11 +166,11 @@ export default function GradebookPage() {
 
                 {/* Bulk Enroll Modal */}
                 {showBulkEnroll && (
-                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-                        <div className="bg-[#1a1d23] border border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
-                            <div className="p-6 border-b border-white/5 flex items-center justify-between">
-                                <h3 className="text-xl font-bold flex items-center gap-2">
-                                    <Users className="text-blue-400" /> Inscripción Masiva de Estudiantes
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+                        <div className="bg-white dark:bg-[#1a1d23] border border-slate-200 dark:border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
+                            <div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
+                                <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
+                                    <Users className="text-blue-500 dark:text-blue-400" /> Inscripción Masiva de Estudiantes
                                 </h3>
                                 <button
                                     onClick={() => {
@@ -188,14 +188,14 @@ export default function GradebookPage() {
                                 {!bulkResults ? (
                                     <>
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-400 mb-2">
+                                            <label className="block text-sm font-medium text-slate-500 dark:text-gray-400 mb-2">
                                                 Ingresa las direcciones de correo (separadas por comas o saltos de línea)
                                             </label>
                                             <textarea
                                                 value={bulkEmails}
                                                 onChange={(e) => setBulkEmails(e.target.value)}
                                                 placeholder="student1@example.com&#10;student2@example.com"
-                                                className="w-full h-48 bg-black/20 border border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600 resize-none font-mono"
+                                                className="w-full h-48 bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 resize-none font-mono"
                                             />
                                         </div>
                                         <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400">
@@ -234,12 +234,12 @@ export default function GradebookPage() {
                                 )}
                             </div>
 
-                            <div className="p-6 bg-white/5 border-t border-white/5 flex justify-end gap-3">
+                            <div className="p-6 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5 flex justify-end gap-3">
                                 {!bulkResults ? (
                                     <>
                                         <button
                                             onClick={() => setShowBulkEnroll(false)}
-                                            className="px-6 py-2 rounded-xl hover:bg-white/5 transition-colors font-medium"
+                                            className="px-6 py-2 rounded-xl hover:bg-slate-200 dark:hover:bg-white/5 transition-colors font-medium text-slate-600 dark:text-gray-400"
                                         >
                                             Cancel
                                         </button>
@@ -280,7 +280,7 @@ export default function GradebookPage() {
                                 <select
                                     value={selectedCohortId}
                                     onChange={(e) => setSelectedCohortId(e.target.value)}
-                                    className="appearance-none bg-black/20 text-gray-900 dark:text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
+                                    className="appearance-none bg-slate-100 dark:bg-black/20 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
                                 >
                                     <option value="">All Cohorts</option>
                                     {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -296,15 +296,15 @@ export default function GradebookPage() {
                                     placeholder="Search students..."
                                     value={searchQuery}
                                     onChange={(e) => setSearchQuery(e.target.value)}
-                                    className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600"
+                                    className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
                                 />
                             </div>
                         </div>
 
                         <div className="flex gap-8 border-l border-white/10 pl-8">
                             <div>
-                                <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Students</p>
-                                <p className="text-2xl font-black">{filteredStudents.length}</p>
+                                <p className="text-xs font-bold text-slate-500 dark:text-gray-500 uppercase tracking-wider mb-1">Students</p>
+                                <p className="text-2xl font-black text-slate-900 dark:text-white">{filteredStudents.length}</p>
                             </div>
                             <div>
                                 <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
diff --git a/web/studio/src/app/courses/[id]/grading/page.tsx b/web/studio/src/app/courses/[id]/grading/page.tsx
index c690371..36b6dd6 100644
--- a/web/studio/src/app/courses/[id]/grading/page.tsx
+++ b/web/studio/src/app/courses/[id]/grading/page.tsx
@@ -98,29 +98,29 @@ export default function GradingPolicyPage() {
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Categories List */}
                     <div className="lg:col-span-2 space-y-4">
-                        <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
+                        <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-gray-500 mb-6 flex items-center gap-2">
                             <Settings className="w-4 h-4" /> Assessment Categories
                         </h2>
 
                         {categories.length === 0 ? (
-                            <div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
-                                <TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-                                <p className="text-gray-400 italic">No grading categories defined yet.</p>
+                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-12 text-center">
+                                <TrendingUp className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
+                                <p className="text-slate-500 dark:text-gray-400 italic">No grading categories defined yet.</p>
                             </div>
                         ) : (
                             categories.map((cat) => (
                                 <div
                                     key={cat.id}
-                                    className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
+                                    className="group bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-slate-100 dark:hover:bg-white/[0.07] transition-all duration-300"
                                 >
                                     <div className="flex items-center gap-4">
-                                        <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
+                                        <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold group-hover:scale-110 transition-transform">
                                             {cat.weight}%
                                         </div>
                                         <div>
-                                            <h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
+                                            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{cat.name}</h3>
                                             <div className="flex items-center gap-2 mt-1">
-                                                <span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
+                                                <span className="text-xs text-slate-500 dark:text-gray-500 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded-full capitalize">
                                                     Weight: {cat.weight}%
                                                 </span>
                                             </div>
@@ -128,7 +128,7 @@ export default function GradingPolicyPage() {
                                     </div>
                                     <button
                                         onClick={() => handleDelete(cat.id)}
-                                        className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
+                                        className="p-3 bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
                                     >
                                         <Trash2 className="w-5 h-5" />
                                     </button>
@@ -139,45 +139,45 @@ export default function GradingPolicyPage() {
 
                     {/* Add New Category Form */}
                     <div className="space-y-6">
-                        <div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
-                            <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
-                                <Plus className="w-5 h-5 text-blue-400" /> New Format
+                        <div className="bg-slate-50 dark:bg-gradient-to-br dark:from-gray-800/50 dark:to-gray-900/50 p-8 rounded-3xl border border-slate-200 dark:border-white/10 sticky top-8">
+                            <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-slate-900 dark:text-white">
+                                <Plus className="w-5 h-5 text-blue-500 dark:text-blue-400" /> New Format
                             </h2>
 
                             <div className="space-y-4">
                                 <div>
-                                    <label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
+                                    <label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
                                     <select
                                         value={newName}
                                         onChange={(e) => setNewName(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
+                                        className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 appearance-none"
                                     >
-                                        <option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
-                                        <option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
-                                        <option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
-                                        <option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
-                                        <option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
+                                        <option value="">Select a type...</option>
+                                        <option value="Continuous Assessment">Continuous Assessment (Min 4)</option>
+                                        <option value="Midterm">Midterm</option>
+                                        <option value="Final Test">Final Test</option>
+                                        <option value="Exam">Exam</option>
                                     </select>
                                 </div>
 
                                 <div>
-                                    <label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
+                                    <label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
                                     <div className="relative mt-1.5">
                                         <input
                                             type="number"
                                             placeholder="20"
                                             value={newWeight || ""}
                                             onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
-                                            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
+                                            className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 pl-10"
                                         />
-                                        <Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
+                                        <Percent className="w-4 h-4 text-slate-400 dark:text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
                                     </div>
                                 </div>
 
                                 <button
                                     onClick={handleAdd}
                                     disabled={submitting || !newName || newWeight <= 0}
-                                    className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark:text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
+                                    className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-200 dark:disabled:bg-gray-700 disabled:text-slate-400 dark:disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
                                 >
                                     {submitting ? "Adding..." : (
                                         <>
@@ -189,8 +189,8 @@ export default function GradingPolicyPage() {
 
                                 {!isBalanced && (
                                     <div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
-                                        <AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
-                                        <p className="text-sm text-amber-200/80 leading-relaxed">
+                                        <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
+                                        <p className="text-sm text-amber-800 dark:text-amber-200/80 leading-relaxed">
                                             The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
                                         </p>
                                     </div>
diff --git a/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx b/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
index cda341f..86dd89b 100644
--- a/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+++ b/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
@@ -366,11 +366,11 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
 
     return (
         <div className="max-w-4xl mx-auto space-y-12 pb-40 px-4">
-            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-white/5 pb-8">
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-slate-200 dark:border-white/5 pb-8">
                 <div className="space-y-1">
-                    <div className="flex items-center gap-2 text-[10px] text-blue-500 font-bold uppercase tracking-[0.2em]">
-                        <Link href={`/courses/${params.id}`} className="hover:text-gray-900 dark:text-white transition-colors">Outline</Link>
-                        <span className="text-gray-700">/</span>
+                    <div className="flex items-center gap-2 text-[10px] text-blue-600 dark:text-blue-500 font-bold uppercase tracking-[0.2em]">
+                        <Link href={`/courses/${params.id}`} className="hover:text-slate-900 dark:text-white transition-colors">Outline</Link>
+                        <span className="text-slate-300 dark:text-gray-700">/</span>
                         <span>Activity</span>
                     </div>
                     <div className="flex items-center gap-4">
@@ -388,10 +388,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             </div>
                         ) : (
                             <div className="flex items-center gap-4 group">
-                                <h2 className="text-4xl font-black tracking-tight">{lesson.title}</h2>
+                                <h2 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white">{lesson.title}</h2>
                                 <button
                                     onClick={() => { setEditingId('lesson-title'); setEditValue(lesson.title); }}
-                                    className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
+                                    className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
                                 >
                                     <Pencil className="w-5 h-5" />
                                 </button>
@@ -403,13 +403,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                 <div className="flex items-center gap-3">
                     {editMode ? (
                         <>
-                            <button onClick={() => setEditMode(false)} className="px-6 py-2.5 glass text-xs font-bold uppercase tracking-widest hover:bg-white/5 transition-all">Discard</button>
-                            <button onClick={handleSave} disabled={isSaving} className="btn-premium px-8 py-2.5 min-w-[140px] text-xs font-bold uppercase tracking-widest shadow-blue-500/20 shadow-lg">
+                            <button onClick={() => setEditMode(false)} className="px-6 py-2.5 glass text-xs font-bold uppercase tracking-widest hover:bg-slate-50 dark:hover:bg-white/5 transition-all text-slate-600 dark:text-white">Discard</button>
+                            <button onClick={handleSave} disabled={isSaving} className="btn-premium px-8 py-2.5 min-w-[140px] text-xs font-bold uppercase tracking-widest text-white">
                                 {isSaving ? "Saving..." : "Publish Changes"}
                             </button>
                         </>
                     ) : (
-                        <button onClick={() => setEditMode(true)} className="px-8 py-3 glass text-xs font-bold uppercase tracking-widest hover:border-blue-500/50 transition-all flex items-center gap-2 group">
+                        <button onClick={() => setEditMode(true)} className="px-8 py-3 glass text-xs font-bold uppercase tracking-widest hover:border-blue-500/50 transition-all flex items-center gap-2 group text-slate-700 dark:text-white">
                             <span className="group-hover:rotate-12 transition-transform">✏️</span> Edit Activity
                         </button>
                     )}
@@ -417,13 +417,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
             </div>
 
             {editMode && (
-                <div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
+                <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
                     <div className="flex items-center justify-between">
                         <div>
-                            <h3 className="text-xl font-bold flex items-center gap-2">
+                            <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                                 <span className="text-blue-500">⚖️</span> Grading Configuration
                             </h3>
-                            <p className="text-sm text-gray-500 mt-1">Determine if this activity contributes to the final grade</p>
+                            <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Determine if this activity contributes to the final grade</p>
                         </div>
                         <label className="relative inline-flex items-center cursor-pointer group">
                             <input
@@ -432,19 +432,19 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 onChange={(e) => setIsGraded(e.target.checked)}
                                 className="sr-only peer"
                             />
-                            <div className="w-14 h-8 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all"></div>
-                            <span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors">
+                            <div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
+                            <span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
                                 {isGraded ? "Graded" : "Not Graded"}
                             </span>
                         </label>
                     </div>
 
-                    <div className="flex items-center justify-between pt-6 border-t border-white/5">
+                    <div className="flex items-center justify-between pt-6 border-t border-slate-200 dark:border-white/5">
                         <div>
-                            <h3 className="text-xl font-bold flex items-center gap-2">
+                            <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                                 <span className="text-blue-500">🔓</span> Course Preview
                             </h3>
-                            <p className="text-sm text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p>
+                            <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p>
                         </div>
                         <label className="relative inline-flex items-center cursor-pointer group">
                             <input
@@ -453,8 +453,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 onChange={(e) => setIsPreviewable(e.target.checked)}
                                 className="sr-only peer"
                             />
-                            <div className="w-14 h-8 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all"></div>
-                            <span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors">
+                            <div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
+                            <span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
                                 {isPreviewable ? "Preview Enabled" : "Preview Disabled"}
                             </span>
                         </label>
@@ -464,44 +464,44 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                         <>
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                 <div className="space-y-4">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Assessment Category</span>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Assessment Category</span>
                                     <select
                                         value={selectedCategoryId}
                                         onChange={(e) => setSelectedCategoryId(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold"
+                                        className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
                                     >
-                                        <option value="" className="bg-gray-900 border-0">Select Category...</option>
+                                        <option value="">Select Category...</option>
                                         {gradingCategories.map((cat) => (
-                                            <option key={cat.id} value={cat.id} className="bg-gray-900 border-0">
+                                            <option key={cat.id} value={cat.id}>
                                                 {cat.name} ({cat.weight}%)
                                             </option>
                                         ))}
                                     </select>
-                                    <div className="text-[10px] text-gray-500 italic mt-1 pl-1">
-                                        Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-400 hover:underline">Grading Policy</Link>
+                                    <div className="text-[10px] text-slate-500 dark:text-gray-500 italic mt-1 pl-1">
+                                        Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-600 dark:text-blue-400 hover:underline">Grading Policy</Link>
                                     </div>
                                 </div>
 
                                 <div className="space-y-4">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Rubric (Optional)</span>
-                                    <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Rubric (Optional)</span>
+                                    <div className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
                                         {courseRubrics.length === 0 ? (
-                                            <p className="text-xs text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
+                                            <p className="text-xs text-slate-400 dark:text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
                                         ) : (
                                             courseRubrics.map(rubric => {
                                                 const isAssigned = assignedRubricIds.includes(rubric.id);
                                                 return (
-                                                    <label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-all cursor-pointer group">
+                                                    <label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-slate-200 dark:hover:bg-white/5 transition-all cursor-pointer group">
                                                         <div className="flex items-center gap-3">
                                                             <input
                                                                 type="checkbox"
                                                                 checked={isAssigned}
                                                                 onChange={() => toggleRubric(rubric.id, isAssigned)}
-                                                                className="w-4 h-4 rounded border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                                                                className="w-4 h-4 rounded border-slate-300 dark:border-gray-700 bg-slate-100 dark:bg-gray-800 text-blue-500 focus:ring-blue-500"
                                                             />
-                                                            <span className="text-sm font-medium text-gray-200 group-hover:text-blue-400 transition-colors">{rubric.name}</span>
+                                                            <span className="text-sm font-medium text-slate-600 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{rubric.name}</span>
                                                         </div>
-                                                        <span className="text-[10px] font-bold text-gray-600 bg-white/5 px-1.5 py-0.5 rounded">{rubric.total_points} pts</span>
+                                                        <span className="text-[10px] font-bold text-slate-500 bg-slate-200 dark:bg-white/5 px-1.5 py-0.5 rounded">{rubric.total_points} pts</span>
                                                     </label>
                                                 );
                                             })
@@ -516,22 +516,22 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500">
                                 <div className="space-y-4">
                                     <label className="block">
-                                        <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Maximum Attempts</span>
+                                        <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
                                         <div className="flex items-center gap-3">
                                             <input
                                                 type="number"
                                                 value={maxAttempts || ""}
                                                 onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
                                                 placeholder="Unlimited"
-                                                className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32"
+                                                className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32 text-slate-900 dark:text-white"
                                             />
-                                            <span className="text-xs text-gray-500">Leave empty for unlimited</span>
+                                            <span className="text-xs text-slate-500 dark:text-gray-500">Leave empty for unlimited</span>
                                         </div>
                                     </label>
                                 </div>
 
                                 <div className="space-y-2">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 block mb-2">After Submission</span>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 block mb-2">After Submission</span>
                                     <label className="flex items-center gap-3 cursor-pointer group relative">
                                         <input
                                             type="checkbox"
@@ -539,54 +539,54 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                             onChange={(e) => setAllowRetry(e.target.checked)}
                                             className="sr-only peer"
                                         />
-                                        <div className="w-10 h-6 bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div>
-                                        <span className="text-sm font-bold text-gray-400 peer-checked:text-gray-900 dark:text-white transition-colors">Allow Instant Corrections</span>
+                                        <div className="w-10 h-6 bg-slate-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4 shadow-sm"></div>
+                                        <span className="text-sm font-bold text-slate-400 dark:text-gray-400 peer-checked:text-slate-900 dark:peer-checked:text-white transition-colors">Allow Instant Corrections</span>
                                     </label>
-                                    <p className="text-[10px] text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
+                                    <p className="text-[10px] text-slate-500 dark:text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
                                 </div>
                             </div>
 
-                            <div className="pt-8 border-t border-white/5 animate-in fade-in duration-500 delay-150">
-                                <div className="flex items-center gap-2 mb-6 uppercase tracking-[0.2em] text-[10px] font-black text-gray-500">
-                                    <span className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50"></span>
+                            <div className="pt-8 border-t border-slate-200 dark:border-white/5 animate-in fade-in duration-500 delay-150">
+                                <div className="flex items-center gap-2 mb-6 uppercase tracking-[0.2em] text-[10px] font-black text-slate-400 dark:text-gray-500">
+                                    <span className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 shadow-lg shadow-blue-500/50"></span>
                                     Access & Prerequisites
                                 </div>
 
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                     <div className="space-y-4">
-                                        <h4 className="text-sm font-bold text-gray-200">Prerequisites</h4>
-                                        <p className="text-xs text-gray-500 leading-relaxed">
+                                        <h4 className="text-sm font-bold text-slate-900 dark:text-gray-200">Prerequisites</h4>
+                                        <p className="text-xs text-slate-500 dark:text-gray-500 leading-relaxed">
                                             Students must complete these lessons before they can access this one.
                                         </p>
-                                        <div className="bg-white/5 border border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2">
+                                        <div className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2">
                                             {allLessons.length === 0 ? (
-                                                <p className="text-xs text-gray-500 italic p-4 text-center">No other lessons available.</p>
+                                                <p className="text-xs text-slate-500 dark:text-gray-500 italic p-4 text-center">No other lessons available.</p>
                                             ) : (
                                                 allLessons.map(l => {
                                                     const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
                                                     const isAssigned = !!dep;
                                                     return (
-                                                        <div key={l.id} className="space-y-2 p-2 rounded-xl hover:bg-white/5 transition-all group border border-transparent hover:border-white/10">
+                                                        <div key={l.id} className="space-y-2 p-2 rounded-xl hover:bg-slate-200 dark:hover:bg-white/5 transition-all group border border-transparent hover:border-slate-300 dark:hover:border-white/10">
                                                             <label className="flex items-center justify-between cursor-pointer">
                                                                 <div className="flex items-center gap-3">
                                                                     <input
                                                                         type="checkbox"
                                                                         checked={isAssigned}
                                                                         onChange={() => toggleDependency(l.id, isAssigned)}
-                                                                        className="w-4 h-4 rounded-md border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500 transition-all"
+                                                                        className="w-4 h-4 rounded-md border-slate-300 dark:border-gray-700 bg-slate-100 dark:bg-gray-800 text-blue-500 focus:ring-blue-500 transition-all"
                                                                     />
-                                                                    <span className={`text-sm font-medium transition-colors ${isAssigned ? 'text-blue-400' : 'text-gray-400 group-hover:text-gray-200'}`}>
+                                                                    <span className={`text-sm font-medium transition-colors ${isAssigned ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-slate-900 dark:group-hover:text-gray-200'}`}>
                                                                         {l.title}
                                                                     </span>
                                                                 </div>
                                                                 {l.is_graded && (
-                                                                    <span className="text-[9px] font-black uppercase tracking-tighter px-2 py-0.5 bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20">Graded</span>
+                                                                    <span className="text-[9px] font-black uppercase tracking-tighter px-2 py-0.5 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full border border-blue-500/20">Graded</span>
                                                                 )}
                                                             </label>
                                                             {isAssigned && l.is_graded && (
                                                                 <div className="pl-7 animate-in slide-in-from-left-2 duration-300">
                                                                     <div className="flex items-center gap-3">
-                                                                        <span className="text-[10px] text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
+                                                                        <span className="text-[10px] text-slate-500 dark:text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
                                                                         <input
                                                                             type="number"
                                                                             min="0"
@@ -604,7 +604,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                                                                     console.error("Failed to update min score", err);
                                                                                 }
                                                                             }}
-                                                                            className="w-16 bg-black/40 border border-white/10 rounded-lg px-2 py-1 text-xs text-blue-400 font-bold focus:outline-none focus:border-blue-500"
+                                                                            className="w-16 bg-slate-100 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-2 py-1 text-xs text-blue-600 dark:text-blue-400 font-bold focus:outline-none focus:border-blue-500"
                                                                         />
                                                                     </div>
                                                                 </div>
@@ -616,26 +616,25 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                         </div>
                                     </div>
 
-                                    <div className="flex flex-col justify-center gap-4 px-6 border-l border-white/5">
+                                    <div className="flex flex-col justify-center gap-4 px-6 border-l border-slate-100 dark:border-white/5">
                                         <div className="flex items-start gap-4 p-4 rounded-2xl bg-indigo-500/5 border border-indigo-500/10">
                                             <div className="p-2 rounded-xl bg-indigo-500/20">
-                                                <Layout className="w-5 h-5 text-indigo-400" />
+                                                <Layout className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
                                             </div>
                                             <div>
-                                                <h5 className="text-sm font-bold text-indigo-300">Intelligent Sequences</h5>
-                                                <p className="text-[11px] text-indigo-300/60 leading-relaxed mt-1">
+                                                <h5 className="text-sm font-bold text-indigo-600 dark:text-indigo-300">Intelligent Sequences</h5>
+                                                <p className="text-[11px] text-indigo-500 dark:text-indigo-300/60 leading-relaxed mt-1">
                                                     Locked lessons will be visible in the student outline with a lock icon 🔒 until they meet all prerequisites.
                                                 </p>
                                             </div>
                                         </div>
-
                                         <div className="flex items-start gap-4 p-4 rounded-2xl bg-blue-500/5 border border-blue-500/10">
                                             <div className="p-2 rounded-xl bg-blue-500/20">
-                                                <CheckCircle2 className="w-5 h-5 text-blue-400" />
+                                                <CheckCircle2 className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                                             </div>
                                             <div>
-                                                <h5 className="text-sm font-bold text-blue-300">Completion Tracking</h5>
-                                                <p className="text-[11px] text-blue-300/60 leading-relaxed mt-1">
+                                                <h5 className="text-sm font-bold text-blue-600 dark:text-blue-300">Completion Tracking</h5>
+                                                <p className="text-[11px] text-blue-500 dark:text-blue-300/60 leading-relaxed mt-1">
                                                     If a minimum score is set, students must pass the prerequisite before the next lesson is unlocked.
                                                 </p>
                                             </div>
@@ -645,45 +644,45 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             </div>
                         </>
                     )}
-                </div >
+                </div>
             )}
 
             {
                 editMode && (
-                    <div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
+                    <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
                         <div>
-                            <h3 className="text-xl font-bold flex items-center gap-2">
+                            <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                                 <span className="text-blue-500">📅</span> Scheduling & Deadlines
                             </h3>
-                            <p className="text-sm text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p>
+                            <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p>
                         </div>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                             <div className="space-y-4">
                                 <label className="block">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Due Date</span>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Due Date</span>
                                     <input
                                         type="date"
                                         value={dueDate}
                                         onChange={(e) => setDueDate(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all font-bold"
+                                        className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all font-bold text-slate-900 dark:text-white"
                                     />
                                 </label>
                             </div>
 
                             <div className="space-y-4">
                                 <label className="block">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Date Type</span>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Date Type</span>
                                     <select
                                         value={importantDateType}
                                         onChange={(e) => setImportantDateType(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold"
+                                        className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
                                     >
-                                        <option value="" className="bg-gray-900">Standard Activity</option>
-                                        <option value="exam" className="bg-gray-900">Exam</option>
-                                        <option value="assignment" className="bg-gray-900">Assignment</option>
-                                        <option value="milestone" className="bg-gray-900">Milestone</option>
-                                        <option value="live-session" className="bg-gray-900">Live Session</option>
+                                        <option value="">Standard Activity</option>
+                                        <option value="exam">Exam</option>
+                                        <option value="assignment">Assignment</option>
+                                        <option value="milestone">Milestone</option>
+                                        <option value="live-session">Live Session</option>
                                     </select>
                                 </label>
                             </div>
@@ -695,21 +694,20 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
             {/* AI Magic Section */}
             {
                 editMode && (
-                    <div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
+                    <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
                         <div className="flex items-center gap-3">
                             <span className="text-2xl">🪄</span>
                             <div>
-                                <h3 className="text-xl font-bold italic tracking-tight">AI Content Assistant</h3>
-                                <p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Automate your content creation with Local AI</p>
+                                <h3 className="text-xl font-bold italic tracking-tight text-slate-900 dark:text-white">AI Content Assistant</h3>
+                                <p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Automate your content creation with Local AI</p>
                             </div>
                         </div>
 
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-
                             <button
                                 onClick={handleSummarize}
                                 disabled={isGeneratingSummary}
-                                className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400 hover:border-indigo-500/60'}`}
+                                className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-600 dark:text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-600 dark:text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-400 hover:border-indigo-500/60'}`}
                             >
                                 <span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span>
                                 <div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div>
@@ -719,7 +717,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             <button
                                 onClick={handleGenerateQuiz}
                                 disabled={isGeneratingQuiz}
-                                className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-400'}`}
+                                className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-600 dark:text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-600 dark:text-purple-400'}`}
                             >
                                 <span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span>
                                 <div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div>
@@ -738,8 +736,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             <div className="flex items-center gap-3">
                                 <span className="text-2xl">✨</span>
                                 <div>
-                                    <h3 className="text-xl font-bold font-black italic tracking-tight">AI Lesson Summary</h3>
-                                    <p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
+                                    <h3 className="text-xl font-bold font-black italic tracking-tight text-slate-900 dark:text-white">AI Lesson Summary</h3>
+                                    <p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
                                 </div>
                             </div>
                         </div>
@@ -749,10 +747,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 value={summary}
                                 onChange={(e) => setSummary(e.target.value)}
                                 placeholder="A concise summary of the lesson content..."
-                                className="w-full bg-white/5 border border-white/10 rounded-2xl p-6 text-sm text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all"
+                                className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all"
                             />
                         ) : (
-                            <div className="text-sm text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
+                            <div className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
                                 &quot;{summary}&quot;
                             </div>
                         )}
@@ -765,11 +763,11 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                     <div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}>
                         {editMode && (
                             <div className="absolute -left-16 top-0 h-full flex flex-col items-center gap-2 opacity-100 transition-all">
-                                <span className="text-[10px] font-black text-gray-700 uppercase vertical-text mb-2">Move</span>
+                                <span className="text-[10px] font-black text-slate-300 dark:text-gray-700 uppercase vertical-text mb-2">Move</span>
                                 <button
                                     onClick={() => moveBlock(index, 'up')}
                                     disabled={index === 0}
-                                    className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
+                                    className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
                                     title="Move Up"
                                 >
                                     <ChevronUp className="w-5 h-5" />
@@ -777,7 +775,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 <button
                                     onClick={() => moveBlock(index, 'down')}
                                     disabled={index === blocks.length - 1}
-                                    className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110"
+                                    className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
                                     title="Move Down"
                                 >
                                     <ChevronDown className="w-5 h-5" />
@@ -785,14 +783,14 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 <div className="h-4"></div>
                                 <button
                                     onClick={() => openSaveToLibraryModal(block)}
-                                    className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-gray-900 dark:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110"
+                                    className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110 shadow-sm"
                                     title="Save to Library"
                                 >
                                     <BookMarked className="w-5 h-5" />
                                 </button>
                                 <button
                                     onClick={() => removeBlock(block.id)}
-                                    className="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all border border-red-500/20 group-hover/block:scale-110"
+                                    className="w-10 h-10 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20 group-hover/block:scale-110 shadow-sm"
                                     title="Remove Block"
                                 >
                                     <Trash2 className="w-5 h-5" />
diff --git a/web/studio/src/app/courses/[id]/page.tsx b/web/studio/src/app/courses/[id]/page.tsx
index ce5d8bc..2033589 100644
--- a/web/studio/src/app/courses/[id]/page.tsx
+++ b/web/studio/src/app/courses/[id]/page.tsx
@@ -240,7 +240,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                     alert("Failed to start preview.");
                                 }
                             }}
-                            className="flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95"
+                            className="flex items-center gap-2 px-6 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95 text-slate-700 dark:text-white shadow-sm"
                         >
                             <PlayCircle size={18} /> Previsualizar
                         </button>
@@ -261,26 +261,26 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
             >
                 <div className="space-y-6">
                     {modules.map((module: FullModule, mIndex: number) => (
-                        <div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
-                            <div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5">
+                        <div key={module.id} className="glass rounded-xl overflow-hidden border-slate-200 dark:border-white/5 shadow-sm">
+                            <div className="bg-slate-50 dark:bg-white/5 px-6 py-4 flex justify-between items-center border-b border-slate-200 dark:border-white/5">
                                 <div className="flex items-center gap-4 flex-1">
                                     <div className="flex flex-col">
                                         <button
                                             onClick={() => handleReorderModule(mIndex, 'up')}
                                             disabled={mIndex === 0}
-                                            className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
+                                            className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
                                         >
                                             <ChevronUp className="w-4 h-4" />
                                         </button>
                                         <button
                                             onClick={() => handleReorderModule(mIndex, 'down')}
                                             disabled={mIndex === modules.length - 1}
-                                            className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
+                                            className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
                                         >
                                             <ChevronDown className="w-4 h-4" />
                                         </button>
                                     </div>
-                                    <GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
+                                    <GripVertical className="text-slate-400 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
 
                                     {editingId === module.id ? (
                                         <div className="flex items-center gap-2 flex-1">
@@ -289,7 +289,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                                 value={editValue}
                                                 onChange={(e) => setEditValue(e.target.value)}
                                                 onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
-                                                className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
+                                                className="bg-slate-100 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-slate-900 dark:text-white focus:outline-none"
                                             />
                                             <button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
                                                 <Save className="w-5 h-5" />
@@ -302,13 +302,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                         <div className="flex items-center gap-3 group flex-1">
                                             <span
                                                 onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
-                                                className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                                                className="font-bold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                                             >
                                                 {module.title || `Module ${module.position}`}
                                             </span>
                                             <button
                                                 onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
-                                                className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
+                                                className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
                                             >
                                                 <Pencil className="w-4 h-4" />
                                             </button>
@@ -318,7 +318,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                 <div className="flex items-center gap-3">
                                     <button
                                         onClick={() => handleDeleteModule(module.id)}
-                                        className="text-gray-500 hover:text-red-400 transition-colors"
+                                        className="text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                                     >
                                         <Trash2 className="w-4 h-4" />
                                     </button>
@@ -331,14 +331,14 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                             <button
                                                 onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
                                                 disabled={lIndex === 0}
-                                                className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
+                                                className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
                                             >
                                                 <ChevronUp className="w-3 h-3" />
                                             </button>
                                             <button
                                                 onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
                                                 disabled={lIndex === module.lessons.length - 1}
-                                                className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
+                                                className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
                                             >
                                                 <ChevronDown className="w-3 h-3" />
                                             </button>
@@ -346,35 +346,35 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
 
                                         <div className="flex-1">
                                             {editingId === lesson.id ? (
-                                                <div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
+                                                <div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-slate-50 dark:bg-black/20 shadow-inner">
                                                     <input
                                                         autoFocus
                                                         value={editValue}
                                                         onChange={(e) => setEditValue(e.target.value)}
                                                         onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')}
-                                                        className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
+                                                        className="bg-transparent border-none flex-1 text-slate-900 dark:text-white focus:outline-none font-medium"
                                                     />
                                                     <button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
                                                         <Save className="w-4 h-4" />
                                                     </button>
-                                                    <button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
+                                                    <button onClick={() => setEditingId(null)} className="text-slate-400 dark:text-gray-400">
                                                         <X className="w-4 h-4" />
                                                     </button>
                                                 </div>
                                             ) : (
-                                                <div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
+                                                <div className="flex items-center justify-between glass border-slate-200 dark:border-white/5 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson shadow-sm">
                                                     <Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
-                                                        <div className="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
+                                                        <div className="p-2 bg-blue-600/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
                                                             {lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
                                                         </div>
                                                         <div className="flex flex-col">
                                                             <span
                                                                 onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
-                                                                className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                                                className="font-bold text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                                                             >
                                                                 {lesson.title}
                                                             </span>
-                                                            <div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold">
+                                                            <div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-500 uppercase mt-0.5 font-bold">
                                                                 <span>{lesson.content_type}</span>
                                                                 {lesson.due_date && (
                                                                     <div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
@@ -388,13 +388,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                                     <div className="flex items-center gap-4">
                                                         <button
                                                             onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
-                                                            className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
+                                                            className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
                                                         >
                                                             <Pencil className="w-4 h-4" />
                                                         </button>
                                                         <button
                                                             onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }}
-                                                            className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-red-400 transition-opacity"
+                                                            className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-opacity"
                                                         >
                                                             <Trash2 className="w-4 h-4" />
                                                         </button>
@@ -407,7 +407,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
 
                                 <button
                                     onClick={() => handleAddLesson(module.id)}
-                                    className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
+                                    className="w-full py-3 border border-dashed border-slate-300 dark:border-white/10 rounded-xl text-sm text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2 font-bold"
                                 >
                                     <Plus className="w-4 h-4" /> New Lesson
                                 </button>
@@ -417,7 +417,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
 
                     <button
                         onClick={handleAddModule}
-                        className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
+                        className="w-full py-6 border-2 border-dashed border-slate-300 dark:border-white/10 rounded-2xl font-bold text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
                     >
                         <Plus className="w-6 h-6" /> Add New Module
                     </button>
diff --git a/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx b/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
index b2abea6..9797da0 100644
--- a/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
+++ b/web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
@@ -72,40 +72,40 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
     }
 
     return (
-        <section className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-8">
+        <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-8 shadow-sm">
             <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                    <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
+                    <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                         <Users size={24} />
                     </div>
                     <div>
                         <h2 className="section-title">Equipo del Curso</h2>
-                        <p className="text-sm text-gray-400">Gestiona los instructores y asistentes de este curso</p>
+                        <p className="text-sm text-slate-500 dark:text-gray-400">Gestiona los instructores y asistentes de este curso</p>
                     </div>
                 </div>
             </div>
 
             {/* Add Member Form */}
-            <form onSubmit={handleAddMember} className="bg-white/5 border border-white/10 rounded-2xl p-6">
-                <h3 className="text-sm font-bold text-gray-300 mb-4 flex items-center gap-2">
-                    <UserPlus size={16} /> Add Team Member
+            <form onSubmit={handleAddMember} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
+                <h3 className="text-sm font-black text-slate-900 dark:text-gray-300 mb-4 flex items-center gap-2 uppercase tracking-wider">
+                    <UserPlus size={16} className="text-blue-600 dark:text-blue-400" /> Add Team Member
                 </h3>
                 <div className="flex flex-col md:flex-row gap-4">
                     <div className="flex-1 relative">
-                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
                         <input
                             type="email"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
                             placeholder="instructor@example.com"
-                            className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors"
+                            className="w-full bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white"
                             required
                         />
                     </div>
                     <select
                         value={role}
                         onChange={(e) => setRole(e.target.value)}
-                        className="bg-black/30 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors"
+                        className="bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white font-bold"
                     >
                         <option value="instructor">Instructor</option>
                         <option value="assistant">Assistant</option>
@@ -125,36 +125,36 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
 
             {/* Member List */}
             <div className="space-y-4">
-                <h3 className="text-sm font-bold text-gray-300">Active Instructors</h3>
+                <h3 className="text-xs font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Active Instructors</h3>
                 <div className="grid grid-cols-1 gap-4">
                     {team.map((member) => (
-                        <div key={member.user_id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-2xl hover:bg-white/[0.07] transition-colors">
+                        <div key={member.user_id} className="flex items-center justify-between p-5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm group">
                             <div className="flex items-center gap-4">
                                 <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-blue-500/10">
                                     {member.full_name.charAt(0)}
                                 </div>
                                 <div>
-                                    <div className="font-bold flex items-center gap-2">
+                                    <div className="font-bold flex items-center gap-2 text-slate-900 dark:text-white">
                                         {member.full_name}
                                         {member.role === 'primary' && (
-                                            <span className="px-2 py-0.5 bg-blue-500/10 border border-blue-500/20 rounded text-[10px] text-blue-400 font-bold uppercase tracking-wider">
+                                            <span className="px-2 py-0.5 bg-blue-600/10 border border-blue-500/20 rounded text-[9px] text-blue-600 dark:text-blue-400 font-black uppercase tracking-wider">
                                                 Primary
                                             </span>
                                         )}
                                         {member.role === 'assistant' && (
-                                            <span className="px-2 py-0.5 bg-gray-500/10 border border-gray-500/20 rounded text-[10px] text-gray-400 font-bold uppercase tracking-wider">
+                                            <span className="px-2 py-0.5 bg-slate-500/10 border border-slate-500/20 rounded text-[9px] text-slate-600 dark:text-gray-400 font-black uppercase tracking-wider">
                                                 Assistant
                                             </span>
                                         )}
                                     </div>
-                                    <div className="text-xs text-gray-500">{member.email}</div>
+                                    <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">{member.email}</div>
                                 </div>
                             </div>
                             <div className="flex items-center gap-2">
                                 {member.role !== 'primary' && (
                                     <button
                                         onClick={() => handleRemoveMember(member.user_id)}
-                                        className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all"
+                                        className="p-2 text-slate-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all opacity-0 group-hover:opacity-100"
                                         title="Remove member"
                                     >
                                         <Trash2 size={18} />
diff --git a/web/studio/src/app/courses/[id]/settings/page.tsx b/web/studio/src/app/courses/[id]/settings/page.tsx
index ee265dd..b1a039b 100644
--- a/web/studio/src/app/courses/[id]/settings/page.tsx
+++ b/web/studio/src/app/courses/[id]/settings/page.tsx
@@ -149,9 +149,9 @@ export default function CourseSettingsPage() {
                 <TeamManagementSection courseId={id} />
 
                 {/* Passing Percentage Section */}
-                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
                     <div className="flex items-center gap-3 mb-6">
-                        <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
+                        <div className="w-12 h-12 rounded-2xl bg-purple-600/10 flex items-center justify-center text-purple-600 dark:text-purple-400">
                             <SettingsIcon size={24} />
                         </div>
                         <h2 className="section-title">Configuración de Calificaciones</h2>
@@ -159,7 +159,7 @@ export default function CourseSettingsPage() {
 
                     <div className="space-y-6">
                         <div>
-                            <label className="block text-sm font-bold text-gray-300 mb-3">
+                            <label className="block text-sm font-black text-slate-700 dark:text-gray-300 mb-3 uppercase tracking-wider">
                                 Passing Percentage
                             </label>
                             <div className="flex items-center gap-6">
@@ -169,45 +169,45 @@ export default function CourseSettingsPage() {
                                     max="100"
                                     value={passingPercentage}
                                     onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
-                                    className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
+                                    className="flex-1 h-2 bg-slate-200 dark:bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
                                 />
-                                <div className="text-4xl font-black text-blue-400 w-24 text-right">
+                                <div className="text-4xl font-black text-blue-600 dark:text-blue-400 w-24 text-right">
                                     {passingPercentage}%
                                 </div>
                             </div>
-                            <p className="text-xs text-gray-500 mt-3">
+                            <p className="text-xs text-slate-500 dark:text-gray-500 mt-3 font-medium">
                                 Students must achieve at least this percentage to pass the course.
                             </p>
                         </div>
 
                         {/* Performance Tiers Preview */}
-                        <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
-                            <h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
+                        <div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
+                            <h3 className="text-xs font-black text-slate-400 dark:text-gray-500 mb-4 uppercase tracking-[0.2em]">Performance Tiers Preview</h3>
                             <div className="space-y-3 text-xs">
                                 <div className="flex items-center gap-3">
-                                    <div className="w-16 h-4 bg-red-500 rounded"></div>
-                                    <span className="text-red-400 font-bold">Reprobado:</span>
-                                    <span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
+                                    <div className="w-16 h-4 bg-red-500 rounded shadow-sm"></div>
+                                    <span className="text-red-600 dark:text-red-400 font-bold">Reprobado:</span>
+                                    <span className="text-slate-500 dark:text-gray-400 font-medium">0% - {Math.max(0, passingPercentage - 1)}%</span>
                                 </div>
                                 <div className="flex items-center gap-3">
-                                    <div className="w-16 h-4 bg-orange-500 rounded"></div>
-                                    <span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
-                                    <span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
+                                    <div className="w-16 h-4 bg-orange-500 rounded shadow-sm"></div>
+                                    <span className="text-orange-600 dark:text-orange-400 font-bold">Rendimiento Bajo:</span>
+                                    <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage}% - {passingPercentage + 9}%</span>
                                 </div>
                                 <div className="flex items-center gap-3">
-                                    <div className="w-16 h-4 bg-yellow-500 rounded"></div>
-                                    <span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
-                                    <span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
+                                    <div className="w-16 h-4 bg-yellow-500 rounded shadow-sm"></div>
+                                    <span className="text-yellow-600 dark:text-yellow-400 font-bold">Rendimiento Medio:</span>
+                                    <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
                                 </div>
                                 <div className="flex items-center gap-3">
-                                    <div className="w-16 h-4 bg-green-500 rounded"></div>
-                                    <span className="text-green-400 font-bold">Buen Rendimiento:</span>
-                                    <span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
+                                    <div className="w-16 h-4 bg-green-500 rounded shadow-sm"></div>
+                                    <span className="text-green-600 dark:text-green-400 font-bold">Buen Rendimiento:</span>
+                                    <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 16}% - 90%</span>
                                 </div>
                                 <div className="flex items-center gap-3">
-                                    <div className="w-16 h-4 bg-blue-500 rounded"></div>
-                                    <span className="text-blue-400 font-bold">Excelente:</span>
-                                    <span className="text-gray-400">91% - 100%</span>
+                                    <div className="w-16 h-4 bg-blue-500 rounded shadow-sm"></div>
+                                    <span className="text-blue-600 dark:text-blue-400 font-bold">Excelente:</span>
+                                    <span className="text-slate-500 dark:text-gray-400 font-medium">91% - 100%</span>
                                 </div>
                             </div>
                         </div>
@@ -215,9 +215,9 @@ export default function CourseSettingsPage() {
                 </section>
 
                 {/* Course Pacing Section */}
-                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
                     <div className="flex items-center gap-3 mb-6">
-                        <div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-400">
+                        <div className="w-12 h-12 rounded-2xl bg-emerald-600/10 flex items-center justify-center text-emerald-600 dark:text-green-400">
                             <Clock size={24} />
                         </div>
                         <h2 className="section-title">Ritmo y Calendario del Curso</h2>
@@ -225,50 +225,50 @@ export default function CourseSettingsPage() {
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                         <div className="space-y-4">
-                            <label className="block text-sm font-bold text-gray-300">Pacing Mode</label>
+                            <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Pacing Mode</label>
                             <div className="flex gap-4">
                                 <button
                                     onClick={() => setPacingMode('self_paced')}
-                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'self_paced' ? 'border-blue-500 bg-blue-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
+                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'self_paced' ? 'border-blue-600 bg-blue-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
                                 >
-                                    <div className="font-bold">Self-Paced</div>
-                                    <div className="text-xs text-gray-500">Learners go at their own speed.</div>
+                                    <div className={`font-bold ${pacingMode === 'self_paced' ? 'text-blue-600 dark:text-blue-400' : 'text-slate-700 dark:text-white'}`}>Self-Paced</div>
+                                    <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Learners go at their own speed.</div>
                                 </button>
                                 <button
                                     onClick={() => setPacingMode('instructor_led')}
-                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'instructor_led' ? 'border-purple-500 bg-purple-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`}
+                                    className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'instructor_led' ? 'border-purple-600 bg-purple-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
                                 >
-                                    <div className="font-bold">Instructor-Led</div>
-                                    <div className="text-xs text-gray-500">Cohort-based with specific dates.</div>
+                                    <div className={`font-bold ${pacingMode === 'instructor_led' ? 'text-purple-600 dark:text-purple-400' : 'text-slate-700 dark:text-white'}`}>Instructor-Led</div>
+                                    <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Cohort-based with specific dates.</div>
                                 </button>
                             </div>
                         </div>
 
                         {pacingMode === 'instructor_led' && (
                             <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
-                                <label className="block text-sm font-bold text-gray-300">Course Schedule</label>
+                                <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Course Schedule</label>
                                 <div className="grid grid-cols-2 gap-4">
                                     <div className="space-y-2">
-                                        <label className="text-xs text-gray-500">Start Date</label>
+                                        <label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">Start Date</label>
                                         <div className="relative">
-                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
                                             <input
                                                 type="date"
                                                 value={startDate}
                                                 onChange={(e) => setStartDate(e.target.value)}
-                                                className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
+                                                className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
                                             />
                                         </div>
                                     </div>
                                     <div className="space-y-2">
-                                        <label className="text-xs text-gray-500">End Date</label>
+                                        <label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">End Date</label>
                                         <div className="relative">
-                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
                                             <input
                                                 type="date"
                                                 value={endDate}
                                                 onChange={(e) => setEndDate(e.target.value)}
-                                                className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500"
+                                                className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
                                             />
                                         </div>
                                     </div>
@@ -279,17 +279,17 @@ export default function CourseSettingsPage() {
                 </section>
 
                 {/* Course Pricing Section */}
-                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
                     <div className="flex items-center gap-3 mb-6">
-                        <div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
-                            <span className="text-xl font-bold">$</span>
+                        <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
+                            <span className="text-xl font-black">$</span>
                         </div>
                         <h2 className="section-title">Precio del Curso</h2>
                     </div>
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                         <div className="space-y-4">
-                            <label className="block text-sm font-bold text-gray-300">Price</label>
+                            <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Price</label>
                             <div className="relative">
                                 <input
                                     type="number"
@@ -297,22 +297,22 @@ export default function CourseSettingsPage() {
                                     min="0"
                                     value={price}
                                     onChange={(e) => setPrice(parseFloat(e.target.value))}
-                                    className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors"
+                                    className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors font-bold"
                                     placeholder="0.00"
                                 />
-                                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
+                                <div className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 font-black">
                                     {currency}
                                 </div>
                             </div>
-                            <p className="text-xs text-gray-500">Set to 0 for a free course.</p>
+                            <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">Set to 0 for a free course.</p>
                         </div>
 
                         <div className="space-y-4">
-                            <label className="block text-sm font-bold text-gray-300">Currency</label>
+                            <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Currency</label>
                             <select
                                 value={currency}
                                 onChange={(e) => setCurrency(e.target.value)}
-                                className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
+                                className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none font-bold"
                             >
                                 <option value="USD">USD - US Dollar</option>
                                 <option value="CLP">CLP - Chilean Peso</option>
@@ -326,40 +326,40 @@ export default function CourseSettingsPage() {
                 </section>
 
                 {/* Certificate Template Section */}
-                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
                     <div className="flex items-center gap-3 mb-6">
-                        <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
+                        <div className="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
                             <BookOpen size={24} />
                         </div>
                         <h2 className="section-title">Plantilla de Certificado</h2>
                     </div>
 
                     <div className="space-y-6">
-                        <p className="text-gray-400">
+                        <p className="text-slate-500 dark:text-gray-400 font-medium">
                             Design the HTML certificate that students will receive upon passing the course.
-                            Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>.
+                            Available variables: <code className="text-blue-600 dark:text-blue-400 font-black">{"{{student_name}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{course_title}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{date}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{score}}"}</code>.
                         </p>
 
                         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                             <div className="space-y-2">
-                                <label className="block text-sm font-bold text-gray-300">HTML Template</label>
+                                <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">HTML Template</label>
                                 <textarea
                                     value={certificateTemplate}
                                     onChange={(e) => setCertificateTemplate(e.target.value)}
-                                    className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none"
+                                    className="w-full h-[400px] bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl p-6 font-mono text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none shadow-inner"
                                     placeholder="Enter HTML code here..."
                                 />
                                 <button
                                     onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
-                                    className="text-xs text-blue-400 hover:text-blue-300 underline"
+                                    className="text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                                 >
                                     Reset to Default Template
                                 </button>
                             </div>
 
                             <div className="space-y-2">
-                                <label className="block text-sm font-bold text-gray-300">Live Preview</label>
-                                <div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
+                                <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Live Preview</label>
+                                <div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group border border-slate-200 shadow-sm">
                                     <iframe
                                         srcDoc={certificateTemplate
                                             .replace(/{{student_name}}/g, "Jane Doe")
@@ -377,9 +377,9 @@ export default function CourseSettingsPage() {
                     </div>
                 </section>
                 {/* Course Portability Section */}
-                <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
                     <div className="flex items-center gap-3 mb-6">
-                        <div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
+                        <div className="w-12 h-12 rounded-2xl bg-amber-600/10 flex items-center justify-center text-amber-600 dark:text-amber-400">
                             <Download size={24} />
                         </div>
                         <h2 className="section-title">Portabilidad del Curso</h2>
@@ -387,15 +387,15 @@ export default function CourseSettingsPage() {
 
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                         <div className="space-y-4">
-                            <h3 className="text-sm font-bold text-gray-300">Export Course</h3>
-                            <p className="text-xs text-gray-500">
+                            <h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Export Course</h3>
+                            <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
                                 Download the entire course structure, modules, and lessons as a JSON file.
                                 You can use this to backup or move content between organizations.
                             </p>
                             <button
                                 onClick={handleExport}
                                 disabled={exporting}
-                                className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
+                                className="flex items-center gap-2 px-6 py-3 bg-white dark:bg-white/5 hover:bg-slate-50 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50 shadow-sm text-slate-700 dark:text-white"
                             >
                                 <Download size={18} />
                                 {exporting ? "Exporting..." : "Download JSON"}
@@ -403,8 +403,8 @@ export default function CourseSettingsPage() {
                         </div>
 
                         <div className="space-y-4">
-                            <h3 className="text-sm font-bold text-gray-300">Import Course</h3>
-                            <p className="text-xs text-gray-500">
+                            <h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Import Course</h3>
+                            <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
                                 Upload a previously exported course JSON file. This will create a NEW course
                                 within the current organization based on that data.
                             </p>
diff --git a/web/studio/src/app/courses/[id]/students/page.tsx b/web/studio/src/app/courses/[id]/students/page.tsx
index 56fe643..12f4002 100644
--- a/web/studio/src/app/courses/[id]/students/page.tsx
+++ b/web/studio/src/app/courses/[id]/students/page.tsx
@@ -145,13 +145,13 @@ export default function CourseStudentsPage() {
                                 placeholder="Search by name or email..."
                                 value={searchTerm}
                                 onChange={(e) => setSearchTerm(e.target.value)}
-                                className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium"
+                                className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
                             />
                         </div>
                         <div className="flex items-center gap-2 w-full md:w-auto">
                             <Filter size={16} className="text-gray-400" />
                             <select
-                                className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white min-w-[150px]"
+                                className="bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-slate-900 dark:text-white min-w-[150px]"
                                 value={selectedCohortId}
                                 onChange={(e) => setSelectedCohortId(e.target.value)}
                             >
@@ -174,7 +174,7 @@ export default function CourseStudentsPage() {
                             <tbody className="divide-y divide-white/5">
                                 {filteredStudents.length === 0 ? (
                                     <tr>
-                                        <td colSpan={3} className="p-12 text-center text-gray-500 italic">No students found.</td>
+                                        <td colSpan={3} className="p-12 text-center text-slate-500 dark:text-gray-500 italic">No students found.</td>
                                     </tr>
                                 ) : filteredStudents.map(student => (
                                     <tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
diff --git a/web/studio/src/app/courses/[id]/team/page.tsx b/web/studio/src/app/courses/[id]/team/page.tsx
index 21cca40..9450380 100644
--- a/web/studio/src/app/courses/[id]/team/page.tsx
+++ b/web/studio/src/app/courses/[id]/team/page.tsx
@@ -139,7 +139,7 @@ export default function CourseTeamPage() {
                                                     </span>
                                                 )}
                                             </h3>
-                                            <div className="flex items-center gap-3 text-sm text-gray-400">
+                                            <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 font-medium">
                                                 <span className="flex items-center gap-1.5">
                                                     <Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
                                                 </span>
@@ -154,7 +154,7 @@ export default function CourseTeamPage() {
                                         {inst.role !== 'primary' && (
                                             <button
                                                 onClick={() => handleRemoveMember(inst.user_id)}
-                                                className="p-3 rounded-xl hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-all active:scale-95"
+                                                className="p-3 rounded-xl hover:bg-red-500/10 text-slate-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-all active:scale-95"
                                                 title="Remove member"
                                             >
                                                 <Trash2 className="w-5 h-5" />
@@ -171,12 +171,12 @@ export default function CourseTeamPage() {
             {/* Add Member Modal */}
             {
                 isAddModalOpen && (
-                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
-                        <div className="bg-[#1a1c22] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+                        <div className="bg-white dark:bg-[#1a1c22] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
                             <div className="p-8 border-b border-white/5 flex justify-between items-center">
                                 <div>
-                                    <h2 className="text-2xl font-bold">Add Team Member</h2>
-                                    <p className="text-sm text-gray-400 mt-1">Search for a user by name or email</p>
+                                    <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Add Team Member</h2>
+                                    <p className="text-sm text-slate-500 dark:text-gray-400 mt-1">Search for a user by name or email</p>
                                 </div>
                                 <button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
                                     <X className="w-6 h-6" />
@@ -191,7 +191,7 @@ export default function CourseTeamPage() {
                                         placeholder="Type name or email..."
                                         value={searchQuery}
                                         onChange={(e) => setSearchQuery(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium"
+                                        className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
                                     />
                                     {searching && (
                                         <div className="absolute right-4 top-1/2 -translate-y-1/2">
@@ -202,11 +202,11 @@ export default function CourseTeamPage() {
 
                                 <div className="space-y-4">
                                     <label className="block">
-                                        <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-3 block">Assign Role</span>
+                                        <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-3 block">Assign Role</span>
                                         <div className="grid grid-cols-2 gap-3">
                                             <button
                                                 onClick={() => setSelectedRole('instructor')}
-                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
+                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-600 dark:text-blue-400' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-500 hover:border-slate-200 dark:hover:border-white/20'}`}
                                             >
                                                 <ShieldCheck className="w-5 h-5" />
                                                 <div>
@@ -216,7 +216,7 @@ export default function CourseTeamPage() {
                                             </button>
                                             <button
                                                 onClick={() => setSelectedRole('assistant')}
-                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`}
+                                                className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-600 dark:text-blue-400' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-500 hover:border-slate-200 dark:hover:border-white/20'}`}
                                             >
                                                 <Shield className="w-5 h-5" />
                                                 <div>
@@ -234,15 +234,15 @@ export default function CourseTeamPage() {
                                             <button
                                                 key={u.id}
                                                 onClick={() => handleAddMember(u)}
-                                                className="w-full flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/30 hover:bg-white/10 transition-all group"
+                                                className="w-full flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 hover:border-blue-500/30 hover:bg-slate-100 dark:hover:bg-white/10 transition-all group"
                                             >
                                                 <div className="flex items-center gap-4 text-left">
                                                     <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
                                                         {u.full_name.charAt(0)}
                                                     </div>
                                                     <div>
-                                                        <div className="font-bold text-sm">{u.full_name}</div>
-                                                        <div className="text-xs text-gray-500">{u.email}</div>
+                                                        <div className="font-bold text-sm text-slate-900 dark:text-white">{u.full_name}</div>
+                                                        <div className="text-xs text-slate-500 dark:text-gray-500">{u.email}</div>
                                                     </div>
                                                 </div>
                                                 <div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all">
diff --git a/web/studio/src/app/globals.css b/web/studio/src/app/globals.css
index 7a3404f..b321db4 100644
--- a/web/studio/src/app/globals.css
+++ b/web/studio/src/app/globals.css
@@ -10,8 +10,8 @@
   --accent-primary: #3b82f6;
   --accent-secondary: #6366f1;
 
-  --glass-bg: rgba(255, 255, 255, 0.8);
-  --glass-border: rgba(0, 0, 0, 0.15);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(0, 0, 0, 0.08);
   --glass-blur: blur(16px);
 }
 
@@ -54,7 +54,11 @@ body {
 .btn-premium {
   @apply relative px-6 py-2.5 rounded-xl font-bold transition-all duration-300;
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
+}
+
+.dark .btn-premium {
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
 }
 
 .btn-premium:hover {
@@ -91,7 +95,7 @@ body {
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
@@ -99,10 +103,21 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.1);
   border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
 }
 
 ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+  background-clip: content-box;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2);
 }
\ No newline at end of file
diff --git a/web/studio/src/components/Analytics/DropoutRiskDashboard.tsx b/web/studio/src/components/Analytics/DropoutRiskDashboard.tsx
index 1393db7..7a1c7d4 100644
--- a/web/studio/src/components/Analytics/DropoutRiskDashboard.tsx
+++ b/web/studio/src/components/Analytics/DropoutRiskDashboard.tsx
@@ -56,20 +56,20 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
         <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
             <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                 <div>
-                    <h2 className="text-2xl font-black flex items-center gap-3">
-                        <AlertCircle className="text-red-500" />
+                    <h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
+                        <AlertCircle className="text-red-600 dark:text-red-500" />
                         Dropout Risk Analysis
                     </h2>
-                    <p className="text-sm text-gray-400 mt-1">AI-powered detection based on grades, activity, and engagement.</p>
+                    <p className="text-sm text-slate-500 dark:text-gray-400 mt-1 font-medium">AI-powered detection based on grades, activity, and engagement.</p>
                 </div>
                 <div className="relative">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
                     <input
                         type="text"
                         placeholder="Search student..."
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="bg-white/5 border border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 w-full md:w-64"
+                        className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 w-full md:w-64 text-slate-900 dark:text-white font-bold"
                     />
                 </div>
             </div>
@@ -77,17 +77,17 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
             {filteredRisks.length > 0 ? (
                 <div className="grid grid-cols-1 gap-4">
                     {filteredRisks.map((risk) => (
-                        <div key={risk.id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all group">
+                        <div key={risk.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all group shadow-sm">
                             <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                                 <div className="flex items-center gap-4">
                                     <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-xl font-bold">
                                         {risk.user_full_name?.[0] || <User />}
                                     </div>
                                     <div>
-                                        <h3 className="font-bold text-lg">{risk.user_full_name || "Unknown Student"}</h3>
-                                        <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
-                                            <span className="flex items-center gap-1"><Mail size={12} /> {risk.user_email || "N/A"}</span>
-                                            <span className="flex items-center gap-1"><Calendar size={12} /> Last active: {new Date(risk.last_calculated_at).toLocaleDateString()}</span>
+                                        <h3 className="font-bold text-lg text-slate-900 dark:text-white">{risk.user_full_name || "Unknown Student"}</h3>
+                                        <div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-500 mt-1 font-medium">
+                                            <span className="flex items-center gap-1"><Mail size={12} className="text-slate-400" /> {risk.user_email || "N/A"}</span>
+                                            <span className="flex items-center gap-1"><Calendar size={12} className="text-slate-400" /> Last active: {new Date(risk.last_calculated_at).toLocaleDateString()}</span>
                                         </div>
                                     </div>
                                 </div>
@@ -98,8 +98,8 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
                                     </div>
 
                                     <div className="flex flex-col items-end min-w-[100px]">
-                                        <div className="text-sm font-bold text-gray-400">Score: {Math.round(risk.score * 100)}%</div>
-                                        <div className="w-24 h-1 bg-white/5 rounded-full mt-1 overflow-hidden">
+                                        <div className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-400">Score: {Math.round(risk.score * 100)}%</div>
+                                        <div className="w-24 h-1.5 bg-slate-100 dark:bg-white/5 rounded-full mt-1.5 overflow-hidden">
                                             <div
                                                 className={`h-full transition-all duration-1000 ${risk.score > 0.8 ? 'bg-red-500' : risk.score > 0.5 ? 'bg-orange-500' : 'bg-green-500'}`}
                                                 style={{ width: `${risk.score * 100}%` }}
@@ -114,10 +114,10 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
                             </div>
 
                             {risk.reasons && risk.reasons.length > 0 && (
-                                <div className="mt-6 pt-6 border-t border-white/5 flex flex-wrap gap-3">
+                                <div className="mt-6 pt-6 border-t border-slate-100 dark:border-white/5 flex flex-wrap gap-2">
                                     {risk.reasons.map((reason, _idx) => (
-                                        <div key={_idx} className="bg-white/5 rounded-lg px-3 py-1.5 text-[10px] font-bold text-gray-400 flex items-center gap-2">
-                                            <Activity size={10} className="text-blue-500" />
+                                        <div key={_idx} className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-lg px-3 py-1.5 text-[10px] font-black text-slate-500 dark:text-gray-400 flex items-center gap-2 uppercase tracking-wide">
+                                            <Activity size={10} className="text-blue-600 dark:text-blue-500" />
                                             {reason.description}
                                         </div>
                                     ))}
@@ -127,10 +127,10 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
                     ))}
                 </div>
             ) : (
-                <div className="bg-white/5 border border-white/10 rounded-3xl p-20 text-center">
-                    <User size={48} className="text-gray-600 mx-auto mb-4" />
-                    <h3 className="text-xl font-bold text-gray-400">No students at risk</h3>
-                    <p className="text-sm text-gray-500 mt-2">Everyone seems to be doing great in this course!</p>
+                <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-20 text-center shadow-sm">
+                    <User size={48} className="text-slate-300 dark:text-gray-600 mx-auto mb-4" />
+                    <h3 className="text-xl font-black text-slate-800 dark:text-gray-300 uppercase tracking-widest">No students at risk</h3>
+                    <p className="text-sm text-slate-500 dark:text-gray-500 mt-2 font-medium">Everyone seems to be doing great in this course!</p>
                 </div>
             )}
         </div>
diff --git a/web/studio/src/components/CourseEditorLayout.tsx b/web/studio/src/components/CourseEditorLayout.tsx
index 05a8dc8..bc2912d 100644
--- a/web/studio/src/components/CourseEditorLayout.tsx
+++ b/web/studio/src/components/CourseEditorLayout.tsx
@@ -135,7 +135,7 @@ export default function CourseEditorLayout({
                     <div className="flex items-center gap-3">
                         <button
                             onClick={() => router.push("/")}
-                            className="p-1.5 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
+                            className="p-1.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
                             aria-label="Volver al inicio"
                         >
                             <ChevronLeft className="w-5 h-5" />
@@ -166,10 +166,10 @@ export default function CourseEditorLayout({
 
                 {/* ── TAB NAVIGATION ── */}
                 <nav
-                    className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-xl overflow-hidden mb-6"
+                    className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden mb-6 shadow-sm"
                     aria-label="Grupos del editor de cursos"
                 >
-                    <ul className="flex border-b border-black/8 dark:border-white/8">
+                    <ul className="flex border-b border-slate-200 dark:border-white/10">
                         {groups.map((group) => {
                             const Icon = group.icon;
                             const isGroupActive = group.key === activeGroup?.key;
@@ -207,7 +207,7 @@ export default function CourseEditorLayout({
                                             aria-current={isActive ? "page" : undefined}
                                             className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive
                                                 ? "bg-blue-600 text-white shadow-sm shadow-blue-500/30"
-                                                : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5"
+                                                : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-200/50 dark:hover:bg-white/5"
                                                 }`}
                                         >
                                             <Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />
diff --git a/web/studio/src/components/Courses/LiveSessions.tsx b/web/studio/src/components/Courses/LiveSessions.tsx
index 8669956..17d7b25 100644
--- a/web/studio/src/components/Courses/LiveSessions.tsx
+++ b/web/studio/src/components/Courses/LiveSessions.tsx
@@ -72,11 +72,11 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
         <div className="space-y-6">
             <div className="flex justify-between items-center">
                 <div>
-                    <h2 className="text-xl font-bold flex items-center gap-2">
-                        <Video className="text-blue-500" />
+                    <h2 className="text-xl font-black flex items-center gap-2 text-slate-900 dark:text-white">
+                        <Video className="text-blue-600 dark:text-blue-500" />
                         Virtual Classrooms
                     </h2>
-                    <p className="text-sm text-gray-500">Schedule and manage your live Jitsi sessions.</p>
+                    <p className="text-sm text-slate-500 dark:text-gray-400 font-medium">Schedule and manage your live Jitsi sessions.</p>
                 </div>
                 <button
                     onClick={() => setShowForm(true)}
@@ -87,34 +87,34 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
             </div>
 
             {showForm && (
-                <div className="bg-white/5 border border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4">
+                <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4 shadow-sm">
                     <form onSubmit={handleCreate} className="space-y-4">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div className="space-y-1">
-                                <label className="text-xs font-bold text-gray-400">SESSION TITLE</label>
+                                <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">SESSION TITLE</label>
                                 <input
                                     required
-                                    className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none"
+                                    className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
                                     placeholder="Weekly Sync Up"
                                     value={formData.title}
                                     onChange={e => setFormData({ ...formData, title: e.target.value })}
                                 />
                             </div>
                             <div className="space-y-1">
-                                <label className="text-xs font-bold text-gray-400">START DATE & TIME</label>
+                                <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">START DATE & TIME</label>
                                 <input
                                     required
                                     type="datetime-local"
-                                    className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none"
+                                    className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
                                     value={formData.start_at}
                                     onChange={e => setFormData({ ...formData, start_at: e.target.value })}
                                 />
                             </div>
                         </div>
                         <div className="space-y-1">
-                            <label className="text-xs font-bold text-gray-400">DESCRIPTION (OPTIONAL)</label>
+                            <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">DESCRIPTION (OPTIONAL)</label>
                             <textarea
-                                className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-20"
+                                className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-24 text-slate-900 dark:text-white font-medium resize-none shadow-inner"
                                 value={formData.description}
                                 onChange={e => setFormData({ ...formData, description: e.target.value })}
                             />
@@ -129,18 +129,18 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
 
             <div className="grid grid-cols-1 gap-4">
                 {meetings.map(m => (
-                    <div key={m.id} className="bg-white/5 border border-white/10 rounded-2xl p-5 hover:bg-white/[0.08] transition-all group">
+                    <div key={m.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-5 hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all group shadow-sm">
                         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                             <div className="flex items-start gap-4">
-                                <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
+                                <div className="w-12 h-12 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                                     <Video size={24} />
                                 </div>
                                 <div>
-                                    <h3 className="font-bold text-lg">{m.title}</h3>
-                                    <div className="flex flex-wrap items-center gap-4 text-xs text-gray-400 mt-1">
-                                        <span className="flex items-center gap-1"><Calendar size={14} /> {new Date(m.start_at).toLocaleString()}</span>
-                                        <span className="flex items-center gap-1"><Clock size={14} /> {m.duration_minutes} min</span>
-                                        <span className="capitalize px-2 py-0.5 bg-white/5 rounded-full border border-white/10">{m.provider}</span>
+                                    <h3 className="font-bold text-lg text-slate-900 dark:text-white">{m.title}</h3>
+                                    <div className="flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-gray-400 mt-1 font-medium">
+                                        <span className="flex items-center gap-1.5"><Calendar size={14} className="text-slate-400" /> {new Date(m.start_at).toLocaleString()}</span>
+                                        <span className="flex items-center gap-1.5"><Clock size={14} className="text-slate-400" /> {m.duration_minutes} min</span>
+                                        <span className="capitalize px-2 py-0.5 bg-slate-100 dark:bg-white/5 rounded-full border border-slate-200 dark:border-white/10 text-[10px] font-black uppercase tracking-widest">{m.provider}</span>
                                     </div>
                                 </div>
                             </div>
@@ -149,7 +149,7 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
                                     href={m.join_url}
                                     target="_blank"
                                     rel="noreferrer"
-                                    className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl text-sm font-bold transition-all"
+                                    className="flex items-center gap-2 bg-slate-100 dark:bg-white/10 hover:bg-blue-600 dark:hover:bg-white/20 hover:text-white px-4 py-2 rounded-xl text-sm font-bold transition-all shadow-sm text-slate-700 dark:text-white"
                                 >
                                     Join Room <ExternalLink size={14} />
                                 </a>
@@ -165,9 +165,9 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
                 ))}
 
                 {meetings.length === 0 && !loading && (
-                    <div className="p-12 text-center border-2 border-dashed border-white/5 rounded-3xl">
-                        <AlertCircle className="mx-auto text-gray-600 mb-2" />
-                        <p className="text-gray-500">No sessions scheduled for this course.</p>
+                    <div className="p-12 text-center border-2 border-dashed border-slate-200 dark:border-white/5 rounded-3xl bg-slate-50/50 dark:bg-transparent">
+                        <AlertCircle className="mx-auto text-slate-300 dark:text-gray-600 mb-2" size={32} />
+                        <p className="text-slate-500 dark:text-gray-500 font-medium">No sessions scheduled for this course.</p>
                     </div>
                 )}
             </div>