feat: unify real activity tracking, admin monitoring, and error UX

frontend/app/courses/[courseId]/lesson/[lessonId]/page.tsx

@@ -51,7 +51,7 @@ export default function LessonDetailPage() {
   const router = useRouter()
   const courseId = params?.courseId ?? ''
   const lessonId = params?.lessonId ?? ''
-  const { user, firebaseUser, isLoading: isAuthLoading } = useAuth()
+  const { user, isLoading: isAuthLoading } = useAuth()
 
   const [course, setCourse] = useState<Course | null>(null)
   const [modules, setModules] = useState<Module[]>([])
@@ -61,16 +61,16 @@ export default function LessonDetailPage() {
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    if (!isAuthLoading && !user && !firebaseUser) {
+    if (!isAuthLoading && !user) {
       toast.error("Please login to view lessons.")
       router.replace("/")
       return
     }
 
-    if ((user || firebaseUser) && courseId) {
+    if (user && courseId) {
       fetchCourseData()
     }
-  }, [user, firebaseUser, isAuthLoading, router, courseId])
+  }, [user, isAuthLoading, router, courseId])
 
   const fetchCourseData = async () => {
     setLoading(true)

frontend/app/courses/[courseId]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useRouter, useParams } from "next/navigation"
-import { Loader2, Play, Clock, BookOpen, ChevronDown, ChevronRight, User, Users, Star, Award, TrendingUp, CheckCircle, ArrowRight } from "lucide-react"
+import { Loader2, Play, Clock, BookOpen, ChevronDown, ChevronRight, User, Users, Star, CheckCircle } from "lucide-react"
 import { toast } from "react-hot-toast"
 import api from "@/lib/api"
 import { useAuth } from "@/context/auth-context"
