From e5373919c9f1763e82e7ceab3f32f1fe6f1ae1c6 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Thu, 26 Feb 2026 16:57:28 -0300
Subject: [PATCH] feat: Implement dark mode support by adjusting background and
 text colors across various pages and components.

---
 web/experience/src/app/auth/callback/page.tsx |   2 +-
 web/experience/src/app/auth/register/page.tsx |   2 +-
 .../courses/[id]/lessons/[lessonId]/page.tsx  |  56 ++++----
 web/experience/src/app/courses/[id]/page.tsx  | 134 +++++++++---------
 web/experience/src/app/globals.css            |  30 ++--
 web/experience/src/app/layout.tsx             |   2 +-
 web/experience/src/app/page.tsx               |  42 +++---
 web/experience/src/app/profile/[id]/page.tsx  |   4 +-
 web/experience/src/app/profile/page.tsx       |   2 +-
 web/experience/src/components/AITutor.tsx     |  30 ++--
 web/experience/src/components/AppHeader.tsx   |  26 ++--
 web/experience/src/components/AuthGuard.tsx   |   2 +-
 .../src/components/InteractiveTranscript.tsx  |  28 ++--
 .../src/components/StudentNotes.tsx           |  14 +-
 .../components/blocks/AudioResponsePlayer.tsx |  50 +++----
 .../components/blocks/CodeExercisePlayer.tsx  |  20 +--
 .../components/blocks/DescriptionPlayer.tsx   |   4 +-
 .../src/components/blocks/DocumentPlayer.tsx  |  12 +-
 .../blocks/FillInTheBlanksPlayer.tsx          |  12 +-
 .../src/components/blocks/HotspotPlayer.tsx   |  14 +-
 .../src/components/blocks/MatchingPlayer.tsx  |  26 ++--
 .../src/components/blocks/MediaPlayer.tsx     |  28 ++--
 .../src/components/blocks/MemoryPlayer.tsx    |  20 +--
 .../src/components/blocks/OrderingPlayer.tsx  |  22 +--
 .../src/components/blocks/QuizPlayer.tsx      |  14 +-
 .../components/blocks/ShortAnswerPlayer.tsx   |  14 +-
 web/experience/src/context/ThemeContext.tsx   |   4 +-
 web/studio/src/app/admin/layout.tsx           |   8 +-
 .../src/app/admin/organizations/page.tsx      |  32 ++---
 web/studio/src/app/auth/callback/page.tsx     |   6 +-
 .../courses/[id]/analytics/advanced/page.tsx  |  36 ++---
 .../src/app/courses/[id]/analytics/page.tsx   |  22 +--
 .../courses/[id]/analytics/reports/page.tsx   |  22 +--
 .../app/courses/[id]/announcements/page.tsx   |  16 +--
 .../src/app/courses/[id]/calendar/page.tsx    |   4 +-
 .../src/app/courses/[id]/files/page.tsx       |   2 +-
 .../src/app/courses/[id]/grades/page.tsx      |  14 +-
 .../src/app/courses/[id]/grading/page.tsx     |  18 +--
 .../courses/[id]/lessons/[lessonId]/page.tsx  |  20 +--
 web/studio/src/app/courses/[id]/page.tsx      |  38 ++---
 .../app/courses/[id]/peer-reviews/page.tsx    |   8 +-
 .../src/app/courses/[id]/rubrics/page.tsx     |   2 +-
 .../src/app/courses/[id]/sessions/page.tsx    |   6 +-
 .../src/app/courses/[id]/settings/page.tsx    |  10 +-
 .../src/app/courses/[id]/students/page.tsx    |  10 +-
 web/studio/src/app/globals.css                |  27 ++--
 web/studio/src/app/layout.tsx                 |   2 +-
 web/studio/src/app/library/assets/page.tsx    |  26 ++--
 web/studio/src/app/lti/deep-linking/page.tsx  |   2 +-
 web/studio/src/app/page.tsx                   |  34 ++---
 web/studio/src/app/settings/page.tsx          |   6 +-
 web/studio/src/app/settings/webhooks/page.tsx |  34 ++---
 web/studio/src/components/AuthGuard.tsx       |   2 +-
 .../src/components/CourseEditorLayout.tsx     |   8 +-
 web/studio/src/components/Navbar.tsx          |  20 +--
 web/studio/src/context/ThemeContext.tsx       |   4 +-
 56 files changed, 536 insertions(+), 517 deletions(-)

diff --git a/web/experience/src/app/auth/callback/page.tsx b/web/experience/src/app/auth/callback/page.tsx
index c9a21bb..880a838 100644
--- a/web/experience/src/app/auth/callback/page.tsx
+++ b/web/experience/src/app/auth/callback/page.tsx
@@ -45,7 +45,7 @@ function CallbackHandler() {
 
 export default function AuthCallbackPage() {
     return (
-        <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+        <div className="min-h-screen bg-transparent flex items-center justify-center p-4 transition-colors duration-300">
             <Suspense fallback={
                 <div className="flex flex-col items-center gap-4">
                     <Loader2 className="w-12 h-12 text-indigo-500 animate-spin" />
diff --git a/web/experience/src/app/auth/register/page.tsx b/web/experience/src/app/auth/register/page.tsx
index dcb718a..c7f9861 100644
--- a/web/experience/src/app/auth/register/page.tsx
+++ b/web/experience/src/app/auth/register/page.tsx
@@ -11,7 +11,7 @@ export default function RegisterPage() {
     }, [router]);
 
     return (
-        <div className="min-h-screen bg-[#050505] flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="animate-pulse text-gray-500 font-mono text-sm">Redirecting to login...</div>
         </div>
     );
diff --git a/web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx b/web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
index 1a9c471..7e51367 100644
--- a/web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+++ b/web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
@@ -67,7 +67,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
         fetchAll();
     }, [params.id, params.lessonId, user]);
 
-    if (loading) return <div className="p-20 text-center animate-pulse text-gray-500 font-bold uppercase tracking-widest">Cargando Experiencia...</div>;
+    if (loading) return <div className="p-20 text-center animate-pulse text-gray-600 dark:text-gray-500 font-bold uppercase tracking-widest">Cargando Experiencia...</div>;
     if (!lesson || !course) return <div className="p-20 text-center text-red-400">Contenido no encontrado.</div>;
 
     const allLessons = course.modules.flatMap(m => m.lessons);
@@ -180,7 +180,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
             case 'completed': return 'bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]';
             case 'in-progress': return 'bg-yellow-500 shadow-[0_0_10px_rgba(234,179,8,0.5)]';
             case 'repeatable': return 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]';
-            default: return 'bg-white/10';
+            default: return 'bg-black/10 dark:bg-white/10';
         }
     };
 
@@ -188,18 +188,18 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
         <div className="flex h-[calc(100vh-64px)] overflow-hidden">
             {/* Navigation Sidebar */}
             <aside
-                className={`glass border-r border-white/5 transition-all duration-500 bg-black/40 flex flex-col ${sidebarOpen ? 'w-80' : 'w-0 overflow-hidden border-none'}`}
+                className={`glass border-r border-black/5 dark:border-white/5 transition-all duration-500 bg-black/5 dark:bg-black/40 flex flex-col ${sidebarOpen ? 'w-80' : 'w-0 overflow-hidden border-none'}`}
             >
-                <div className="p-6 border-b border-white/5">
-                    <h2 className="text-xs font-black uppercase tracking-widest text-blue-500 mb-1">Contenido del Curso</h2>
-                    <p className="text-sm font-bold text-white truncate">{course.title}</p>
+                <div className="p-6 border-b border-black/5 dark:border-white/5">
+                    <h2 className="text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-500 mb-1">Contenido del Curso</h2>
+                    <p className="text-sm font-bold text-gray-900 dark:text-white truncate">{course.title}</p>
                 </div>
 
                 <div className="flex-1 overflow-y-auto py-4 px-3 space-y-6">
                     {course.modules.map((module) => (
                         <div key={module.id} className="space-y-2">
                             <div className="flex items-center justify-between px-3 mb-2">
-                                <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-500">{module.title}</h4>
+                                <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{module.title}</h4>
                                 <div className={`w-1.5 h-1.5 rounded-full ${getStatusColor(getModuleStatus(module))}`} />
                             </div>
                             <div className="space-y-1">
@@ -224,14 +224,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                 <div className="absolute top-4 left-4 z-10 flex gap-2">
                     <button
                         onClick={() => setSidebarOpen(!sidebarOpen)}
-                        className="p-3 rounded-xl glass border-white/10 text-gray-400 hover:text-white transition-all bg-black/40"
+                        className="p-3 rounded-xl glass border-black/10 dark:border-white/10 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all bg-black/5 dark:bg-black/40"
                         title="Alternar Barra Lateral"
                     >
                         <Menu size={20} />
                     </button>
                     <button
                         onClick={handleToggleBookmark}
-                        className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${isBookmarked ? 'text-yellow-400' : 'text-gray-400 hover:text-white'}`}
+                        className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${isBookmarked ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
                         title={isBookmarked ? "Quitar Marcador" : "Guardar Marcador"}
                     >
                         <Bookmark size={20} fill={isBookmarked ? "currentColor" : "none"} />
@@ -242,7 +242,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                 setTranscriptOpen(!transcriptOpen);
                                 if (!transcriptOpen) setNotesOpen(false);
                             }}
-                            className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${transcriptOpen ? 'text-blue-400' : 'text-gray-400 hover:text-white'}`}
+                            className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${transcriptOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
                             title="Alternar Transcripción"
                         >
                             <ListMusic size={20} />
@@ -253,7 +253,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                             setNotesOpen(!notesOpen);
                             if (!notesOpen) setTranscriptOpen(false);
                         }}
-                        className={`p-3 rounded-xl glass border-white/10 transition-all bg-black/40 ${notesOpen ? 'text-indigo-400' : 'text-gray-400 hover:text-white'}`}
+                        className={`p-3 rounded-xl glass border-black/10 dark:border-white/10 transition-all bg-black/5 dark:bg-black/40 ${notesOpen ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
                         title="Alternar Notas"
                     >
                         <StickyNote size={20} />
@@ -265,7 +265,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                         <div className="max-w-4xl mx-auto space-y-20 pb-40">
                             <div className="space-y-4">
                                 <div className="flex items-center gap-3">
-                                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-400">
+                                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400">
                                         <span>{lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}</span>
                                     </div>
                                     <div className={`px-2 py-0.5 rounded-full text-[8px] font-black uppercase tracking-widest text-white ${getStatusColor(getLessonStatus(lesson))}`}>
@@ -275,7 +275,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                         {getLessonStatus(lesson) === 'not-started' && "No Iniciada"}
                                     </div>
                                 </div>
-                                <h1 className="text-4xl font-black tracking-tighter text-white">{lesson.title}</h1>
+                                <h1 className="text-4xl font-black tracking-tighter text-gray-900 dark:text-white">{lesson.title}</h1>
                             </div>
 
                             {lesson.summary && (
@@ -448,7 +448,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                                             />
                                                         );
                                                     default:
-                                                        return <div className="p-4 bg-white/5 border border-white/10 rounded-xl text-xs font-bold text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
+                                                        return <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
                                                 }
                                             };
 
@@ -460,14 +460,14 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                         })}
                                     </div>
                                 ) : (
-                                    <div className="py-20 text-center glass-card border-dashed border-white/10">
-                                        <p className="text-gray-500 font-bold uppercase tracking-widest">Actualmente, esta lección no tiene contenido.</p>
+                                    <div className="py-20 text-center glass-card border-dashed border-black/10 dark:border-white/10">
+                                        <p className="text-gray-600 dark:text-gray-500 font-bold uppercase tracking-widest">Actualmente, esta lección no tiene contenido.</p>
                                     </div>
                                 )
                             )}
 
                             {lesson.is_graded && (
-                                <div className="pt-20 border-t border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
+                                <div className="pt-20 border-t border-black/5 dark:border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
                                     {userGrade && lesson.max_attempts && userGrade.attempts_count >= lesson.max_attempts ? null : (
                                         <>
                                             <button
@@ -492,7 +492,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                                 </span>
                                             </button>
                                             {lesson.max_attempts && (
-                                                <p className="mt-4 text-[10px] text-gray-500 font-bold uppercase tracking-widest">
+                                                <p className="mt-4 text-[10px] text-gray-500 dark:text-gray-400 font-bold uppercase tracking-widest">
                                                     Intento {userGrade ? userGrade.attempts_count : 0} de {lesson.max_attempts} usado
                                                 </p>
                                             )}
@@ -505,13 +505,13 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
 
                     {/* Right Side Panels */}
                     {((hasTranscription && transcriptOpen) || notesOpen) && (
-                        <aside className="w-[400px] border-l border-white/5 bg-black/20 flex flex-col animate-in slide-in-from-right duration-500">
+                        <aside className="w-[400px] border-l border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20 flex flex-col animate-in slide-in-from-right duration-500">
                             {/* Panel Tabs */}
-                            <div className="flex border-b border-white/5">
+                            <div className="flex border-b border-black/5 dark:border-white/5">
                                 {hasTranscription && (
                                     <button
                                         onClick={() => setTranscriptOpen(true)}
-                                        className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${transcriptOpen ? 'text-blue-400 bg-white/5' : 'text-gray-500 hover:text-gray-300'}`}
+                                        className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${transcriptOpen ? 'text-blue-600 dark:text-blue-400 bg-black/5 dark:bg-white/5' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'}`}
                                     >
                                         Transcripción
                                     </button>
@@ -521,7 +521,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                         setNotesOpen(true);
                                         if (hasTranscription) setTranscriptOpen(false);
                                     }}
-                                    className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${notesOpen && (!transcriptOpen || !hasTranscription) ? 'text-indigo-400 bg-white/5' : 'text-gray-500 hover:text-gray-300'}`}
+                                    className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest transition-all ${notesOpen && (!transcriptOpen || !hasTranscription) ? 'text-indigo-600 dark:text-indigo-400 bg-black/5 dark:bg-white/5' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'}`}
                                 >
                                     Notas
                                 </button>
@@ -545,15 +545,15 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                 </div>
 
                 {/* Footer Controls */}
-                <footer className="h-20 glass border-t border-white/5 px-6 flex items-center justify-between bg-black/60 backdrop-blur-3xl shrink-0">
+                <footer className="h-20 glass border-t border-black/5 dark:border-white/5 px-6 flex items-center justify-between bg-white/60 dark:bg-black/60 backdrop-blur-3xl shrink-0">
                     {prevLesson ? (
                         <Link href={`/courses/${params.id}/lessons/${prevLesson.id}`} className="group flex items-center gap-3">
-                            <div className="w-10 h-10 rounded-xl glass border-white/10 flex items-center justify-center group-hover:bg-white/5 transition-all text-gray-400 group-hover:text-white">
+                            <div className="w-10 h-10 rounded-xl glass border-black/10 dark:border-white/10 flex items-center justify-center group-hover:bg-black/5 dark:group-hover:bg-white/5 transition-all text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
                                 <ChevronLeft size={20} />
                             </div>
                             <div className="hidden sm:block">
-                                <p className="text-[10px] font-black uppercase tracking-widest text-gray-500">Anterior</p>
-                                <p className="text-xs font-bold text-gray-300 group-hover:text-white truncate max-w-[120px]">{prevLesson.title}</p>
+                                <p className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">Anterior</p>
+                                <p className="text-xs font-bold text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white truncate max-w-[120px]">{prevLesson.title}</p>
                             </div>
                         </Link>
                     ) : <div />}
@@ -561,10 +561,10 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                     <div className="hidden lg:flex items-center gap-2">
                         <div className="flex gap-1">
                             {allLessons.map((l, i) => (
-                                <div key={l.id} className={`w-8 h-1 rounded-full ${i <= currentIndex ? 'bg-blue-500' : 'bg-white/10'}`} />
+                                <div key={l.id} className={`w-8 h-1 rounded-full ${i <= currentIndex ? 'bg-blue-600 dark:bg-blue-500' : 'bg-black/10 dark:bg-white/10'}`} />
                             ))}
                         </div>
-                        <span className="text-[10px] font-black uppercase tracking-widest text-gray-500 ml-4">
+                        <span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500 ml-4">
                             {currentIndex + 1} OF {allLessons.length} COMPLETADO
                         </span>
                     </div>
diff --git a/web/experience/src/app/courses/[id]/page.tsx b/web/experience/src/app/courses/[id]/page.tsx
index 120adfd..a6e67ee 100644
--- a/web/experience/src/app/courses/[id]/page.tsx
+++ b/web/experience/src/app/courses/[id]/page.tsx
@@ -96,14 +96,14 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                 <div className="h-6 w-1/3 bg-white/5 rounded-xl mb-12"></div>
                 <div className="space-y-6">
                     {[1, 2, 3].map(i => (
-                        <div key={i} className="h-32 glass-card bg-white/5 border-white/5"></div>
+                        <div key={i} className="h-32 glass-card bg-black/5 dark:bg-white/5 border-black/5 dark:border-white/5 animate-pulse"></div>
                     ))}
                 </div>
             </div>
         );
     }
 
-    if (!courseData) return <div className="text-center py-20 text-gray-500">Curso no encontrado.</div>;
+    if (!courseData) return <div className="text-center py-20 text-gray-600 dark:text-gray-500">Curso no encontrado.</div>;
 
     const isLessonLocked = (lessonId: string) => {
         if (!isEnrolled) return false;
@@ -124,7 +124,7 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
         }
         const grade = userGrades.find((g: UserGrade) => g.lesson_id === lessonId);
         if (!grade) {
-            return <Circle size={18} className="text-white/20" />;
+            return <Circle size={18} className="text-black/10 dark:text-white/20" />;
         }
 
         if (isGraded) {
@@ -141,19 +141,19 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
             }
         }
 
