diff --git a/app/admin/courses/page.jsx b/app/admin/courses/page.jsx
index 3e0364f..17d25bb 100644
--- a/app/admin/courses/page.jsx
+++ b/app/admin/courses/page.jsx
@@ -482,22 +482,26 @@ export default function AdminCoursesPage() {
 							</div>
 
 							{/* View mode */}
-							<div className="flex items-center gap-2 border-l border-border pl-4">
-								<label className="text-caption text-muted-foreground">{t.viewMode}:</label>
-								<div className="flex gap-1">
+							<div className="flex items-center gap-3 border-l border-border pl-4">
+								<label className="text-body font-medium text-neutralDark">{t.viewMode}:</label>
+								<div className="flex gap-2">
 									<Button
 										variant={viewMode === 'grid' ? 'default' : 'outline'}
-										size="sm"
+										size="default"
 										onClick={() => setViewMode('grid')}
+										className="flex items-center gap-2 px-4 py-2"
 									>
-										<Grid3x3 className="h-4 w-4" />
+										<Grid3x3 className="h-5 w-5" />
+										<span className="text-body font-medium">{t.gridView}</span>
 									</Button>
 									<Button
 										variant={viewMode === 'list' ? 'default' : 'outline'}
-										size="sm"
+										size="default"
 										onClick={() => setViewMode('list')}
+										className="flex items-center gap-2 px-4 py-2"
 									>
-										<List className="h-4 w-4" />
+										<List className="h-5 w-5" />
+										<span className="text-body font-medium">{t.listView}</span>
 									</Button>
 								</div>
 							</div>
diff --git a/app/courses/[id]/modules/[moduleId]/lessons/[lessonId]/page.jsx b/app/courses/[id]/modules/[moduleId]/lessons/[lessonId]/page.jsx
index 3106df6..6dd09d9 100644
--- a/app/courses/[id]/modules/[moduleId]/lessons/[lessonId]/page.jsx
+++ b/app/courses/[id]/modules/[moduleId]/lessons/[lessonId]/page.jsx
@@ -2,14 +2,14 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { useParams, useRouter } from 'next/navigation';
-import { doc, getDoc } from 'firebase/firestore';
+import { doc, getDoc, updateDoc, arrayUnion, serverTimestamp } from 'firebase/firestore';
 import { db } from '@/firebase';
 import { auth } from '@/firebase';
 import { onAuthStateChanged } from 'firebase/auth';
 import { query, collection, where, getDocs } from 'firebase/firestore';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { ArrowLeft, ArrowRight, BookOpen, Download, FileText, File, ShieldCheck, List, Eye, X } from 'lucide-react';
+import { ArrowLeft, ArrowRight, BookOpen, Download, FileText, File, ShieldCheck, List, Eye, X, CheckCircle2 } from 'lucide-react';
 import Link from 'next/link';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
@@ -43,6 +43,8 @@ export default function LessonPage() {
 	const [accessChecked, setAccessChecked] = useState(false);
 	const [viewingMaterial, setViewingMaterial] = useState(null);
 	const [textContent, setTextContent] = useState({});
+	const [isLessonCompleted, setIsLessonCompleted] = useState(false);
+	const [completingLesson, setCompletingLesson] = useState(false);
 
 	useEffect(() => {
 		// Track signed-in user for material downloads and check access
@@ -57,13 +59,21 @@ export default function LessonPage() {
 						const role = userDoc.data().role;
 						setUserRole(role);
 						
-						// For students, check enrollment
+						// For students, check enrollment and lesson completion
 						if (role === 'student') {
 							try {
 								const enrollmentId = `${currentUser.uid}_${courseId}`;
 								const enrollmentDoc = await getDoc(doc(db, 'enrollment', enrollmentId));
 								const enrolled = enrollmentDoc.exists();
 								setIsEnrolled(enrolled);
+								
+								// Check if lesson is completed
+								if (enrolled && lessonId) {
+									const enrollmentData = enrollmentDoc.data();
+									const completedLessons = enrollmentData?.progress?.completedLessons || [];
+									setIsLessonCompleted(completedLessons.includes(lessonId));
+								}
+								
 								console.log('Enrollment check:', { enrollmentId, enrolled, courseId, userId: currentUser.uid });
 							} catch (err) {
 								console.error('Error checking enrollment:', err);
@@ -414,6 +424,50 @@ export default function LessonPage() {
 		}
 	}, [lesson]);
 
+	// Handle lesson completion
+	async function handleCompleteLesson() {
+		if (!user || !courseId || !lessonId || userRole !== 'student') return;
+
+		setCompletingLesson(true);
+		try {
+			const enrollmentId = `${user.uid}_${courseId}`;
+			const enrollmentRef = doc(db, 'enrollment', enrollmentId);
+			const enrollmentDoc = await getDoc(enrollmentRef);
+
+			if (!enrollmentDoc.exists()) {
+				alert('You must be enrolled in this course to complete lessons.');
+				setCompletingLesson(false);
+				return;
+			}
+
+			const enrollmentData = enrollmentDoc.data();
+			const completedLessons = enrollmentData?.progress?.completedLessons || [];
+
+			// Check if already completed
+			if (completedLessons.includes(lessonId)) {
+				setIsLessonCompleted(true);
+				setCompletingLesson(false);
+				return;
+			}
+
+			// Update enrollment with completed lesson
+			await updateDoc(enrollmentRef, {
+				'progress.completedLessons': arrayUnion(lessonId),
+				updatedAt: serverTimestamp(),
+			});
+
+			setIsLessonCompleted(true);
+			
+			// Show success message
+			console.log('Lesson marked as complete');
+		} catch (err) {
+			console.error('Error completing lesson:', err);
+			alert('Failed to mark lesson as complete. Please try again.');
+		} finally {
+			setCompletingLesson(false);
+		}
+	}
+
 	// this is for downloading lesson materials from storage
 	async function handleDownload(material) {
 		if (!user) {
@@ -542,10 +596,10 @@ export default function LessonPage() {
 			</div>
 
 			{/* Lesson Content */}
-			<Card>
-				<CardHeader>
+			<Card className="shadow-lg border-2">
+				<CardHeader className="bg-gradient-to-r from-primary/5 to-background border-b-2">
 					<div className="flex items-center justify-between">
-						<CardTitle className="text-h2">{lesson.title}</CardTitle>
+						<CardTitle className="text-h2 font-bold">{lesson.title}</CardTitle>
 						<div className="flex items-center gap-2">
 							{/* Download Dropdown */}
 							{lesson.contentHtml && (
@@ -899,34 +953,62 @@ export default function LessonPage() {
 				</Card>
 			)}
 
-			{/* Lesson Navigation */}
-			<div className="flex items-center justify-between pt-4 border-t border-border">
-				{prevLesson ? (
-					<Link href={`/courses/${courseId}/modules/${moduleId}/lessons/${prevLesson.id}`}>
-						<Button variant="outline">
-							<ArrowLeft className="h-5 w-5 mr-2 text-neutralDark" />
-							Previous Lesson
+			{/* Lesson Completion and Navigation */}
+			<div className="space-y-4 pt-4 border-t border-border">
+				{/* Complete Lesson Button (for students only) */}
+				{userRole === 'student' && isEnrolled && !isLessonCompleted && (
+					<div className="flex justify-center">
+						<Button
+							onClick={handleCompleteLesson}
+							disabled={completingLesson}
+							size="lg"
+							className="flex items-center gap-2 px-6 py-3"
+						>
+							<CheckCircle2 className="h-5 w-5" />
+							{completingLesson ? 'Marking as Complete...' : 'Complete Lesson'}
 						</Button>
-					</Link>
-				) : (
-					<div></div>
+					</div>
 				)}
-
-				{nextLesson ? (
-					<Link href={`/courses/${courseId}/modules/${moduleId}/lessons/${nextLesson.id}`}>
-						<Button>
-							Next Lesson
-							<ArrowRight className="h-5 w-5 ml-2 text-white" />
-						</Button>
-					</Link>
-				) : (
-					<Link href={`/courses/${courseId}`}>
-						<Button variant="outline">
-							Complete Module
-							<BookOpen className="h-5 w-5 ml-2 text-neutralDark" />
-						</Button>
-					</Link>
+				
+				{/* Completion Status */}
+				{userRole === 'student' && isEnrolled && isLessonCompleted && (
+					<div className="flex justify-center">
+						<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-success/10 text-success border border-success/20">
+							<CheckCircle2 className="h-5 w-5" />
+							<span className="text-body font-medium">Lesson Completed</span>
+						</div>
+					</div>
 				)}
+
+				{/* Lesson Navigation */}
+				<div className="flex items-center justify-between">
+					{prevLesson ? (
+						<Link href={`/courses/${courseId}/modules/${moduleId}/lessons/${prevLesson.id}`}>
+							<Button variant="outline">
+								<ArrowLeft className="h-5 w-5 mr-2 text-neutralDark" />
+								Previous Lesson
+							</Button>
+						</Link>
+					) : (
+						<div></div>
+					)}
+
+					{nextLesson ? (
+						<Link href={`/courses/${courseId}/modules/${moduleId}/lessons/${nextLesson.id}`}>
+							<Button>
+								Next Lesson
+								<ArrowRight className="h-5 w-5 ml-2 text-white" />
+							</Button>
+						</Link>
+					) : (
+						<Link href={`/courses/${courseId}`}>
+							<Button variant="outline">
+								<BookOpen className="h-5 w-5 mr-2 text-neutralDark" />
+								Back to Course
+							</Button>
+						</Link>
+					)}
+				</div>
 			</div>
 			</div>
 
diff --git a/app/courses/[id]/page.jsx b/app/courses/[id]/page.jsx
index 06c4d4d..4de5591 100644
--- a/app/courses/[id]/page.jsx
+++ b/app/courses/[id]/page.jsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useParams, useRouter } from 'next/navigation';
-import { doc, getDoc } from 'firebase/firestore';
+import { doc, getDoc, onSnapshot } from 'firebase/firestore';
 import { db } from '@/firebase';
 import { auth } from '@/firebase';
 import { onAuthStateChanged } from 'firebase/auth';
@@ -25,6 +25,7 @@ export default function CourseDetailPage() {
 	const [role, setRole] = useState(null);
 	const [isEnrolled, setIsEnrolled] = useState(false);
 	const [enrollmentLoading, setEnrollmentLoading] = useState(true);
+	const [enrollmentProgress, setEnrollmentProgress] = useState(null);
 
 	useEffect(() => {
 		const unsubscribe = onAuthStateChanged(auth, async (user) => {
@@ -43,6 +44,17 @@ export default function CourseDetailPage() {
 							const enrollmentDoc = await getDoc(enrollmentRef);
 							const enrolled = enrollmentDoc.exists();
 							setIsEnrolled(enrolled);
+							
+							// Load enrollment progress
+							if (enrolled && enrollmentDoc.exists()) {
+								const enrollmentData = enrollmentDoc.data();
+								setEnrollmentProgress(enrollmentData.progress || {
+									completedModules: [],
+									completedLessons: [],
+									overallProgress: 0,
+								});
+							}
+							
 							console.log('Enrollment check:', { enrollmentId, enrolled, courseId, userId: user.uid });
 						} catch (err) {
 							console.error('Error checking enrollment:', err);
@@ -68,6 +80,30 @@ export default function CourseDetailPage() {
 		return () => unsubscribe();
 	}, [courseId]);
 
+	// Listen for enrollment progress updates
+	useEffect(() => {
+		if (!userId || !courseId || role !== 'student') return;
+
+		const enrollmentId = `${userId}_${courseId}`;
+		const enrollmentRef = doc(db, 'enrollment', enrollmentId);
+
+		// Use onSnapshot for real-time updates
+		const unsubscribe = onSnapshot(enrollmentRef, (doc) => {
+			if (doc.exists()) {
+				const enrollmentData = doc.data();
+				setEnrollmentProgress(enrollmentData.progress || {
+					completedModules: [],
+					completedLessons: [],
+					overallProgress: 0,
+				});
+			}
+		}, (err) => {
+			console.error('Error listening to enrollment:', err);
+		});
+
+		return () => unsubscribe();
+	}, [userId, courseId, role]);
+
 	useEffect(() => {
 		async function loadCourse() {
 			try {
@@ -246,37 +282,39 @@ export default function CourseDetailPage() {
 	return (
 		<div className="space-y-8">
 			{/* Course Header */}
-			<div>
+			<div className="bg-gradient-to-br from-primary/5 via-background to-background rounded-xl p-6 border border-primary/10">
 				<div className="flex items-center gap-3 mb-4">
 					<Link href="/courses">
-						<Button variant="ghost" size="sm">← Back to Courses</Button>
+						<Button variant="ghost" size="sm" className="hover:bg-primary/10">
+							← Back to Courses
+						</Button>
 					</Link>
 				</div>
 				<div className="flex items-start justify-between gap-4">
 					<div className="flex-1">
-						<h1 className="text-h1 text-neutralDark mb-2">{course.title}</h1>
-						<p className="text-body text-muted-foreground mb-4">{course.description || 'No description'}</p>
-						<div className="flex items-center gap-4 text-caption text-muted-foreground">
-							<div className="flex items-center gap-2">
+						<h1 className="text-h1 text-neutralDark mb-3 font-bold">{course.title}</h1>
+						<p className="text-body text-muted-foreground mb-5 leading-relaxed">{course.description || 'No description'}</p>
+						<div className="flex items-center gap-6 text-caption text-muted-foreground">
+							<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-background border border-border">
 								<User className="h-4 w-4" />
-								<span>By: {course.authorName || 'Unknown'}</span>
+								<span className="font-medium">By: {course.authorName || 'Unknown'}</span>
 							</div>
 							{course.modules && (
-								<div className="flex items-center gap-2">
+								<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-background border border-border">
 									<BookOpen className="h-4 w-4" />
-									<span>{course.modules.length} {course.modules.length === 1 ? 'Module' : 'Modules'}</span>
+									<span className="font-medium">{course.modules.length} {course.modules.length === 1 ? 'Module' : 'Modules'}</span>
 								</div>
 							)}
 						</div>
 					</div>
 					{canEnroll && (
-						<Button onClick={handleEnroll} size="lg" disabled={loading}>
+						<Button onClick={handleEnroll} size="lg" disabled={loading} className="shadow-md hover:shadow-lg transition-shadow">
 							{loading ? 'Enrolling...' : 'Enroll in Course'}
 						</Button>
 					)}
 					{isEnrolled && (
-						<span className="px-4 py-2 rounded-lg bg-success/10 text-success text-caption font-medium flex items-center gap-2">
-							<CheckCircle2 className="h-4 w-4" />
+						<span className="px-5 py-2.5 rounded-lg bg-success/10 text-success text-body font-semibold flex items-center gap-2 border border-success/20 shadow-sm">
+							<CheckCircle2 className="h-5 w-5" />
 							Enrolled
 						</span>
 					)}
@@ -291,24 +329,34 @@ export default function CourseDetailPage() {
 			{/* Modules & Lessons Structure */}
 			{modules.length > 0 ? (
 				<div className="space-y-6">
-					<h2 className="text-h2 text-neutralDark">Course Content</h2>
+					<div className="flex items-center gap-3 mb-2">
+						<BookOpen className="h-6 w-6 text-primary" />
+						<h2 className="text-h2 text-neutralDark font-bold">Course Content</h2>
+					</div>
 					{modules.map((module, moduleIndex) => {
 						const moduleLessons = lessons[module.id] || [];
 						const isModuleLocked = isStudent && !isEnrolled && moduleIndex > 0;
 						
+						// Calculate completion progress for this module
+						let completedCount = 0;
+						if (isStudent && isEnrolled && enrollmentProgress && moduleLessons.length > 0) {
+							const completedLessons = enrollmentProgress.completedLessons || [];
+							completedCount = moduleLessons.filter(lesson => completedLessons.includes(lesson.id)).length;
+						}
+						
 						return (
-							<Card key={module.id} className={isModuleLocked ? 'opacity-60' : ''}>
+							<Card key={module.id} className={`relative ${isModuleLocked ? 'opacity-60' : ''} transition-all duration-200 hover:shadow-lg`}>
 								<CardHeader>
 									<div className="flex items-center justify-between">
-										<div className="flex items-center gap-3">
+										<div className="flex items-center gap-3 flex-1">
 											{isModuleLocked ? (
 												<Lock className="h-5 w-5 text-muted-foreground" />
 											) : (
-												<div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-white text-body font-semibold">
+												<div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white text-body font-semibold shadow-md">
 													{moduleIndex + 1}
 												</div>
 											)}
-											<div>
+											<div className="flex-1">
 												<CardTitle className="text-h3">{module.title}</CardTitle>
 												{moduleLessons.length > 0 && (
 													<CardDescription className="mt-1">
@@ -317,6 +365,14 @@ export default function CourseDetailPage() {
 												)}
 											</div>
 										</div>
+										{/* Progress Badge */}
+										{isStudent && isEnrolled && moduleLessons.length > 0 && (
+											<div className="px-3 py-1.5 rounded-lg bg-primary/10 border border-primary/20">
+												<span className="text-body font-semibold text-primary">
+													{completedCount} of {moduleLessons.length} complete
+												</span>
+											</div>
+										)}
 									</div>
 								</CardHeader>
 								<CardContent>
@@ -324,26 +380,39 @@ export default function CourseDetailPage() {
 										<div className="space-y-2">
 											{moduleLessons.map((lesson, lessonIndex) => {
 												const isLessonLocked = isModuleLocked || (isStudent && !isEnrolled);
+												const isLessonCompleted = isStudent && isEnrolled && enrollmentProgress && 
+													(enrollmentProgress.completedLessons || []).includes(lesson.id);
 												
 												return (
 													<Link
 														key={lesson.id}
 														href={isLessonLocked ? '#' : `/courses/${courseId}/modules/${module.id}/lessons/${lesson.id}`}
-														className={`flex items-center gap-3 p-3 rounded-lg border transition-all duration-200 ${
+														className={`flex items-center gap-3 p-4 rounded-lg border transition-all duration-200 ${
 															isLessonLocked
 																? 'border-border bg-neutralLight cursor-not-allowed opacity-60'
+																: isLessonCompleted
+																? 'border-success/30 bg-success/5 hover:border-success/50 hover:bg-success/10 cursor-pointer'
 																: 'border-border hover:border-primary hover:bg-primary/5 cursor-pointer'
 														}`}
 													>
 														{isLessonLocked ? (
 															<Lock className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+														) : isLessonCompleted ? (
+															<CheckCircle2 className="h-5 w-5 text-success flex-shrink-0" />
 														) : (
-															<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-caption font-medium flex-shrink-0">
+															<div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary/10 text-primary text-caption font-semibold flex-shrink-0">
 																{lessonIndex + 1}
 															</div>
 														)}
 														<div className="flex-1 min-w-0">
-															<h4 className="text-body font-medium text-neutralDark">{lesson.title}</h4>
+															<div className="flex items-center gap-2">
+																<h4 className="text-body font-medium text-neutralDark">{lesson.title}</h4>
+																{isLessonCompleted && (
+																	<span className="px-2 py-0.5 rounded text-caption font-medium bg-success/20 text-success">
+																		Completed
+																	</span>
+																)}
+															</div>
 															{lesson.contentHtml && (
 																<p className="text-caption text-muted-foreground mt-1 line-clamp-1">
 																	{lesson.contentHtml.replace(/<[^>]*>/g, '').substring(0, 60)}...