@@ -44,7 +44,7 @@ type Lesson = {
 }
 
 export default function CoursePage() {
-  const { user, firebaseUser, isLoading: authLoading } = useAuth()
+  const { user, isLoading: authLoading } = useAuth()
   const params = useParams()
   const router = useRouter()
   const courseId = params?.courseId as string
@@ -56,42 +56,49 @@ export default function CoursePage() {
   const [modulesLoading, setModulesLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  // Navigation state
   const [selectedModuleId, setSelectedModuleId] = useState<string | null>(null)
   const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null)
   const [expandedModules, setExpandedModules] = useState<{ [moduleId: string]: boolean }>({})
   const [completed, setCompleted] = useState(false)
-  
-  // Certificate Modal State
   const [showCertificateModal, setShowCertificateModal] = useState(false)
 
+  const logCourseActivity = async (action: "view" | "start" | "lesson_view", lessonId?: string) => {
+    try {
+      const token = localStorage.getItem("openlearnx_jwt_token")
+      await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/activity`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ action, lesson_id: lessonId }),
+      })
+    } catch {
+      // Activity logging should not block course UX.
+    }
+  }
+
   useEffect(() => {
-    if (!authLoading && !user && !firebaseUser) {
+    if (!authLoading && !user) {
       toast.error("Please login to view courses.")
       router.replace("/")
       return
     }
-    if ((user || firebaseUser) && courseId) {
+    if (user && courseId) {
       fetchCourseData()
     }
-  }, [authLoading, user, firebaseUser, courseId, router])
+  }, [authLoading, user, courseId, router])
 
   const fetchCourseData = async () => {
     setLoading(true)
     setError(null)
-    
-    try {
-      console.log('🔍 Starting to fetch course data for:', courseId)
-      
-      const courseResponse = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
-      const courseData = courseResponse.data
-      console.log('✅ Course data loaded:', courseData)
-      setCourse(courseData)
 
+    try {
+      const courseResponse = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
+      setCourse(courseResponse.data)
+      logCourseActivity("view")
       await fetchModulesAndLessons(courseId)
-      
     } catch (err: any) {
-      console.error('❌ Error fetching course data:', err)
       setError(err.message || "Failed to load course data.")
       toast.error("Failed to load course data.")
     } finally {
@@ -99,60 +106,37 @@ export default function CoursePage() {
     }
   }
 
-  const fetchModulesAndLessons = async (courseId: string) => {
+  const fetchModulesAndLessons = async (id: string) => {
     setModulesLoading(true)
-    
+
     try {
-      console.log('🔍 Fetching modules for course:', courseId)
-      
-      let modulesData = null
-      let modulesResponse = null
-      
-      // Use public endpoint for course page (not admin endpoint)
-      try {
-        modulesResponse = await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/modules`, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        
-        if (modulesResponse.ok) {
-          modulesData = await modulesResponse.json()
-          console.log('✅ Modules loaded from public endpoint:', modulesData)
-        }
-      } catch (publicError) {
-        console.error('❌ Module endpoint failed')
-      }
-      
-      if (modulesData) {
-        let modulesList: Module[] = []
-        
-        if (modulesData.success && modulesData.modules && Array.isArray(modulesData.modules)) {
-          modulesList = modulesData.modules
-        } else if (modulesData.modules && Array.isArray(modulesData.modules)) {
-          modulesList = modulesData.modules
-        } else if (Array.isArray(modulesData)) {
-          modulesList = modulesData
-        } else if (modulesData.data && Array.isArray(modulesData.data)) {
-          modulesList = modulesData.data
-        }
-        
-        modulesList = modulesList.sort((a, b) => a.order - b.order)
-        
-        console.log('🔍 Processed modules list:', modulesList)
-        setModules(modulesList)
-        
-        if (modulesList.length > 0) {
-          await fetchLessonsForAllModules(modulesList)
-        }
-      } else {
-        console.log('⚠️ No modules data received')
+      const modulesResponse = await fetch(`http://127.0.0.1:5000/api/courses/${id}/modules`, {
+        headers: { "Content-Type": "application/json" },
+      })
+
+      if (!modulesResponse.ok) {
         setModules([])
         setLessons({})
+        return
       }
-      
-    } catch (error) {
-      console.error('❌ Error in fetchModulesAndLessons:', error)
+
+      const modulesData = await modulesResponse.json()
+      let modulesList: Module[] = []
+
+      if (modulesData.success && Array.isArray(modulesData.modules)) modulesList = modulesData.modules
+      else if (Array.isArray(modulesData.modules)) modulesList = modulesData.modules
+      else if (Array.isArray(modulesData)) modulesList = modulesData
+      else if (Array.isArray(modulesData.data)) modulesList = modulesData.data
+
+      modulesList = modulesList.sort((a, b) => a.order - b.order)
+      setModules(modulesList)
+
+      if (modulesList.length > 0) {
+        await fetchLessonsForAllModules(modulesList)
+      } else {
+        setLessons({})
+      }
+    } catch {
       setModules([])
       setLessons({})
     } finally {
@@ -163,112 +147,84 @@ export default function CoursePage() {
   const fetchLessonsForAllModules = async (modulesList: Module[]) => {
     const lessonsData: { [moduleId: string]: Lesson[] } = {}
     const expandedState: { [moduleId: string]: boolean } = {}
-    
+
     for (const module of modulesList) {
       try {
-        console.log('🔍 Fetching lessons for module:', module.id)
-        
-        // Use public endpoint for course page (not admin endpoint)
         const lessonsResponse = await fetch(`http://127.0.0.1:5000/api/modules/${module.id}/lessons`, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
+          headers: { "Content-Type": "application/json" },
         })
-        
-        if (lessonsResponse.ok) {
-          const lessonData = await lessonsResponse.json()
-          console.log(`✅ Lessons loaded for module ${module.id}:`, lessonData)
-          
-          let lessonsList: Lesson[] = []
-          if (lessonData.success && lessonData.lessons && Array.isArray(lessonData.lessons)) {
-            lessonsList = lessonData.lessons
-          } else if (lessonData.lessons && Array.isArray(lessonData.lessons)) {
-            lessonsList = lessonData.lessons
-          } else if (Array.isArray(lessonData)) {
-            lessonsList = lessonData
-          } else if (lessonData.data && Array.isArray(lessonData.data)) {
-            lessonsList = lessonData.data
-          }
-          
-          lessonsList = lessonsList.sort((a, b) => a.order - b.order)
-          lessonsData[module.id] = lessonsList
-          
-          if (!selectedModuleId && lessonsList.length > 0) {
-            expandedState[module.id] = true
-          }
-        } else {
-          console.log(`⚠️ No lessons found for module ${module.id}`)
+
+        if (!lessonsResponse.ok) {
           lessonsData[module.id] = []
+          continue
         }
-      } catch (error) {
-        console.error(`❌ Error fetching lessons for module ${module.id}:`, error)
+
+        const lessonData = await lessonsResponse.json()
+        let lessonsList: Lesson[] = []
+
+        if (lessonData.success && Array.isArray(lessonData.lessons)) lessonsList = lessonData.lessons
+        else if (Array.isArray(lessonData.lessons)) lessonsList = lessonData.lessons
+        else if (Array.isArray(lessonData)) lessonsList = lessonData
+        else if (Array.isArray(lessonData.data)) lessonsList = lessonData.data
+
+        lessonsData[module.id] = lessonsList.sort((a, b) => a.order - b.order)
+        if (!selectedModuleId && lessonsData[module.id].length > 0) expandedState[module.id] = true
+      } catch {
         lessonsData[module.id] = []
       }
     }
-    
+
     setLessons(lessonsData)
     setExpandedModules(expandedState)
-    
+
     if (!selectedModuleId && modulesList.length > 0) {
       const firstModule = modulesList[0]
       const firstModuleLessons = lessonsData[firstModule.id] || []
-      
       setSelectedModuleId(firstModule.id)
-      if (firstModuleLessons.length > 0) {
-        setSelectedLessonId(firstModuleLessons[0].id)
-      }
+      if (firstModuleLessons.length > 0) setSelectedLessonId(firstModuleLessons[0].id)
     }
   }
 
-  function getEmbedUrl(url?: string): string | undefined {
+  const getEmbedUrl = (url?: string): string | undefined => {
     if (!url) return undefined
     const regExp = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^#&?]{11})/
     const match = url.match(regExp)
-    if (match && match[1]) {
-      return `https://www.youtube.com/embed/${match[1]}?rel=0&modestbranding=1`
-    }
+    if (match && match[1]) return `https://www.youtube.com/embed/${match[1]}?rel=0&modestbranding=1`
     return url
   }
 
   const toggleModule = (moduleId: string) => {
-    setExpandedModules(prev => ({
-      ...prev,
-      [moduleId]: !prev[moduleId]
-    }))
+    setExpandedModules((prev) => ({ ...prev, [moduleId]: !prev[moduleId] }))
   }
 
   const selectLesson = (moduleId: string, lessonId: string) => {
     setSelectedModuleId(moduleId)
     setSelectedLessonId(lessonId)
-    setExpandedModules(prev => ({
-      ...prev,
-      [moduleId]: true
-    }))
+    setExpandedModules((prev) => ({ ...prev, [moduleId]: true }))
+    logCourseActivity("lesson_view", lessonId)
   }
 
   const getCurrentLesson = (): Lesson | null => {
     if (!selectedModuleId || !selectedLessonId) return null
-    const moduleLessons = lessons[selectedModuleId] || []
-    return moduleLessons.find(lesson => lesson.id === selectedLessonId) || null
+    return (lessons[selectedModuleId] || []).find((lesson) => lesson.id === selectedLessonId) || null
   }
 
   const getAllLessons = (): Lesson[] => {
-    const allLessons: Lesson[] = []
-    modules.forEach(module => {
-      const moduleLessons = lessons[module.id] || []
-      allLessons.push(...moduleLessons)
+    const all: Lesson[] = []
+    modules.forEach((module) => {
+      all.push(...(lessons[module.id] || []))
     })
-    return allLessons
+    return all
   }
 
-  const navigateLesson = (direction: 'prev' | 'next') => {
+  const navigateLesson = (direction: "prev" | "next") => {
     const allLessons = getAllLessons()
-    const currentIndex = allLessons.findIndex(lesson => lesson.id === selectedLessonId)
-    
-    if (direction === 'prev' && currentIndex > 0) {
+    const currentIndex = allLessons.findIndex((lesson) => lesson.id === selectedLessonId)
+
+    if (direction === "prev" && currentIndex > 0) {
       const prevLesson = allLessons[currentIndex - 1]
       selectLesson(prevLesson.module_id, prevLesson.id)
-    } else if (direction === 'next' && currentIndex < allLessons.length - 1) {
+    } else if (direction === "next" && currentIndex < allLessons.length - 1) {
       const nextLesson = allLessons[currentIndex + 1]
       selectLesson(nextLesson.module_id, nextLesson.id)
     }
@@ -284,37 +240,35 @@ export default function CoursePage() {
     return allLessons.length > 0 && allLessons[allLessons.length - 1].id === selectedLessonId
   }
 
-  const markComplete = () => {
+  const markComplete = async () => {
+    try {
+      const token = localStorage.getItem("openlearnx_jwt_token")
+      if (selectedLessonId) {
+        await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/lessons/${selectedLessonId}/complete`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+        })
+      }
+    } catch {
+      // Keep UX smooth even if completion log write fails.
+    }
     setCompleted(true)
     setShowCertificateModal(true)
   }
 
-  const getTotalLessons = () => {
-    return Object.values(lessons).reduce((total, moduleLessons) => total + moduleLessons.length, 0)
-  }
+  const getTotalLessons = () => Object.values(lessons).reduce((total, moduleLessons) => total + moduleLessons.length, 0)
 
   const currentLesson = getCurrentLesson()
 
   if (authLoading || loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center relative overflow-hidden">
-        {/* Animated background elements */}
-        <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-          <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"></div>
-          <div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
-        </div>
-        <div className="text-center z-10">
-          <div className="relative">
-            <Loader2 className="h-16 w-16 animate-spin text-white mx-auto mb-6 drop-shadow-lg" />
-            <div className="absolute inset-0 h-16 w-16 border-4 border-transparent border-t-purple-400 rounded-full animate-ping mx-auto"></div>
-          </div>
-          <p className="text-xl text-white font-semibold tracking-wide animate-pulse">Loading your learning journey...</p>
-          <div className="mt-4 flex justify-center space-x-1">
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce"></div>
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce animation-delay-200"></div>
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce animation-delay-400"></div>
-          </div>
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="text-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600 mx-auto mb-3" />
+          <p className="text-gray-700 dark:text-gray-300">Loading course...</p>
         </div>
       </div>
     )
@@ -322,21 +276,16 @@ export default function CoursePage() {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-red-900 via-pink-900 to-purple-900 flex items-center justify-center p-4">
-        <div className="text-center max-w-md mx-auto px-6">
-          <div className="bg-white/10 backdrop-blur-lg border border-red-300/30 rounded-3xl p-10 shadow-2xl animate-bounce">
-            <div className="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
-              <span className="text-3xl">⚠️</span>
-            </div>
-            <h2 className="text-2xl font-bold text-white mb-4">Oops! Something went wrong</h2>
-            <p className="text-red-200 mb-8 leading-relaxed">{error}</p>
-            <button 
-              onClick={fetchCourseData}
-              className="px-8 py-4 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-2xl hover:from-red-600 hover:to-pink-600 shadow-lg transition-all duration-300 transform hover:scale-105 font-semibold text-lg"
-            >
-              Try Again
-            </button>
-          </div>
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+        <div className="w-full max-w-md rounded-xl border border-red-200 bg-white dark:bg-gray-800 p-6 text-center">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Unable to load course</h2>
+          <p className="mt-2 text-sm text-red-600 dark:text-red-300">{error}</p>
+          <button
+            onClick={fetchCourseData}
+            className="mt-4 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
+          >
+            Retry
+          </button>
         </div>
       </div>
     )
@@ -344,214 +293,115 @@ export default function CoursePage() {
 
   if (!course) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="text-center max-w-sm bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl p-10 animate-fadeIn">
-          <div className="w-24 h-24 bg-gray-500 rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce">
-            <span className="text-4xl">🔍</span>
-          </div>
-          <h2 className="text-3xl font-bold text-white mb-4">Course Not Found</h2>
-          <p className="text-gray-300 leading-relaxed">The course you're looking for doesn't exist or may have been removed.</p>
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+        <div className="w-full max-w-md rounded-xl border border-gray-200 bg-white dark:bg-gray-800 p-6 text-center">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Course not found</h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">This course is unavailable or was removed.</p>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
-      {/* Animated Background Elements */}
-      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute -top-40 -right-40 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float"></div>
-        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float animation-delay-2000"></div>
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-      </div>
-
-      {/* Header */}
-      <header className="bg-white/80 backdrop-blur-lg shadow-xl border-b border-purple-200 sticky top-0 z-50">
-        <div className="w-full px-6 sm:px-10 lg:px-16 xl:px-20">
-          <div className="flex items-center justify-between h-20">
-            <div className="flex items-center space-x-6 animate-slideInLeft">
-              <div className="w-14 h-14 bg-gradient-to-br from-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg transform hover:scale-110 transition-transform duration-300">
-                <span className="text-white font-extrabold text-2xl">OL</span>
-              </div>
-              <div>
-                <h1 className="text-2xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent tracking-tight">{course.title}</h1>
-                <p className="text-sm text-purple-700 font-semibold tracking-wide">by {course.mentor}</p>
-              </div>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <header className="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+        <div className="w-full px-6 sm:px-8 lg:px-12 py-5 flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">{course.title}</h1>
+            <p className="text-sm text-gray-600 dark:text-gray-300">by {course.mentor}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
+            <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
+              <BookOpen className="w-4 h-4" />
+              <span>{modules.length} modules</span>
             </div>
-            <div className="hidden md:flex items-center space-x-8 text-sm text-purple-700 animate-slideInRight">
-              <div className="flex items-center space-x-2 bg-purple-100 px-4 py-2 rounded-full">
-                <BookOpen className="w-5 h-5 text-purple-600" />
-                <span className="font-semibold">{modules.length} modules</span>
-              </div>
-              <div className="flex items-center space-x-2 bg-indigo-100 px-4 py-2 rounded-full">
-                <Play className="w-5 h-5 text-indigo-600" />
-                <span className="font-semibold">{getTotalLessons()} lessons</span>
-              </div>
-              <div className="flex items-center space-x-2 bg-pink-100 px-4 py-2 rounded-full">
-                <Users className="w-5 h-5 text-pink-600" />
-                <span className="font-semibold">{course.students.toLocaleString()} students</span>
-              </div>
+            <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
+              <Play className="w-4 h-4" />
+              <span>{getTotalLessons()} lessons</span>
+            </div>
+            <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
+              <Users className="w-4 h-4" />
+              <span>{course.students.toLocaleString()} students</span>
             </div>
           </div>
         </div>
       </header>
 
-      <main className="w-full px-6 sm:px-10 lg:px-16 xl:px-20 py-12 grid grid-cols-1 lg:grid-cols-5 gap-12 relative z-10">
-        
-        {/* Sidebar - Now takes up 2 columns on large screens */}
-        <aside className="lg:col-span-2 animate-slideInLeft">
-          <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl border border-purple-200 p-10 sticky top-28">
-            <div className="flex items-center justify-between mb-8">
-              <h2 className="text-2xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">Course Content</h2>
-              <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center">
-                <BookOpen className="w-4 h-4 text-white" />
-              </div>
-            </div>
+      <main className="w-full px-6 sm:px-8 lg:px-12 py-6 grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <aside className="lg:col-span-2">
+          <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 sticky top-4">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Course Content</h2>
 
-            {/* Enhanced Progress Bar */}
-            <div className="mb-8 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl border border-purple-200">
-              <div className="flex items-center justify-between mb-3">
-                <span className="text-sm font-semibold text-purple-700">Progress</span>
-                <span className="text-sm font-bold text-indigo-600">25%</span>
-              </div>
-              <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
-                <div className="bg-gradient-to-r from-purple-500 to-indigo-500 h-3 rounded-full transition-all duration-1000 ease-out animate-pulse" style={{width: '25%'}}></div>
-              </div>
-            </div>
-
-            {/* Debug Info - Enhanced */}
-            <div className="mb-8 p-5 bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-2xl animate-fadeIn">
-              <h3 className="text-sm font-bold text-blue-800 mb-4 flex items-center">
-                <TrendingUp className="w-4 h-4 mr-2" />
-                🔍 Debug Info:
-              </h3>
-              <div className="text-xs space-y-2 text-blue-700">
-                <p><strong>Course ID:</strong> {courseId}</p>
-                <p><strong>Modules Loaded:</strong> {modules.length}</p>
-                <p><strong>Total Lessons:</strong> {getTotalLessons()}</p>
-                <p><strong>Modules Loading:</strong> {modulesLoading ? 'Yes' : 'No'}</p>
-                <p><strong>Selected Module:</strong> {selectedModuleId || 'None'}</p>
-                <p><strong>Selected Lesson:</strong> {currentLesson?.title || 'None'}</p>
-                <p><strong>Expanded Modules:</strong> {Object.keys(expandedModules).length}</p>
-              </div>
-              {modules.length > 0 && (
-                <details className="mt-4 border-t border-blue-200 pt-4">
-                  <summary className="text-xs cursor-pointer text-blue-600 font-semibold hover:text-blue-800 transition-colors">Show Raw Data</summary>
-                  <pre className="mt-3 text-xs p-4 bg-white rounded-xl shadow max-h-40 overflow-auto">
-                    {JSON.stringify({ modules, lessons }, null, 2)}
-                  </pre>
-                </details>
-              )}
-            </div>
-
-            {/* Loading State */}
             {modulesLoading && (
-              <div className="text-center py-10 animate-pulse">
-                <Loader2 className="h-12 w-12 animate-spin text-purple-500 mx-auto mb-4" />
-                <p className="text-lg text-purple-700 font-semibold">Loading modules...</p>
+              <div className="text-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-blue-600 mx-auto mb-2" />
+                <p className="text-sm text-gray-600 dark:text-gray-300">Loading modules...</p>
               </div>
             )}
 
-            {/* No Modules State */}
             {!modulesLoading && modules.length === 0 && (
-              <div className="text-center py-8 animate-bounce">
-                <div className="bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-300 rounded-2xl p-6 text-yellow-800">
-                  <div className="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <span className="text-2xl">📚</span>
-                  </div>
-                  <h3 className="text-lg font-bold mb-3">No Modules Found</h3>
-                  <p className="text-sm mb-4 leading-relaxed">
-                    This could mean:<br />
-                    &bull; No modules created yet<br />
-                    &bull; API endpoint issues<br />
-                    &bull; Course ID mismatch
-                  </p>
-                  <button
-                    onClick={() => fetchModulesAndLessons(courseId)}
-                    className="px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl text-white font-bold hover:from-yellow-600 hover:to-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg"
-                  >
-                    Retry Loading Modules
-                  </button>
-                </div>
+              <div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-5 text-center">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-white">No content available yet</h3>
+                <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                  Lessons for this course have not been published.
+                </p>
+                <button
+                  onClick={() => fetchModulesAndLessons(courseId)}
+                  className="mt-4 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
+                >
+                  Refresh
+                </button>
               </div>
             )}
 
-            {/* Modules List */}
             {!modulesLoading && modules.length > 0 && (
-              <div className="space-y-4">
+              <div className="space-y-3">
                 {modules.map((module, index) => (
-                  <div key={module.id} className="border border-purple-200 rounded-2xl overflow-hidden shadow-lg bg-white/60 backdrop-blur-sm hover:shadow-xl transition-all duration-300 animate-fadeInUp" style={{animationDelay: `${index * 100}ms`}}>
-                    {/* Module Header */}
+                  <div key={module.id} className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden">
                     <button
                       onClick={() => toggleModule(module.id)}
-                      className={`w-full px-6 py-5 text-left hover:bg-gradient-to-r hover:from-purple-50 hover:to-indigo-50 flex items-center justify-between transition-all duration-300 ${
-                        selectedModuleId === module.id ? 'bg-gradient-to-r from-purple-100 to-indigo-100 border-purple-300' : 'bg-white/80'
+                      className={`w-full px-4 py-3 text-left flex items-center justify-between ${
+                        selectedModuleId === module.id ? "bg-blue-50 dark:bg-blue-900/20" : "bg-white dark:bg-gray-800"
                       }`}
                     >
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center space-x-4">
-                          <span className="flex-shrink-0 w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full flex items-center justify-center font-bold text-sm shadow-lg transform hover:scale-110 transition-transform duration-300">
-                            {index + 1}
-                          </span>
-                          <h3 className="font-bold text-purple-900 truncate text-lg">{module.title}</h3>
-                        </div>
-                        <p className="text-sm text-purple-600 mt-2 ml-14 flex items-center">
-                          <CheckCircle className="w-4 h-4 mr-2" />
-                          {(lessons[module.id]?.length ?? 0) + (lessons[module.id]?.length === 1 ? ' lesson' : ' lessons')}
+                      <div>
+                        <p className="text-sm font-medium text-gray-900 dark:text-white">
+                          {index + 1}. {module.title}
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                          {(lessons[module.id]?.length || 0)} lessons
                         </p>
                       </div>
-                      <div className="flex-shrink-0 ml-4">
-                        <div className={`transform transition-transform duration-300 ${expandedModules[module.id] ? 'rotate-180' : ''}`}>
-                          {expandedModules[module.id] ? (
-                            <ChevronDown className="w-6 h-6 text-purple-500" />
-                          ) : (
-                            <ChevronRight className="w-6 h-6 text-purple-400" />
-                          )}
-                        </div>
-                      </div>
+                      {expandedModules[module.id] ? (
+                        <ChevronDown className="w-4 h-4 text-gray-500" />
+                      ) : (
+                        <ChevronRight className="w-4 h-4 text-gray-500" />
+                      )}
                     </button>
 
-                    {/* Lessons */}
                     {expandedModules[module.id] && (
-                      <div className="bg-gradient-to-r from-purple-50 to-indigo-50 border-t border-purple-200 animate-slideDown">
-                        {lessons[module.id] && lessons[module.id].length > 0 ? (
-                          lessons[module.id].map((lesson, lessonIndex) => (
+                      <div className="border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50">
+                        {(lessons[module.id] || []).length > 0 ? (
+                          (lessons[module.id] || []).map((lesson) => (
                             <button
                               key={lesson.id}
                               onClick={() => selectLesson(module.id, lesson.id)}
-                              className={`w-full px-8 py-4 text-left hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 transition-all duration-300 border-l-4 group ${
+                              className={`w-full px-4 py-3 text-left border-l-2 ${
                                 selectedLessonId === lesson.id
-                                  ? 'border-purple-500 bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-900 font-bold shadow-inner'
-                                  : 'border-transparent text-purple-700 hover:border-purple-300'
+                                  ? "border-blue-600 bg-blue-50 dark:bg-blue-900/20"
+                                  : "border-transparent hover:bg-gray-100 dark:hover:bg-gray-700"
                               }`}
                             >
-                              <div className="flex items-center space-x-4">
-                                <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs transition-all duration-300 group-hover:scale-110 ${
-                                  selectedLessonId === lesson.id
-                                    ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg'
-                                    : 'bg-purple-200 text-purple-700 group-hover:bg-purple-300'
-                                }`}>
-                                  <Play className="w-4 h-4" />
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                  <p className="truncate font-semibold">{lesson.title}</p>
-                                  {lesson.duration && (
-                                    <p className={`text-xs flex items-center mt-1 ${
-                                      selectedLessonId === lesson.id ? 'text-purple-700 font-semibold' : 'text-purple-500'
-                                    }`}>
-                                      <Clock className="w-4 h-4 mr-2" />
-                                      {lesson.duration}
-                                    </p>
-                                  )}
-                                </div>
-                                <ArrowRight className={`w-4 h-4 transition-all duration-300 ${
-                                  selectedLessonId === lesson.id ? 'text-purple-600 transform scale-110' : 'text-transparent group-hover:text-purple-400'
-                                }`} />
-                              </div>
+                              <p className="text-sm text-gray-900 dark:text-white">{lesson.title}</p>
+                              {lesson.duration && (
+                                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 inline-flex items-center gap-1">
+                                  <Clock className="w-3 h-3" /> {lesson.duration}
+                                </p>
+                              )}
                             </button>
                           ))
                         ) : (
-                          <p className="px-8 py-6 text-purple-600 text-sm italic text-center">No lessons in this module</p>
+                          <p className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">No lessons in this module.</p>
                         )}
                       </div>
                     )}
@@ -562,14 +412,12 @@ export default function CoursePage() {
           </div>
         </aside>
 
-        {/* Main Content - Now takes up 3 columns on large screens for full width */}
-        <section className="lg:col-span-3 animate-slideInRight">
-          <div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl border border-purple-200 overflow-hidden">
+        <section className="lg:col-span-3">
+          <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
             {currentLesson ? (
               <>
-                {/* Video Player */}
                 {(currentLesson.embed_url || currentLesson.video_url) && (
-                  <div className="aspect-video bg-black rounded-t-3xl overflow-hidden relative group">
+                  <div className="aspect-video bg-black">
                     <iframe
                       src={getEmbedUrl(currentLesson.embed_url || currentLesson.video_url)}
                       title={currentLesson.title}
@@ -577,155 +425,84 @@ export default function CoursePage() {
                       className="w-full h-full"
                       loading="lazy"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                   </div>
                 )}
 
-                {/* Lesson Content */}
-                <div className="p-16">
-                  {/* Lesson Header */}
-                  <div className="mb-12 animate-fadeInUp">
-                    <div className="flex items-center text-purple-600 space-x-4 mb-6">
-                      <div className="flex items-center space-x-2 bg-purple-100 px-6 py-3 rounded-full">
-                        <User className="w-6 h-6" />
-                        <span className="font-bold text-lg">{course.mentor}</span>
-                      </div>
-                      <span className="text-purple-300">•</span>
-                      <span className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-6 py-3 rounded-full text-lg font-bold uppercase tracking-widest shadow-lg">
-                        {course.difficulty}
-                      </span>
-                    </div>
-                    <h1 className="text-6xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent leading-tight mb-6 drop-shadow-sm">{currentLesson.title}</h1>
-                    {currentLesson.duration && (
-                      <div className="flex items-center text-purple-600 space-x-3 text-xl font-semibold">
-                        <div className="flex items-center space-x-2 bg-purple-100 px-6 py-3 rounded-full">
-                          <Clock className="w-6 h-6" />
-                          <span>{currentLesson.duration}</span>
-                        </div>
-                      </div>
-                    )}
+                <div className="p-6">
+                  <div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300 mb-4">
+                    <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1">
+                      <User className="w-4 h-4" /> {course.mentor}
+                    </span>
+                    <span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-3 py-1 font-medium">
+                      {course.difficulty}
+                    </span>
                   </div>
 
-                  {/* Lesson Description */}
+                  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">{currentLesson.title}</h2>
+
                   {currentLesson.description && (
-                    <section className="mb-16 animate-fadeInUp animation-delay-200">
-                      <h2 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-8 border-b-2 border-purple-200 pb-4">
-                        About this lesson
-                      </h2>
-                      <article className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-3xl p-10 text-purple-900 prose max-w-none shadow-inner border border-purple-200 text-lg leading-relaxed">
-                        {currentLesson.description}
-                      </article>
-                    </section>
+                    <div className="mb-6">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">About this lesson</h3>
+                      <p className="text-gray-700 dark:text-gray-300 leading-relaxed">{currentLesson.description}</p>
+                    </div>
                   )}
 
-                  {/* Lesson Content */}
                   {currentLesson.content && (
-                    <section className="mb-16 animate-fadeInUp animation-delay-400">
-                      <h2 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-8 border-b-2 border-purple-200 pb-4">
-                        Lesson Content
-                      </h2>
-                      <article className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-3xl p-10 text-purple-900 prose max-w-none whitespace-pre-line shadow-inner border border-purple-200 text-lg leading-relaxed">
+                    <div className="mb-6">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Lesson notes</h3>
+                      <div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-4 text-gray-800 dark:text-gray-200 whitespace-pre-line">
                         {currentLesson.content}
-                      </article>
-                    </section>
+                      </div>
+                    </div>
                   )}
 
-                  {/* Navigation */}
-                  <div className="flex justify-between items-center pt-12 border-t-2 border-purple-200 animate-fadeInUp animation-delay-600">
+                  <div className="pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between gap-3">
                     <button
-                      onClick={() => navigateLesson('prev')}
+                      onClick={() => navigateLesson("prev")}
                       disabled={isFirstLesson()}
-                      className="px-12 py-5 bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 rounded-3xl hover:from-gray-200 hover:to-gray-300 disabled:opacity-50 disabled:cursor-not-allowed font-bold transition-all duration-300 transform hover:scale-105 shadow-lg text-xl"
+                      className="px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 dark:bg-gray-700 dark:text-gray-100"
                     >
-                      ← Previous Lesson
+                      Previous
                     </button>
 
                     {!isLastLesson() ? (
                       <button
-                        onClick={() => navigateLesson('next')}
-                        className="px-12 py-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-3xl hover:from-purple-700 hover:to-indigo-700 font-bold transition-all duration-300 transform hover:scale-105 shadow-xl text-xl"
+                        onClick={() => navigateLesson("next")}
+                        className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
                       >
-                        Next Lesson →
+                        Next
                       </button>
                     ) : (
                       <button
                         onClick={markComplete}
                         disabled={completed}
-                        className={`px-12 py-5 rounded-3xl font-bold transition-all duration-300 transform hover:scale-105 shadow-xl text-xl ${
-                          completed
-                            ? "bg-gradient-to-r from-green-500 to-emerald-500 text-white cursor-not-allowed shadow-inner"
-                            : "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700"
-                        }`}
+                        className={`px-4 py-2 rounded-lg text-white ${completed ? "bg-green-600" : "bg-blue-600 hover:bg-blue-700"}`}
                       >
-                        {completed ? "✓ Course Completed" : "Mark as Complete"}
+                        {completed ? "Completed" : "Mark as complete"}
                       </button>
                     )}
                   </div>
-
-                  {/* Completion Message */}
-                  {completed && !showCertificateModal && (
-                    <div className="mt-16 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-300 rounded-3xl p-12 text-center shadow-2xl animate-bounce">
-                      <div className="text-green-700">
-                        <div className="text-8xl mb-8 animate-pulse">🎉</div>
-                        <h3 className="text-4xl font-extrabold mb-6 bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">Congratulations!</h3>
-                        <p className="mb-10 text-green-800 font-semibold text-2xl">
-                          You have successfully completed this course!
-                        </p>
-                        <button
-                          onClick={() => setShowCertificateModal(true)}
-                          className="px-16 py-6 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-3xl hover:from-green-700 hover:to-emerald-700 transition-all duration-300 transform hover:scale-105 font-bold text-xl shadow-xl"
-                        >
-                          Get Your Certificate 🏆
-                        </button>
-                      </div>
-                    </div>
-                  )}
                 </div>
               </>
             ) : (
-              /* Course Overview */
-              <div className="p-20 text-center max-w-5xl mx-auto text-purple-900 animate-fadeIn">
-                <h1 className="text-7xl font-extrabold mb-10 bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 bg-clip-text text-transparent drop-shadow-lg">{course.title}</h1>
-
-                <div className="flex flex-wrap justify-center gap-8 mb-16 text-purple-700 font-bold text-xl">
-                  <div className="flex items-center space-x-4 bg-purple-100 px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300">
-                    <User className="w-8 h-8" />
-                    <span>by {course.mentor}</span>
-                  </div>
-                  <div className="flex items-center space-x-4 bg-yellow-100 px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300">
-                    <Star className="w-8 h-8 text-yellow-500" />
-                    <span>4.8 Rating</span>
-                  </div>
-                  <span className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-8 py-4 rounded-full text-xl uppercase font-extrabold tracking-widest shadow-lg transform hover:scale-105 transition-transform duration-300">
+              <div className="p-8 text-center">
+                <h2 className="text-3xl font-semibold text-gray-900 dark:text-white">{course.title}</h2>
+                <div className="mt-4 flex flex-wrap justify-center gap-3 text-sm">
+                  <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-gray-700 dark:text-gray-300">
+                    <User className="w-4 h-4" /> by {course.mentor}
+                  </span>
+                  <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 px-3 py-1 text-yellow-700 dark:text-yellow-300">
+                    <Star className="w-4 h-4" /> 4.8 rating
+                  </span>
+                  <span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-3 py-1 text-blue-700 dark:text-blue-300">
                     {course.difficulty}
                   </span>
                 </div>
 
-                <p className="text-3xl max-w-5xl mx-auto mb-16 leading-relaxed tracking-wide text-purple-800">{course.description}</p>
-
-                <div className="grid grid-cols-3 gap-16 mb-16">
-                  <div className="text-center transform hover:scale-110 transition-transform duration-300">
-                    <div className="w-32 h-32 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
-                      <span className="text-5xl font-extrabold text-white">{modules.length}</span>
-                    </div>
-                    <div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Modules</div>
-                  </div>
-                  <div className="text-center transform hover:scale-110 transition-transform duration-300">
-                    <div className="w-32 h-32 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
-                      <span className="text-5xl font-extrabold text-white">{getTotalLessons()}</span>
-                    </div>
-                    <div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Lessons</div>
-                  </div>
-                  <div className="text-center transform hover:scale-110 transition-transform duration-300">
-                    <div className="w-32 h-32 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
-                      <span className="text-5xl font-extrabold text-white">{course.students.toLocaleString()}</span>
-                    </div>
-                    <div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Students</div>
-                  </div>
-                </div>
+                <p className="mt-6 text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">{course.description}</p>
 
                 {(course.embed_url || course.video_url) && (
-                  <div className="aspect-video rounded-3xl overflow-hidden shadow-2xl mx-auto max-w-6xl bg-black border-4 border-purple-600 mb-16 transform hover:scale-105 transition-transform duration-500">
+                  <div className="mt-8 aspect-video rounded-xl overflow-hidden border border-gray-200 dark:border-gray-600 bg-black max-w-4xl mx-auto">
                     <iframe
                       src={getEmbedUrl(course.embed_url || course.video_url)}
                       title={course.title}
@@ -741,23 +518,18 @@ export default function CoursePage() {
                     onClick={() => {
                       const firstModule = modules[0]
                       const firstLessons = lessons[firstModule?.id] || []
-                      if (firstLessons.length > 0) {
+                      if (firstModule && firstLessons.length > 0) {
+                        logCourseActivity("start")
                         selectLesson(firstModule.id, firstLessons[0].id)
                       }
                     }}
-                    className="mt-12 px-20 py-8 bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white rounded-3xl hover:from-purple-700 hover:via-pink-700 hover:to-indigo-700 font-extrabold text-3xl shadow-2xl transition-all duration-300 transform hover:scale-110 hover:shadow-purple-500/25"
+                    className="mt-8 px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
                   >
-                    🚀 Start Learning Journey
+                    Start learning
                   </button>
                 ) : (
-                  <div className="bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-yellow-300 rounded-3xl p-12 text-yellow-800 text-2xl font-bold max-w-lg mx-auto shadow-xl">
-                    <div className="w-24 h-24 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-8">
-                      <span className="text-4xl">🚧</span>
-                    </div>
-                    <h3 className="text-3xl mb-6">Coming Soon</h3>
-                    <p className="font-normal text-yellow-700 text-xl">
-                      Amazing lessons are being crafted for this course. Check back soon!
-                    </p>
+                  <div className="mt-8 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-5 max-w-xl mx-auto">
+                    <p className="text-gray-700 dark:text-gray-300">Lessons are not published yet for this course.</p>
                   </div>
                 )}
               </div>
@@ -766,7 +538,6 @@ export default function CoursePage() {
         </section>
       </main>
 
-      {/* Certificate Modal */}
       {showCertificateModal && course && (
         <CertificateModal
           isOpen={showCertificateModal}
@@ -774,49 +545,10 @@ export default function CoursePage() {
           courseTitle={course.title}
           courseMentor={course.mentor}
           courseId={course.id}
-          userId={user?.uid || firebaseUser?.uid || 'anonymous'}
-          walletId={user?.wallet || firebaseUser?.uid || 'no-wallet'}
+          userId={user?.id || "anonymous"}
+          walletId={user?.wallet_address || "no-wallet"}
         />
       )}
-
-      {/* Custom CSS for animations */}
-      <style jsx>{`
-        @keyframes float {
-          0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(-20px); }
-        }
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes fadeInUp {
-          from { opacity: 0; transform: translateY(30px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes slideInLeft {
-          from { opacity: 0; transform: translateX(-50px); }
-          to { opacity: 1; transform: translateX(0); }
-        }
-        @keyframes slideInRight {
-          from { opacity: 0; transform: translateX(50px); }
-          to { opacity: 1; transform: translateX(0); }
-        }
-        @keyframes slideDown {
-          from { opacity: 0; max-height: 0; }
-          to { opacity: 1; max-height: 500px; }
-        }
-        .animate-float { animation: float 6s ease-in-out infinite; }
-        .animate-fadeIn { animation: fadeIn 1s ease-out; }
-        .animate-fadeInUp { animation: fadeInUp 0.8s ease-out; }
-        .animate-slideInLeft { animation: slideInLeft 0.8s ease-out; }
-        .animate-slideInRight { animation: slideInRight 0.8s ease-out; }
-        .animate-slideDown { animation: slideDown 0.3s ease-out; }
-        .animation-delay-200 { animation-delay: 0.2s; }
-        .animation-delay-400 { animation-delay: 0.4s; }
-        .animation-delay-600 { animation-delay: 0.6s; }
-        .animation-delay-1000 { animation-delay: 1s; }
-        .animation-delay-2000 { animation-delay: 2s; }
-      `}</style>
     </div>
   )
 }