-        return <CheckCircle2 size={18} className="text-white/40" />;
+        return <CheckCircle2 size={18} className="text-black/20 dark:text-white/40" />;
     };
 
     return (
         <div className="max-w-4xl mx-auto px-6 py-20">
             <div className="mb-16">
-                <div className="flex items-center gap-2 mb-6 text-blue-500 font-bold text-xs uppercase tracking-widest">
-                    <Link href="/" className="hover:text-white transition-colors">Catálogo</Link>
+                <div className="flex items-center gap-2 mb-6 text-blue-600 dark:text-blue-500 font-bold text-xs uppercase tracking-widest">
+                    <Link href="/" className="hover:text-gray-900 dark:hover:text-white transition-colors">Catálogo</Link>
                     <ChevronRight size={14} className="text-gray-600" />
                     <span>Detalles del Curso</span>
                 </div>
-                <h1 className="text-5xl font-black tracking-tighter mb-6">{courseData.title}</h1>
-                <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-10">
+                <h1 className="text-5xl font-black tracking-tighter mb-6 text-gray-900 dark:text-white">{courseData.title}</h1>
+                <p className="text-gray-600 dark:text-gray-400 text-lg leading-relaxed max-w-2xl mb-10">
                     {courseData.description || "Domina los principios básicos y las técnicas avanzadas en este plan de estudios estructurado. Cada módulo está diseñado para proporcionar conocimientos prácticos y experiencia práctica."}
                 </p>
 
@@ -167,11 +167,11 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                     </div>
 
                     {courseData.pacing_mode === 'instructor_led' && (courseData.start_date || courseData.end_date) && (
-                        <div className="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase tracking-widest">
+                        <div className="flex items-center gap-4 text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">
                             <Calendar size={14} />
                             <span>
                                 {courseData.start_date ? new Date(courseData.start_date).toLocaleDateString() : 'Por Determinar'}
-                                <span className="mx-2 text-gray-700">→</span>
+                                <span className="mx-2 text-gray-300 dark:text-gray-700">→</span>
                                 {courseData.end_date ? new Date(courseData.end_date).toLocaleDateString() : 'Por Determinar'}
                             </span>
                         </div>
@@ -183,13 +183,13 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                         <span className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 mb-4 block">Equipo docente</span>
                         <div className="flex flex-wrap gap-6">
                             {instructors.map((inst) => (
-                                <div key={inst.id} className="flex items-center gap-3 glass border-white/5 px-4 py-2 rounded-2xl hover:bg-white/5 transition-all">
-                                    <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center border border-blue-500/30 text-blue-400 font-bold text-xs">
+                                <div key={inst.id} className="flex items-center gap-3 glass border-black/5 dark:border-white/5 px-4 py-2 rounded-2xl hover:bg-black/5 dark:hover:bg-white/5 transition-all">
+                                    <div className="w-8 h-8 rounded-full bg-blue-500/10 dark:bg-blue-500/20 flex items-center justify-center border border-blue-500/20 dark:border-blue-500/30 text-blue-600 dark:text-blue-400 font-bold text-xs">
                                         {inst.full_name?.charAt(0) || inst.email?.charAt(0)}
                                     </div>
                                     <div>
-                                        <div className="text-xs font-bold text-gray-200">{inst.full_name}</div>
-                                        <div className="text-[8px] font-black uppercase tracking-widest text-blue-500/60">{inst.role === 'primary' ? 'Instructor principal' : inst.role}</div>
+                                        <div className="text-xs font-bold text-gray-700 dark:text-gray-200">{inst.full_name}</div>
+                                        <div className="text-[8px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-500/60">{inst.role === 'primary' ? 'Instructor principal' : inst.role}</div>
                                     </div>
                                 </div>
                             ))}
@@ -200,13 +200,13 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                 <div className="flex items-center justify-between">
                     <div className="flex items-center gap-8">
                         <div className="flex flex-col">
-                            <span className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1">Módulos</span>
-                            <span className="text-xl font-bold text-white">{courseData.modules.length}</span>
+                            <span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-1">Módulos</span>
+                            <span className="text-xl font-bold text-gray-900 dark:text-white">{courseData.modules.length}</span>
                         </div>
-                        <div className="w-px h-8 bg-white/10" />
+                        <div className="w-px h-8 bg-black/10 dark:bg-white/10" />
                         <div className="flex flex-col">
-                            <span className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-1">Lecciones Totales</span>
-                            <span className="text-xl font-bold text-white">
+                            <span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-1">Lecciones Totales</span>
+                            <span className="text-xl font-bold text-gray-900 dark:text-white">
                                 {courseData.modules.reduce((acc, m) => acc + m.lessons.length, 0)}
                             </span>
                         </div>
@@ -248,45 +248,45 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
             {(loadingAI || recommendations.length > 0) && (
                 <div className="mb-20">
                     <div className="flex items-center gap-3 mb-8">
-                        <div className="w-10 h-10 rounded-xl glass border-purple-500/20 bg-purple-500/10 flex items-center justify-center">
-                            <Sparkles size={18} className="text-purple-400" />
+                        <div className="w-10 h-10 rounded-xl glass border-purple-500/10 dark:border-purple-500/20 bg-purple-500/5 dark:bg-purple-500/10 flex items-center justify-center">
+                            <Sparkles size={18} className="text-purple-600 dark:text-purple-400" />
                         </div>
                         <div>
-                            <h2 className="text-xl font-bold text-white tracking-tight">Tu Ruta de Aprendizaje IA</h2>
-                            <p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">Sugerencias personalizadas basadas en tu rendimiento</p>
+                            <h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">Tu Ruta de Aprendizaje IA</h2>
+                            <p className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">Sugerencias personalizadas basadas en tu rendimiento</p>
                         </div>
                     </div>
 
                     <div className="grid gap-4">
                         {loadingAI ? (
-                            <div className="glass-card border-white/5 bg-white/5 animate-pulse p-8">
-                                <div className="h-4 w-1/3 bg-white/10 rounded mb-4"></div>
-                                <div className="h-3 w-2/3 bg-white/10 rounded"></div>
+                            <div className="glass-card border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5 animate-pulse p-8">
+                                <div className="h-4 w-1/3 bg-black/10 dark:bg-white/10 rounded mb-4"></div>
+                                <div className="h-3 w-2/3 bg-black/10 dark:bg-white/10 rounded"></div>
                             </div>
                         ) : (
                             recommendations.map((rec: Recommendation, i: number) => (
-                                <div key={i} className="glass-card border-white/5 hover:border-purple-500/30 transition-all p-6 group">
+                                <div key={i} className="glass-card border-black/5 dark:border-white/5 hover:border-purple-600/30 dark:hover:border-purple-500/30 transition-all p-6 group">
                                     <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                                         <div className="space-y-3">
                                             <div className="flex items-center gap-3">
-                                                <div className={`px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest ${rec.priority === 'high' ? 'bg-red-500/10 text-red-400 border border-red-500/20' :
-                                                    rec.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20' :
-                                                        'bg-green-500/10 text-green-400 border border-green-500/20'
+                                                <div className={`px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest ${rec.priority === 'high' ? 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20' :
+                                                    rec.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border border-yellow-500/20' :
+                                                        'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20'
                                                     }`}>
                                                     Prioridad {rec.priority}
                                                 </div>
-                                                {rec.priority === 'high' && <AlertTriangle size={12} className="text-red-400" />}
+                                                {rec.priority === 'high' && <AlertTriangle size={12} className="text-red-600 dark:text-red-400" />}
                                             </div>
-                                            <h3 className="text-lg font-bold text-white">{rec.title}</h3>
-                                            <p className="text-sm text-gray-400 leading-relaxed max-w-2xl">{rec.description}</p>
-                                            <div className="bg-white/5 rounded-lg p-3 inline-block">
-                                                <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1 italic">¿Por qué?</p>
-                                                <p className="text-xs text-gray-300 font-medium">{rec.reason}</p>
+                                            <h3 className="text-lg font-bold text-gray-900 dark:text-white">{rec.title}</h3>
+                                            <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-2xl">{rec.description}</p>
+                                            <div className="bg-black/5 dark:bg-white/5 rounded-lg p-3 inline-block">
+                                                <p className="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-1 italic">¿Por qué?</p>
+                                                <p className="text-xs text-gray-700 dark:text-gray-300 font-medium">{rec.reason}</p>
                                             </div>
                                         </div>
                                         {rec.lesson_id && (
                                             <Link href={`/courses/${params.id}/lessons/${rec.lesson_id}`}>
-                                                <button className="whitespace-nowrap px-6 py-3 rounded-xl bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 text-purple-400 font-bold text-[10px] uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">
+                                                <button className="whitespace-nowrap px-6 py-3 rounded-xl bg-purple-600/10 dark:bg-purple-500/10 hover:bg-purple-600/20 dark:hover:bg-purple-500/20 border border-purple-600/20 dark:border-purple-500/30 text-purple-600 dark:text-purple-400 font-bold text-[10px] uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">
                                                     Ir a la Lección <ArrowRight size={14} />
                                                 </button>
                                             </Link>
@@ -303,25 +303,25 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
             {meetings.length > 0 && (
                 <div className="mb-20">
                     <div className="flex items-center gap-3 mb-8">
-                        <div className="w-10 h-10 rounded-xl glass border-blue-500/20 bg-blue-500/10 flex items-center justify-center">
-                            <Video size={18} className="text-blue-400" />
+                        <div className="w-10 h-10 rounded-xl glass border-blue-500/10 dark:border-blue-500/20 bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center">
+                            <Video size={18} className="text-blue-600 dark:text-blue-400" />
                         </div>
                         <div>
-                            <h2 className="text-xl font-bold text-white tracking-tight">Sesiones en Vivo</h2>
-                            <p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">Únete a las clases sincrónicas programadas</p>
+                            <h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">Sesiones en Vivo</h2>
+                            <p className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">Únete a las clases sincrónicas programadas</p>
                         </div>
                     </div>
 
                     <div className="grid gap-3">
                         {meetings.map((m) => (
-                            <div key={m.id} className="glass-card border-white/5 hover:border-blue-500/30 transition-all p-5 flex items-center justify-between">
+                            <div key={m.id} className="glass-card border-black/5 dark:border-white/5 hover:border-blue-600/30 dark:hover:border-blue-500/30 transition-all p-5 flex items-center justify-between">
                                 <div className="flex items-center gap-4">
-                                    <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-400">
+                                    <div className="w-10 h-10 rounded-lg bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                                         <Calendar size={18} />
                                     </div>
                                     <div>
-                                        <h3 className="font-bold text-sm">{m.title}</h3>
-                                        <p className="text-[10px] text-gray-500 uppercase mt-1">
+                                        <h3 className="font-bold text-sm text-gray-900 dark:text-gray-100">{m.title}</h3>
+                                        <p className="text-[10px] text-gray-500 dark:text-gray-400 uppercase mt-1">
                                             {new Date(m.start_at).toLocaleString()} • {m.duration_minutes} min
                                         </p>
                                     </div>
@@ -349,10 +349,10 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                 {courseData.modules.map((module: Module, idx: number) => (
                     <div key={module.id} className="relative">
                         <div className="flex items-center gap-4 mb-6">
-                            <div className="w-10 h-10 rounded-xl glass border-blue-500/20 bg-blue-500/10 flex items-center justify-center">
-                                <span className="text-blue-400 font-black text-xs">{idx + 1}</span>
+                            <div className="w-10 h-10 rounded-xl glass border-blue-500/10 dark:border-blue-500/20 bg-blue-500/5 dark:bg-blue-500/10 flex items-center justify-center">
+                                <span className="text-blue-600 dark:text-blue-400 font-black text-xs">{idx + 1}</span>
                             </div>
-                            <h2 className="text-xl font-bold text-white tracking-tight">{module.title}</h2>
+                            <h2 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">{module.title}</h2>
                         </div>
 
                         <div className="grid gap-3 pl-14">
@@ -361,42 +361,42 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                                 const isPreviewable = lesson.is_previewable;
                                 return (isEnrolled || isPreviewable) ? (
                                     locked ? (
-                                        <div key={lesson.id} className="glass-card !p-4 border-white/5 opacity-60 cursor-not-allowed">
+                                        <div key={lesson.id} className="glass-card !p-4 border-black/5 dark:border-white/5 opacity-60 cursor-not-allowed">
                                             <div className="flex items-center justify-between">
                                                 <div className="flex items-center gap-4">
-                                                    <div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center">
-                                                        <Lock size={18} className="text-gray-600" />
+                                                    <div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center">
+                                                        <Lock size={18} className="text-gray-400 dark:text-gray-600" />
                                                     </div>
                                                     <div>
-                                                        <h3 className="text-sm font-bold text-gray-400">{lesson.title}</h3>
-                                                        <span className="text-[10px] font-bold uppercase tracking-widest text-gray-600">Bloqueado por Prerrequisitos</span>
+                                                        <h3 className="text-sm font-bold text-gray-500 dark:text-gray-400">{lesson.title}</h3>
+                                                        <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400 dark:text-gray-600">Bloqueado por Prerrequisitos</span>
                                                     </div>
                                                 </div>
                                                 <div className="flex items-center gap-6">
-                                                    <Lock size={18} className="text-gray-600" />
+                                                    <Lock size={18} className="text-gray-400 dark:text-gray-600" />
                                                 </div>
                                             </div>
                                         </div>
                                     ) : (
                                         <Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`}>
-                                            <div className="glass-card !p-4 group hover:bg-white/10 border-white/5 active:scale-[0.99] transition-all">
+                                            <div className="glass-card !p-4 group hover:bg-black/5 dark:hover:bg-white/10 border-black/5 dark:border-white/5 active:scale-[0.99] transition-all">
                                                 <div className="flex items-center justify-between">
                                                     <div className="flex items-center gap-4">
-                                                        <div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
+                                                        <div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center group-hover:bg-blue-600/10 dark:group-hover:bg-blue-500/20 transition-colors">
                                                             {lesson.content_type === 'video' ? (
-                                                                <PlayCircle size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-400' : 'text-gray-400'} group-hover:text-blue-400`} />
+                                                                <PlayCircle size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'} group-hover:text-blue-600 dark:group-hover:text-blue-400`} />
                                                             ) : (
-                                                                <BookOpen size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-400' : 'text-gray-400'} group-hover:text-blue-400`} />
+                                                                <BookOpen size={18} className={`${isPreviewable && !isEnrolled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'} group-hover:text-blue-600 dark:group-hover:text-blue-400`} />
                                                             )}
                                                         </div>
                                                         <div>
                                                             <div className="flex items-center gap-2">
-                                                                <h3 className="text-sm font-bold text-gray-200 group-hover:text-white transition-colors">{lesson.title}</h3>
+                                                                <h3 className="text-sm font-bold text-gray-700 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">{lesson.title}</h3>
                                                                 {isPreviewable && !isEnrolled && (
-                                                                    <span className="text-[8px] font-black uppercase px-1.5 py-0.5 bg-green-500/10 text-green-400 border border-green-500/20 rounded">Vista previa</span>
+                                                                    <span className="text-[8px] font-black uppercase px-1.5 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 rounded">Vista previa</span>
                                                                 )}
                                                             </div>
-                                                            <span className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                                                            <span className="text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
                                                                 {lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}
                                                             </span>
                                                         </div>
@@ -420,20 +420,20 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                                         </Link>
                                     )
                                 ) : (
-                                    <div key={lesson.id} onClick={handleEnrollOrBuy} className="glass-card !p-4 group border-white/5 opacity-60 cursor-pointer hover:bg-white/5 transition-all">
+                                    <div key={lesson.id} onClick={handleEnrollOrBuy} className="glass-card !p-4 group border-black/5 dark:border-white/5 opacity-60 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-all">
                                         <div className="flex items-center justify-between">
                                             <div className="flex items-center gap-4">
-                                                <div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center">
-                                                    <Clock size={18} className="text-gray-600" />
+                                                <div className="w-10 h-10 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center">
+                                                    <Clock size={18} className="text-gray-400 dark:text-gray-600" />
                                                 </div>
                                                 <div>
-                                                    <h3 className="text-sm font-bold text-gray-500">{lesson.title}</h3>
-                                                    <span className="text-[10px] font-bold uppercase tracking-widest text-gray-600 flex items-center gap-1">
+                                                    <h3 className="text-sm font-bold text-gray-500 dark:text-gray-400">{lesson.title}</h3>
+                                                    <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400 dark:text-gray-600 flex items-center gap-1">
                                                         Contenido Protegido
                                                     </span>
                                                 </div>
                                             </div>
-                                            <div className="flex items-center gap-2 text-gray-600 font-bold text-[10px] uppercase tracking-widest">
+                                            <div className="flex items-center gap-2 text-gray-400 dark:text-gray-600 font-bold text-[10px] uppercase tracking-widest">
                                                 <span>Bloqueado</span>
                                             </div>
                                         </div>
diff --git a/web/experience/src/app/globals.css b/web/experience/src/app/globals.css
index 100336c..6e364c4 100644
--- a/web/experience/src/app/globals.css
+++ b/web/experience/src/app/globals.css
@@ -3,9 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 10, 10, 20;
-  --background-end-rgb: 0, 0, 0;
+  --background: 249, 250, 251;
+  --foreground: 17, 24, 39;
+  /* gray-900 */
 
   /* Branding Defaults */
   --primary-color: #3b82f6;
@@ -13,15 +13,27 @@
 
   --accent-primary: var(--primary-color);
   --accent-secondary: var(--secondary-color);
-  --glass-bg: rgba(255, 255, 255, 0.05);
-  /* Increased slightly for contrast */
-  --glass-border: rgba(255, 255, 255, 0.1);
+
+  --glass-bg: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(0, 0, 0, 0.1);
   --glass-blur: blur(16px);
+
+  --body-bg: radial-gradient(circle at top left, #f3f4f6, #f9fafb);
+}
+
+.dark {
+  --background: 5, 5, 5;
+  --foreground: 229, 231, 235;
+
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.1);
+
+  --body-bg: radial-gradient(circle at top left, #1a1a2e, #000000);
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: radial-gradient(circle at top left, #1a1a2e, #000000);
+  color: rgb(var(--foreground));
+  background: var(--body-bg);
   background-attachment: fixed;
   min-height: 100vh;
 }
@@ -77,7 +89,7 @@ body {
 }
 
 .sidebar-link-inactive {
-  @apply text-gray-400 hover:text-white hover:bg-white/5;
+  @apply text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5;
 }
 
 /* Custom Scrollbar */
diff --git a/web/experience/src/app/layout.tsx b/web/experience/src/app/layout.tsx
index f69b17a..961ae53 100644
--- a/web/experience/src/app/layout.tsx
+++ b/web/experience/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-white dark:bg-[#050505] text-gray-900 dark:text-[#e5e5e5] min-h-screen flex flex-col transition-colors duration-300`}>
+      <body className={`${inter.className} min-h-screen flex flex-col transition-colors duration-300`}>
         <ThemeProvider>
           <BrandingProvider>
             <AuthProvider>
diff --git a/web/experience/src/app/page.tsx b/web/experience/src/app/page.tsx
index 2dfd927..c7f3c25 100644
--- a/web/experience/src/app/page.tsx
+++ b/web/experience/src/app/page.tsx
@@ -103,15 +103,15 @@ export default function CatalogPage() {
             <Star size={14} className="fill-blue-500" />
             <span>Currículo Premier</span>
           </div>
-          <h1 className="text-4xl md:text-6xl font-black tracking-tighter leading-tight md:leading-none">
-            Explorar <span className="block sm:inline text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-600">Cursos</span>
+          <h1 className="text-4xl md:text-6xl font-black tracking-tighter leading-tight md:leading-none text-gray-900 dark:text-white">
+            Explorar <span className="block sm:inline text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-indigo-600">Cursos</span>
           </h1>
-          <p className="text-gray-500 font-medium max-w-xl text-base md:text-lg mx-auto md:mx-0">
+          <p className="text-gray-600 dark:text-gray-500 font-medium max-w-xl text-base md:text-lg mx-auto md:mx-0">
             Domina las habilidades del futuro con nuestro contenido educativo de alta fidelidad.
           </p>
         </div>
         {!user && (
-          <Link href="/auth/register" className="btn-premium !bg-white !text-black shadow-none !px-8 w-full sm:w-auto">
+          <Link href="/auth/register" className="btn-premium !bg-blue-600 dark:!bg-white !text-white dark:!text-black shadow-none !px-8 w-full sm:w-auto">
             Comienza Gratis
           </Link>
         )}
@@ -120,21 +120,21 @@ export default function CatalogPage() {
       {user && gamification && (
         <div className="mb-16 grid grid-cols-1 lg:grid-cols-3 gap-8 animate-in fade-in slide-in-from-top-6 duration-700">
           <div className="lg:col-span-2 space-y-8">
-            <div className="glass-card p-10 bg-gradient-to-br from-blue-600/20 via-indigo-700/10 to-transparent border-blue-500/20 rounded-3xl relative overflow-hidden group">
+            <div className="glass-card p-10 bg-gradient-to-br from-blue-600/10 dark:from-blue-600/20 via-indigo-700/5 dark:via-indigo-700/10 to-transparent border-blue-500/10 dark:border-blue-500/20 rounded-3xl relative overflow-hidden group">
               <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-10">
                 <div className="flex-shrink-0 relative">
                   <div className="w-24 h-24 rounded-3xl bg-blue-600 flex items-center justify-center shadow-2xl shadow-blue-500/40 rotate-3 group-hover:rotate-0 transition-transform duration-500">
                     <Zap className="text-white fill-white/20" size={48} />
                   </div>
-                  <div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white text-black flex items-center justify-center font-black text-xs border-4 border-[#050505]">
+                  <div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-white dark:bg-black text-black dark:text-gray-400 flex items-center justify-center font-black text-xs border-4 border-gray-50 dark:border-[#050505]">
                     {gamification.level}
                   </div>
                 </div>
 
                 <div className="flex-1 space-y-4">
                   <div>
-                    <div className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-1">Posición Actual</div>
-                    <h2 className="text-3xl font-black text-white">Nivel {gamification.level} Pionero</h2>
+                    <div className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400 mb-1">Posición Actual</div>
+                    <h2 className="text-3xl font-black text-gray-900 dark:text-white">Nivel {gamification.level} Pionero</h2>
                   </div>
 
                   <div className="space-y-2">
@@ -146,9 +146,9 @@ export default function CatalogPage() {
                         {Math.floor(((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100)}% para el Nivel {gamification.level + 1}
                       </div>
                     </div>
-                    <div className="h-2 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
+                    <div className="h-2 w-full bg-black/5 dark:bg-white/5 rounded-full overflow-hidden border border-black/5 dark:border-white/5">
                       <div
-                        className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-1000"
+                        className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 shadow-[0_0_20px_rgba(59,130,246,0.3)] dark:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-1000"
                         style={{ width: `${Math.min(100, Math.max(0, ((gamification.points - Math.pow(gamification.level - 1, 2) * 100) / (Math.pow(gamification.level, 2) * 100 - Math.pow(gamification.level - 1, 2) * 100)) * 100))}%` }}
                       ></div>
                     </div>
@@ -160,7 +160,7 @@ export default function CatalogPage() {
               <div className="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 blur-[120px] rounded-full pointer-events-none group-hover:bg-blue-500/20 transition-colors duration-500"></div>
             </div>
 
-            <div className="glass-card p-8 bg-white/[0.01] border-white/5 rounded-3xl">
+            <div className="glass-card p-8 bg-black/[0.01] dark:bg-white/[0.01] border-black/5 dark:border-white/5 rounded-3xl">
               <h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
                 <CheckCircle2 size={14} /> Mis Insignias
               </h3>
@@ -201,12 +201,12 @@ export default function CatalogPage() {
                       {lesson.important_date_type || 'Actividad'}
                     </div>
                     <div className="text-right">
-                      <div className="text-xs font-black text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
-                      <div className="text-[8px] font-bold text-gray-600 uppercase tracking-widest">Vencimiento</div>
+                      <div className="text-xs font-black text-gray-900 dark:text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
+                      <div className="text-[8px] font-bold text-gray-400 dark:text-gray-600 uppercase tracking-widest">Vencimiento</div>
                     </div>
                   </div>
-                  <h4 className="font-bold text-sm text-gray-200 mb-1 group-hover:text-white transition-colors line-clamp-1">{lesson.title}</h4>
-                  <p className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">{courseTitle}</p>
+                  <h4 className="font-bold text-sm text-gray-700 dark:text-gray-200 mb-1 group-hover:text-blue-600 dark:group-hover:text-white transition-colors line-clamp-1">{lesson.title}</h4>
+                  <p className="text-[10px] text-gray-400 dark:text-gray-500 font-bold uppercase tracking-widest">{courseTitle}</p>
                 </div>
               </Link>
             ))}
@@ -215,8 +215,8 @@ export default function CatalogPage() {
       )}
 
       {courses.length === 0 ? (
-        <div className="py-20 text-center glass-card border-dashed border-white/10 rounded-3xl bg-white/[0.01]">
-          <p className="text-gray-500 font-bold uppercase tracking-widest">Aún no se han publicado cursos.</p>
+        <div className="py-20 text-center glass-card border-dashed border-black/10 dark:border-white/10 rounded-3xl bg-black/[0.01] dark:bg-white/[0.01]">
+          <p className="text-gray-500 dark:text-gray-400 font-bold uppercase tracking-widest">Aún no se han publicado cursos.</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -224,7 +224,7 @@ export default function CatalogPage() {
             const isEnrolled = enrollments.includes(course.id);
 
             return (
-              <div key={course.id} className="glass-card group relative overflow-hidden h-full flex flex-col p-8 border-white/5 bg-white/[0.02] hover:bg-white/[0.04] transition-all duration-500 rounded-3xl">
+              <div key={course.id} className="glass-card group relative overflow-hidden h-full flex flex-col p-8 border-black/5 dark:border-white/5 bg-black/[0.01] dark:bg-white/[0.02] hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-all duration-500 rounded-3xl">
                 <div className="mb-8 flex items-start justify-between">
                   <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center shadow-2xl shadow-blue-500/20 group-hover:scale-110 transition-transform duration-500">
                     <Rocket size={24} className="text-white fill-white/10" />
@@ -236,17 +236,17 @@ export default function CatalogPage() {
                   )}
                 </div>
 
-                <h2 className="text-2xl font-black text-white mb-4 leading-tight group-hover:text-blue-400 transition-colors">
+                <h2 className="text-2xl font-black text-gray-900 dark:text-white mb-4 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                   {course.title}
                 </h2>
 
                 <div className="flex-1">
-                  <p className="text-gray-500 text-sm font-medium line-clamp-3 mb-10 leading-relaxed">
+                  <p className="text-gray-600 dark:text-gray-500 text-sm font-medium line-clamp-3 mb-10 leading-relaxed">
                     {course.description || "Currículo detallado que cubre desde los principios fundamentales hasta el dominio avanzado, elaborado por veteranos de la industria."}
                   </p>
                 </div>
 
-                <div className="pt-8 border-t border-white/5 flex items-center justify-between mt-auto">
+                <div className="pt-8 border-t border-black/5 dark:border-white/5 flex items-center justify-between mt-auto">
                   {isEnrolled ? (
                     <Link href={`/courses/${course.id}`} className="btn-premium w-full !bg-blue-600/10 !text-blue-400 border border-blue-500/20 hover:!bg-blue-600/20 !shadow-none gap-2">
                       Continuar Aprendiendo <ArrowRight size={16} />
diff --git a/web/experience/src/app/profile/[id]/page.tsx b/web/experience/src/app/profile/[id]/page.tsx
index a3e42b3..87f74e0 100644
--- a/web/experience/src/app/profile/[id]/page.tsx
+++ b/web/experience/src/app/profile/[id]/page.tsx
@@ -39,7 +39,7 @@ export default function StudentPortfolioPage() {
     if (!profile) return null;
 
     return (
-        <div className="min-h-screen bg-[#050505] text-white selection:bg-blue-500/30">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white selection:bg-blue-500/30 transition-colors duration-300">
             {/* Hero Section / Profile Header */}
             <div className="relative h-64 bg-gradient-to-r from-blue-900/30 to-purple-900/30 border-b border-white/5">
                 <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-20" />
@@ -47,7 +47,7 @@ export default function StudentPortfolioPage() {
                     <div className="flex items-end gap-6">
                         <div className="relative group">
                             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl blur opacity-30 group-hover:opacity-60 transition duration-1000"></div>
-                            <div className="relative w-32 h-32 rounded-2xl bg-black border-2 border-white/10 overflow-hidden shadow-2xl">
+                            <div className="relative w-32 h-32 rounded-2xl bg-black/5 dark:bg-black border-2 border-black/10 dark:border-white/10 overflow-hidden shadow-2xl">
                                 {profile.avatar_url ? (
                                     <img src={profile.avatar_url} alt={profile.full_name} className="w-full h-full object-cover" />
                                 ) : (
diff --git a/web/experience/src/app/profile/page.tsx b/web/experience/src/app/profile/page.tsx
index b6f83eb..c060221 100644
--- a/web/experience/src/app/profile/page.tsx
+++ b/web/experience/src/app/profile/page.tsx
@@ -204,7 +204,7 @@ export default function ProfilePage() {
                                                 <Award size={24} className="text-gray-600 group-hover:text-yellow-500 transition-colors" />
                                             )}
                                         </div>
-                                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-black border border-white/10 rounded-lg text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+                                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-gray-900 dark:bg-black border border-black/10 dark:border-white/10 rounded-lg text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
                                             {badge.name}
                                         </div>
                                     </div>
diff --git a/web/experience/src/components/AITutor.tsx b/web/experience/src/components/AITutor.tsx
index a6b91e6..3cee428 100644
--- a/web/experience/src/components/AITutor.tsx
+++ b/web/experience/src/components/AITutor.tsx
@@ -73,27 +73,27 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
 
     return (
         <div
-            className="fixed bottom-24 right-6 w-80 md:w-96 h-[500px] glass bg-black/80 backdrop-blur-2xl border border-white/10 rounded-3xl shadow-2xl flex flex-col z-[200] animate-in slide-in-from-bottom-6 duration-500 overflow-hidden"
+            className="fixed bottom-24 right-6 w-80 md:w-96 h-[500px] glass bg-white/95 dark:bg-black/80 backdrop-blur-2xl border border-black/5 dark:border-white/10 rounded-3xl shadow-2xl flex flex-col z-[200] animate-in slide-in-from-bottom-6 duration-500 overflow-hidden"
             role="dialog"
             aria-label="Tutor de IA"
         >
             {/* Header */}
-            <div className="p-4 border-b border-white/5 bg-blue-600/10 flex items-center justify-between">
+            <div className="p-4 border-b border-black/5 dark:border-white/5 bg-blue-600/5 dark:bg-blue-600/10 flex items-center justify-between">
                 <div className="flex items-center gap-3" aria-hidden="true">
-                    <div className="w-10 h-10 rounded-xl bg-blue-500 flex items-center justify-center shadow-lg shadow-blue-500/20">
+                    <div className="w-10 h-10 rounded-xl bg-blue-600 dark:bg-blue-500 flex items-center justify-center shadow-lg shadow-blue-500/20">
                         <Bot className="w-6 h-6 text-white" />
                     </div>
                     <div>
-                        <h3 className="text-sm font-black text-white uppercase tracking-widest">Tutor de IA</h3>
+                        <h3 className="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest">Tutor de IA</h3>
                         <div className="flex items-center gap-1.5">
                             <span className="w-1.5 h-1.5 bg-green-500 rounded-full" />
-                            <span className="text-[10px] font-bold text-gray-400 uppercase tracking-tighter">En Línea</span>
+                            <span className="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-tighter">En Línea</span>
                         </div>
                     </div>
                 </div>
                 <button
                     onClick={() => setIsOpen(false)}
-                    className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-colors"
+                    className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
                     aria-label="Cerrar Tutor de IA"
                 >
                     <X size={20} />
@@ -113,14 +113,14 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
                         className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                     >
                         <div className={`flex gap-2 max-w-[85%] ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
-                            <div className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${msg.role === 'user' ? 'bg-white/5' : 'bg-blue-600/20 text-blue-400'}`} aria-hidden="true">
+                            <div className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${msg.role === 'user' ? 'bg-black/5 dark:bg-white/5' : 'bg-blue-600/20 text-blue-600 dark:text-blue-400'}`} aria-hidden="true">
                                 {msg.role === 'user' ? <User size={16} /> : <Bot size={16} />}
                             </div>
                             <div className={`p-3 rounded-2xl text-xs font-medium leading-relaxed ${msg.role === 'user'
                                 ? 'bg-blue-600 text-white rounded-tr-none'
-                                : 'bg-white/5 text-gray-200 border border-white/5 rounded-tl-none'
+                                : 'bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 border border-black/5 dark:border-white/5 rounded-tl-none'
                                 }`}
-                                aria-label={msg.role === 'user' ? 'Tú dijiste' : 'El tutor dijo'}
+                                aria-label={msg.role === 'user' ? 'Tú dijeste' : 'El tutor dijo'}
                             >
                                 {msg.content}
                             </div>
@@ -130,10 +130,10 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
                 {isLoading && (
                     <li className="flex justify-start animate-in fade-in duration-300" aria-busy="true">
                         <div className="flex gap-2 max-w-[85%]">
-                            <div className="shrink-0 w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400 flex items-center justify-center" aria-hidden="true">
+                            <div className="shrink-0 w-8 h-8 rounded-lg bg-blue-600/20 text-blue-600 dark:text-blue-400 flex items-center justify-center" aria-hidden="true">
                                 <Bot size={16} />
                             </div>
-                            <div className="bg-white/5 text-gray-400 border border-white/5 p-3 rounded-2xl rounded-tl-none flex items-center gap-2">
+                            <div className="bg-black/5 dark:bg-white/5 text-gray-500 dark:text-gray-400 border border-black/5 dark:border-white/5 p-3 rounded-2xl rounded-tl-none flex items-center gap-2">
                                 <Loader2 className="w-3 h-3 animate-spin" />
                                 <span className="text-[10px] font-bold uppercase tracking-widest">El tutor está pensando...</span>
                             </div>
@@ -143,7 +143,7 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
             </ul>
 
             {/* Input */}
-            <div className="p-4 border-t border-white/5 bg-black/40">
+            <div className="p-4 border-t border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/40">
                 <div className="relative">
                     <input
                         type="text"
@@ -152,18 +152,18 @@ export default function AITutor({ lessonId }: { lessonId: string }) {
                         onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                         placeholder="Escribe tu duda aquí..."
                         aria-label="Escribe tu duda para el tutor"
-                        className="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 pr-12 text-xs font-medium focus:outline-none focus:border-blue-500/50 transition-colors placeholder:text-gray-600"
+                        className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl py-3 px-4 pr-12 text-xs font-medium focus:outline-none focus:border-blue-600/50 dark:focus:border-blue-500/50 transition-colors placeholder:text-gray-400 dark:placeholder:text-gray-600 text-gray-900 dark:text-gray-100"
                     />
                     <button
                         onClick={handleSend}
                         disabled={isLoading || !input.trim()}
-                        className="absolute right-2 top-1.5 p-1.5 bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:bg-gray-600 transition-all hover:bg-blue-500"
+                        className="absolute right-2 top-1.5 p-1.5 bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-all hover:bg-blue-500"
                         aria-label="Enviar mensaje"
                     >
                         <Send size={16} aria-hidden="true" />
                     </button>
                 </div>
-                <p className="mt-2 text-[9px] text-gray-600 font-bold uppercase tracking-widest text-center">
+                <p className="mt-2 text-[9px] text-gray-500 dark:text-gray-600 font-bold uppercase tracking-widest text-center">
                     IA entrenada con el contenido de esta lección
                 </p>
             </div>
diff --git a/web/experience/src/components/AppHeader.tsx b/web/experience/src/components/AppHeader.tsx
index 827bbeb..34988c0 100644
--- a/web/experience/src/components/AppHeader.tsx
+++ b/web/experience/src/components/AppHeader.tsx
@@ -23,7 +23,7 @@ export default function AppHeader() {
     const platformName = branding?.platform_name || branding?.name || 'OpenCCB';
 
     return (
-        <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
+        <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/70 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
             <Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
                 <div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
                     {branding?.logo_url ? (
@@ -36,27 +36,27 @@ export default function AppHeader() {
                 </div>
                 {branding?.logo_variant !== 'wide' && (
                     <div className="flex flex-col -gap-1" aria-hidden="true">
-                        <span className="font-black text-base md:text-xl tracking-tighter text-white leading-none">
+                        <span className="font-black text-base md:text-xl tracking-tighter text-gray-900 dark:text-white leading-none">
                             {platformName.toUpperCase()}
                         </span>
-                        <span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>
+                        <span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-600 dark:text-blue-500 uppercase">EXPERIENCIA</span>
                     </div>
                 )}
             </Link>
 
             <div className="flex items-center gap-4">
                 <nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
-                    <Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
+                    <Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                         {t('nav.catalog')}
                     </Link>
-                    <Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
+                    <Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                         {t('nav.myLearning')}
                     </Link>
-                    <Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
+                    <Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                         {t('nav.bookmarks')}
                     </Link>
                     {user && (
-                        <Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 hover:text-blue-300 transition-colors">
+                        <Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
                             MI PORTAFOLIO
                         </Link>
                     )}
@@ -74,9 +74,9 @@ export default function AppHeader() {
                             aria-label={t('nav.selectLanguage') || 'Select Language'}
                             className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
                         >
-                            <option value="en" className="bg-[#0f1115]">EN</option>
-                            <option value="es" className="bg-[#0f1115]">ES</option>
-                            <option value="pt" className="bg-[#0f1115]">PT</option>
+                            <option value="en" className="bg-white dark:bg-[#0f1115]">EN</option>
+                            <option value="es" className="bg-white dark:bg-[#0f1115]">ES</option>
+                            <option value="pt" className="bg-white dark:bg-[#0f1115]">PT</option>
                         </select>
                     </div>
 
@@ -183,9 +183,9 @@ export default function AppHeader() {
                                             aria-label={t('nav.selectLanguage') || 'Select Language'}
                                             className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none"
                                         >
-                                            <option value="en" className="bg-[#0f1115]">English</option>
-                                            <option value="es" className="bg-[#0f1115]">Español</option>
-                                            <option value="pt" className="bg-[#0f1115]">Português</option>
+                                            <option value="en" className="bg-white dark:bg-[#0f1115]">English</option>
+                                            <option value="es" className="bg-white dark:bg-[#0f1115]">Español</option>
+                                            <option value="pt" className="bg-white dark:bg-[#0f1115]">Português</option>
                                         </select>
                                     </div>
                                     <button
diff --git a/web/experience/src/components/AuthGuard.tsx b/web/experience/src/components/AuthGuard.tsx
index cca8d96..f7cd058 100644
--- a/web/experience/src/components/AuthGuard.tsx
+++ b/web/experience/src/components/AuthGuard.tsx
@@ -23,7 +23,7 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-[#050505] flex items-center justify-center">
+            <div className="min-h-screen bg-transparent flex items-center justify-center">
                 <div className="w-12 h-12 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin"></div>
             </div>
         );
diff --git a/web/experience/src/components/InteractiveTranscript.tsx b/web/experience/src/components/InteractiveTranscript.tsx
index e9fdad9..fee9e17 100644
--- a/web/experience/src/components/InteractiveTranscript.tsx
+++ b/web/experience/src/components/InteractiveTranscript.tsx
@@ -47,24 +47,24 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
     };
 
     return (
-        <div className="flex flex-col h-full glass-card overflow-hidden border-white/5 bg-black/20">
-            <div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/5">
+        <div className="flex flex-col h-full glass-card overflow-hidden border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20">
+            <div className="p-6 border-b border-black/5 dark:border-white/5 flex items-center justify-between bg-black/[0.02] dark:bg-white/5">
                 <div className="flex items-center gap-3">
                     <Clock className="w-4 h-4 text-blue-400" />
                     <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400">Transcripción</h3>
                 </div>
-                <div className="flex bg-black/40 rounded-lg p-1 border border-white/5">
+                <div className="flex bg-white/40 dark:bg-black/40 rounded-lg p-1 border border-black/5 dark:border-white/5">
                     <button
                         onClick={() => setLang('en')}
                         aria-pressed={lang === 'en'}
-                        className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'en' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:text-white'}`}
+                        className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'en' ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
                     >
                         EN
                     </button>
                     <button
                         onClick={() => setLang('es')}
                         aria-pressed={lang === 'es'}
-                        className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'es' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:text-white'}`}
+                        className={`px-3 py-1 text-[10px] font-black rounded-md transition-all ${lang === 'es' ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}`}
                     >
                         ES
                     </button>
@@ -81,7 +81,7 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
                 {cues.length === 0 ? (
                     <div className="flex flex-col items-center justify-center h-full text-center p-8">
                         <span className="text-4xl mb-4">🤐</span>
-                        <p className="text-xs text-gray-500 uppercase tracking-widest font-bold">No hay transcripción disponible</p>
+                        <p className="text-xs text-gray-600 dark:text-gray-500 uppercase tracking-widest font-bold">No hay transcripción disponible</p>
                     </div>
                 ) : (
                     cues.map((cue, index) => {
@@ -104,12 +104,12 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
                                     }
                                 }}
                                 className={`group cursor-pointer p-4 rounded-2xl transition-all border ${active
-                                    ? 'bg-blue-500/10 border-blue-500/30 text-white translate-x-1'
-                                    : 'bg-white/5 border-transparent text-gray-400 hover:bg-white/10 hover:border-white/10'
+                                    ? 'bg-blue-600/10 dark:bg-blue-500/10 border-blue-600/20 dark:border-blue-500/30 text-gray-900 dark:text-white translate-x-1'
+                                    : 'bg-black/5 dark:bg-white/5 border-transparent text-gray-600 dark:text-gray-400 hover:bg-black/10 dark:hover:bg-white/10 hover:border-black/5 dark:hover:border-white/10'
                                     }`}
                             >
                                 <div className="flex items-start gap-4">
-                                    <span className={`text-[10px] font-mono mt-1 ${active ? 'text-blue-400' : 'text-gray-600'}`} aria-hidden="true">
+                                    <span className={`text-[10px] font-mono mt-1 ${active ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-600'}`} aria-hidden="true">
                                         {formatTime(cue.start)}
                                     </span>
                                     <p className={`text-sm leading-relaxed ${active ? 'font-medium' : ''}`}>
@@ -122,17 +122,17 @@ export default function InteractiveTranscript({ transcription, currentTime, onSe
                 )}
 
                 {lang === 'es' && transcription.es && cues.length > 0 && (
-                    <div className="mt-8 pt-8 border-t border-white/10">
-                        <h4 className="text-[10px] font-black uppercase tracking-widest text-blue-400 mb-4">Traducción Completa (Beta)</h4>
-                        <p className="text-sm text-gray-400 leading-relaxed italic">
+                    <div className="mt-8 pt-8 border-t border-black/5 dark:border-white/10">
+                        <h4 className="text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 mb-4">Traducción Completa (Beta)</h4>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed italic">
                             {transcription.es}
                         </p>
                     </div>
                 )}
             </div>
 
-            <div className="p-4 bg-white/5 border-t border-white/5 flex items-center justify-between">
-                <span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest">Haz clic para saltar al tiempo</span>
+            <div className="p-4 bg-black/[0.02] dark:bg-white/5 border-t border-black/5 dark:border-white/5 flex items-center justify-between">
+                <span className="text-[8px] font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Haz clic para saltar al tiempo</span>
                 <div className="flex gap-1">
                     <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse"></div>
                     <div className="w-1 h-1 rounded-full bg-blue-500/50"></div>
diff --git a/web/experience/src/components/StudentNotes.tsx b/web/experience/src/components/StudentNotes.tsx
index 91834d7..a6a9f82 100644
--- a/web/experience/src/components/StudentNotes.tsx
+++ b/web/experience/src/components/StudentNotes.tsx
@@ -63,7 +63,7 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
 
     if (loading) {
         return (
-            <div className="flex flex-col items-center justify-center p-8 text-gray-500">
+            <div className="flex flex-col items-center justify-center p-8 text-gray-600 dark:text-gray-500">
                 <Loader2 className="w-6 h-6 animate-spin mb-2" />
                 <span className="text-xs font-bold uppercase tracking-widest">Cargando tus notas...</span>
             </div>
@@ -71,11 +71,11 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
     }
 
     return (
-        <div className="glass-card flex flex-col h-full bg-white/[0.02] border-white/5 overflow-hidden rounded-2xl">
-            <div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/[0.03]">
+        <div className="glass-card flex flex-col h-full bg-black/[0.01] dark:bg-white/[0.02] border-black/5 dark:border-white/5 overflow-hidden rounded-2xl">
+            <div className="p-4 border-b border-black/5 dark:border-white/5 flex items-center justify-between bg-black/[0.02] dark:bg-white/[0.03]">
                 <div className="flex items-center gap-2">
-                    <StickyNote size={18} className="text-indigo-400" />
-                    <h3 className="text-sm font-black uppercase tracking-widest text-white">Notas Personales</h3>
+                    <StickyNote size={18} className="text-indigo-600 dark:text-indigo-400" />
+                    <h3 className="text-sm font-black uppercase tracking-widest text-gray-900 dark:text-white">Notas Personales</h3>
                 </div>
                 <div className="flex items-center gap-2">
                     {saving ? (
@@ -98,10 +98,10 @@ export default function StudentNotes({ lessonId }: StudentNotesProps) {
                 value={note}
                 onChange={handleChange}
                 placeholder="Escribe tus apuntes aquí... Se guardan automáticamente."
-                className="flex-1 w-full p-6 bg-transparent text-gray-200 text-sm leading-relaxed focus:outline-none resize-none placeholder:text-gray-600 custom-scrollbar"
+                className="flex-1 w-full p-6 bg-transparent text-gray-800 dark:text-gray-200 text-sm leading-relaxed focus:outline-none resize-none placeholder:text-gray-400 dark:placeholder:text-gray-600 custom-scrollbar"
             />
 
-            <div className="p-3 bg-white/[0.01] border-t border-white/5 text-[10px] text-gray-500 font-medium text-center italic">
+            <div className="p-3 bg-black/[0.01] dark:bg-white/[0.01] border-t border-black/5 dark:border-white/5 text-[10px] text-gray-500 font-medium text-center italic">
                 Solo tú puedes ver estas notas.
             </div>
         </div>
diff --git a/web/experience/src/components/blocks/AudioResponsePlayer.tsx b/web/experience/src/components/blocks/AudioResponsePlayer.tsx
index 6235d40..8d0fe26 100644
--- a/web/experience/src/components/blocks/AudioResponsePlayer.tsx
+++ b/web/experience/src/components/blocks/AudioResponsePlayer.tsx
@@ -177,18 +177,18 @@ export default function AudioResponsePlayer({
 
     return (
         <div className="space-y-6" id={id}>
-            <div className="p-8 glass border-white/5 rounded-3xl space-y-6">
+            <div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-6 bg-black/[0.02] dark:bg-black/20">
                 <div className="flex items-start gap-4">
-                    <div className="p-3 bg-purple-500/20 rounded-xl">
-                        <Mic className="w-6 h-6 text-purple-400" />
+                    <div className="p-3 bg-purple-600/10 dark:bg-purple-500/20 rounded-xl">
+                        <Mic className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                     </div>
                     <div className="flex-1">
-                        <h3 id={`audio-prompt-${id}`} className="text-xl font-bold text-gray-100">{prompt}</h3>
+                        <h3 id={`audio-prompt-${id}`} className="text-xl font-bold text-gray-900 dark:text-gray-100">{prompt}</h3>
                         {keywords.length > 0 && !submitted && (
                             <div className="flex flex-wrap gap-2 mt-3">
-                                <span className="text-xs text-gray-500 uppercase tracking-wider">Expected topics:</span>
+                                <span className="text-xs text-gray-500 dark:text-gray-500 uppercase tracking-wider">Expected topics:</span>
                                 {keywords.map((kw, i) => (
-                                    <span key={i} className="px-2 py-1 bg-purple-500/10 border border-purple-500/20 rounded text-xs text-purple-300">
+                                    <span key={i} className="px-2 py-1 bg-purple-600/10 dark:bg-purple-500/10 border border-purple-600/20 dark:border-purple-500/20 rounded text-xs text-purple-700 dark:text-purple-300">
                                         {kw}
                                     </span>
                                 ))}
@@ -222,9 +222,9 @@ export default function AudioResponsePlayer({
                                         aria-label={`Recording time: ${formatTime(recordingTime)}`}
                                     >
                                         <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" aria-hidden="true" />
-                                        <span className="font-mono text-xl font-bold text-red-400">{formatTime(recordingTime)}</span>
+                                        <span className="font-mono text-xl font-bold text-red-600 dark:text-red-400">{formatTime(recordingTime)}</span>
                                         {timeLimit && (
-                                            <span className="text-sm text-gray-400">/ {formatTime(timeLimit)}</span>
+                                            <span className="text-sm text-gray-500 dark:text-gray-400">/ {formatTime(timeLimit)}</span>
                                         )}
                                     </div>
                                     <button
@@ -250,7 +250,7 @@ export default function AudioResponsePlayer({
                                     </button>
                                     <button
                                         onClick={reset}
-                                        className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/10 rounded-xl font-bold text-gray-300 transition-all outline-none focus:ring-2 focus:ring-white/20"
+                                        className="flex items-center gap-2 px-6 py-3 glass hover:bg-black/5 dark:hover:bg-white/10 rounded-xl font-bold text-gray-600 dark:text-gray-300 transition-all outline-none focus:ring-2 focus:ring-black/10 dark:focus:ring-white/20 border-black/5 dark:border-white/5"
                                         aria-label="Delete and re-record"
                                     >
                                         <RotateCcw className="w-4 h-4" aria-hidden="true" />
@@ -262,9 +262,9 @@ export default function AudioResponsePlayer({
 
                         {/* Transcript Preview */}
                         {transcript && !submitted && (
-                            <div className="p-4 bg-white/5 border border-white/10 rounded-xl">
-                                <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Transcript:</p>
-                                <p className="text-sm text-gray-300">{transcript}</p>
+                            <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl">
+                                <p className="text-xs text-gray-500 dark:text-gray-500 uppercase tracking-wider mb-2">Transcript:</p>
+                                <p className="text-sm text-gray-700 dark:text-gray-300">{transcript}</p>
                             </div>
                         )}
 
@@ -285,16 +285,16 @@ export default function AudioResponsePlayer({
                     <div className="space-y-4">
                         <div
                             className={`p-6 rounded-2xl border-2 ${evaluation.score >= 70
-                                ? 'bg-green-500/10 border-green-500'
+                                ? 'bg-green-500/10 border-green-600 dark:border-green-500'
                                 : evaluation.score >= 40
-                                    ? 'bg-yellow-500/10 border-yellow-500'
-                                    : 'bg-red-500/10 border-red-500'
+                                    ? 'bg-yellow-500/10 border-yellow-600 dark:border-yellow-500'
+                                    : 'bg-red-500/10 border-red-600 dark:border-red-500'
                                 }`}
                             aria-live="assertive"
                         >
                             <div className="flex items-center justify-between mb-4">
-                                <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Your Score</span>
-                                <span className="text-3xl font-black">{evaluation.score}%</span>
+                                <span className="text-sm font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Your Score</span>
+                                <span className="text-3xl font-black text-gray-900 dark:text-white">{evaluation.score}%</span>
                             </div>
 
                             {keywords.length > 0 && (
@@ -306,9 +306,9 @@ export default function AudioResponsePlayer({
                                             return (
                                                 <span
                                                     key={i}
-                                                    className={`px-3 py-1 rounded-lg text-sm font-medium flex items-center gap-1 ${found
-                                                        ? 'bg-green-500/20 border border-green-500/50 text-green-300'
-                                                        : 'bg-gray-500/20 border border-gray-500/50 text-gray-400'
+                                                    className={`px-3 py-1 rounded-lg text-sm font-bold flex items-center gap-1 ${found
+                                                        ? 'bg-green-600/10 dark:bg-green-500/20 border border-green-600/20 dark:border-green-500/50 text-green-700 dark:text-green-300'
+                                                        : 'bg-gray-500/10 dark:bg-gray-500/20 border border-gray-600/20 dark:border-gray-500/50 text-gray-600 dark:text-gray-400'
                                                         }`}
                                                 >
                                                     {found ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
@@ -326,25 +326,25 @@ export default function AudioResponsePlayer({
                                 <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                                     <BrainCircuit className="w-20 h-20 text-blue-400" />
                                 </div>
-                                <div className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-blue-400">
+                                <div className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-400">
                                     <BrainCircuit className="w-4 h-4" />
                                     AI Teacher Feedback
                                 </div>
-                                <p className="text-gray-200 leading-relaxed italic text-lg relative z-10">
+                                <p className="text-gray-800 dark:text-gray-200 leading-relaxed italic text-lg relative z-10">
                                     &quot;{evaluation.feedback}&quot;
                                 </p>
                             </div>
                         )}
 
-                        <div className="p-4 bg-white/5 border border-white/10 rounded-xl">
+                        <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl">
                             <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Your Transcript:</p>
-                            <p className="text-sm text-gray-300">{transcript}</p>
+                            <p className="text-sm text-gray-700 dark:text-gray-300">{transcript}</p>
                         </div>
 
                         {!isGraded && evaluation.score < 70 && (
                             <button
                                 onClick={reset}
-                                className="w-full py-4 glass hover:bg-white/10 rounded-xl font-bold text-blue-400 transition-all"
+                                className="w-full py-4 glass hover:bg-black/5 dark:hover:bg-white/10 rounded-xl font-bold text-blue-600 dark:text-blue-400 border-black/5 dark:border-white/5 transition-all"
                             >
                                 Try Again
                             </button>
diff --git a/web/experience/src/components/blocks/CodeExercisePlayer.tsx b/web/experience/src/components/blocks/CodeExercisePlayer.tsx
index dc3af95..4e520c2 100644
--- a/web/experience/src/components/blocks/CodeExercisePlayer.tsx
+++ b/web/experience/src/components/blocks/CodeExercisePlayer.tsx
@@ -58,22 +58,22 @@ export default function CodeExercisePlayer({
 
     return (
         <div className="flex flex-col gap-6 animate-in fade-in duration-700">
-            <div className="glass-card p-6 border-white/5">
+            <div className="glass-card p-6 border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-black/20">
                 <div className="flex items-center gap-3 mb-4">
-                    <div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
+                    <div className="p-2 rounded-lg bg-indigo-600/10 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
                         <Code2 size={24} />
                     </div>
-                    <h2 className="text-xl font-black tracking-tight">{title}</h2>
+                    <h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
                 </div>
-                <div className="prose prose-invert max-w-none text-gray-400 text-sm leading-relaxed">
+                <div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
                     {instructions}
                 </div>
             </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
                 {/* Editor Area */}
-                <div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-[#1a1c21]">
-                    <div className="px-4 py-2 bg-white/5 border-b border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-500">
+                <div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-[#1a1c21]">
+                    <div className="px-4 py-2 bg-black/40 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">
                         <span>main.py</span>
                         <div className="flex gap-2">
                             <div className="w-2 h-2 rounded-full bg-red-500/20" />
@@ -87,7 +87,7 @@ export default function CodeExercisePlayer({
                         className="flex-1 bg-transparent p-6 font-mono text-sm resize-none focus:outline-none text-indigo-100 selection:bg-indigo-500/30"
                         spellCheck={false}
                     />
-                    <div className="p-4 bg-black/20 border-t border-white/5 flex gap-2">
+                    <div className="p-4 bg-black/40 dark:bg-black/20 border-t border-black/5 dark:border-white/5 flex gap-2">
                         <button
                             onClick={runCode}
                             disabled={status === "running"}
@@ -111,12 +111,12 @@ export default function CodeExercisePlayer({
                 </div>
 
                 {/* Console / Results Area */}
-                <div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-black/40">
-                    <div className="px-4 py-2 bg-white/5 border-b border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
+                <div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-black/[0.05] dark:bg-black/40">
+                    <div className="px-4 py-2 bg-black/10 dark:bg-white/5 border-b border-black/5 dark:border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
                         Console Output
                     </div>
                     <div className="flex-1 p-6 font-mono text-sm overflow-auto">
-                        {!output && <span className="text-gray-600 italic">Click &quot;Run Code&quot; to execute tests...</span>}
+                        {!output && <span className="text-gray-500 dark:text-gray-600 italic">Click &quot;Run Code&quot; to execute tests...</span>}
                         {output && (
                             <pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
                                 status === "error" ? "text-red-400" :
diff --git a/web/experience/src/components/blocks/DescriptionPlayer.tsx b/web/experience/src/components/blocks/DescriptionPlayer.tsx
index 637eebc..2757bc8 100644
--- a/web/experience/src/components/blocks/DescriptionPlayer.tsx
+++ b/web/experience/src/components/blocks/DescriptionPlayer.tsx
@@ -13,12 +13,12 @@ export default function DescriptionPlayer({ id, title, content }: DescriptionPla
     return (
         <div className="space-y-8" id={id}>
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Resumen"}
                 </h3>
             </div>
 
-            <div className="prose prose-invert prose-lg max-w-none prose-p:text-gray-300 prose-p:leading-relaxed prose-p:font-medium prose-headings:text-white prose-a:text-blue-400 prose-img:rounded-2xl prose-img:shadow-2xl">
+            <div className="prose dark:prose-invert prose-lg max-w-none prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:font-medium prose-headings:text-gray-900 dark:prose-headings:text-white prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-2xl prose-img:shadow-2xl">
                 <ReactMarkdown urlTransform={getImageUrl}>{content}</ReactMarkdown>
             </div>
         </div>
diff --git a/web/experience/src/components/blocks/DocumentPlayer.tsx b/web/experience/src/components/blocks/DocumentPlayer.tsx
index 977ff2d..d0bf000 100644
--- a/web/experience/src/components/blocks/DocumentPlayer.tsx
+++ b/web/experience/src/components/blocks/DocumentPlayer.tsx
@@ -26,14 +26,14 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
     return (
         <div className="space-y-6" id={id}>
             <div className="flex items-center justify-between">
-                <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">
+                <h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">
                     {title || "Material de Lectura"}
                 </h3>
             </div>
 
             <div className="relative">
                 {isPdf ? (
-                    <div className="glass-card !p-0 overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full group relative">
+                    <div className="glass-card !p-0 overflow-hidden border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5 aspect-[4/3] w-full group relative">
                         <iframe
                             src={`${displayUrl}#view=FitH&toolbar=0`}
                             className="w-full h-full border-none"
@@ -41,7 +41,7 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
                         />
 
                         {/* Overlay Controls */}
-                        <div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
+                        <div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
                             <span className="text-[10px] font-black uppercase tracking-widest text-white/50 flex items-center gap-2">
                                 <Eye size={12} /> Vista Previa
                             </span>
@@ -65,13 +65,13 @@ export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps)
                         </div>
                     </div>
                 ) : (
-                    <div className="glass-card p-12 flex flex-col items-center text-center gap-6 border-white/5 bg-white/5">
+                    <div className="glass-card p-12 flex flex-col items-center text-center gap-6 border-black/5 dark:border-white/5 bg-black/[0.02] dark:bg-white/5">
                         <div className="w-20 h-20 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
                             <FileText size={40} />
                         </div>
                         <div>
-                            <p className="text-xl font-bold text-white mb-2">Documento Adjunto</p>
-                            <p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
+                            <p className="text-xl font-bold text-gray-900 dark:text-white mb-2">Documento Adjunto</p>
+                            <p className="text-sm text-gray-600 dark:text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
                                 Este archivo no puede previsualizarse. Descárgalo para leerlo.
                             </p>
                         </div>
diff --git a/web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx b/web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx
index 9fbdbb8..d121390 100644
--- a/web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx
+++ b/web/experience/src/components/blocks/FillInTheBlanksPlayer.tsx
@@ -45,13 +45,13 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
     return (
         <div className="space-y-8" id={id}>
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Rellena los Espacios en Blanco"}
                 </h3>
             </div>
 
-            <div className="p-8 glass border-white/5 rounded-3xl space-y-8">
-                <div className="text-lg leading-loose text-gray-100">
+            <div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-8 bg-black/[0.02] dark:bg-black/20">
+                <div className="text-lg leading-loose text-gray-800 dark:text-gray-100">
                     {parsed.parts.map((part, i) => (
                         part.type === 'text' ? (
                             <span key={i}>{part.value}</span>
@@ -67,8 +67,8 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
                                 }}
                                 disabled={submitted}
                                 className={`mx-1 px-2 py-0 border-b-2 bg-transparent transition-all focus:outline-none text-center rounded-t-sm ${submitted
-                                    ? (isCorrect(part.index!) ? "border-green-500 text-green-400 bg-green-500/10" : "border-red-500 text-red-100 bg-red-500/10")
-                                    : "border-blue-500/30 focus:border-blue-500 text-blue-400 focus:bg-blue-500/5"
+                                    ? (isCorrect(part.index!) ? "border-green-600 dark:border-green-500 text-green-700 dark:text-green-400 bg-green-500/10" : "border-red-600 dark:border-red-500 text-red-700 dark:text-red-100 bg-red-500/10")
+                                    : "border-blue-600/30 dark:border-blue-500/30 focus:border-blue-600 dark:focus:border-blue-500 text-blue-700 dark:text-blue-400 focus:bg-blue-600/5 dark:focus:bg-blue-500/5"
                                     }`}
                                 style={{ width: `${Math.max((part.answer?.length || 5) * 12, 60)}px` }}
                                 placeholder="..."
@@ -91,7 +91,7 @@ export default function FillInTheBlanksPlayer({ id, title, content, allowRetry =
                         {submitted && (
                             <button
                                 onClick={handleReset}
-                                className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
+                                className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5"
                             >
                                 Intentar de Nuevo
                             </button>
diff --git a/web/experience/src/components/blocks/HotspotPlayer.tsx b/web/experience/src/components/blocks/HotspotPlayer.tsx
index 4a08738..cabb70a 100644
--- a/web/experience/src/components/blocks/HotspotPlayer.tsx
+++ b/web/experience/src/components/blocks/HotspotPlayer.tsx
@@ -68,18 +68,18 @@ export default function HotspotPlayer({
 
     return (
         <div className="flex flex-col gap-6 animate-in fade-in zoom-in duration-700">
-            <div className="glass-card p-6 border-indigo-500/20 bg-indigo-500/5">
+            <div className="glass-card p-6 border-indigo-600/10 dark:border-indigo-500/20 bg-indigo-600/5 dark:bg-indigo-500/5">
                 <div className="flex items-center justify-between mb-4">
                     <div className="flex items-center gap-3">
                         <div className="p-3 rounded-2xl bg-amber-400 text-black shadow-lg shadow-amber-400/20">
                             <Search size={24} strokeWidth={3} />
                         </div>
                         <div>
-                            <h2 className="text-xl font-black tracking-tight text-white">{title}</h2>
-                            <p className="text-xs text-indigo-300 font-bold uppercase tracking-widest">{description}</p>
+                            <h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
+                            <p className="text-xs text-indigo-600 dark:text-indigo-300 font-bold uppercase tracking-widest">{description}</p>
                         </div>
                     </div>
-                    <div className="px-4 py-2 rounded-full bg-white/5 border border-white/10 text-xs font-black">
+                    <div className="px-4 py-2 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-xs font-black text-gray-900 dark:text-white">
                         {found.length} / {hotspots.length} FOUND
                     </div>
                 </div>
@@ -88,7 +88,7 @@ export default function HotspotPlayer({
             <div
                 ref={containerRef}
                 onClick={handleClick}
-                className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
+                className="relative aspect-video rounded-3xl overflow-hidden border-4 border-black/5 dark:border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
             >
                 <Image
                     src={getImageUrl(imageUrl)}
@@ -149,8 +149,8 @@ export default function HotspotPlayer({
                     <div
                         key={h.id}
                         className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 ${found.includes(h.id)
-                            ? "bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
-                            : "bg-white/5 text-gray-500 border border-white/5"
+                            ? "bg-green-600 dark:bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
+                            : "bg-black/5 dark:bg-white/5 text-gray-500 dark:text-gray-500 border border-black/5 dark:border-white/5"
                             }`}
                     >
                         {found.includes(h.id) ? <CheckCircle size={14} /> : <div className="w-1 h-1 rounded-full bg-current" />}
diff --git a/web/experience/src/components/blocks/MatchingPlayer.tsx b/web/experience/src/components/blocks/MatchingPlayer.tsx
index d753244..96678cf 100644
--- a/web/experience/src/components/blocks/MatchingPlayer.tsx
+++ b/web/experience/src/components/blocks/MatchingPlayer.tsx
@@ -40,21 +40,21 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
     return (
         <div className="space-y-8" id={id}>
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Emparejamiento de Conceptos"}
                 </h3>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-white/5 rounded-3xl relative">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-black/5 dark:border-white/5 rounded-3xl relative bg-black/[0.02] dark:bg-black/20">
                 <div className="space-y-4">
-                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Término</label>
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Término</label>
                     {(pairs || []).map((pair, i) => (
                         <button
                             key={i}
                             onClick={() => !submitted && setSelectedLeft(i)}
-                            className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-500 bg-blue-500/10 text-white shadow-lg" :
-                                matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
-                                    "border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
+                            className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-600 dark:border-blue-500 bg-blue-600/10 dark:bg-blue-500/10 text-blue-700 dark:text-white shadow-lg" :
+                                matches[i] !== undefined ? "border-blue-600/20 dark:border-blue-500/20 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
+                                    "border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 hover:border-black/20 dark:hover:border-white/20"
                                 }`}
                         >
                             {pair.left}
@@ -63,7 +63,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
                 </div>
 
                 <div className="space-y-4">
-                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Definición</label>
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Definición</label>
                     {shuffledRight.map((item, i) => {
                         const matchedLeftIdx = Object.keys(matches).find(k => matches[parseInt(k)] === item.originalIdx);
                         const isCorrect = submitted && matchedLeftIdx !== undefined && parseInt(matchedLeftIdx) === item.originalIdx;
@@ -74,11 +74,11 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
                                 key={i}
                                 disabled={selectedLeft === null || submitted}
                                 onClick={() => handleMatch(selectedLeft!, item.originalIdx)}
-                                className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-500/50 hover:bg-white/5" : ""
-                                    } ${isCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
-                                        isWrong ? "border-red-500 bg-red-500/20 text-red-100" :
-                                            matchedLeftIdx !== undefined ? "border-blue-500/30 bg-blue-500/5 text-blue-400" :
-                                                "border-white/5 bg-white/5 text-gray-200"
+                                className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-600/50 dark:hover:border-blue-500/50 hover:bg-black/5 dark:hover:bg-white/5" : ""
+                                    } ${isCorrect ? "border-green-600 dark:border-green-500 bg-green-500/20 text-green-700 dark:text-green-400" :
+                                        isWrong ? "border-red-600 dark:border-red-500 bg-red-500/20 text-red-700 dark:text-red-100" :
+                                            matchedLeftIdx !== undefined ? "border-blue-600/30 dark:border-blue-500/30 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400" :
+                                                "border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200"
                                     }`}
                             >
                                 <div className="flex items-center justify-between">
@@ -104,7 +104,7 @@ export default function MatchingPlayer({ id, title, pairs, allowRetry = true }:
                         {submitted && (
                             <button
                                 onClick={handleReset}
-                                className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
+                                className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-2xl border-black/5 dark:border-white/5"
                             >
                                 Intentar de Nuevo
                             </button>
diff --git a/web/experience/src/components/blocks/MediaPlayer.tsx b/web/experience/src/components/blocks/MediaPlayer.tsx
index 52f529c..d406fc2 100644
--- a/web/experience/src/components/blocks/MediaPlayer.tsx
+++ b/web/experience/src/components/blocks/MediaPlayer.tsx
@@ -95,14 +95,14 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
     if (locked) {
         return (
             <div className="space-y-4" id={id}>
-                <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">{title || "Contenido Multimedia"}</h3>
-                <div className="glass-card aspect-video flex flex-col items-center justify-center gap-6 border-red-500/20 bg-red-500/5">
-                    <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
+                <h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{title || "Contenido Multimedia"}</h3>
+                <div className="glass-card aspect-video flex flex-col items-center justify-center gap-6 border-red-500/10 dark:border-red-500/20 bg-red-500/5">
+                    <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center text-red-600 dark:text-red-500">
                         <Lock size={32} />
                     </div>
                     <div className="text-center">
-                        <p className="text-xl font-bold text-white mb-2">Contenido Bloqueado</p>
-                        <p className="text-sm text-gray-500 max-w-xs uppercase tracking-widest font-black">
+                        <p className="text-xl font-bold text-gray-900 dark:text-white mb-2">Contenido Bloqueado</p>
+                        <p className="text-sm text-gray-600 dark:text-gray-500 max-w-xs uppercase tracking-widest font-black">
                             Has alcanzado el límite de {maxPlays} reproducciones para este contenido.
                         </p>
                     </div>
@@ -135,9 +135,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
     return (
         <div className="space-y-6" id={id}>
             <div className="flex items-center justify-between">
-                <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">{title || "Contenido Multimedia"}</h3>
+                <h3 className="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-gray-400">{title || "Contenido Multimedia"}</h3>
                 {maxPlays > 0 && (
-                    <span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-white/5 border border-white/5 text-gray-500">
+                    <span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 text-gray-500 dark:text-gray-400">
                         {playCount} / {maxPlays} REPRODUCCIONES
                     </span>
                 )}
@@ -196,9 +196,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
                 {!isLocalFile && playCount === 0 && (
                     <div
                         onClick={handlePlay}
-                        className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer group-hover:bg-black/20 transition-all"
+                        className="absolute inset-0 bg-white/40 dark:bg-black/40 flex items-center justify-center cursor-pointer group-hover:bg-white/20 dark:group-hover:bg-black/20 transition-all"
                     >
-                        <div className="w-20 h-20 rounded-full bg-blue-500 flex items-center justify-center shadow-2xl shadow-blue-500/40 group-hover:scale-110 transition-transform">
+                        <div className="w-20 h-20 rounded-full bg-blue-600 dark:bg-blue-500 flex items-center justify-center shadow-2xl shadow-blue-500/40 group-hover:scale-110 transition-transform">
                             <Play size={32} className="text-white fill-white ml-2" />
                         </div>
                     </div>
@@ -213,8 +213,8 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
             )}
             {/* Question Overlay */}
             {activeMarker && (
-                <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md rounded-xl animate-in fade-in duration-300">
-                    <div className="bg-white text-black p-6 rounded-2xl shadow-2xl max-w-sm w-full space-y-4">
+                <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-white/60 dark:bg-black/60 backdrop-blur-md rounded-xl animate-in fade-in duration-300">
+                    <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-2xl shadow-2xl max-w-sm w-full space-y-4 border border-black/5 dark:border-white/5">
                         <div className="flex items-center gap-2 text-blue-600 font-bold text-xs uppercase tracking-widest">
                             <AlertCircle size={16} />
                             <span>Quick Check</span>
@@ -259,9 +259,9 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
                                     }}
                                     className={`px-4 py-3 rounded-xl font-medium transition-all text-left ${feedback
                                         ? idx === activeMarker.correctIndex
-                                            ? "bg-green-500 text-white"
-                                            : feedback.isCorrect === false && "bg-red-500 text-white"
-                                        : "bg-gray-100 hover:bg-blue-500 hover:text-white"
+                                            ? "bg-green-600 dark:bg-green-500 text-white"
+                                            : feedback.isCorrect === false && "bg-red-600 dark:bg-red-500 text-white"
+                                        : "bg-black/5 dark:bg-gray-800 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white"
                                         }`}
                                 >
                                     {option}
diff --git a/web/experience/src/components/blocks/MemoryPlayer.tsx b/web/experience/src/components/blocks/MemoryPlayer.tsx
index 7186b9e..3b4f8f1 100644
--- a/web/experience/src/components/blocks/MemoryPlayer.tsx
+++ b/web/experience/src/components/blocks/MemoryPlayer.tsx
@@ -105,8 +105,8 @@ export default function MemoryPlayer({
                         <Sparkles size={28} className="animate-pulse" />
                     </div>
                     <div>
-                        <h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
-                        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400">
+                        <h2 className="text-2xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
+                        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
                             <span>Brain Training</span>
                             <span className="w-1 h-1 rounded-full bg-indigo-800" />
                             <span>Level: Beginner</span>
@@ -114,16 +114,16 @@ export default function MemoryPlayer({
                     </div>
                 </div>
                 <div className="flex gap-4">
-                    <div className="px-5 py-3 rounded-2xl bg-white/5 border border-white/10 text-center">
+                    <div className="px-5 py-3 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-center">
                         <div className="text-[10px] font-black uppercase tracking-widest text-gray-500">Moves</div>
-                        <div className="text-xl font-black text-white">{moves}</div>
+                        <div className="text-xl font-black text-gray-900 dark:text-white">{moves}</div>
                     </div>
                     <button
                         onClick={initializeGame}
-                        className="p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all active:scale-90"
+                        className="p-4 rounded-2xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/5 dark:border-white/10 transition-all active:scale-90"
                         title="Restart"
                     >
-                        <RotateCcw size={20} className="text-gray-400" />
+                        <RotateCcw size={20} className="text-gray-500 dark:text-gray-400" />
                     </button>
                 </div>
             </div>
@@ -138,8 +138,8 @@ export default function MemoryPlayer({
                         <div className={`relative w-full h-full transition-all duration-500 transform-style-3d ${(card.isFlipped || card.isMatched) ? "rotate-y-180" : ""
                             }`}>
                             {/* Card Front (Hidden) */}
-                            <div className="absolute inset-0 backface-hidden flex items-center justify-center rounded-2xl bg-[#1a1c21] border-2 border-white/5 hover:border-indigo-500/50 transition-colors shadow-lg">
-                                <HelpCircle size={40} className="text-white/10 group-hover:text-indigo-500/30 transition-colors" />
+                            <div className="absolute inset-0 backface-hidden flex items-center justify-center rounded-2xl bg-gray-100 dark:bg-[#1a1c21] border-2 border-black/5 dark:border-white/5 hover:border-indigo-600 dark:hover:border-indigo-500/50 transition-colors shadow-lg">
+                                <HelpCircle size={40} className="text-black/10 dark:text-white/10 group-hover:text-indigo-600 dark:group-hover:text-indigo-500/30 transition-colors" />
                             </div>
 
                             {/* Card Back (Content) */}
@@ -166,8 +166,8 @@ export default function MemoryPlayer({
                     <div className="w-16 h-16 rounded-full bg-green-500 text-white flex items-center justify-center mb-4 shadow-lg shadow-green-500/20">
                         <CheckCircle2 size={32} strokeWidth={3} />
                     </div>
-                    <h3 className="text-2xl font-black text-white mb-1">BRAVO!</h3>
-                    <p className="text-green-500/80 font-bold uppercase tracking-widest text-xs">
+                    <h3 className="text-2xl font-black text-gray-900 dark:text-white mb-1">BRAVO!</h3>
+                    <p className="text-green-600 dark:text-green-500/80 font-bold uppercase tracking-widest text-xs">
                         Finished in {moves} moves
                     </p>
                 </div>
diff --git a/web/experience/src/components/blocks/OrderingPlayer.tsx b/web/experience/src/components/blocks/OrderingPlayer.tsx
index 8417570..4aabf94 100644
--- a/web/experience/src/components/blocks/OrderingPlayer.tsx
+++ b/web/experience/src/components/blocks/OrderingPlayer.tsx
@@ -36,15 +36,15 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
     return (
         <div className="space-y-8" id={id}>
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Ordenamiento de Secuencia"}
                 </h3>
             </div>
 
-            <div className="space-y-8 p-8 glass border-white/5 rounded-3xl">
+            <div className="space-y-8 p-8 glass border-black/5 dark:border-white/5 rounded-3xl bg-black/[0.02] dark:bg-black/20">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                     <div className="space-y-4">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Elementos Disponibles</label>
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Elementos Disponibles</label>
                         <div className="flex flex-wrap gap-3">
                             {shuffledItems.map((item, i) => {
                                 const isPicked = userOrder.includes(item.originalIdx);
@@ -53,8 +53,8 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
                                         key={i}
                                         disabled={isPicked || submitted}
                                         onClick={() => handlePick(item.originalIdx)}
-                                        className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-white/5 bg-white/5" :
-                                            "border-white/10 bg-white/5 text-gray-200 hover:border-blue-500/50 hover:bg-blue-500/5"
+                                        className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5" :
+                                            "border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-gray-800 dark:text-gray-200 hover:border-blue-600/50 dark:hover:border-blue-500/50 hover:bg-blue-600/5 dark:hover:bg-blue-500/5"
                                             }`}
                                     >
                                         {item.value}
@@ -65,9 +65,9 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
                     </div>
 
                     <div className="space-y-4">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Tu Secuencia</label>
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4 block">Tu Secuencia</label>
                         <div className="space-y-3">
-                            {userOrder.length === 0 && <p className="text-xs text-gray-600 italic py-4">Haz clic en los elementos para construir la secuencia...</p>}
+                            {userOrder.length === 0 && <p className="text-xs text-gray-500 dark:text-gray-600 italic py-4">Haz clic en los elementos para construir la secuencia...</p>}
                             {userOrder.map((idx, i) => {
                                 const isItemCorrect = submitted && idx === i;
                                 const isItemWrong = submitted && idx !== i;
@@ -76,9 +76,9 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
                                     <div
                                         key={i}
                                         onClick={() => !submitted && handlePick(idx)}
-                                        className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
-                                            isItemWrong ? "border-red-500 bg-red-500/20 text-red-100" :
-                                                "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:bg-blue-500/10"
+                                        className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-600 dark:border-green-500 bg-green-500/20 text-green-700 dark:text-green-400" :
+                                            isItemWrong ? "border-red-600 dark:border-red-500 bg-red-500/20 text-red-700 dark:text-red-100" :
+                                                "border-blue-600/30 dark:border-blue-500/30 bg-blue-600/5 dark:bg-blue-500/5 text-blue-700 dark:text-blue-400 hover:bg-blue-600/10 dark:hover:bg-blue-500/10"
                                             }`}
                                     >
                                         <span className="opacity-50 text-xs">{i + 1}.</span>
@@ -106,7 +106,7 @@ export default function OrderingPlayer({ id, title, items, allowRetry = true }:
                         {submitted && (
                             <button
                                 onClick={handleReset}
-                                className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl border-white/5"
+                                className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-2xl border-black/5 dark:border-white/5"
                             >
                                 Intentar de Nuevo
                             </button>
diff --git a/web/experience/src/components/blocks/QuizPlayer.tsx b/web/experience/src/components/blocks/QuizPlayer.tsx
index 810b8c1..b4e0c2b 100644
--- a/web/experience/src/components/blocks/QuizPlayer.tsx
+++ b/web/experience/src/components/blocks/QuizPlayer.tsx
@@ -64,11 +64,11 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
     return (
         <div className="space-y-8 notranslate" id={id} translate="no">
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Verificación de Conocimientos"}
                 </h3>
                 {maxAttempts > 0 && (
-                    <span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-white/5 border border-white/5 text-gray-500">
+                    <span className="text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 text-gray-500 dark:text-gray-400">
                         Intento {attempts} / {maxAttempts}
                     </span>
                 )}
@@ -76,8 +76,8 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
 
             <div className="space-y-8">
                 {questions.map((q) => (
-                    <fieldset key={q.id} className="space-y-4 p-8 glass border-white/5 rounded-3xl" aria-labelledby={`q-${q.id}-text`}>
-                        <legend id={`q-${q.id}-text`} className="font-bold text-xl text-gray-100 leading-tight mb-4">{q.question}</legend>
+                    <fieldset key={q.id} className="space-y-4 p-8 glass border-black/5 dark:border-white/5 rounded-3xl bg-black/[0.02] dark:bg-black/20" aria-labelledby={`q-${q.id}-text`}>
+                        <legend id={`q-${q.id}-text`} className="font-bold text-xl text-gray-900 dark:text-gray-100 leading-tight mb-4">{q.question}</legend>
                         <div
                             className="grid gap-3"
                             role={q.type === 'multiple-select' ? 'group' : 'radiogroup'}
@@ -90,14 +90,14 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
                                 const isWrongSelection = !isCorrect && isSelected;
                                 const missedCorrect = isCorrect && !isSelected;
 
-                                let style = "glass border-white/10 hover:bg-white/5";
+                                let style = "glass border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300";
                                 if (submitted) {
                                     if (isActuallyCorrect) style = "bg-green-500/20 border-green-500 text-green-400";
                                     else if (isWrongSelection) style = "bg-red-500/20 border-red-500 text-red-100";
                                     else if (missedCorrect) style = "border-orange-500/50 text-orange-400 animate-pulse";
                                     else style = "opacity-50 grayscale border-white/5";
                                 } else if (isSelected) {
-                                    style = "bg-blue-500/20 border-blue-500 text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]";
+                                    style = "bg-blue-600/10 dark:bg-blue-500/20 border-blue-600 dark:border-blue-500 text-blue-700 dark:text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]";
                                 }
 
                                 return (
@@ -145,7 +145,7 @@ export default function QuizPlayer({ id, title, quizData, allowRetry = true, max
                                     setUserAnswers({});
                                 }}
                                 disabled={maxAttempts > 0 && attempts >= maxAttempts}
-                                className={`w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5 ${maxAttempts > 0 && attempts >= maxAttempts ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                className={`w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5 ${maxAttempts > 0 && attempts >= maxAttempts ? 'opacity-50 cursor-not-allowed' : ''}`}
                             >
                                 {maxAttempts > 0 && attempts >= maxAttempts ? 'Máximo de Intentos Alcanzado' : 'Intentar de Nuevo'}
                             </button>
diff --git a/web/experience/src/components/blocks/ShortAnswerPlayer.tsx b/web/experience/src/components/blocks/ShortAnswerPlayer.tsx
index 542153d..28a9ed6 100644
--- a/web/experience/src/components/blocks/ShortAnswerPlayer.tsx
+++ b/web/experience/src/components/blocks/ShortAnswerPlayer.tsx
@@ -24,13 +24,13 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
     return (
         <div className="space-y-8" id={id}>
             <div className="space-y-2">
-                <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white uppercase tracking-widest text-[10px]">
+                <h3 className="text-xl font-bold border-l-4 border-blue-600 dark:border-blue-500 pl-4 py-1 tracking-tight text-gray-900 dark:text-white uppercase tracking-widest text-[10px]">
                     {title || "Respuesta Corta"}
                 </h3>
             </div>
 
-            <div className="p-8 glass border-white/5 rounded-3xl space-y-8">
-                <p className="text-xl font-bold text-gray-100">{prompt || "Por favor, introduce tu respuesta a continuación:"}</p>
+            <div className="p-8 glass border-black/5 dark:border-white/5 rounded-3xl space-y-8 bg-black/[0.02] dark:bg-black/20">
+                <p className="text-xl font-bold text-gray-800 dark:text-gray-100">{prompt || "Por favor, introduce tu respuesta a continuación:"}</p>
 
                 <div className="space-y-4">
                     <input
@@ -38,9 +38,9 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
                         value={userAnswer}
                         onChange={(e) => setUserAnswer(e.target.value)}
                         disabled={submitted}
-                        className={`w-full bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
-                            ? (isCorrect ? "border-green-500 bg-green-500/10 text-green-400" : "border-red-500 bg-red-500/10 text-red-100")
-                            : "border-white/10 focus:border-blue-500 text-white"
+                        className={`w-full bg-black/5 dark:bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
+                            ? (isCorrect ? "border-green-600 dark:border-green-500 bg-green-500/10 text-green-700 dark:text-green-400" : "border-red-600 dark:border-red-500 bg-red-500/10 text-red-700 dark:text-red-100")
+                            : "border-black/10 dark:border-white/10 focus:border-blue-600 dark:focus:border-blue-500 text-gray-900 dark:text-white"
                             }`}
                         placeholder="Escribe tu respuesta..."
                     />
@@ -68,7 +68,7 @@ export default function ShortAnswerPlayer({ id, title, prompt, correctAnswers, a
                         {submitted && (
                             <button
                                 onClick={handleReset}
-                                className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-3xl border-white/5"
+                                className="w-full py-5 glass text-blue-600 dark:text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-black/5 dark:hover:bg-white/5 transition-all rounded-3xl border-black/5 dark:border-white/5"
                             >
                                 Intentar de Nuevo
                             </button>
diff --git a/web/experience/src/context/ThemeContext.tsx b/web/experience/src/context/ThemeContext.tsx
index 6d8ed93..a4304fc 100644
--- a/web/experience/src/context/ThemeContext.tsx
+++ b/web/experience/src/context/ThemeContext.tsx
@@ -11,7 +11,7 @@ interface ThemeContextType {
 }
 
 const ThemeContext = createContext<ThemeContextType>({
-    theme: 'dark',
+    theme: 'light',
     toggleTheme: () => { },
     setTheme: () => { },
 });
@@ -19,7 +19,7 @@ const ThemeContext = createContext<ThemeContextType>({
 export const useTheme = () => useContext(ThemeContext);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [theme, setThemeState] = useState<Theme>('dark');
+    const [theme, setThemeState] = useState<Theme>('light');
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
diff --git a/web/studio/src/app/admin/layout.tsx b/web/studio/src/app/admin/layout.tsx
index 9f2a751..4fac686 100644
--- a/web/studio/src/app/admin/layout.tsx
+++ b/web/studio/src/app/admin/layout.tsx
@@ -25,9 +25,9 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     ];
 
     return (
-        <div className="flex min-h-screen bg-[#0f1115] text-white">
+        <div className="flex min-h-screen bg-transparent text-gray-900 dark:text-white transition-colors duration-300">
             {/* Sidebar */}
-            <aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
+            <aside className="w-64 border-r border-black/5 dark:border-white/5 bg-gray-50/50 dark:bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
                 <div className="flex items-center gap-3">
                     <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
                         <ShieldCheck className="text-white" size={24} />
@@ -44,8 +44,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                             key={item.href}
                             href={item.href}
                             className={`flex items-center gap-3 px-4 py-3 rounded-xl font-bold text-sm transition-all ${pathname === item.href
-                                    ? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
-                                    : "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
+                                ? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
+                                : "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
                                 }`}
                         >
                             <item.icon size={18} />
diff --git a/web/studio/src/app/admin/organizations/page.tsx b/web/studio/src/app/admin/organizations/page.tsx
index 6c580ee..9de4c6e 100644
--- a/web/studio/src/app/admin/organizations/page.tsx
+++ b/web/studio/src/app/admin/organizations/page.tsx
@@ -179,8 +179,8 @@ export default function OrganizationsPage() {
         <div className="space-y-6 md:space-y-8 animate-in fade-in duration-500 p-4 md:p-0">
             <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                 <div>
-                    <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Organizations</h1>
-                    <p className="text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
+                    <h1 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Organizations</h1>
+                    <p className="text-gray-600 dark:text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
                 </div>
                 <button
                     onClick={() => setIsModalOpen(true)}
@@ -202,7 +202,7 @@ export default function OrganizationsPage() {
                     {organizations.map((org) => (
                         <div
                             key={org.id}
-                            className="group relative p-6 rounded-xl glass border border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
+                            className="group relative p-6 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
                         >
                             <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                                 <Building2 className="w-16 h-16" />
@@ -217,7 +217,7 @@ export default function OrganizationsPage() {
                                     )}
                                 </div>
                                 <div>
-                                    <h3 className="font-semibold text-lg">{org.name}</h3>
+                                    <h3 className="font-semibold text-lg text-gray-900 dark:text-white">{org.name}</h3>
                                     <div className="flex items-center gap-1.5 text-sm text-gray-400">
                                         <Globe className="w-3 h-3" />
                                         {org.domain || 'No custom domain'}
@@ -231,7 +231,7 @@ export default function OrganizationsPage() {
                             </div>
 
                             <div className="space-y-3 mt-4">
-                                <div className="flex items-center justify-between text-xs text-gray-500 bg-black/20 p-2 rounded-lg">
+                                <div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-500 bg-black/5 dark:bg-black/20 p-2 rounded-lg">
                                     <div className="flex items-center gap-1">
                                         <Calendar className="w-3 h-3" />
                                         Created: {new Date(org.created_at).toLocaleDateString()}
@@ -253,7 +253,7 @@ export default function OrganizationsPage() {
                                     >
                                         <Fingerprint className="w-3 h-3" /> SSO
                                     </button>
-                                    <button className="py-2 px-2 text-[10px] font-medium border border-white/5 bg-white/5 hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-400">
+                                    <button className="py-2 px-2 text-[10px] font-medium border border-black/10 dark:border-white/5 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-600 dark:text-gray-400">
                                         Docs <ExternalLink className="w-3 h-3" />
                                     </button>
                                 </div>
@@ -266,8 +266,8 @@ export default function OrganizationsPage() {
             {/* Create Organization Modal */}
             {isModalOpen && (
                 <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
-                    <div className="w-full max-w-md glass border border-white/10 rounded-2xl p-8 shadow-2xl">
-                        <h2 className="text-xl font-bold mb-6">Create New Organization</h2>
+                    <div className="w-full max-w-md bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
+                        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Create New Organization</h2>
                         <form onSubmit={handleCreate} className="space-y-4">
                             <div>
                                 <label className="block text-sm font-medium text-gray-400 mb-1.5">Organization Name</label>
@@ -312,7 +312,7 @@ export default function OrganizationsPage() {
                                             required
                                             value={adminEmail}
                                             onChange={(e) => setAdminEmail(e.target.value)}
-                                            className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
+                                            className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-gray-900 dark:text-white"
                                             placeholder="admin@acme.com"
                                         />
                                     </div>
@@ -352,13 +352,13 @@ export default function OrganizationsPage() {
             {/* Branding Management Modal */}
             {isBrandingModalOpen && selectedOrg && (
                 <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
-                    <div className="w-full max-w-2xl glass border border-white/10 rounded-2xl p-8 shadow-2xl">
+                    <div className="w-full max-w-2xl bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
                         <div className="flex justify-between items-center mb-6">
                             <div>
-                                <h2 className="text-xl font-bold">Branding Management</h2>
-                                <p className="text-sm text-gray-400">{selectedOrg.name}</p>
+                                <h2 className="text-xl font-bold text-gray-900 dark:text-white">Branding Management</h2>
+                                <p className="text-sm text-gray-600 dark:text-gray-400">{selectedOrg.name}</p>
                             </div>
-                            <button onClick={() => setIsBrandingModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
+                            <button onClick={() => setIsBrandingModalOpen(false)} className="p-2 text-gray-500 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-colors">
                                 <X className="w-5 h-5" />
                             </button>
                         </div>
@@ -428,8 +428,8 @@ export default function OrganizationsPage() {
 
                             {/* Live Preview */}
                             <div className="space-y-4">
-                                <label className="block text-sm font-medium text-gray-400 mb-2">Experience Portal Preview</label>
-                                <div className="rounded-xl border border-white/10 overflow-hidden bg-slate-900 shadow-inner">
+                                <label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Experience Portal Preview</label>
+                                <div className="rounded-xl border border-black/10 dark:border-white/10 overflow-hidden bg-gray-50 dark:bg-slate-900 shadow-inner">
                                     {/* Mock Experience Header */}
                                     <div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
                                         <div className="flex items-center gap-2">
@@ -446,7 +446,7 @@ export default function OrganizationsPage() {
                                         </div>
                                     </div>
                                     {/* Mock Experience Content */}
-                                    <div className="p-4 space-y-3 bg-[#0a0c10]">
+                                    <div className="p-4 space-y-3 bg-gray-50 dark:bg-[#0a0c10]">
                                         <div className="w-2/3 h-4 bg-white/10 rounded mb-2" />
                                         <div className="w-full h-24 bg-white/5 rounded-lg border border-white/5 p-3">
                                             <div className="w-1/3 h-3 rounded mb-2" style={{ backgroundColor: secondaryColor }} />
diff --git a/web/studio/src/app/auth/callback/page.tsx b/web/studio/src/app/auth/callback/page.tsx
index 99ce060..7d17d7f 100644
--- a/web/studio/src/app/auth/callback/page.tsx
+++ b/web/studio/src/app/auth/callback/page.tsx
@@ -35,17 +35,17 @@ function CallbackHandler() {
     return (
         <div className="flex flex-col items-center gap-4">
             <Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
-            <h2 className="text-xl font-bold text-white text-center">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white text-center">
                 Completing your sign in...
             </h2>
-            <p className="text-gray-400">Please wait a moment.</p>
+            <p className="text-gray-500 dark:text-gray-400">Please wait a moment.</p>
         </div>
     );
 }
 
 export default function AuthCallbackPage() {
     return (
-        <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+        <div className="min-h-screen bg-transparent flex items-center justify-center p-4">
             <Suspense fallback={
                 <div className="flex flex-col items-center gap-4">
                     <Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
diff --git a/web/studio/src/app/courses/[id]/analytics/advanced/page.tsx b/web/studio/src/app/courses/[id]/analytics/advanced/page.tsx
index dbc7700..f9dc217 100644
--- a/web/studio/src/app/courses/[id]/analytics/advanced/page.tsx
+++ b/web/studio/src/app/courses/[id]/analytics/advanced/page.tsx
@@ -50,27 +50,27 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
     }, [id, user]);
 
     if (loading) return (
-        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
         </div>
     );
 
     if (error || !course || !analytics) return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-20 text-center flex flex-col items-center justify-center gap-6">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center flex flex-col items-center justify-center gap-6">
             <div className="text-gray-400">{error || "Data unavailable"}</div>
             <button onClick={() => router.back()} className="btn-premium px-8">Go Back</button>
         </div>
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
                     <div className="flex items-center gap-4">
                         <button
                             onClick={() => router.push(`/courses/${id}/analytics`)}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                            className="p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors"
                         >
                             <ArrowLeft className="w-6 h-6" />
                         </button>
@@ -78,7 +78,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                             <h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
                                 Advanced Insights
                             </h1>
-                            <p className="text-gray-400 mt-1">Cohort analysis and student retention for {course.title}</p>
+                            <p className="text-gray-600 dark:text-gray-400 mt-1">Cohort analysis and student retention for {course.title}</p>
                         </div>
                     </div>
                 </div>
@@ -92,28 +92,28 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                                     <Layers className="text-purple-500" />
                                     Cohort Completion
                                 </h2>
-                                <div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest bg-white/5 px-4 py-2 rounded-xl">
+                                <div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest bg-black/5 dark:bg-white/5 px-4 py-2 rounded-xl">
                                     <Filter size={14} /> Grouped by Month
                                 </div>
                             </div>
 
-                            <div className="overflow-hidden rounded-3xl border border-white/10 bg-white/[0.02]">
+                            <div className="overflow-hidden rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02]">
                                 <table className="w-full text-left border-collapse">
                                     <thead>
-                                        <tr className="bg-white/5">
+                                        <tr className="bg-black/5 dark:bg-white/5">
                                             <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Cohort (Enrollment Month)</th>
                                             <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Students</th>
                                             <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Completion Rate</th>
                                             <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Engagement Status</th>
                                         </tr>
                                     </thead>
-                                    <tbody className="divide-y divide-white/5">
+                                    <tbody className="divide-y divide-black/5 dark:divide-white/5">
                                         {analytics.cohorts.length === 0 ? (
                                             <tr>
                                                 <td colSpan={4} className="p-12 text-center text-gray-600 italic">No cohort data available yet.</td>
                                             </tr>
                                         ) : analytics.cohorts.map((cohort) => (
-                                            <tr key={cohort.period} className="hover:bg-white/[0.02] transition-colors">
+                                            <tr key={cohort.period} className="hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                                                 <td className="p-6 font-bold flex items-center gap-3">
                                                     <Calendar size={16} className="text-purple-400" />
                                                     {cohort.period}
@@ -161,17 +161,17 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                                         <div key={item.lesson_id} className="group relative">
                                             <div className="flex items-center justify-between mb-2">
                                                 <div className="flex items-center gap-4">
-                                                    <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-[10px] font-black text-gray-500">
+                                                    <div className="w-8 h-8 rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center text-[10px] font-black text-gray-500">
                                                         {index + 1}
                                                     </div>
-                                                    <span className="font-bold text-gray-300">{item.lesson_title}</span>
+                                                    <span className="font-bold text-gray-900 dark:text-gray-300">{item.lesson_title}</span>
                                                 </div>
                                                 <div className="text-right">
-                                                    <div className="text-sm font-black text-white">{item.student_count} Students</div>
+                                                    <div className="text-sm font-black text-gray-900 dark:text-white">{item.student_count} Students</div>
                                                     <div className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">{Math.round(percentage)}% Retention</div>
                                                 </div>
                                             </div>
-                                            <div className="h-4 w-full bg-white/5 rounded-lg overflow-hidden border border-white/5">
+                                            <div className="h-4 w-full bg-black/5 dark:bg-white/5 rounded-lg overflow-hidden border border-black/5 dark:border-white/5">
                                                 <div
                                                     className={`h-full transition-all duration-1000 ${percentage > 80 ? 'bg-indigo-500' :
                                                         percentage > 50 ? 'bg-indigo-600/70' :
@@ -199,7 +199,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                                     Engagement Heatmap
                                 </h2>
                                 <select
-                                    className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
+                                    className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
                                     onChange={(e) => {
                                         const lessonId = e.target.value;
                                         if (lessonId) {
@@ -220,7 +220,7 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                             </div>
 
                             {heatmapData.length > 0 ? (
-                                <div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
+                                <div className="p-8 rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] space-y-8">
                                     <p className="text-sm text-gray-500 uppercase font-black tracking-widest">
                                         Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
                                     </p>
@@ -242,14 +242,14 @@ export default function AdvancedAnalyticsPage({ params }: { params: { id: string
                                                     className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
                                                     style={{ height: `${(count / maxCount) * 100}%` }}
                                                 >
-                                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
+                                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none transition-opacity">
                                                         {Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
                                                     </div>
                                                 </div>
                                             ));
                                         })()}
                                     </div>
-                                    <div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
+                                    <div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-black/5 dark:border-white/5">
                                         <span>0:00 Start</span>
                                         <span>Video Timeline</span>
                                         <span>End</span>
diff --git a/web/studio/src/app/courses/[id]/analytics/page.tsx b/web/studio/src/app/courses/[id]/analytics/page.tsx
index 86785d2..7028a0a 100644
--- a/web/studio/src/app/courses/[id]/analytics/page.tsx
+++ b/web/studio/src/app/courses/[id]/analytics/page.tsx
@@ -67,24 +67,24 @@ export default function AnalyticsPage() {
     }, [id, user, router, selectedCohortId]);
 
     if (loading) return (
-        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
         </div>
     );
 
     if (authError) return (
-        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-20 text-center gap-6">
+        <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">
                 <AlertTriangle size={40} />
             </div>
             <h2 className="text-2xl font-bold">Access Denied</h2>
-            <p className="text-gray-400 max-w-md">{authError}</p>
+            <p className="text-gray-600 dark:text-gray-400 max-w-md">{authError}</p>
             <button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button>
         </div>
     );
 
     if (!course || !analytics) return (
-        <div className="min-h-screen bg-gray-900 text-white p-20 text-center">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center">
             Course not found or analytics unavailable.
         </div>
     );
@@ -94,7 +94,7 @@ export default function AnalyticsPage() {
         .sort((a, b) => a.average_score - b.average_score);
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
@@ -109,14 +109,14 @@ export default function AnalyticsPage() {
                             <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
                                 Course Analytics
                             </h1>
-                            <p className="text-gray-400 mt-1">Performance insights and student progress for {course?.title}</p>
+                            <p className="text-gray-600 dark:text-gray-400 mt-1">Performance insights and student progress for {course?.title}</p>
                         </div>
                     </div>
                     <div className="flex items-center gap-4">
                         <select
                             value={selectedCohortId}
                             onChange={(e) => setSelectedCohortId(e.target.value)}
-                            className="bg-white/5 text-white border border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                            className="bg-black/5 dark:bg-white/5 text-gray-900 dark:text-white border border-black/10 dark:border-white/10 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
                         >
                             <option value="">All Students</option>
                             {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -139,19 +139,19 @@ export default function AnalyticsPage() {
                         <div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
                             <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-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
                             >
                                 <BarChart3 size={16} /> 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-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? 'bg-red-600 text-gray-900 dark:text-white shadow-lg shadow-red-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
                             >
                                 <ShieldAlert size={16} /> 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-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? 'bg-blue-600 text-gray-900 dark:text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-gray-900 dark:text-white hover:bg-white/5'}`}
                             >
                                 <Video size={16} /> Live Sessions
                             </button>
@@ -204,7 +204,7 @@ export default function AnalyticsPage() {
                                         </h2>
                                         <div className="space-y-4">
                                             {analytics.lessons.map((lesson) => (
-                                                <div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
+                                                <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 className="flex items-start justify-between mb-4">
                                                         <div>
                                                             <h3 className="font-bold">{lesson.lesson_title}</h3>
diff --git a/web/studio/src/app/courses/[id]/analytics/reports/page.tsx b/web/studio/src/app/courses/[id]/analytics/reports/page.tsx
index 40ee519..a13a0a6 100644
--- a/web/studio/src/app/courses/[id]/analytics/reports/page.tsx
+++ b/web/studio/src/app/courses/[id]/analytics/reports/page.tsx
@@ -65,7 +65,7 @@ export default function ReportsPage() {
     };
 
     if (loading) return (
-        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
         </div>
     );
@@ -73,13 +73,13 @@ export default function ReportsPage() {
     if (!course || !analytics) return <div className="p-20 text-center text-red-400">Error caricamento dati.</div>;
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 <div className="flex items-center justify-between mb-12">
                     <div className="flex items-center gap-4">
                         <button
                             onClick={() => router.push(`/courses/${id}/analytics`)}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                            className="p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors"
                         >
                             <ArrowLeft className="w-6 h-6" />
                         </button>
@@ -87,7 +87,7 @@ export default function ReportsPage() {
                             <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
                                 Custom Report Builder
                             </h1>
-                            <p className="text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
+                            <p className="text-gray-600 dark:text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
                         </div>
                     </div>
 
@@ -103,11 +103,11 @@ export default function ReportsPage() {
                 <CourseEditorLayout activeTab="analytics">
                     <div className="p-8 space-y-12">
                         {/* Filters */}
-                        <div className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/5">
+                        <div className="flex items-center gap-4 bg-black/5 dark:bg-white/5 p-4 rounded-2xl border border-black/5 dark:border-white/5">
                             <Filter size={18} className="text-gray-500 ml-2" />
                             <span className="text-xs font-black uppercase tracking-widest text-gray-500">Filter by Cohort:</span>
                             <select
-                                className="bg-transparent text-sm font-bold text-white focus:outline-none"
+                                className="bg-transparent text-sm font-bold text-gray-900 dark:text-white focus:outline-none"
                                 value={filter}
                                 onChange={(e) => setFilter(e.target.value)}
                             >
@@ -119,20 +119,20 @@ export default function ReportsPage() {
                         </div>
 
                         {/* Report Table */}
-                        <div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
+                        <div className="rounded-3xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] overflow-hidden">
                             <table className="w-full text-left border-collapse">
                                 <thead>
-                                    <tr className="bg-white/5">
+                                    <tr className="bg-black/5 dark:bg-white/5">
                                         <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Lección</th>
                                         <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Completado por</th>
                                         <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Puntaje Promedio</th>
                                         <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Tendencia</th>
                                     </tr>
                                 </thead>
-                                <tbody className="divide-y divide-white/5">
+                                <tbody className="divide-y divide-black/5 dark:divide-white/5">
                                     {analytics.lessons.map((lesson) => (
                                         <tr key={lesson.lesson_id} className="hover:bg-white/[0.02] transition-colors">
-                                            <td className="p-6 font-bold text-gray-300">{lesson.lesson_title}</td>
+                                            <td className="p-6 font-bold text-gray-900 dark:text-gray-300">{lesson.lesson_title}</td>
                                             <td className="p-6">
                                                 <div className="flex items-center gap-2">
                                                     <Users size={14} className="text-blue-400" />
@@ -142,7 +142,7 @@ export default function ReportsPage() {
                                             </td>
                                             <td className="p-6">
                                                 <div className="flex items-center gap-4">
-                                                    <div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[100px]">
+                                                    <div className="flex-1 h-2 bg-black/5 dark:bg-white/5 rounded-full overflow-hidden min-w-[100px]">
                                                         <div
                                                             className="h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
                                                             style={{ width: `${lesson.average_score * 100}%` }}
diff --git a/web/studio/src/app/courses/[id]/announcements/page.tsx b/web/studio/src/app/courses/[id]/announcements/page.tsx
index c087ec2..94a77c6 100644
--- a/web/studio/src/app/courses/[id]/announcements/page.tsx
+++ b/web/studio/src/app/courses/[id]/announcements/page.tsx
@@ -54,7 +54,7 @@ export default function AnnouncementsPage() {
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-5xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-8">
@@ -109,7 +109,7 @@ export default function AnnouncementsPage() {
                                     <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 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-white font-bold overflow-hidden">
+                                                <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">
                                                     {a.author_avatar ? (
                                                         <img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
                                                     ) : (
@@ -117,7 +117,7 @@ export default function AnnouncementsPage() {
                                                     )}
                                                 </div>
                                                 <div>
-                                                    <h4 className="font-semibold text-white">{a.author_name}</h4>
+                                                    <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">
                                                         <span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
                                                         {a.cohort_ids && a.cohort_ids.length > 0 && (
@@ -142,7 +142,7 @@ export default function AnnouncementsPage() {
                                                 </button>
                                             </div>
                                         </div>
-                                        <h3 className="text-xl font-bold text-white mb-2">{a.title}</h3>
+                                        <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>
 
                                         {/* Display Target Cohort Names if segmented */}
@@ -164,7 +164,7 @@ export default function AnnouncementsPage() {
                         ) : (
                             <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-white mb-2">No announcements found</h3>
+                                <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>
                         )}
@@ -228,7 +228,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
                         <Megaphone className="w-5 h-5 text-orange-500" />
                         Create New Announcement
                     </h2>
-                    <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors">
+                    <button onClick={onClose} className="text-gray-500 hover:text-gray-900 dark:text-white transition-colors">
                         <Plus className="w-6 h-6 rotate-45" />
                     </button>
                 </div>
@@ -267,7 +267,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-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-gray-900 dark:text-white' : 'bg-white/5 border-white/10 text-gray-400 hover:bg-white/10'}`}
                                 >
                                     {c.name}
                                 </button>
@@ -295,7 +295,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-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-gray-900 dark: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 041a59a..5e53c91 100644
--- a/web/studio/src/app/courses/[id]/calendar/page.tsx
+++ b/web/studio/src/app/courses/[id]/calendar/page.tsx
@@ -89,7 +89,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
     const prevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
 
     if (loading) return (
-        <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
         </div>
     );
@@ -98,7 +98,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
     const year = currentDate.getFullYear();
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-6xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
diff --git a/web/studio/src/app/courses/[id]/files/page.tsx b/web/studio/src/app/courses/[id]/files/page.tsx
index 3011744..47e02c5 100644
--- a/web/studio/src/app/courses/[id]/files/page.tsx
+++ b/web/studio/src/app/courses/[id]/files/page.tsx
@@ -128,7 +128,7 @@ export default function CourseFilesPage() {
                                             <div className="flex items-center gap-3">
                                                 {getIcon(asset.mimetype)}
                                                 <div>
-                                                    <div className="font-medium text-white">{asset.filename}</div>
+                                                    <div className="font-medium text-gray-900 dark:text-white">{asset.filename}</div>
                                                     <div className="text-xs text-blue-400">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
                                                 </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 b1e7b99..4fa728c 100644
--- a/web/studio/src/app/courses/[id]/grades/page.tsx
+++ b/web/studio/src/app/courses/[id]/grades/page.tsx
@@ -136,13 +136,13 @@ export default function GradebookPage() {
     };
 
     if (loading && students.length === 0) return (
-        <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
         </div>
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
@@ -207,7 +207,7 @@ export default function GradebookPage() {
                                                 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-white placeholder-gray-600 resize-none font-mono"
+                                                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"
                                             />
                                         </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">
@@ -289,7 +289,7 @@ export default function GradebookPage() {
                                     <select
                                         value={selectedCohortId}
                                         onChange={(e) => setSelectedCohortId(e.target.value)}
-                                        className="appearance-none bg-black/20 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-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]"
                                     >
                                         <option value="">All Cohorts</option>
                                         {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -305,7 +305,7 @@ 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-white placeholder-gray-600"
+                                        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"
                                     />
                                 </div>
                             </div>
@@ -345,11 +345,11 @@ export default function GradebookPage() {
                                         <tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
                                             <td className="p-6">
                                                 <div className="flex items-center gap-4">
-                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm">
+                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
                                                         {s.full_name.charAt(0)}
                                                     </div>
                                                     <div>
-                                                        <div className="font-bold text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
+                                                        <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
                                                         <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
                                                             <Mail size={10} /> {s.email}
                                                         </div>
diff --git a/web/studio/src/app/courses/[id]/grading/page.tsx b/web/studio/src/app/courses/[id]/grading/page.tsx
index abac77b..2e3596e 100644
--- a/web/studio/src/app/courses/[id]/grading/page.tsx
+++ b/web/studio/src/app/courses/[id]/grading/page.tsx
@@ -74,13 +74,13 @@ export default function GradingPolicyPage() {
     const isBalanced = totalWeight === 100;
 
     if (loading) return (
-        <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
         </div>
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-4xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
@@ -145,7 +145,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-white transition-all duration-300"
+                                                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"
                                             >
                                                 <Trash2 className="w-5 h-5" />
                                             </button>
@@ -169,11 +169,11 @@ export default function GradingPolicyPage() {
                                                 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"
                                             >
-                                                <option value="" className="bg-gray-900 text-gray-500">Select a type...</option>
-                                                <option value="Continuous Assessment" className="bg-gray-900">Continuous Assessment (Min 4)</option>
-                                                <option value="Midterm" className="bg-gray-900">Midterm</option>
-                                                <option value="Final Test" className="bg-gray-900">Final Test</option>
-                                                <option value="Exam" className="bg-gray-900">Exam</option>
+                                                <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>
                                             </select>
                                         </div>
 
@@ -194,7 +194,7 @@ export default function GradingPolicyPage() {
                                         <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-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-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"
                                         >
                                             {submitting ? "Adding..." : (
                                                 <>
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 40c7ee7..cda341f 100644
--- a/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+++ b/web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
@@ -369,7 +369,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
             <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="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-white transition-colors">Outline</Link>
+                        <Link href={`/courses/${params.id}`} className="hover:text-gray-900 dark:text-white transition-colors">Outline</Link>
                         <span className="text-gray-700">/</span>
                         <span>Activity</span>
                     </div>
@@ -391,7 +391,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 <h2 className="text-4xl font-black tracking-tight">{lesson.title}</h2>
                                 <button
                                     onClick={() => { setEditingId('lesson-title'); setEditValue(lesson.title); }}
-                                    className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-white transition-opacity"
+                                    className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
                                 >
                                     <Pencil className="w-5 h-5" />
                                 </button>
@@ -540,7 +540,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                             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-white transition-colors">Allow Instant Corrections</span>
+                                        <span className="text-sm font-bold text-gray-400 peer-checked:text-gray-900 dark: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>
                                 </div>
@@ -769,7 +769,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                 <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-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-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"
                                     title="Move Up"
                                 >
                                     <ChevronUp className="w-5 h-5" />
@@ -777,7 +777,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-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-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"
                                     title="Move Down"
                                 >
                                     <ChevronDown className="w-5 h-5" />
@@ -785,14 +785,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-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-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"
                                     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-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-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"
                                     title="Remove Block"
                                 >
                                     <Trash2 className="w-5 h-5" />
@@ -1079,7 +1079,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                             value={aiQuizContext}
                             onChange={(e) => setAiQuizContext(e.target.value)}
                             placeholder="e.g. Focus on past tense verbs, or use vocabulary related to travel..."
-                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white h-24 resize-none"
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white h-24 resize-none"
                             disabled={isGeneratingQuiz}
                         />
                     </div>
@@ -1091,7 +1091,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                         <select
                             value={aiQuizType}
                             onChange={(e) => setAiQuizType(e.target.value)}
-                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-white appearance-none font-bold"
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white appearance-none font-bold"
                             disabled={isGeneratingQuiz}
                         >
                             <option value="multiple-choice">Multiple Choice</option>
@@ -1113,7 +1113,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                         <button
                             type="submit"
                             disabled={isGeneratingQuiz}
-                            className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
+                            className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-gray-900 dark:text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
                         >
                             {isGeneratingQuiz ? (
                                 <>
diff --git a/web/studio/src/app/courses/[id]/page.tsx b/web/studio/src/app/courses/[id]/page.tsx
index f203468..f4b4fd4 100644
--- a/web/studio/src/app/courses/[id]/page.tsx
+++ b/web/studio/src/app/courses/[id]/page.tsx
@@ -222,24 +222,24 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
     if (error) return <div className="py-20 text-center text-red-400">{error}</div>;
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
             <div className="max-w-6xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
                     <div className="flex items-center gap-4">
                         <button
                             onClick={() => router.push('/')}
-                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                            className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-gray-700 dark:text-gray-300"
                         >
                             <ArrowLeft className="w-6 h-6" />
                         </button>
                         <div>
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
+                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
                                 Course Editor
                             </h1>
                             <div className="flex items-center gap-3 mt-1">
-                                <p className="text-gray-400">Design your course structure and lesson content for {course?.title}</p>
-                                <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/20 text-purple-400' : 'bg-green-500/20 text-green-400'}`}>
+                                <p className="text-gray-600 dark:text-gray-400">Design your course structure and lesson content for {course?.title}</p>
+                                <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400' : 'bg-green-500/10 dark:bg-green-500/20 text-green-600 dark:text-green-400'}`}>
                                     {course?.pacing_mode?.replace('_', ' ') || 'Self Paced'}
                                 </span>
                             </div>
@@ -307,7 +307,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/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-white focus:outline-none"
+                                                    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"
                                                 />
                                                 <button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
                                                     <Save className="w-5 h-5" />
@@ -320,13 +320,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-400 cursor-pointer hover:text-blue-300 transition-colors"
+                                                    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"
                                                 >
                                                     {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-white transition-opacity"
+                                                    className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
                                                 >
                                                     <Pencil className="w-4 h-4" />
                                                 </button>
@@ -364,38 +364,38 @@ 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">
+                                                    <div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
                                                         <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-white focus:outline-none"
+                                                            className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
                                                         />
-                                                        <button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-400">
+                                                        <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-400">
+                                                        <button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
                                                             <X className="w-4 h-4" />
                                                         </button>
                                                     </div>
                                                 ) : (
-                                                    <div className="flex items-center justify-between glass border-white/5 p-4 rounded-xl hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
+                                                    <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">
                                                         <Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
-                                                            <div className="p-2 bg-blue-500/20 rounded-lg text-blue-400 group-hover/lesson:scale-110 transition-transform">
+                                                            <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">
                                                                 {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 hover:text-blue-400 transition-colors"
+                                                                    className="font-medium text-gray-900 dark:text-gray-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-[10px] text-gray-500 uppercase mt-0.5 font-semibold">
                                                                     <span>{lesson.content_type}</span>
                                                                     {lesson.due_date && (
-                                                                        <div className="flex items-center gap-1 text-orange-400">
+                                                                        <div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
                                                                             <Calendar className="w-3 h-3" />
                                                                             {new Date(lesson.due_date).toLocaleDateString()}
                                                                         </div>
@@ -406,7 +406,7 @@ 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-white transition-opacity"
+                                                                className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
                                                             >
                                                                 <Pencil className="w-4 h-4" />
                                                             </button>
@@ -425,7 +425,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
 
                                     <button
                                         onClick={() => handleAddLesson(module.id)}
-                                        className="w-full py-3 border border-dashed border-white/10 rounded-xl text-sm text-gray-500 hover:text-white hover:border-white/20 hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
+                                        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"
                                     >
                                         <Plus className="w-4 h-4" /> New Lesson
                                     </button>
@@ -435,7 +435,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
 
                         <button
                             onClick={handleAddModule}
-                            className="w-full py-6 border-2 border-dashed border-white/10 rounded-2xl font-medium text-gray-500 hover:text-white hover:border-white/20 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-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"
                         >
                             <Plus className="w-6 h-6" /> Add New Module
                         </button>
diff --git a/web/studio/src/app/courses/[id]/peer-reviews/page.tsx b/web/studio/src/app/courses/[id]/peer-reviews/page.tsx
index 51e0b36..93e5d9c 100644
--- a/web/studio/src/app/courses/[id]/peer-reviews/page.tsx
+++ b/web/studio/src/app/courses/[id]/peer-reviews/page.tsx
@@ -104,14 +104,14 @@ export default function PeerReviewDashboard() {
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+            <div className="min-h-screen bg-transparent flex items-center justify-center">
                 <Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
             </div>
         );
     }
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 <div className="flex items-center justify-between mb-8">
                     <div className="flex items-center gap-4">
@@ -204,14 +204,14 @@ export default function PeerReviewDashboard() {
                                                                 {sub.full_name.charAt(0)}
                                                             </div>
                                                             <div>
-                                                                <div className="font-bold text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
+                                                                <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
                                                                 <div className="text-xs text-gray-500">{sub.email}</div>
                                                             </div>
                                                         </div>
 
                                                         <div className="flex items-center gap-8">
                                                             <div className="text-right">
-                                                                <div className="text-sm font-black text-white flex items-center gap-1.5 justify-end">
+                                                                <div className="text-sm font-black text-gray-900 dark:text-white flex items-center gap-1.5 justify-end">
                                                                     <Award className="w-4 h-4 text-yellow-400" />
                                                                     {sub.average_score !== null ? `${(sub.average_score).toFixed(1)}/10` : '—'}
                                                                 </div>
diff --git a/web/studio/src/app/courses/[id]/rubrics/page.tsx b/web/studio/src/app/courses/[id]/rubrics/page.tsx
index 7014638..82b413a 100644
--- a/web/studio/src/app/courses/[id]/rubrics/page.tsx
+++ b/web/studio/src/app/courses/[id]/rubrics/page.tsx
@@ -13,7 +13,7 @@ export default function RubricsPage() {
     const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
diff --git a/web/studio/src/app/courses/[id]/sessions/page.tsx b/web/studio/src/app/courses/[id]/sessions/page.tsx
index d520ebe..5a4ee12 100644
--- a/web/studio/src/app/courses/[id]/sessions/page.tsx
+++ b/web/studio/src/app/courses/[id]/sessions/page.tsx
@@ -74,14 +74,14 @@ export default function LiveSessionsPage() {
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+            <div className="min-h-screen bg-transparent flex items-center justify-center">
                 <Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
             </div>
         );
     }
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 <div className="flex items-center justify-between mb-8">
                     <div className="flex items-center gap-4">
@@ -219,7 +219,7 @@ export default function LiveSessionsPage() {
                                         type="datetime-local"
                                         value={newMeeting.start_at}
                                         onChange={(e) => setNewMeeting({ ...newMeeting, start_at: e.target.value })}
-                                        className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-white"
+                                        className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white"
                                     />
                                 </div>
                                 <div className="space-y-2">
diff --git a/web/studio/src/app/courses/[id]/settings/page.tsx b/web/studio/src/app/courses/[id]/settings/page.tsx
index d4c5a35..a7a45ee 100644
--- a/web/studio/src/app/courses/[id]/settings/page.tsx
+++ b/web/studio/src/app/courses/[id]/settings/page.tsx
@@ -124,19 +124,19 @@ export default function CourseSettingsPage() {
     };
 
     if (loading) return (
-        <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
         </div>
     );
 
     if (!course) return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-20 text-center">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-20 text-center">
             Course not found.
         </div>
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-5xl mx-auto">
                 {/* Header */}
                 <div className="flex items-center justify-between mb-12">
@@ -317,7 +317,7 @@ 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-white focus:outline-none focus:border-blue-500 transition-colors"
+                                            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"
                                             placeholder="0.00"
                                         />
                                         <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold">
@@ -332,7 +332,7 @@ export default function CourseSettingsPage() {
                                     <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-white focus:outline-none focus:border-blue-500 transition-colors appearance-none"
+                                        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"
                                     >
                                         <option value="USD">USD - US Dollar</option>
                                         <option value="CLP">CLP - Chilean Peso</option>
diff --git a/web/studio/src/app/courses/[id]/students/page.tsx b/web/studio/src/app/courses/[id]/students/page.tsx
index 02fe18e..4425379 100644
--- a/web/studio/src/app/courses/[id]/students/page.tsx
+++ b/web/studio/src/app/courses/[id]/students/page.tsx
@@ -109,14 +109,14 @@ export default function CourseStudentsPage() {
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
+            <div className="min-h-screen bg-transparent flex items-center justify-center">
                 <Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
             </div>
         );
     }
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white p-8">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
             <div className="max-w-7xl mx-auto">
                 <div className="flex items-center justify-between mb-8">
                     <div className="flex items-center gap-4">
@@ -156,7 +156,7 @@ export default function CourseStudentsPage() {
                             <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-white min-w-[150px]"
+                                    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]"
                                     value={selectedCohortId}
                                     onChange={(e) => setSelectedCohortId(e.target.value)}
                                 >
@@ -189,7 +189,7 @@ export default function CourseStudentsPage() {
                                                         {student.full_name.charAt(0)}
                                                     </div>
                                                     <div>
-                                                        <div className="font-bold text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
+                                                        <div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
                                                         <div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
                                                     </div>
                                                 </div>
@@ -276,7 +276,7 @@ export default function CourseStudentsPage() {
                                             </div>
                                             <button
                                                 onClick={() => handleEnroll([user.email])}
-                                                className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition-all"
+                                                className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
                                             >
                                                 Enroll Now
                                             </button>
diff --git a/web/studio/src/app/globals.css b/web/studio/src/app/globals.css
index 6f4b70c..6c2429a 100644
--- a/web/studio/src/app/globals.css
+++ b/web/studio/src/app/globals.css
@@ -3,19 +3,26 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 229, 231, 235;
-  /* text-gray-200 */
-  --background-start-rgb: 15, 17, 21;
-  /* #0f1115 */
-  --background-end-rgb: 0, 0, 0;
+  --background: 249, 250, 251;
+  --foreground: 17, 24, 39;
+  /* gray-900 */
 
   --accent-primary: #3b82f6;
-  /* blue-500 */
   --accent-secondary: #6366f1;
-  /* indigo-500 */
+
+  --glass-bg: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --glass-blur: blur(16px);
+}
+
+.dark {
+  --background: 3, 7, 18;
+  /* gray-950 */
+  --foreground: 229, 231, 235;
+  /* gray-200 */
+
   --glass-bg: rgba(255, 255, 255, 0.05);
   --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-blur: blur(16px);
 }
 
 /* Ensure focus states are visible for keyboard navigation */
@@ -25,8 +32,8 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: var(--background-start-rgb);
+  color: rgb(var(--foreground));
+  background: rgb(var(--background));
 }
 
 .glass {
diff --git a/web/studio/src/app/layout.tsx b/web/studio/src/app/layout.tsx
index c8f1765..59ddb44 100644
--- a/web/studio/src/app/layout.tsx
+++ b/web/studio/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-200 min-h-screen flex flex-col transition-colors duration-300`}>
+      <body className={`${inter.className} min-h-screen flex flex-col transition-colors duration-300`}>
         <ThemeProvider>
           <AuthProvider>
             <I18nProvider>
diff --git a/web/studio/src/app/library/assets/page.tsx b/web/studio/src/app/library/assets/page.tsx
index bea9c1d..01287d5 100644
--- a/web/studio/src/app/library/assets/page.tsx
+++ b/web/studio/src/app/library/assets/page.tsx
@@ -86,7 +86,7 @@ export default function AssetLibraryPage() {
     };
 
     return (
-        <div className="min-h-screen bg-black text-white pt-24 pb-12 px-6">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white pt-24 pb-12 px-6 transition-colors duration-300">
             <div className="max-w-7xl mx-auto space-y-8">
                 {/* Header */}
                 <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
@@ -98,7 +98,7 @@ export default function AssetLibraryPage() {
                         <h1 className="text-4xl font-black tracking-tight flex items-center gap-4">
                             Global <span className="gradient-text">Asset Library</span>
                         </h1>
-                        <p className="text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
+                        <p className="text-gray-600 dark:text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
                     </div>
 
                     <div className="flex gap-3">
@@ -118,7 +118,7 @@ export default function AssetLibraryPage() {
 
                 {/* Upload Progress Bar */}
                 {isUploading && (
-                    <div className="w-full bg-white/5 rounded-2xl border border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
+                    <div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
                         <div className="flex justify-between items-center mb-2">
                             <span className="text-xs font-black uppercase tracking-widest text-blue-400">Uploading Assets...</span>
                             <span className="text-xs font-bold text-white">{uploadProgress}%</span>
@@ -141,7 +141,7 @@ export default function AssetLibraryPage() {
                             placeholder="Search by filename..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
-                            className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-medium focus:outline-none focus:border-blue-500/50 focus:bg-white/10 transition-all"
+                            className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-medium focus:outline-none focus:border-blue-500/50 focus:bg-black/10 dark:focus:bg-white/10 transition-all text-gray-900 dark:text-white"
                         />
                     </div>
 
@@ -150,12 +150,12 @@ export default function AssetLibraryPage() {
                         <select
                             value={filterType}
                             onChange={(e) => setFilterType(e.target.value)}
-                            className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-bold uppercase tracking-widest focus:outline-none focus:border-blue-500/50 appearance-none cursor-pointer hover:bg-white/10 transition-all"
+                            className="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-bold uppercase tracking-widest focus:outline-none focus:border-blue-500/50 appearance-none cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 transition-all text-gray-900 dark:text-white"
                         >
-                            <option value="all" className="bg-gray-900">All Types</option>
-                            <option value="image/" className="bg-gray-900">Images</option>
-                            <option value="video/" className="bg-gray-900">Videos</option>
-                            <option value="application/pdf" className="bg-gray-900">Documents (PDF)</option>
+                            <option value="all" className="bg-white dark:bg-gray-900">All Types</option>
+                            <option value="image/" className="bg-white dark:bg-gray-900">Images</option>
+                            <option value="video/" className="bg-white dark:bg-gray-900">Videos</option>
+                            <option value="application/pdf" className="bg-white dark:bg-gray-900">Documents (PDF)</option>
                         </select>
                     </div>
 
@@ -171,8 +171,8 @@ export default function AssetLibraryPage() {
                         <span className="text-[10px] uppercase font-black tracking-[0.3em] text-gray-500">Retrieving Cloud Assets...</span>
                     </div>
                 ) : assets.length === 0 ? (
-                    <div className="py-40 flex flex-col items-center gap-6 border-2 border-dashed border-white/5 rounded-[40px] bg-white/[0.02]">
-                        <div className="p-8 bg-white/5 rounded-[32px] border border-white/5">
+                    <div className="py-40 flex flex-col items-center gap-6 border-2 border-dashed border-black/10 dark:border-white/5 rounded-[40px] bg-black/[0.02] dark:bg-white/[0.02]">
+                        <div className="p-8 bg-black/5 dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/5">
                             <Plus className="w-12 h-12 text-gray-700" />
                         </div>
                         <div className="text-center space-y-2">
@@ -185,7 +185,7 @@ export default function AssetLibraryPage() {
                         {assets.map((asset) => (
                             <div
                                 key={asset.id}
-                                className="group bg-white/5 border border-white/5 rounded-[32px] overflow-hidden hover:bg-white/10 hover:border-white/10 transition-all duration-300 hover:-translate-y-1 relative"
+                                className="group bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 rounded-[32px] overflow-hidden hover:bg-black/10 dark:hover:bg-white/10 hover:border-black/10 dark:hover:border-white/10 transition-all duration-300 hover:-translate-y-1 relative"
                             >
                                 {/* Preview Area */}
                                 <div className="aspect-video w-full bg-black/40 flex items-center justify-center relative overflow-hidden">
@@ -227,7 +227,7 @@ export default function AssetLibraryPage() {
 
                                 {/* Content Info */}
                                 <div className="p-6 space-y-3">
-                                    <h3 className="text-sm font-bold text-gray-200 truncate pr-2" title={asset.filename}>
+                                    <h3 className="text-sm font-bold text-gray-900 dark:text-gray-200 truncate pr-2" title={asset.filename}>
                                         {asset.filename}
                                     </h3>
                                     <div className="flex items-center justify-between">
diff --git a/web/studio/src/app/lti/deep-linking/page.tsx b/web/studio/src/app/lti/deep-linking/page.tsx
index 0e80bcd..97acd56 100644
--- a/web/studio/src/app/lti/deep-linking/page.tsx
+++ b/web/studio/src/app/lti/deep-linking/page.tsx
@@ -202,7 +202,7 @@ function DeepLinkingPickerContent() {
 
 export default function DeepLinkingPicker() {
     return (
-        <Suspense fallback={<div className="min-h-screen bg-gray-950 flex items-center justify-center"><div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /></div>}>
+        <Suspense fallback={<div className="min-h-screen bg-transparent flex items-center justify-center"><div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /></div>}>
             <DeepLinkingPickerContent />
         </Suspense>
     );
diff --git a/web/studio/src/app/page.tsx b/web/studio/src/app/page.tsx
index 2dd763a..a20a684 100644
--- a/web/studio/src/app/page.tsx
+++ b/web/studio/src/app/page.tsx
@@ -158,18 +158,18 @@ export default function StudioDashboard() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0f1115] text-white p-8">
+    <div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
         <div className="flex justify-between items-center mb-12">
           <div>
-            <h1 className="text-4xl font-black bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent tracking-tight">
+            <h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight">
               {t('nav.courses')}
             </h1>
-            <p className="text-gray-400 mt-2">{t('dashboard.title')}</p>
+            <p className="text-gray-600 dark:text-gray-400 mt-2">{t('dashboard.title')}</p>
           </div>
           <div className="flex items-center gap-3">
-            <label 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 cursor-pointer active:scale-95">
+            <label className="flex items-center gap-2 px-6 py-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/5 dark:border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95">
               <Upload size={18} />
               Importar
               <input type="file" accept=".json" onChange={handleImport} className="hidden" />
@@ -183,7 +183,7 @@ export default function StudioDashboard() {
             </button>
             <button
               onClick={handleCreateCourse}
-              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"
+              className="flex items-center gap-2 px-6 py-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95"
             >
               <Plus size={20} />
               Manual
@@ -198,8 +198,8 @@ export default function StudioDashboard() {
             ))}
           </div>
         ) : courses.length === 0 ? (
-          <div className="text-center py-20 glass-card border-dashed border-white/10">
-            <p className="text-gray-500">Aún no has creado ningún curso.</p>
+          <div className="text-center py-20 glass-card border-dashed border-black/10 dark:border-white/10">
+            <p className="text-gray-500 dark:text-gray-400">Aún no has creado ningún curso.</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -209,27 +209,27 @@ export default function StudioDashboard() {
                   <div className="flex-1">
                     <div className="flex items-start justify-between mb-4">
                       <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
-                        <BookOpen className="text-blue-400" />
+                        <BookOpen className="text-blue-600 dark:text-blue-400" />
                       </div>
                       <button
                         onClick={(e) => handleExport(e, course.id, course.title)}
-                        className="p-2 hover:bg-white/10 rounded-lg text-gray-500 hover:text-white transition-all"
+                        className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-lg text-gray-500 hover:text-gray-900 dark:hover:text-white transition-all"
                         title="Export Course"
                       >
                         <Download size={18} />
                       </button>
                       <button
                         onClick={(e) => handleDeleteCourse(e, course.id, course.title)}
-                        className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-400 transition-all"
+                        className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-all"
                         title="Delete Course"
                       >
                         <Trash2 size={18} />
                       </button>
                     </div>
-                    <h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
-                    <p className="text-sm text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p>
+                    <h3 className="font-bold text-lg mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-gray-900 dark:text-white">{course.title}</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p>
                   </div>
-                  <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/5 text-xs text-gray-500">
+                  <div className="flex items-center justify-between mt-6 pt-4 border-t border-black/5 dark:border-white/5 text-xs text-gray-500 dark:text-gray-400">
                     <span>Última actualización: {new Date(course.updated_at).toLocaleDateString()}</span>
                     <span>ID: {course.id.slice(0, 4)}...</span>
                   </div>
@@ -248,7 +248,7 @@ export default function StudioDashboard() {
       >
         <form onSubmit={onTitleConfirm} className="space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
+            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
               Course Title
             </label>
             <input
@@ -258,7 +258,7 @@ export default function StudioDashboard() {
               value={newCourseTitle}
               onChange={(e) => setNewCourseTitle(e.target.value)}
               placeholder="e.g. Advanced Rust Development"
-              className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-white"
+              className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-gray-900 dark:text-white"
             />
           </div>
           <div className="flex gap-3 pt-2">
@@ -292,7 +292,7 @@ export default function StudioDashboard() {
             </p>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-400 mb-2">
+            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
               Course Topic or Description
             </label>
             <textarea
@@ -302,7 +302,7 @@ export default function StudioDashboard() {
               value={aiPrompt}
               onChange={(e) => setAiPrompt(e.target.value)}
               placeholder="e.g. A comprehensive guide to building distributed systems with Rust and Axum for intermediate developers."
-              className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-white resize-none"
+              className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-gray-900 dark:text-white resize-none"
               disabled={isGenerating}
             />
           </div>
diff --git a/web/studio/src/app/settings/page.tsx b/web/studio/src/app/settings/page.tsx
index b93df52..619aca3 100644
--- a/web/studio/src/app/settings/page.tsx
+++ b/web/studio/src/app/settings/page.tsx
@@ -20,10 +20,10 @@ export default function SettingsPage() {
     if (!user || user.role !== "admin") return null;
 
     return (
-        <div className="pt-24 px-8 pb-12 min-h-screen bg-gradient-to-br from-gray-900 to-black">
+        <div className="pt-24 px-8 pb-12 min-h-screen bg-transparent transition-colors duration-300">
             <div className="max-w-4xl mx-auto mb-8">
-                <h1 className="text-3xl font-black text-white tracking-tight">Organization Settings</h1>
-                <p className="text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
+                <h1 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Organization Settings</h1>
+                <p className="text-gray-600 dark:text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
             </div>
             <BrandingSettings />
         </div>
diff --git a/web/studio/src/app/settings/webhooks/page.tsx b/web/studio/src/app/settings/webhooks/page.tsx
index c7be24d..bc3e53a 100644
--- a/web/studio/src/app/settings/webhooks/page.tsx
+++ b/web/studio/src/app/settings/webhooks/page.tsx
@@ -83,13 +83,13 @@ export default function WebhooksPage() {
     };
 
     if (loading) return (
-        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <div className="min-h-screen bg-transparent flex items-center justify-center">
             <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
         </div>
     );
 
     return (
-        <div className="min-h-screen bg-[#0f1115] text-white">
+        <div className="min-h-screen bg-transparent text-gray-900 dark:text-white">
             <Navbar />
             <main className="max-w-5xl mx-auto pt-32 pb-20 px-6">
                 <div className="flex items-center justify-between mb-12">
@@ -98,7 +98,7 @@ export default function WebhooksPage() {
                             <WebhookIcon size={40} className="text-blue-500" />
                             Enterprise Webhooks
                         </h1>
-                        <p className="text-gray-400">Integrate OpenCCB with your external systems via HTTP callbacks.</p>
+                        <p className="text-gray-600 dark:text-gray-400">Integrate OpenCCB with your external systems via HTTP callbacks.</p>
                     </div>
                     <button
                         onClick={() => setIsAdding(true)}
@@ -116,7 +116,7 @@ export default function WebhooksPage() {
                 )}
 
                 {isAdding && (
-                    <div className="mb-12 bg-white/5 border border-white/10 rounded-3xl p-8 overflow-hidden relative group">
+                    <div className="mb-12 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-3xl p-8 overflow-hidden relative group">
                         <div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
                         <h2 className="text-xl font-black mb-6 flex items-center gap-2">
                             <Plus size={20} className="text-blue-400" />
@@ -125,7 +125,7 @@ export default function WebhooksPage() {
                         <form onSubmit={handleCreate} className="space-y-6 relative">
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
-                                    <label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
+                                    <label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
                                         <Globe size={14} /> Payload URL
                                     </label>
                                     <input
@@ -133,20 +133,20 @@ export default function WebhooksPage() {
                                         id="webhook-url"
                                         required
                                         placeholder="https://your-api.com/webhooks"
-                                        className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors"
+                                        className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors text-gray-900 dark:text-white"
                                         value={newWebhook.url}
                                         onChange={e => setNewWebhook({ ...newWebhook, url: e.target.value })}
                                     />
                                 </div>
                                 <div className="space-y-2">
-                                    <label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
+                                    <label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
                                         <Shield size={14} /> Secret (HMAC-SHA256)
                                     </label>
                                     <input
                                         type="text"
                                         id="webhook-secret"
                                         placeholder="Optional signing secret"
-                                        className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors"
+                                        className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-colors text-gray-900 dark:text-white"
                                         value={newWebhook.secret}
                                         onChange={e => setNewWebhook({ ...newWebhook, secret: e.target.value })}
                                     />
@@ -154,7 +154,7 @@ export default function WebhooksPage() {
                             </div>
 
                             <div className="space-y-4">
-                                <label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
+                                <label className="text-xs font-black text-gray-500 dark:text-gray-400 uppercase tracking-widest flex items-center gap-2">
                                     <Activity size={14} /> Events to Subscribe
                                 </label>
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -164,8 +164,8 @@ export default function WebhooksPage() {
                                             id={`event-${event.id}`}
                                             onClick={() => toggleEvent(event.id)}
                                             className={`p-4 rounded-2xl border transition-all cursor-pointer ${newWebhook.events.includes(event.id)
-                                                ? 'bg-blue-500/20 border-blue-500 text-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
-                                                : 'bg-black/20 border-white/10 text-gray-400 hover:bg-white/5'
+                                                ? 'bg-blue-500/10 border-blue-500 text-blue-600 dark:text-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                                                : 'bg-black/[0.03] dark:bg-black/20 border-black/10 dark:border-white/10 text-gray-500 dark:text-gray-400 hover:bg-black/[0.05] dark:hover:bg-white/5'
                                                 }`}
                                         >
                                             <div className="flex items-center justify-between mb-1">
@@ -178,11 +178,11 @@ export default function WebhooksPage() {
                                 </div>
                             </div>
 
-                            <div className="flex items-center justify-end gap-4 pt-4 border-t border-white/10">
+                            <div className="flex items-center justify-end gap-4 pt-4 border-t border-black/10 dark:border-white/10">
                                 <button
                                     type="button"
                                     onClick={() => setIsAdding(false)}
-                                    className="px-6 py-2 text-sm font-bold text-gray-400 hover:text-white transition-colors"
+                                    className="px-6 py-2 text-sm font-bold text-gray-500 hover:text-gray-900 dark:text-white transition-colors"
                                 >
                                     Cancel
                                 </button>
@@ -194,21 +194,21 @@ export default function WebhooksPage() {
 
                 <div className="space-y-6">
                     {webhooks.length === 0 && !isAdding ? (
-                        <div className="text-center py-20 bg-white/5 border border-dashed border-white/10 rounded-3xl">
+                        <div className="text-center py-20 bg-black/5 dark:bg-white/5 border border-dashed border-black/10 dark:border-white/10 rounded-3xl">
                             <WebhookIcon size={64} className="mx-auto text-gray-600 mb-6" />
                             <h3 className="text-xl font-bold text-gray-400">No webhooks configured</h3>
                             <p className="text-sm text-gray-500 mt-2">Add your first webhook to start receiving system notifications.</p>
                         </div>
                     ) : (
                         webhooks.map(webhook => (
-                            <div key={webhook.id} className="bg-white/5 border border-white/10 rounded-3xl p-8 flex items-center justify-between group hover:bg-white/[0.07] transition-all">
+                            <div key={webhook.id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-3xl p-8 flex items-center justify-between group hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all">
                                 <div className="space-y-3">
                                     <div className="flex items-center gap-3">
                                         <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
                                             <Globe size={20} />
                                         </div>
                                         <div>
-                                            <h3 className="font-bold text-lg">{webhook.url}</h3>
+                                            <h3 className="font-bold text-lg text-gray-900 dark:text-white">{webhook.url}</h3>
                                             <p className="text-xs text-gray-500">Created on {new Date(webhook.created_at).toLocaleDateString()}</p>
                                         </div>
                                     </div>
@@ -234,7 +234,7 @@ export default function WebhooksPage() {
                                     </div>
                                     <button
                                         onClick={() => handleDelete(webhook.id)}
-                                        className="delete-webhook-btn p-3 bg-red-500/10 text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all transform hover:scale-110 shadow-lg"
+                                        className="delete-webhook-btn p-3 bg-red-500/10 text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all transform hover:scale-110 shadow-lg"
                                         title="Delete Webhook"
                                     >
                                         <Trash2 size={20} />
diff --git a/web/studio/src/components/AuthGuard.tsx b/web/studio/src/components/AuthGuard.tsx
index b5b16ff..54a73c8 100644
--- a/web/studio/src/components/AuthGuard.tsx
+++ b/web/studio/src/components/AuthGuard.tsx
@@ -22,7 +22,7 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+            <div className="min-h-screen bg-transparent flex items-center justify-center">
                 <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
             </div>
         );
diff --git a/web/studio/src/components/CourseEditorLayout.tsx b/web/studio/src/components/CourseEditorLayout.tsx
index 683ad23..4e55b13 100644
--- a/web/studio/src/components/CourseEditorLayout.tsx
+++ b/web/studio/src/components/CourseEditorLayout.tsx
@@ -32,8 +32,8 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
     return (
         <div className="space-y-8">
             {/* Tabs Navigation */}
-            <nav className="glass p-1" aria-label="Course editor tabs">
-                <ul className="flex border-b border-white/10 overflow-x-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+            <nav className="glass p-1 bg-black/[0.02] dark:bg-white/[0.02] border border-black/5 dark:border-white/5 rounded-xl" aria-label="Course editor tabs">
+                <ul className="flex border-b border-black/5 dark:border-white/10 overflow-x-auto scrollbar-thin scrollbar-thumb-black/10 dark:scrollbar-thumb-white/10 scrollbar-track-transparent">
                     {tabs.map((tab) => {
                         const Icon = tab.icon;
                         const isActive = tab.key === activeTab;
@@ -43,8 +43,8 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
                                     href={tab.href}
                                     aria-current={isActive ? "page" : undefined}
                                     className={`flex items-center gap-1.5 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${isActive
-                                        ? "border-b-2 border-blue-500 bg-white/5 text-white"
-                                        : "text-gray-500 hover:text-white"
+                                        ? "border-b-2 border-blue-600 dark:border-blue-500 bg-black/5 dark:bg-white/5 text-blue-600 dark:text-white"
+                                        : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                                         }`}
                                 >
                                     <Icon className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
diff --git a/web/studio/src/components/Navbar.tsx b/web/studio/src/components/Navbar.tsx
index 2231284..89d1b03 100644
--- a/web/studio/src/components/Navbar.tsx
+++ b/web/studio/src/components/Navbar.tsx
@@ -18,7 +18,7 @@ export function Navbar() {
     const platformName = branding?.platform_name || 'OpenCCB';
 
     return (
-        <nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/40 backdrop-blur-xl">
+        <nav className="fixed top-0 w-full z-50 glass border-b border-black/5 dark:border-white/10 bg-gray-50/70 dark:bg-black/40 backdrop-blur-xl">
             <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
                 <Link href="/" className="flex items-center gap-2 md:gap-4 group" aria-label={`${platformName} Studio - Dashboard`}>
                     <div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-32 h-8 md:w-48 md:h-10 px-2 bg-white' : 'w-8 h-8 md:w-10 md:h-10'}`}>
@@ -32,10 +32,10 @@ export function Navbar() {
                     </div>
                     {branding?.logo_variant !== 'wide' && (
                         <div className="flex flex-col -gap-1">
-                            <span className="font-black text-sm md:text-lg tracking-tighter text-white leading-none">
+                            <span className="font-black text-sm md:text-lg tracking-tighter text-gray-900 dark:text-white leading-none">
                                 {platformName.toUpperCase()}
                             </span>
-                            <span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">STUDIO</span>
+                            <span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-600 dark:text-blue-500 uppercase">STUDIO</span>
                         </div>
                     )}
                 </Link>
@@ -44,7 +44,7 @@ export function Navbar() {
                     <div className="flex items-center gap-4">
                         <Link
                             href="/"
-                            className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
+                            className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2"
                         >
                             <LayoutDashboard className="w-4 h-4" />
                             {t('nav.courses')}
@@ -52,7 +52,7 @@ export function Navbar() {
 
                         <Link
                             href="/library/assets"
-                            className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
+                            className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2"
                         >
                             <Library className="w-4 h-4" aria-hidden="true" />
                             {t('nav.library') || 'Library'}
@@ -117,9 +117,9 @@ export function Navbar() {
                             aria-label={t('nav.selectLanguage') || 'Select Language'}
                             className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
                         >
-                            <option value="en" className="bg-gray-900">EN</option>
-                            <option value="es" className="bg-gray-900">ES</option>
-                            <option value="pt" className="bg-gray-900">PT</option>
+                            <option value="en" className="bg-white dark:bg-gray-900">EN</option>
+                            <option value="es" className="bg-white dark:bg-gray-900">ES</option>
+                            <option value="pt" className="bg-white dark:bg-gray-900">PT</option>
                         </select>
                     </div>
 
@@ -128,12 +128,12 @@ export function Navbar() {
                     {user ? (
                         <div className="flex items-center gap-4">
                             <div className="flex flex-col items-end">
-                                <span className="text-xs font-medium text-white">{user.full_name}</span>
+                                <span className="text-xs font-medium text-gray-900 dark:text-white">{user.full_name}</span>
                                 <span className="text-[10px] text-gray-500 uppercase tracking-wider">{user.role}</span>
                             </div>
                             <button
                                 onClick={logout}
-                                className="p-2 hover:bg-red-500/10 hover:text-red-400 rounded-lg transition-all text-gray-500"
+                                className="p-2 hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-all text-gray-500"
                                 title={t('nav.signOut') || "Sign Out"}
                                 aria-label={t('nav.signOut') || "Sign Out"}
                             >
diff --git a/web/studio/src/context/ThemeContext.tsx b/web/studio/src/context/ThemeContext.tsx
index 6d8ed93..a4304fc 100644
--- a/web/studio/src/context/ThemeContext.tsx
+++ b/web/studio/src/context/ThemeContext.tsx
@@ -11,7 +11,7 @@ interface ThemeContextType {
 }
 
 const ThemeContext = createContext<ThemeContextType>({
-    theme: 'dark',
+    theme: 'light',
     toggleTheme: () => { },
     setTheme: () => { },
 });
@@ -19,7 +19,7 @@ const ThemeContext = createContext<ThemeContextType>({
 export const useTheme = () => useContext(ThemeContext);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [theme, setThemeState] = useState<Theme>('dark');
+    const [theme, setThemeState] = useState<Theme>('light');
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {