diff --git a/src/components/CourseProgressTracker.tsx b/src/components/CourseProgressTracker.tsx
new file mode 100644
index 0000000..fa88932
--- /dev/null
+++ b/src/components/CourseProgressTracker.tsx
@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from 'react';
+import { BookOpen, CheckCircle, Clock, Award, TrendingUp } from 'lucide-react';
+
+interface Course {
+  id: string;
+  title: string;
+  totalLessons: number;
+  completedLessons: number;
+  category: string;
+  thumbnailUrl?: string;
+  estimatedTime?: number; // in minutes
+}
+
+interface CourseProgressTrackerProps {
+  courses: Course[];
+  onCourseClick?: (courseId: string) => void;
+}
+
+const CourseProgressTracker: React.FC<CourseProgressTrackerProps> = ({
+  courses,
+  onCourseClick
+}) => {
+  const [sortBy, setSortBy] = useState<'progress' | 'recent'>('progress');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+
+  // Calculate overall statistics
+  const calculateStats = () => {
+    const totalCourses = courses.length;
+    const completedCourses = courses.filter(c => c.completedLessons === c.totalLessons).length;
+    const inProgressCourses = courses.filter(c => c.completedLessons > 0 && c.completedLessons < c.totalLessons).length;
+    const totalLessons = courses.reduce((sum, c) => sum + c.totalLessons, 0);
+    const completedLessons = courses.reduce((sum, c) => sum + c.completedLessons, 0);
+    const overallProgress = totalLessons > 0 ? Math.round((completedLessons / totalLessons) * 100) : 0;
+
+    return {
+      totalCourses,
+      completedCourses,
+      inProgressCourses,
+      overallProgress
+    };
+  };
+
+  const stats = calculateStats();
+
+  // Get unique categories
+  const categories = ['all', ...Array.from(new Set(courses.map(c => c.category)))];
+
+  // Filter and sort courses
+  const getFilteredCourses = () => {
+    let filtered = filterCategory === 'all' 
+      ? courses 
+      : courses.filter(c => c.category === filterCategory);
+
+    if (sortBy === 'progress') {
+      return filtered.sort((a, b) => {
+        const progressA = (a.completedLessons / a.totalLessons) * 100;
+        const progressB = (b.completedLessons / b.totalLessons) * 100;
+        return progressB - progressA;
+      });
+    }
+    
+    return filtered;
+  };
+
+  const filteredCourses = getFilteredCourses();
+
+  const getProgressPercentage = (course: Course) => {
+    return Math.round((course.completedLessons / course.totalLessons) * 100);
+  };
+
+  const getProgressColor = (percentage: number) => {
+    if (percentage === 100) return 'bg-green-500';
+    if (percentage >= 50) return 'bg-blue-500';
+    if (percentage > 0) return 'bg-orange-500';
+    return 'bg-gray-300';
+  };
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-2">
+          My Learning Progress
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          Track your courses and continue your learning journey
+        </p>
+      </div>
+
+      {/* Statistics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <StatCard
+          icon={BookOpen}
+          label="Total Courses"
+          value={stats.totalCourses}
+          color="blue"
+        />
+        <StatCard
+          icon={TrendingUp}
+          label="In Progress"
+          value={stats.inProgressCourses}
+          color="orange"
+        />
+        <StatCard
+          icon={CheckCircle}
+          label="Completed"
+          value={stats.completedCourses}
+          color="green"
+        />
+        <StatCard
+          icon={Award}
+          label="Overall Progress"
+          value={`${stats.overallProgress}%`}
+          color="purple"
+        />
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap gap-4 mb-6 items-center">
+        <div className="flex gap-2">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Sort by:
+          </label>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as 'progress' | 'recent')}
+            className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          >
+            <option value="progress">Progress</option>
+            <option value="recent">Recent</option>
+          </select>
+        </div>
+
+        <div className="flex gap-2">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Category:
+          </label>
+          <select
+            value={filterCategory}
+            onChange={(e) => setFilterCategory(e.target.value)}
+            className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          >
+            {categories.map(cat => (
+              <option key={cat} value={cat}>
+                {cat === 'all' ? 'All Categories' : cat}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Course List */}
+      <div className="space-y-4">
+        {filteredCourses.length === 0 ? (
+          <div className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <BookOpen className="w-16 h-16 mx-auto text-gray-400 mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">
+              No courses found. Start learning today!
+            </p>
+          </div>
+        ) : (
+          filteredCourses.map(course => (
+            <CourseCard
+              key={course.id}
+              course={course}
+              onClick={() => onCourseClick?.(course.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Stat Card Component
+const StatCard: React.FC<{
+  icon: React.ElementType;
+  label: string;
+  value: string | number;
+  color: 'blue' | 'orange' | 'green' | 'purple';
+}> = ({ icon: Icon, label, value, color }) => {
+  const colorClasses = {
+    blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
+    orange: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400',
+    green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
+    purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400'
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+      <div className="flex items-center gap-3">
+        <div className={`p-3 rounded-lg ${colorClasses[color]}`}>
+          <Icon className="w-6 h-6" />
+        </div>
+        <div>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{label}</p>
+          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Course Card Component
+const CourseCard: React.FC<{
+  course: Course;
+  onClick: () => void;
+}> = ({ course, onClick }) => {
+  const progress = Math.round((course.completedLessons / course.totalLessons) * 100);
+  const isCompleted = progress === 100;
+
+  const getProgressColor = (percentage: number) => {
+    if (percentage === 100) return 'bg-green-500';
+    if (percentage >= 50) return 'bg-blue-500';
+    if (percentage > 0) return 'bg-orange-500';
+    return 'bg-gray-300';
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow cursor-pointer"
+    >
+      <div className="flex items-start gap-4">
+        {/* Thumbnail */}
+        <div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg flex items-center justify-center flex-shrink-0">
+          <BookOpen className="w-10 h-10 text-white" />
+        </div>
+
+        {/* Course Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                {course.title}
+              </h3>
+              <span className="inline-block px-2 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30 rounded">
+                {course.category}
+              </span>
+            </div>
+            {isCompleted && (
+              <Award className="w-6 h-6 text-green-500 flex-shrink-0 ml-2" />
+            )}
+          </div>
+
+          {/* Progress Bar */}
+          <div className="mb-2">
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-gray-600 dark:text-gray-400">
+                {course.completedLessons} of {course.totalLessons} lessons
+              </span>
+              <span className="font-medium text-gray-900 dark:text-white">
+                {progress}%
+              </span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+              <div
+                className={`h-2 rounded-full transition-all ${getProgressColor(progress)}`}
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Additional Info */}
+          {course.estimatedTime && (
+            <div className="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
+              <Clock className="w-4 h-4" />
+              <span>{course.estimatedTime} minutes remaining</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CourseProgressTracker;
\ No newline at end of file
diff --git a/src/components/README-CourseProgressTracker.md b/src/components/README-CourseProgressTracker.md
new file mode 100644
index 0000000..0391e3d
--- /dev/null
+++ b/src/components/README-CourseProgressTracker.md
@@ -0,0 +1,257 @@
+# Course Progress Tracker
+
+A React/TypeScript component for Skill-Bridge that helps learners track their course progress, view statistics, and manage their learning journey.
+
+## 📋 Description
+
+The `CourseProgressTracker` component provides a comprehensive dashboard for learners to monitor their progress across multiple courses. It displays overall statistics, individual course progress, and allows filtering and sorting for better organization.
+
+## ✨ Features
+
+- 📊 **Overall Statistics**: View total courses, in-progress, completed, and overall progress
+- 📈 **Progress Visualization**: Color-coded progress bars for each course
+- 🏆 **Completion Badges**: Award icons for completed courses
+- 🔍 **Filtering**: Filter courses by category
+- 📋 **Sorting**: Sort by progress or recent activity
+- 🎨 **Dark Mode Support**: Seamless light/dark theme integration
+- 📱 **Responsive Design**: Works on all screen sizes
+- ⏱️ **Time Tracking**: Shows estimated time remaining
+
+## 🚀 Usage
+
+### Basic Implementation
+
+```tsx
+import CourseProgressTracker from '@/components/CourseProgressTracker';
+
+function Dashboard() {
+  const courses = [
+    {
+      id: '1',
+      title: 'Introduction to React',
+      totalLessons: 20,
+      completedLessons: 15,
+      category: 'Web Development',
+      estimatedTime: 150
+    },
+    {
+      id: '2',
+      title: 'Python for Beginners',
+      totalLessons: 30,
+      completedLessons: 30,
+      category: 'Programming',
+      estimatedTime: 0
+    }
+  ];
+
+  return (
+    <CourseProgressTracker
+      courses={courses}
+      onCourseClick={(courseId) => {
+        // Navigate to course details
+        console.log('Course clicked:', courseId);
+      }}
+    />
+  );
+}
+```
+
+### With Navigation
+
+```tsx
+<CourseProgressTracker
+  courses={userCourses}
+  onCourseClick={(courseId) => {
+    router.push(`/course/${courseId}`);
+  }}
+/>
+```
+
+## 📦 Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `courses` | `Course[]` | Yes | Array of course objects with progress data |
+| `onCourseClick` | `(courseId: string) => void` | No | Callback when a course card is clicked |
+
+### Course Object Structure
+
+```typescript
+interface Course {
+  id: string;                // Unique course identifier
+  title: string;             // Course title
+  totalLessons: number;      // Total number of lessons
+  completedLessons: number;  // Number of completed lessons
+  category: string;          // Course category
+  thumbnailUrl?: string;     // Optional thumbnail URL
+  estimatedTime?: number;    // Estimated time remaining (minutes)
+}
+```
+
+## 🎨 UI Components
+
+### Statistics Cards (4 Cards)
+1. **Total Courses** - Blue icon, shows total enrolled courses
+2. **In Progress** - Orange icon, shows active courses
+3. **Completed** - Green icon, shows finished courses
+4. **Overall Progress** - Purple icon, shows percentage completion
+
+### Filters Section
+- **Sort by**: Progress or Recent
+- **Category**: Filter by course category
+
+### Course Cards
+Each card displays:
+- Course thumbnail/icon
+- Course title
+- Category badge
+- Progress bar with percentage
+- Completed/Total lessons count
+- Estimated time remaining
+- Completion award (for finished courses)
+
+## 📸 Visual Layout
+
+```
+┌─────────────────────────────────────────────┐
+│ My Learning Progress                        │
+│ Track your courses and continue learning    │
+├─────────────────────────────────────────────┤
+│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐        │
+│ │📚 10 │ │📈 5  │ │✅ 3  │ │🏆75%│        │
+│ │Total │ │Prog. │ │Done  │ │Prog.│        │
+│ └──────┘ └──────┘ └──────┘ └──────┘        │
+├─────────────────────────────────────────────┤
+│ Sort: [Progress ▼] Category: [All ▼]       │
+├─────────────────────────────────────────────┤
+│ ┌─────────────────────────────────────────┐ │
+│ │ 📚 Introduction to React                │ │
+│ │ [Web Development]              🏆       │ │
+│ │ 15 of 20 lessons               75%     │ │
+│ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░            │ │
+│ │ ⏱️ 150 minutes remaining                │ │
+│ └─────────────────────────────────────────┘ │
+└─────────────────────────────────────────────┘
+```
+
+## 🎯 Features Breakdown
+
+### Progress Calculation
+- Automatically calculates percentage: `(completedLessons / totalLessons) * 100`
+- Color-coded progress bars:
+  - Green: 100% (Completed)
+  - Blue: 50-99% (Good progress)
+  - Orange: 1-49% (Getting started)
+  - Gray: 0% (Not started)
+
+### Statistics Calculation
+- **Total Courses**: Count of all courses
+- **In Progress**: Courses with 0 < progress < 100%
+- **Completed**: Courses with 100% progress
+- **Overall Progress**: Total completed lessons / Total lessons
+
+### Filtering & Sorting
+- **Category Filter**: Shows only courses from selected category
+- **Progress Sort**: Orders by completion percentage (high to low)
+- **Recent Sort**: Shows most recently accessed courses first
+
+## 🎨 Styling
+
+### Color Scheme
+- **Blue**: `bg-blue-500` - Primary progress color
+- **Orange**: `bg-orange-500` - In-progress indicator
+- **Green**: `bg-green-500` - Completion color
+- **Purple**: `bg-purple-500` - Overall stats
+
+### Dark Mode
+- Automatic theme detection
+- Dark backgrounds: `dark:bg-gray-800`
+- Dark text: `dark:text-white`
+- Dark borders: `dark:border-gray-700`
+
+## 🔧 Technical Details
+
+### Dependencies
+- React
+- TypeScript
+- Tailwind CSS
+- Lucide React icons (BookOpen, CheckCircle, Clock, Award, TrendingUp)
+
+### State Management
+- Local state for sorting and filtering
+- Props-based course data
+- Calculated statistics (no persistent state)
+
+### Performance
+- Efficient filtering and sorting
+- Minimal re-renders
+- Optimized calculations
+
+## 📱 Integration Example
+
+```tsx
+// In your dashboard or home page
+import { useState, useEffect } from 'react';
+import CourseProgressTracker from '@/components/CourseProgressTracker';
+
+export default function DashboardPage() {
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    // Fetch user's enrolled courses
+    fetchUserCourses().then(setCourses);
+  }, []);
+
+  const handleCourseClick = (courseId) => {
+    // Navigate to course player
+    window.location.href = `/course/${courseId}`;
+  };
+
+  return (
+    <div className="container mx-auto">
+      <CourseProgressTracker
+        courses={courses}
+        onCourseClick={handleCourseClick}
+      />
+    </div>
+  );
+}
+```
+
+## 💡 Use Cases
+
+- **Student Dashboard**: Main learning progress overview
+- **Profile Page**: Show user's learning achievements
+- **Progress Reports**: Generate progress summaries
+- **Motivation Tool**: Visual progress encourages completion
+- **Course Management**: Easily resume in-progress courses
+
+## 🔄 Future Enhancements
+
+Potential additions:
+- Time-based analytics (weekly/monthly progress)
+- Streak tracking
+- Learning goals and targets
+- Export progress report (PDF)
+- Social sharing of achievements
+- Course recommendations based on progress
+- Gamification badges
+- Progress comparison with peers
+
+## 👨‍💻 Author
+
+**Ashvin**
+- GitHub: [@ashvin2005](https://github.com/ashvin2005)
+- LinkedIn: [ashvin-tiwari](https://linkedin.com/in/ashvin-tiwari)
+
+## 🎃 Hacktoberfest 2025
+
+Created as part of Hacktoberfest 2025 contributions to Skill-Bridge.
+
+## 📄 License
+
+MIT License - Same as Skill-Bridge project
+
+---
+
+Made with ❤️ for the Skill-Bridge community
\ No newline at end of file