diff --git a/frontend/src/features/dashboard/ActivityTimeline.tsx b/frontend/src/features/dashboard/ActivityTimeline.tsx
index 9d9ffc7..a765912 100644
--- a/frontend/src/features/dashboard/ActivityTimeline.tsx
+++ b/frontend/src/features/dashboard/ActivityTimeline.tsx
@@ -72,27 +72,27 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
         <div className="space-y-8 animate-in fade-in duration-500">
             {/* Summary Cards */}
             <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="bg-indigo-50 p-4 rounded-xl text-center border border-indigo-100">
+                <div className="bg-indigo-50 dark:bg-indigo-900/20 p-4 rounded-xl text-center border border-indigo-100 dark:border-indigo-900/30">
                     <p className="text-xs font-bold text-indigo-400 uppercase tracking-widest mb-1">Aujourd'hui</p>
-                    <p className="text-2xl font-black text-indigo-600">{data.summary.today_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
+                    <p className="text-2xl font-black text-indigo-600 dark:text-indigo-400">{data.summary.today_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
                 </div>
-                <div className="bg-emerald-50 p-4 rounded-xl text-center border border-emerald-100">
+                <div className="bg-emerald-50 dark:bg-emerald-900/20 p-4 rounded-xl text-center border border-emerald-100 dark:border-emerald-900/30">
                     <p className="text-xs font-bold text-emerald-400 uppercase tracking-widest mb-1">Cette semaine</p>
-                    <p className="text-2xl font-black text-emerald-600">{data.summary.week_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
+                    <p className="text-2xl font-black text-emerald-600 dark:text-emerald-400">{data.summary.week_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
                 </div>
-                <div className="bg-amber-50 p-4 rounded-xl text-center border border-amber-100">
+                <div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-xl text-center border border-amber-100 dark:border-amber-900/30">
                     <p className="text-xs font-bold text-amber-400 uppercase tracking-widest mb-1">Total Quiz</p>
-                    <p className="text-2xl font-black text-amber-600">{data.summary.total_quizzes}</p>
+                    <p className="text-2xl font-black text-amber-600 dark:text-amber-400">{data.summary.total_quizzes}</p>
                 </div>
-                <div className="bg-blue-50 p-4 rounded-xl text-center border border-blue-100">
+                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl text-center border border-blue-100 dark:border-blue-900/30">
                     <p className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-1">Total Révisions</p>
-                    <p className="text-2xl font-black text-blue-600">{data.summary.total_revisions}</p>
+                    <p className="text-2xl font-black text-blue-600 dark:text-blue-400">{data.summary.total_revisions}</p>
                 </div>
             </div>
 
             {/* Timeline */}
             <div>
-                <h3 className="text-xl font-black text-slate-900 mb-6 flex items-center gap-2">
+                <h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                     <Calendar className="w-5 h-5 text-slate-400" />
                     Historique
                 </h3>
@@ -102,10 +102,10 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
                         {data.history.map((day) => (
                             <div key={day.date} className="relative">
                                 {/* Date Marker */}
-                                <div className="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-slate-200 border-2 border-white"></div>
+                                <div className="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-slate-200 dark:bg-slate-700 border-2 border-white dark:border-slate-900"></div>
 
                                 <div className="mb-4">
-                                    <h4 className="font-extrabold text-slate-700 capitalize">
+                                    <h4 className="font-extrabold text-slate-700 dark:text-slate-300 capitalize">
                                         {new Date(day.date).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
                                     </h4>
                                     <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{day.total_minutes} min d'activité</p>
@@ -123,17 +123,17 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
                                                     window.location.href = `/revision/${item.id}`;
                                                 }
                                             }}
-                                            className={`bg-white border border-slate-200 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:border-slate-300 transition-colors ${item.type === 'REVISION' ? 'cursor-pointer hover:bg-slate-50' : ''}`}
+                                            className={`bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:border-slate-300 dark:hover:border-slate-600 transition-colors ${item.type === 'REVISION' ? 'cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50' : ''}`}
                                         >
-                                            <div className={`p-3 rounded-md ${item.type === 'QUIZ' ? 'bg-amber-50 text-amber-500' : 'bg-blue-50 text-blue-500'}`}>
+                                            <div className={`p-3 rounded-md ${item.type === 'QUIZ' ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-500' : 'bg-blue-50 dark:bg-blue-900/20 text-blue-500'}`}>
                                                 {item.type === 'QUIZ' ? <CheckCircle className="w-5 h-5" /> : <BookOpen className="w-5 h-5" />}
                                             </div>
                                             <div className="flex-1">
-                                                <p className="font-bold text-slate-900">{item.topic}</p>
-                                                <p className="text-xs text-slate-500 font-medium">{item.details}</p>
+                                                <p className="font-bold text-slate-900 dark:text-slate-200">{item.topic}</p>
+                                                <p className="text-xs text-slate-500 dark:text-slate-400 font-medium">{item.details}</p>
                                             </div>
                                             <div className="text-right">
-                                                <p className="font-bold text-slate-900 text-sm">{new Date(item.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}</p>
+                                                <p className="font-bold text-slate-900 dark:text-slate-200 text-sm">{new Date(item.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}</p>
                                                 <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center justify-end gap-1">
                                                     <Clock className="w-3 h-3" /> {item.minutes} min
                                                 </p>
diff --git a/frontend/src/features/dashboard/GamificationWidget.tsx b/frontend/src/features/dashboard/GamificationWidget.tsx
index 59b0d27..d16e22c 100644
--- a/frontend/src/features/dashboard/GamificationWidget.tsx
+++ b/frontend/src/features/dashboard/GamificationWidget.tsx
@@ -32,7 +32,8 @@ export function GamificationWidget() {
     };
 
     return (
-        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm relative overflow-hidden">
+        <div className="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-6 shadow-sm relative overflow-hidden">
+
             {/* Background Decorations */}
             <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
             <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
@@ -40,21 +41,21 @@ export function GamificationWidget() {
             <div className="relative z-10">
                 <div className="flex justify-between items-start mb-4">
                     <div>
-                        <div className="text-indigo-600 text-xs font-bold uppercase tracking-widest mb-1">Niveau {level}</div>
-                        <h3 className="text-2xl font-black text-gray-900">{getLevelTitle(level)}</h3>
+                        <div className="text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase tracking-widest mb-1">Niveau {level}</div>
+                        <h3 className="text-2xl font-black text-gray-900 dark:text-white">{getLevelTitle(level)}</h3>
                     </div>
-                    <div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center border border-indigo-100 shadow-sm">
+                    <div className="w-12 h-12 bg-indigo-50 dark:bg-slate-700 rounded-xl flex items-center justify-center border border-indigo-100 dark:border-slate-600 shadow-sm">
                         <Trophy className="w-6 h-6 text-yellow-500 fill-yellow-500" />
                     </div>
                 </div>
 
-                <div className="mb-2 flex justify-between text-xs font-bold text-gray-500">
+                <div className="mb-2 flex justify-between text-xs font-bold text-gray-500 dark:text-gray-400">
                     <span className="flex items-center gap-1"><Star className="w-3 h-3 text-amber-500" /> {currentXP} XP Totaux</span>
-                    <span className="flex items-center gap-1">Prochain niveau: {Math.round(nextLevelStartXP - currentXP)} XP <TrendingUp className="w-3 h-3 text-indigo-500" /></span>
+                    <span className="flex items-center gap-1">Prochain niveau: {Math.round(nextLevelStartXP - currentXP)} XP <TrendingUp className="w-3 h-3 text-indigo-500 dark:text-indigo-400" /></span>
                 </div>
 
                 {/* Progress Bar Container */}
-                <div className="h-4 bg-gray-100 rounded-full p-1 border border-gray-200">
+                <div className="h-4 bg-gray-100 dark:bg-slate-700 rounded-full p-1 border border-gray-200 dark:border-slate-600">
                     {/* Active Progress */}
                     <div
                         className="h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full shadow-sm transition-all duration-1000 ease-out relative group"
diff --git a/frontend/src/features/dashboard/MasteryWidget.tsx b/frontend/src/features/dashboard/MasteryWidget.tsx
index afb83be..1331ff9 100644
--- a/frontend/src/features/dashboard/MasteryWidget.tsx
+++ b/frontend/src/features/dashboard/MasteryWidget.tsx
@@ -42,21 +42,21 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
 
     if (loading) {
         return (
-            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 h-[400px] relative overflow-hidden">
+            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 h-[400px] relative overflow-hidden">
                 {/* Background Decorations */}
                 <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
                 <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
 
                 <div className="relative z-10">
-                    <Skeleton className="h-8 w-48 mb-8 bg-gray-100" />
+                    <Skeleton className="h-8 w-48 mb-8 bg-gray-100 dark:bg-slate-700" />
                     <div className="space-y-6">
                         {[1, 2, 3].map((i) => (
                             <div key={i} className="flex justify-between items-center">
                                 <div className="space-y-2">
-                                    <Skeleton className="h-5 w-32 bg-gray-100" />
-                                    <Skeleton className="h-3 w-20 bg-gray-50" />
+                                    <Skeleton className="h-5 w-32 bg-gray-100 dark:bg-slate-700" />
+                                    <Skeleton className="h-3 w-20 bg-gray-50 dark:bg-slate-800" />
                                 </div>
-                                <Skeleton className="h-12 w-12 rounded-full bg-gray-100" />
+                                <Skeleton className="h-12 w-12 rounded-full bg-gray-100 dark:bg-slate-700" />
                             </div>
                         ))}
                     </div>
@@ -67,30 +67,30 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
 
     if (stats.length === 0) {
         return (
-            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 text-center flex flex-col items-center justify-center opacity-75">
-                <div className="bg-gray-100 p-4 rounded-full mb-3">
+            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 text-center flex flex-col items-center justify-center opacity-75">
+                <div className="bg-gray-100 dark:bg-slate-700 p-4 rounded-full mb-3">
                     <span className="text-2xl">📊</span>
                 </div>
-                <h3 className="text-gray-900 font-bold mb-1">Pas encore de résultats</h3>
+                <h3 className="text-gray-900 dark:text-white font-bold mb-1">Pas encore de résultats</h3>
                 <p className="text-sm text-gray-500">Termine un quiz pour voir tes statistiques !</p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative overflow-hidden">
+        <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 relative overflow-hidden">
             {/* Background Decorations */}
             <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
             <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
 
             <div className="relative z-10">
-                <h3 className="text-xl font-bold text-gray-900 border-b border-gray-100 pb-3 mb-4">Maîtrise des Sujets 🧠</h3>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-3 mb-4">Maîtrise des Sujets 🧠</h3>
 
                 <div className="space-y-4">
                     {stats.map((item, index) => (
-                        <div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors group">
+                        <div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors group">
                             <div className="flex-1">
-                                <h4 className="font-bold text-gray-800 text-sm">{item.topic}</h4>
+                                <h4 className="font-bold text-gray-800 dark:text-gray-200 text-sm">{item.topic}</h4>
                                 <div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
                                     <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {item.last_activity ? new Date(item.last_activity).toLocaleDateString() : '—'}</span>
                                     <span>•</span>
@@ -101,9 +101,9 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
                             <div className="flex items-center gap-4">
                                 {/* Status Label */}
                                 <div className={`px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider hidden sm:block
-                                    ${item.status === 'MASTERED' ? 'bg-emerald-100 text-emerald-600' :
-                                        item.status === 'REVIEWING' ? 'bg-blue-100 text-blue-600' :
-                                            'bg-amber-100 text-amber-600'
+                                    ${item.status === 'MASTERED' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400' :
+                                        item.status === 'REVIEWING' ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' :
+                                            'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400'
                                     }
                                 `}>
                                     {item.status === 'MASTERED' ? 'Maîtrisé' :
@@ -121,7 +121,7 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
                                             stroke="currentColor"
                                             strokeWidth="3"
                                             fill="transparent"
-                                            className="text-gray-100"
+                                            className="text-gray-100 dark:text-slate-700"
                                         />
                                         <circle
                                             cx="20"
@@ -140,17 +140,19 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
                                             strokeLinecap="round"
                                         />
                                     </svg>
-                                    <span className="absolute text-[9px] font-bold text-gray-600">{Math.round(item.mastery_score || 0)}%</span>
+                                    <span className="absolute text-[9px] font-bold text-gray-600 dark:text-gray-300">{Math.round(item.mastery_score || 0)}%</span>
                                 </div>
                             </div>
                         </div>
                     ))}
                 </div>
 
-                <button className="w-full mt-4 py-2 text-sm font-bold text-gray-600 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
-                    Voir tous les sujets
-                </button>
             </div>
+
+            <button className="w-full mt-4 py-2 text-sm font-bold text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-slate-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
+                Voir tous les sujets
+            </button>
         </div>
+
     );
 }
diff --git a/frontend/src/features/dashboard/RecentRevisionsWidget.tsx b/frontend/src/features/dashboard/RecentRevisionsWidget.tsx
index c45af89..a1a138c 100644
--- a/frontend/src/features/dashboard/RecentRevisionsWidget.tsx
+++ b/frontend/src/features/dashboard/RecentRevisionsWidget.tsx
@@ -134,14 +134,14 @@ export const RecentRevisionsWidget = () => {
 
     return (
         <>
-            <div className="bg-white rounded-[2rem] p-6 shadow-xl shadow-indigo-100/20 border border-slate-100 relative overflow-hidden">
+            <div className="bg-white dark:bg-slate-800 rounded-[2rem] p-6 shadow-xl shadow-indigo-100/20 dark:shadow-none border border-slate-100 dark:border-slate-700 relative overflow-hidden">
                 {/* Background Decorations */}
                 <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
                 <div className="absolute bottom-0 left-0 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl -ml-5 -mb-5"></div>
 
                 <div className="relative z-10">
                     <div className="flex justify-between items-center mb-6">
-                        <h3 className="font-black text-lg text-slate-800 flex items-center gap-2">
+                        <h3 className="font-black text-lg text-slate-800 dark:text-white flex items-center gap-2">
                             Mes Cours
                         </h3>
                     </div>
@@ -154,7 +154,7 @@ export const RecentRevisionsWidget = () => {
                                     key={rev.id}
                                     whileHover={{ y: -4 }}
                                     whileTap={{ scale: 0.99 }}
-                                    className="group p-5 bg-slate-50/80 border border-slate-100/80 rounded-[2rem] hover:bg-white hover:border-indigo-100 shadow-sm hover:shadow-xl hover:shadow-indigo-500/10 transition-all cursor-pointer relative"
+                                    className="group p-5 bg-slate-50/80 dark:bg-slate-700/30 border border-slate-100/80 dark:border-slate-700/50 rounded-[2rem] hover:bg-white dark:hover:bg-slate-700/50 hover:border-indigo-100 dark:hover:border-slate-600 shadow-sm hover:shadow-xl hover:shadow-indigo-500/10 transition-all cursor-pointer relative"
                                     onClick={() => navigate(`/play/${rev.id}`)}
                                 >
                                     {/* Delete Button - Subtle top right */}
@@ -195,20 +195,20 @@ export const RecentRevisionsWidget = () => {
                                                     {rev.subject || 'Général'}
                                                 </span>
                                             </div>
-                                            <h4 className="font-semibold text-slate-800 text-sm sm:text-base leading-tight">
+                                            <h4 className="font-semibold text-slate-800 dark:text-slate-200 text-sm sm:text-base leading-tight">
                                                 {rev.topic}
                                             </h4>
                                         </div>
                                     </div>
 
                                     {/* Bottom Section: Progress + Primary Actions */}
-                                    <div className="flex items-end justify-between pt-3 border-t border-slate-100">
+                                    <div className="flex items-end justify-between pt-3 border-t border-slate-100 dark:border-slate-700/50">
                                         <div className="space-y-1.5 min-w-0">
                                             <p className="text-[11px] font-bold text-slate-400 truncate">
                                                 Ajouté le {new Date(rev.created_at).toLocaleDateString()}
                                             </p>
                                             <p className="text-[11px] font-black text-indigo-400 uppercase tracking-tight">
-                                                Progression: <span className="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-lg border border-indigo-100/50">{rev.current_series}/{rev.total_series} QUIZZ</span>
+                                                Progression: <span className="text-indigo-600 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/30 px-1.5 py-0.5 rounded-lg border border-indigo-100/50 dark:border-indigo-800/30">{rev.current_series}/{rev.total_series} QUIZZ</span>
                                             </p>
                                         </div>
 
@@ -237,7 +237,7 @@ export const RecentRevisionsWidget = () => {
                                                         e.stopPropagation();
                                                         setRestartModal({ isOpen: true, revisionId: rev.id });
                                                     }}
-                                                    className="w-14 h-14 rounded-2xl bg-slate-50 border-2 border-slate-100 flex items-center justify-center text-slate-400 hover:bg-green-500 hover:text-white hover:border-transparent transition-all shadow-sm group/btn"
+                                                    className="w-14 h-14 rounded-2xl bg-slate-50 dark:bg-slate-700 border-2 border-slate-100 dark:border-slate-600 flex items-center justify-center text-slate-400 hover:bg-green-500 hover:text-white hover:border-transparent transition-all shadow-sm group/btn"
                                                     title="Recommencer"
                                                 >
                                                     <span className="text-2xl group-hover/btn:rotate-180 transition-transform duration-500">🔄</span>
@@ -260,275 +260,281 @@ export const RecentRevisionsWidget = () => {
                         whileHover={{ scale: 1.02 }}
                         whileTap={{ scale: 0.98 }}
                         onClick={() => navigate('/history')}
-                        className="w-full mt-6 py-4 px-6 bg-white border-2 border-slate-100 text-indigo-600 rounded-2xl font-black text-sm flex items-center justify-center gap-3 shadow-sm hover:border-indigo-200 hover:bg-indigo-50/30 transition-all active:bg-indigo-50"
+                        className="w-full mt-6 py-4 px-6 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-indigo-600 dark:text-indigo-400 rounded-2xl font-black text-sm flex items-center justify-center gap-3 shadow-sm hover:border-indigo-200 dark:hover:border-indigo-900 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/20 transition-all active:bg-indigo-50"
                     >
                         <span>Tout voir</span>
                         <ArrowRight className="w-5 h-5" />
                     </motion.button>
                 </div>
-            </div>
+            </div >
 
             {/* Restart Confirmation Modal */}
             <AnimatePresence>
-                {restartModal.isOpen && (
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-                        onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
-                    >
+                {
+                    restartModal.isOpen && (
                         <motion.div
-                            initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                            animate={{ scale: 1, opacity: 1, y: 0 }}
-                            exit={{ scale: 0.9, opacity: 0, y: 20 }}
-                            onClick={(e) => e.stopPropagation()}
-                            className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+                            onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
                         >
-                            <div className="absolute top-0 right-0 p-4">
-                                <button
-                                    onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
-                                    className="text-slate-400 hover:text-slate-600 transition-colors"
-                                >
-                                    <X className="w-5 h-5" />
-                                </button>
-                            </div>
-
-                            <div className="flex flex-col items-center text-center">
-                                <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-amber-600">
-                                    <AlertTriangle className="w-8 h-8" />
-                                </div>
-
-                                <h3 className="text-xl font-bold text-slate-800 mb-2">Recommencer le cours ?</h3>
-                                <p className="text-slate-500 text-sm mb-6 leading-relaxed">
-                                    Vous allez recommencer ce cours depuis le début. Votre progression actuelle (série en cours) sera réinitialisée.
-                                </p>
-
-                                <div className="flex gap-3 w-full">
+                            <motion.div
+                                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                                animate={{ scale: 1, opacity: 1, y: 0 }}
+                                exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                                onClick={(e) => e.stopPropagation()}
+                                className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden border border-transparent dark:border-slate-800"
+                            >
+                                <div className="absolute top-0 right-0 p-4">
                                     <button
                                         onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
-                                        className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors"
+                                        className="text-slate-400 hover:text-slate-600 transition-colors"
                                     >
-                                        Annuler
-                                    </button>
-                                    <button
-                                        onClick={confirmRestart}
-                                        disabled={isRestarting}
-                                        className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 flex items-center justify-center gap-2"
-                                    >
-                                        {isRestarting ? (
-                                            <span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
-                                        ) : (
-                                            <>
-                                                <span>Recommencer</span>
-                                                <span className="text-indigo-200">🔄</span>
-                                            </>
-                                        )}
+                                        <X className="w-5 h-5" />
                                     </button>
                                 </div>
-                            </div>
-                        </motion.div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
 
-            {/* Delete Confirmation Modal */}
-            <AnimatePresence>
-                {deleteModal.isOpen && (
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-                        onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
-                    >
-                        <motion.div
-                            initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                            animate={{ scale: 1, opacity: 1, y: 0 }}
-                            exit={{ scale: 0.9, opacity: 0, y: 20 }}
-                            onClick={(e) => e.stopPropagation()}
-                            className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden ring-4 ring-red-50"
-                        >
-                            <div className="absolute top-0 right-0 p-4">
-                                <button
-                                    onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
-                                    className="text-slate-400 hover:text-slate-600 transition-colors"
-                                >
-                                    <X className="w-5 h-5" />
-                                </button>
-                            </div>
-
-                            <div className="flex flex-col items-center text-center">
-                                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 text-red-600">
-                                    <Trash2 className="w-8 h-8" />
-                                </div>
-
-                                <h3 className="text-xl font-bold text-slate-800 mb-2">Supprimer ce cours ?</h3>
-                                <p className="text-slate-500 text-sm mb-6 leading-relaxed">
-                                    Cette action est irréversible. Toutes les données (progression, quiz, notes) seront effacées.
-                                </p>
-
-                                <div className="flex gap-3 w-full">
-                                    <button
-                                        onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
-                                        className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors"
-                                    >
-                                        Annuler
-                                    </button>
-                                    <button
-                                        onClick={confirmDelete}
-                                        disabled={isDeleting}
-                                        className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-lg shadow-red-200 flex items-center justify-center gap-2"
-                                    >
-                                        {isDeleting ? (
-                                            <span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
-                                        ) : (
-                                            <>
-                                                <span>Supprimer</span>
-                                                <span className="text-red-200">❌</span>
-                                            </>
-                                        )}
-                                    </button>
-                                </div>
-                            </div>
-                        </motion.div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-
-            {/* Summary Modal */}
-            <AnimatePresence>
-                {summaryModal.isOpen && (
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
-                        onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
-                    >
-                        <motion.div
-                            initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                            animate={{ scale: 1, opacity: 1, y: 0 }}
-                            exit={{ scale: 0.9, opacity: 0, y: 20 }}
-                            onClick={(e) => e.stopPropagation()}
-                            className="bg-[#FDFCF8] rounded-[2.5rem] p-8 shadow-2xl max-w-2xl w-full my-auto relative border border-white/50"
-                        >
-                            <div className="absolute top-6 right-8">
-                                <button
-                                    onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
-                                    className="w-10 h-10 bg-white shadow-sm border border-slate-100 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 transition-all hover:scale-110 active:scale-95"
-                                >
-                                    <X className="w-5 h-5" />
-                                </button>
-                            </div>
-
-                            {summaryModal.loading ? (
-                                <div className="py-20 flex flex-col items-center gap-4">
-                                    <div className="w-12 h-12 border-4 border-indigo-100 border-t-indigo-600 rounded-full animate-spin"></div>
-                                    <p className="text-slate-400 font-bold animate-pulse">Chargement du résumé...</p>
-                                </div>
-                            ) : summaryModal.data ? (
-                                <div className="animate-in fade-in zoom-in-95 duration-300">
-                                    <div className="mb-8 border-b border-indigo-100/30 pb-6 pr-10">
-                                        <div className="flex items-center gap-2 mb-2">
-                                            <span className="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-[10px] font-black uppercase tracking-widest border border-indigo-100">Résumé du cours</span>
-                                        </div>
-                                        <h3 className="text-2xl font-black text-slate-800 leading-tight">
-                                            {summaryModal.data.topic}
-                                        </h3>
+                                <div className="flex flex-col items-center text-center">
+                                    <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-amber-600">
+                                        <AlertTriangle className="w-8 h-8" />
                                     </div>
 
-                                    <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
-                                        {/* Synthesis Section (Magic Summary) */}
-                                        {summaryModal.data.synthesis && (
-                                            <div className="bg-indigo-50 rounded-[2rem] p-6 border border-indigo-100/50 shadow-sm">
-                                                <h4 className="flex items-center gap-2 text-indigo-900 font-black mb-4 uppercase tracking-tighter text-sm">
-                                                    <Sparkles className="w-5 h-5 text-indigo-500 animate-pulse" />
-                                                    Résumé Magique
-                                                </h4>
-                                                <div className="text-slate-700 leading-relaxed font-medium italic whitespace-pre-wrap">
-                                                    {summaryModal.data.synthesis}
-                                                </div>
-                                            </div>
-                                        )}
+                                    <h3 className="text-xl font-bold text-slate-800 dark:text-white mb-2">Recommencer le cours ?</h3>
+                                    <p className="text-slate-500 dark:text-slate-400 text-sm mb-6 leading-relaxed">
+                                        Vous allez recommencer ce cours depuis le début. Votre progression actuelle (série en cours) sera réinitialisée.
+                                    </p>
 
-                                        {/* Tips & Mnemonics Split Section */}
-                                        {summaryModal.data.study_tips && (
-                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                                {(() => {
-                                                    try {
-                                                        const allTips: string[] = JSON.parse(summaryModal.data.study_tips);
-                                                        if (!Array.isArray(allTips)) return null;
-
-                                                        const mnemonics = allTips.filter(tip =>
-                                                            tip.toLowerCase().includes('moyen') ||
-                                                            tip.toLowerCase().includes('mémo') ||
-                                                            tip.toLowerCase().includes('phrase') ||
-                                                            tip.length < 50
-                                                        );
-                                                        const regularTips = allTips.filter(tip => !mnemonics.includes(tip));
-
-                                                        return (
-                                                            <>
-                                                                {/* Regular Tips Column */}
-                                                                <div className="space-y-4">
-                                                                    <h4 className="flex items-center gap-2 text-amber-700 font-black uppercase tracking-tighter text-xs">
-                                                                        <Lightbulb className="w-4 h-4 text-amber-500" />
-                                                                        Astuces
-                                                                    </h4>
-                                                                    <div className="space-y-3">
-                                                                        {regularTips.length > 0 ? regularTips.map((tip, idx) => (
-                                                                            <div key={idx} className="p-4 bg-amber-50/40 border border-amber-100/50 rounded-2xl text-amber-900/80 text-xs font-bold leading-relaxed shadow-sm italic">
-                                                                                "{tip}"
-                                                                            </div>
-                                                                        )) : (
-                                                                            <p className="text-xs text-slate-400 italic">Aucun conseil particulier.</p>
-                                                                        )}
-                                                                    </div>
-                                                                </div>
-
-                                                                {/* Mnemonics Column */}
-                                                                <div className="space-y-4">
-                                                                    <h4 className="flex items-center gap-2 text-purple-700 font-black uppercase tracking-tighter text-xs">
-                                                                        <Brain className="w-4 h-4 text-purple-500" />
-                                                                        Mémos
-                                                                    </h4>
-                                                                    <div className="space-y-3">
-                                                                        {mnemonics.length > 0 ? mnemonics.map((memo, idx) => (
-                                                                            <div key={idx} className="p-4 bg-purple-50/40 border border-purple-100/50 rounded-2xl text-purple-900/80 text-xs font-black leading-relaxed shadow-sm">
-                                                                                {memo}
-                                                                            </div>
-                                                                        )) : (
-                                                                            <p className="text-xs text-slate-400 italic">Pas de mémotechnique.</p>
-                                                                        )}
-                                                                    </div>
-                                                                </div>
-                                                            </>
-                                                        );
-                                                    } catch (e) { return null; }
-                                                })()}
-                                            </div>
-                                        )}
-                                    </div>
-
-                                    <div className="mt-8 pt-6 border-t border-slate-100 flex justify-center">
+                                    <div className="flex gap-3 w-full">
                                         <button
-                                            onClick={() => {
-                                                setSummaryModal(prev => ({ ...prev, isOpen: false }));
-                                                navigate(`/play/${summaryModal.data.id}`);
-                                            }}
-                                            className="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-100 hover:bg-indigo-700 hover:scale-105 transition-all active:scale-95 flex items-center gap-3"
+                                            onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
+                                            className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
                                         >
-                                            <Play className="w-5 h-5 ml-1" />
-                                            <span>Commencer le Quiz</span>
+                                            Annuler
+                                        </button>
+                                        <button
+                                            onClick={confirmRestart}
+                                            disabled={isRestarting}
+                                            className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 flex items-center justify-center gap-2"
+                                        >
+                                            {isRestarting ? (
+                                                <span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
+                                            ) : (
+                                                <>
+                                                    <span>Recommencer</span>
+                                                    <span className="text-indigo-200">🔄</span>
+                                                </>
+                                            )}
                                         </button>
                                     </div>
                                 </div>
-                            ) : null}
+                            </motion.div>
                         </motion.div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+                    )
+                }
+            </AnimatePresence >
+
+            {/* Delete Confirmation Modal */}
+            <AnimatePresence>
+                {
+                    deleteModal.isOpen && (
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+                            onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
+                        >
+                            <motion.div
+                                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                                animate={{ scale: 1, opacity: 1, y: 0 }}
+                                exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                                onClick={(e) => e.stopPropagation()}
+                                className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden ring-4 ring-red-50 dark:ring-red-900/10 border border-transparent dark:border-slate-800"
+                            >
+                                <div className="absolute top-0 right-0 p-4">
+                                    <button
+                                        onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
+                                        className="text-slate-400 hover:text-slate-600 transition-colors"
+                                    >
+                                        <X className="w-5 h-5" />
+                                    </button>
+                                </div>
+
+                                <div className="flex flex-col items-center text-center">
+                                    <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 text-red-600">
+                                        <Trash2 className="w-8 h-8" />
+                                    </div>
+
+                                    <h3 className="text-xl font-bold text-slate-800 dark:text-white mb-2">Supprimer ce cours ?</h3>
+                                    <p className="text-slate-500 dark:text-slate-400 text-sm mb-6 leading-relaxed">
+                                        Cette action est irréversible. Toutes les données (progression, quiz, notes) seront effacées.
+                                    </p>
+
+                                    <div className="flex gap-3 w-full">
+                                        <button
+                                            onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
+                                            className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+                                        >
+                                            Annuler
+                                        </button>
+                                        <button
+                                            onClick={confirmDelete}
+                                            disabled={isDeleting}
+                                            className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-lg shadow-red-200 flex items-center justify-center gap-2"
+                                        >
+                                            {isDeleting ? (
+                                                <span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
+                                            ) : (
+                                                <>
+                                                    <span>Supprimer</span>
+                                                    <span className="text-red-200">❌</span>
+                                                </>
+                                            )}
+                                        </button>
+                                    </div>
+                                </div>
+                            </motion.div>
+                        </motion.div>
+                    )
+                }
+            </AnimatePresence >
+
+            {/* Summary Modal */}
+            <AnimatePresence>
+                {
+                    summaryModal.isOpen && (
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
+                            onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
+                        >
+                            <motion.div
+                                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                                animate={{ scale: 1, opacity: 1, y: 0 }}
+                                exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                                onClick={(e) => e.stopPropagation()}
+                                className="bg-[#FDFCF8] dark:bg-slate-900 rounded-[2.5rem] p-8 shadow-2xl max-w-2xl w-full my-auto relative border border-white/50 dark:border-slate-800"
+                            >
+                                <div className="absolute top-6 right-8">
+                                    <button
+                                        onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
+                                        className="w-10 h-10 bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all hover:scale-110 active:scale-95"
+                                    >
+                                        <X className="w-5 h-5" />
+                                    </button>
+                                </div>
+
+                                {summaryModal.loading ? (
+                                    <div className="py-20 flex flex-col items-center gap-4">
+                                        <div className="w-12 h-12 border-4 border-indigo-100 border-t-indigo-600 rounded-full animate-spin"></div>
+                                        <p className="text-slate-400 font-bold animate-pulse">Chargement du résumé...</p>
+                                    </div>
+                                ) : summaryModal.data ? (
+                                    <div className="animate-in fade-in zoom-in-95 duration-300">
+                                        <div className="mb-8 border-b border-indigo-100/30 pb-6 pr-10">
+                                            <div className="flex items-center gap-2 mb-2">
+                                                <span className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300 rounded-full text-[10px] font-black uppercase tracking-widest border border-indigo-100 dark:border-indigo-800/30">Résumé du cours</span>
+                                            </div>
+                                            <h3 className="text-2xl font-black text-slate-800 dark:text-slate-100 leading-tight">
+                                                {summaryModal.data.topic}
+                                            </h3>
+                                        </div>
+
+                                        <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
+                                            {/* Synthesis Section (Magic Summary) */}
+                                            {summaryModal.data.synthesis && (
+                                                <div className="bg-indigo-50 dark:bg-indigo-900/10 rounded-[2rem] p-6 border border-indigo-100/50 dark:border-indigo-800/30 shadow-sm">
+                                                    <h4 className="flex items-center gap-2 text-indigo-900 dark:text-indigo-300 font-black mb-4 uppercase tracking-tighter text-sm">
+                                                        <Sparkles className="w-5 h-5 text-indigo-500 animate-pulse" />
+                                                        Résumé Magique
+                                                    </h4>
+                                                    <div className="text-slate-700 dark:text-slate-300 leading-relaxed font-medium italic whitespace-pre-wrap">
+                                                        {summaryModal.data.synthesis}
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            {/* Tips & Mnemonics Split Section */}
+                                            {summaryModal.data.study_tips && (
+                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                                    {(() => {
+                                                        try {
+                                                            const allTips: string[] = JSON.parse(summaryModal.data.study_tips);
+                                                            if (!Array.isArray(allTips)) return null;
+
+                                                            const mnemonics = allTips.filter(tip =>
+                                                                tip.toLowerCase().includes('moyen') ||
+                                                                tip.toLowerCase().includes('mémo') ||
+                                                                tip.toLowerCase().includes('phrase') ||
+                                                                tip.length < 50
+                                                            );
+                                                            const regularTips = allTips.filter(tip => !mnemonics.includes(tip));
+
+                                                            return (
+                                                                <>
+                                                                    {/* Regular Tips Column */}
+                                                                    <div className="space-y-4">
+                                                                        <h4 className="flex items-center gap-2 text-amber-700 font-black uppercase tracking-tighter text-xs">
+                                                                            <Lightbulb className="w-4 h-4 text-amber-500" />
+                                                                            Astuces
+                                                                        </h4>
+                                                                        <div className="space-y-3">
+                                                                            {regularTips.length > 0 ? regularTips.map((tip, idx) => (
+                                                                                <div key={idx} className="p-4 bg-amber-50/40 border border-amber-100/50 rounded-2xl text-amber-900/80 text-xs font-bold leading-relaxed shadow-sm italic">
+                                                                                    "{tip}"
+                                                                                </div>
+                                                                            )) : (
+                                                                                <p className="text-xs text-slate-400 italic">Aucun conseil particulier.</p>
+                                                                            )}
+                                                                        </div>
+                                                                    </div>
+
+                                                                    {/* Mnemonics Column */}
+                                                                    <div className="space-y-4">
+                                                                        <h4 className="flex items-center gap-2 text-purple-700 font-black uppercase tracking-tighter text-xs">
+                                                                            <Brain className="w-4 h-4 text-purple-500" />
+                                                                            Mémos
+                                                                        </h4>
+                                                                        <div className="space-y-3">
+                                                                            {mnemonics.length > 0 ? mnemonics.map((memo, idx) => (
+                                                                                <div key={idx} className="p-4 bg-purple-50/40 border border-purple-100/50 rounded-2xl text-purple-900/80 text-xs font-black leading-relaxed shadow-sm">
+                                                                                    {memo}
+                                                                                </div>
+                                                                            )) : (
+                                                                                <p className="text-xs text-slate-400 italic">Pas de mémotechnique.</p>
+                                                                            )}
+                                                                        </div>
+                                                                    </div>
+                                                                </>
+                                                            );
+                                                        } catch (e) { return null; }
+                                                    })()}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-700/50 flex justify-center">
+                                            <button
+                                                onClick={() => {
+                                                    setSummaryModal(prev => ({ ...prev, isOpen: false }));
+                                                    navigate(`/play/${summaryModal.data.id}`);
+                                                }}
+                                                className="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-100 dark:shadow-none hover:bg-indigo-700 hover:scale-105 transition-all active:scale-95 flex items-center gap-3"
+                                            >
+                                                <Play className="w-5 h-5 ml-1" />
+                                                <span>Commencer le Quiz</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                ) : null}
+                            </motion.div>
+                        </motion.div>
+                    )
+                }
+            </AnimatePresence >
         </>
     );
 };