diff --git a/css/styles.css b/css/styles.css
index 885b229..d725f77 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1334,3 +1334,566 @@ footer {
         padding-bottom: 0; /* Remove padding since footer is no longer fixed */
     }
 }
+
+/* ===== GAMIFICATION STYLES ===== */
+
+/* Gamification Header */
+.gamification-header {
+    background: linear-gradient(135deg, var(--primary-color), #34495e);
+    color: white;
+    padding: 1.5rem;
+    border-radius: 15px;
+    margin: 2rem 0;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+}
+
+.gamification-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.stat-card {
+    background: rgba(255,255,255,0.1);
+    padding: 1rem;
+    border-radius: 10px;
+    text-align: center;
+    backdrop-filter: blur(10px);
+}
+
+.stat-value {
+    font-size: 2rem;
+    font-weight: bold;
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.level-progress {
+    margin: 1rem 0;
+}
+
+.level-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.level-number {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.xp-info {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.xp-progress-bar {
+    height: 8px;
+    background: rgba(255,255,255,0.2);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.xp-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #2ecc71, #27ae60);
+    transition: width 0.5s ease;
+}
+
+/* Streak Display */
+.streak-display {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.1rem;
+}
+
+.streak-flame {
+    animation: flicker 2s infinite alternate;
+}
+
+@keyframes flicker {
+    0% { opacity: 1; }
+    50% { opacity: 0.8; }
+    100% { opacity: 1; }
+}
+
+/* Achievement Badges */
+.achievement-section {
+    margin: 2rem 0;
+}
+
+.achievement-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.achievement-stats {
+    font-size: 1.1rem;
+    color: var(--accent-color);
+    font-weight: 500;
+}
+
+.achievement-categories {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.category-tab {
+    padding: 0.5rem 1rem;
+    border: 2px solid #ddd;
+    background: white;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.category-tab.active {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+}
+
+.category-tab:hover {
+    border-color: var(--accent-color);
+}
+
+.achievement-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.achievement-badge {
+    background: white;
+    border-radius: 10px;
+    padding: 1rem;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.achievement-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+}
+
+.achievement-badge.earned {
+    border-left: 4px solid #2ecc71;
+}
+
+.achievement-badge.locked {
+    opacity: 0.6;
+    border-left: 4px solid #bdc3c7;
+}
+
+.badge-icon {
+    font-size: 2.5rem;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid #2ecc71;
+    background: rgba(46, 204, 113, 0.1);
+}
+
+.badge-info {
+    flex: 1;
+}
+
+.badge-name {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.badge-description {
+    margin: 0 0 0.5rem 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.badge-category {
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.badge-progress {
+    margin-top: 0.5rem;
+}
+
+.badge-progress .progress-bar {
+    height: 4px;
+    background: #f0f0f0;
+    border-radius: 2px;
+    margin-bottom: 0.25rem;
+}
+
+.badge-progress .progress-fill {
+    height: 100%;
+    background: #3498db;
+    border-radius: 2px;
+    transition: width 0.5s ease;
+}
+
+.badge-progress .progress-text {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Challenges Section */
+.challenges-section {
+    margin: 2rem 0;
+}
+
+.challenges-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.challenges-progress {
+    font-size: 1.1rem;
+    color: var(--accent-color);
+    font-weight: 500;
+}
+
+.challenges-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1rem;
+}
+
+.challenge-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    border-left: 4px solid #3498db;
+}
+
+.challenge-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
+}
+
+.challenge-card.completed {
+    border-left-color: #2ecc71;
+    background: linear-gradient(135deg, #f8fff9, #e8f8f0);
+}
+
+.challenge-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.challenge-icon {
+    font-size: 2rem;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(52, 152, 219, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.challenge-info {
+    flex: 1;
+}
+
+.challenge-name {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.challenge-description {
+    margin: 0;
+    color: #666;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.challenge-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-end;
+}
+
+.challenge-type {
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: white;
+    text-transform: uppercase;
+}
+
+.challenge-xp {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #f39c12;
+}
+
+.challenge-progress {
+    margin-top: 1rem;
+}
+
+.challenge-progress .progress-bar {
+    height: 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+}
+
+.challenge-progress .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #3498db, #2980b9);
+    border-radius: 4px;
+    transition: width 0.5s ease;
+}
+
+.challenge-progress .progress-text {
+    font-size: 0.9rem;
+    color: #666;
+    font-weight: 500;
+}
+
+.challenge-completed {
+    text-align: center;
+    margin-top: 1rem;
+    padding: 0.5rem;
+    background: rgba(46, 204, 113, 0.1);
+    border-radius: 6px;
+    color: #2ecc71;
+    font-weight: 600;
+}
+
+.no-challenges {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+    font-style: italic;
+}
+
+/* Notifications */
+.gamification-notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: white;
+    border-radius: 8px;
+    padding: 1rem 1.5rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 10000;
+    max-width: 400px;
+    animation: slideInRight 0.3s ease;
+    border-left: 4px solid #3498db;
+}
+
+.gamification-notification.success {
+    border-left-color: #2ecc71;
+}
+
+.gamification-notification.achievement {
+    border-left-color: #f39c12;
+    background: linear-gradient(135deg, #fff9f0, #fef5e7);
+}
+
+.notification-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.notification-message {
+    flex: 1;
+    font-size: 0.95rem;
+    color: var(--text-color);
+}
+
+.notification-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #999;
+    margin-left: 1rem;
+}
+
+.notification-close:hover {
+    color: #666;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Gamification Dashboard */
+.gamification-dashboard {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 2rem;
+    border-radius: 20px;
+    margin: 2rem 0;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+.dashboard-card {
+    background: rgba(255,255,255,0.1);
+    padding: 1.5rem;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+}
+
+.dashboard-card h4 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.dashboard-stat {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+/* Leaderboard */
+.leaderboard-section {
+    margin: 2rem 0;
+}
+
+.leaderboard-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.leaderboard-item {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+    background: #f8f9fa;
+    transition: all 0.3s ease;
+}
+
+.leaderboard-item:hover {
+    background: #e9ecef;
+    transform: translateX(5px);
+}
+
+.leaderboard-rank {
+    font-size: 1.2rem;
+    font-weight: bold;
+    width: 40px;
+    text-align: center;
+    color: var(--accent-color);
+}
+
+.leaderboard-info {
+    flex: 1;
+    margin-left: 1rem;
+}
+
+.leaderboard-name {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.leaderboard-details {
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.leaderboard-score {
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: var(--accent-color);
+}
+
+/* Responsive Design for Gamification */
+@media (max-width: 768px) {
+    .gamification-stats {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+    }
+    
+    .achievement-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .challenges-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .challenge-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+    
+    .challenge-meta {
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+    }
+    
+    .gamification-notification {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        max-width: none;
+    }
+}
diff --git a/day.html b/day.html
index 268ca9f..adb25fc 100644
--- a/day.html
+++ b/day.html
@@ -162,6 +162,28 @@ <h3 class="practice-heading">
                 completedDays[`${day}_${lang}`] = true;
                 localStorage.setItem('completedDays', JSON.stringify(completedDays));
                 
+                // Award XP for lesson completion
+                if (typeof window.gamificationSystem !== 'undefined') {
+                    const perfect = false; // TODO: Add logic to detect perfect completion
+                    const xpResult = window.gamificationSystem.completeLesson(day, lang, perfect);
+                    
+                    if (xpResult) {
+                        // Show XP notification
+                        setTimeout(() => {
+                            window.gamificationSystem.showNotification(
+                                `🎉 +${xpResult.xpAwarded} XP earned!`, 
+                                'success'
+                            );
+                        }, 500);
+                    }
+                }
+                
+                // Update challenge progress
+                if (typeof window.challengeSystem !== 'undefined') {
+                    window.challengeSystem.updateProgress('lesson_complete', 1);
+                    window.challengeSystem.updateProgress('study_time', 5); // Assume 5 minutes per lesson
+                }
+                
                 // Update button state
                 completeBtn.classList.add('completed');
                 completeBtn.innerHTML = '<i class="fas fa-check-circle"></i> Completed';
@@ -448,5 +470,8 @@ <h3 class="practice-heading">
         });
     </script>
     <script src="js/video-loader.js"></script>
+    <script src="js/gamification.js"></script>
+    <script src="js/achievements.js"></script>
+    <script src="js/challenges.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 436c402..c02c9d3 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,43 @@ <h1>Mandarin Pathways</h1>
         <p><span class="zh">开启您的中文学习之旅</span><span class="en">Your Journey to Chinese Language Mastery</span></p>
     </header>
 
+    <!-- Gamification Dashboard -->
+    <div class="gamification-dashboard" id="gamification-dashboard">
+        <div class="gamification-header">
+            <div class="level-progress">
+                <div class="level-info">
+                    <span class="level-number">Level <span id="user-level">1</span></span>
+                    <span class="xp-info"><span id="current-xp">0</span> / <span id="next-level-xp">100</span> XP</span>
+                </div>
+                <div class="xp-progress-bar">
+                    <div class="xp-progress-fill" id="xp-progress-fill"></div>
+                </div>
+            </div>
+            
+            <div class="gamification-stats">
+                <div class="stat-card">
+                    <span class="stat-value" id="total-xp">0</span>
+                    <span class="stat-label"><span class="zh">总经验</span><span class="en">Total XP</span></span>
+                </div>
+                <div class="stat-card">
+                    <div class="streak-display">
+                        <span class="streak-flame">🔥</span>
+                        <span class="stat-value" id="current-streak">0</span>
+                    </div>
+                    <span class="stat-label"><span class="zh">连击</span><span class="en">Day Streak</span></span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="badges-earned">0</span>
+                    <span class="stat-label"><span class="zh">徽章</span><span class="en">Badges</span></span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="weekly-xp">0</span>
+                    <span class="stat-label"><span class="zh">本周经验</span><span class="en">Weekly XP</span></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <section class="hero-section">
         <div class="hero-content animate-fade-in">
             <h2><span class="zh">掌握中文</span><span class="en">Master Mandarin Chinese</span></h2>
@@ -185,6 +222,18 @@ <h2><span class="zh">每日课程</span><span class="en">Daily Lessons</span></h
         <!-- Section divider with visual anchor -->
         <div class="section-divider"></div>
 
+        <!-- Daily Challenges Section -->
+        <div id="challenges-container"></div>
+
+        <!-- Section divider with visual anchor -->
+        <div class="section-divider"></div>
+
+        <!-- Achievement Badges Section -->
+        <div id="achievements-container"></div>
+
+        <!-- Section divider with visual anchor -->
+        <div class="section-divider"></div>
+
         <!-- Core Skills Section -->
         <section class="core-skills-section">
             <h2><span class="zh">核心语言技能</span><span class="en">Core Language Skills</span></h2>
@@ -360,10 +409,113 @@ <h3><i class="fas fa-link"></i> <span class="zh">书写系统</span><span class=
                 }
             });
 
+            // Initialize gamification
+            initializeGamificationDashboard();
+
             // Initialize progress
             initializeProgress();
         });
 
+        // Initialize gamification dashboard
+        function initializeGamificationDashboard() {
+            if (typeof window.gamificationSystem !== 'undefined') {
+                updateGamificationDisplay();
+                
+                // Listen for gamification updates
+                window.addEventListener('gamificationUpdate', function(event) {
+                    updateGamificationDisplay();
+                });
+                
+                // Initialize challenges and achievements
+                setTimeout(() => {
+                    if (typeof window.challengeSystem !== 'undefined') {
+                        renderChallenges();
+                    }
+                    if (typeof window.achievementSystem !== 'undefined') {
+                        renderAchievements();
+                    }
+                }, 100);
+            }
+        }
+
+        // Update gamification dashboard display
+        function updateGamificationDisplay() {
+            if (typeof window.gamificationSystem === 'undefined') return;
+            
+            const userData = window.gamificationSystem.getUserData();
+            
+            // Update level and XP
+            document.getElementById('user-level').textContent = userData.level;
+            document.getElementById('current-xp').textContent = userData.xp;
+            document.getElementById('total-xp').textContent = userData.xp;
+            
+            // Update XP to next level
+            const xpForNext = window.gamificationSystem.getXPForNextLevel();
+            if (xpForNext !== null) {
+                document.getElementById('next-level-xp').textContent = userData.xp + xpForNext;
+                const progress = window.gamificationSystem.getProgressToNextLevel();
+                document.getElementById('xp-progress-fill').style.width = progress + '%';
+            } else {
+                document.getElementById('next-level-xp').textContent = 'MAX';
+                document.getElementById('xp-progress-fill').style.width = '100%';
+            }
+            
+            // Update streak
+            document.getElementById('current-streak').textContent = userData.currentStreak;
+            
+            // Update badges count
+            document.getElementById('badges-earned').textContent = userData.badges.length;
+            
+            // Update weekly XP
+            document.getElementById('weekly-xp').textContent = userData.weeklyXP;
+        }
+
+        // Render challenges section
+        function renderChallenges() {
+            if (typeof window.challengeSystem === 'undefined') return;
+            
+            const container = document.getElementById('challenges-container');
+            if (container) {
+                container.innerHTML = window.challengeSystem.renderChallengesSection();
+            }
+        }
+
+        // Render achievements section
+        function renderAchievements() {
+            if (typeof window.achievementSystem === 'undefined' || typeof window.gamificationSystem === 'undefined') return;
+            
+            const container = document.getElementById('achievements-container');
+            const userData = window.gamificationSystem.getUserData();
+            
+            if (container) {
+                container.innerHTML = `
+                    <div class="achievement-section">
+                        ${window.achievementSystem.renderCategoryTabs()}
+                        ${window.achievementSystem.renderBadgeGrid(userData, true)}
+                    </div>
+                `;
+                
+                // Add category tab functionality
+                const categoryTabs = container.querySelectorAll('.category-tab');
+                categoryTabs.forEach(tab => {
+                    tab.addEventListener('click', function() {
+                        categoryTabs.forEach(t => t.classList.remove('active'));
+                        this.classList.add('active');
+                        
+                        const category = this.dataset.category;
+                        const achievementGrid = container.querySelector('.achievement-grid');
+                        
+                        if (category === 'all') {
+                            achievementGrid.innerHTML = window.achievementSystem.renderBadgeGrid(userData, true).split('achievement-grid">')[1].split('</div>')[0];
+                        } else {
+                            const filteredHTML = window.achievementSystem.renderBadgeGrid(userData, true, category);
+                            achievementGrid.innerHTML = filteredHTML.split('achievement-grid">')[1].split('</div>')[0];
+                        }
+                    });
+                });
+            }
+        }
+
         function updateLanguageProgress(lang, completed, completedDays) {
             // Find the language card
             const cards = document.querySelectorAll('.language-card');
@@ -401,6 +553,9 @@ <h3><i class="fas fa-link"></i> <span class="zh">书写系统</span><span class=
     </script>
     <script src="js/script.min.js" defer></script>
     <script src="js/notifications.js" defer></script>
+    <script src="js/gamification.js" defer></script>
+    <script src="js/achievements.js" defer></script>
+    <script src="js/challenges.js" defer></script>
 
     <!-- Notification Settings Modal -->
     <div id="notification-settings-modal" class="modal" style="display: none;">
diff --git a/js/achievements.js b/js/achievements.js
new file mode 100644
index 0000000..20fc4b5
--- /dev/null
+++ b/js/achievements.js
@@ -0,0 +1,394 @@
+/**
+ * Mandarin Pathways Achievement System
+ * Manages badges, trophies, and achievement unlocking
+ */
+
+class AchievementSystem {
+    constructor() {
+        this.badges = {
+            first_steps: {
+                id: 'first_steps',
+                name: { en: 'First Steps', zh: '初出茅庐' },
+                description: { en: 'Complete your first lesson', zh: '完成第一课' },
+                icon: '🌱',
+                condition: (user) => user.totalLessonsCompleted >= 1,
+                category: 'progress'
+            },
+            
+            week_warrior: {
+                id: 'week_warrior',
+                name: { en: 'Week Warrior', zh: '周冠军' },
+                description: { en: 'Complete 7 lessons', zh: '完成7课' },
+                icon: '⚔️',
+                condition: (user) => user.totalLessonsCompleted >= 7,
+                category: 'progress'
+            },
+            
+            month_master: {
+                id: 'month_master',
+                name: { en: 'Month Master', zh: '月度大师' },
+                description: { en: 'Complete 30 lessons', zh: '完成30课' },
+                icon: '👑',
+                condition: (user) => user.totalLessonsCompleted >= 30,
+                category: 'progress'
+            },
+            
+            streak_starter: {
+                id: 'streak_starter',
+                name: { en: 'Streak Starter', zh: '连击新手' },
+                description: { en: 'Maintain a 3-day streak', zh: '保持3天连击' },
+                icon: '🔥',
+                condition: (user) => user.currentStreak >= 3 || user.longestStreak >= 3,
+                category: 'consistency'
+            },
+            
+            streak_master: {
+                id: 'streak_master',
+                name: { en: 'Streak Master', zh: '连击大师' },
+                description: { en: 'Maintain a 7-day streak', zh: '保持7天连击' },
+                icon: '🌟',
+                condition: (user) => user.currentStreak >= 7 || user.longestStreak >= 7,
+                category: 'consistency'
+            },
+            
+            dedication_hero: {
+                id: 'dedication_hero',
+                name: { en: 'Dedication Hero', zh: '坚持英雄' },
+                description: { en: 'Maintain a 30-day streak', zh: '保持30天连击' },
+                icon: '💎',
+                condition: (user) => user.currentStreak >= 30 || user.longestStreak >= 30,
+                category: 'consistency'
+            },
+            
+            writing_pro: {
+                id: 'writing_pro',
+                name: { en: 'Writing Pro', zh: '写作专家' },
+                description: { en: 'Complete 10 writing exercises', zh: '完成10个写作练习' },
+                icon: '✍️',
+                condition: (user) => user.totalWritingCompleted >= 10,
+                category: 'skills'
+            },
+            
+            reading_champion: {
+                id: 'reading_champion',
+                name: { en: 'Reading Champion', zh: '阅读冠军' },
+                description: { en: 'Complete 15 reading exercises', zh: '完成15个阅读练习' },
+                icon: '📚',
+                condition: (user) => user.totalReadingCompleted >= 15,
+                category: 'skills'
+            },
+            
+            perfect_student: {
+                id: 'perfect_student',
+                name: { en: 'Perfect Student', zh: '完美学生' },
+                description: { en: 'Achieve 5 perfect scores', zh: '获得5次满分' },
+                icon: '🎯',
+                condition: (user) => user.perfectScores >= 5,
+                category: 'excellence'
+            },
+            
+            challenge_champion: {
+                id: 'challenge_champion',
+                name: { en: 'Challenge Champion', zh: '挑战冠军' },
+                description: { en: 'Complete 5 daily challenges', zh: '完成5个每日挑战' },
+                icon: '🏆',
+                condition: (user) => user.challengesCompleted.length >= 5,
+                category: 'challenges'
+            },
+            
+            level_5_legend: {
+                id: 'level_5_legend',
+                name: { en: 'Level 5 Legend', zh: '五级传说' },
+                description: { en: 'Reach Level 5', zh: '达到5级' },
+                icon: '🌟',
+                condition: (user) => user.level >= 5,
+                category: 'levels'
+            },
+            
+            level_10_master: {
+                id: 'level_10_master',
+                name: { en: 'Level 10 Master', zh: '十级大师' },
+                description: { en: 'Reach Level 10', zh: '达到10级' },
+                icon: '🎖️',
+                condition: (user) => user.level >= 10,
+                category: 'levels'
+            },
+            
+            weekly_warrior: {
+                id: 'weekly_warrior',
+                name: { en: 'Weekly Warrior', zh: '每周战士' },
+                description: { en: 'Reach weekly XP goal', zh: '达到每周经验目标' },
+                icon: '📈',
+                condition: (user) => user.weeklyXP >= user.weeklyGoal,
+                category: 'goals'
+            },
+            
+            xp_collector: {
+                id: 'xp_collector',
+                name: { en: 'XP Collector', zh: '经验收集者' },
+                description: { en: 'Earn 1000 total XP', zh: '获得1000总经验' },
+                icon: '💰',
+                condition: (user) => user.xp >= 1000,
+                category: 'milestones'
+            },
+            
+            xp_master: {
+                id: 'xp_master',
+                name: { en: 'XP Master', zh: '经验大师' },
+                description: { en: 'Earn 5000 total XP', zh: '获得5000总经验' },
+                icon: '💎',
+                condition: (user) => user.xp >= 5000,
+                category: 'milestones'
+            }
+        };
+        
+        this.categories = {
+            progress: { name: { en: 'Progress', zh: '进度' }, color: '#2ecc71' },
+            consistency: { name: { en: 'Consistency', zh: '坚持' }, color: '#e74c3c' },
+            skills: { name: { en: 'Skills', zh: '技能' }, color: '#3498db' },
+            excellence: { name: { en: 'Excellence', zh: '卓越' }, color: '#f39c12' },
+            challenges: { name: { en: 'Challenges', zh: '挑战' }, color: '#9b59b6' },
+            levels: { name: { en: 'Levels', zh: '等级' }, color: '#1abc9c' },
+            goals: { name: { en: 'Goals', zh: '目标' }, color: '#34495e' },
+            milestones: { name: { en: 'Milestones', zh: '里程碑' }, color: '#e67e22' }
+        };
+        
+        this.initializeListeners();
+    }
+    
+    initializeListeners() {
+        window.addEventListener('checkAchievements', (event) => {
+            this.checkAllAchievements(event.detail);
+        });
+    }
+    
+    checkAllAchievements(userData) {
+        const newBadges = [];
+        
+        Object.values(this.badges).forEach(badge => {
+            if (!userData.badges.includes(badge.id) && badge.condition(userData)) {
+                window.gamificationSystem.awardBadge(badge.id);
+                newBadges.push(badge);
+            }
+        });
+        
+        return newBadges;
+    }
+    
+    getBadge(badgeId) {
+        return this.badges[badgeId];
+    }
+    
+    getAllBadges() {
+        return this.badges;
+    }
+    
+    getUserBadges(userBadgeIds) {
+        return userBadgeIds.map(id => this.badges[id]).filter(Boolean);
+    }
+    
+    getAvailableBadges(userData) {
+        return Object.values(this.badges).filter(badge => 
+            !userData.badges.includes(badge.id)
+        );
+    }
+    
+    getNearbyBadges(userData, limit = 3) {
+        const available = this.getAvailableBadges(userData);
+        
+        // Sort by how close the user is to earning them (basic heuristic)
+        return available.slice(0, limit);
+    }
+    
+    getBadgesByCategory(category) {
+        return Object.values(this.badges).filter(badge => 
+            badge.category === category
+        );
+    }
+    
+    getProgressToNextBadge(userData, badgeId) {
+        const badge = this.badges[badgeId];
+        if (!badge || userData.badges.includes(badgeId)) {
+            return null;
+        }
+        
+        // Basic progress calculation based on badge type
+        let progress = 0;
+        
+        switch (badgeId) {
+            case 'week_warrior':
+                progress = Math.min(100, (userData.totalLessonsCompleted / 7) * 100);
+                break;
+            case 'month_master':
+                progress = Math.min(100, (userData.totalLessonsCompleted / 30) * 100);
+                break;
+            case 'streak_master':
+                progress = Math.min(100, (Math.max(userData.currentStreak, userData.longestStreak) / 7) * 100);
+                break;
+            case 'writing_pro':
+                progress = Math.min(100, (userData.totalWritingCompleted / 10) * 100);
+                break;
+            case 'reading_champion':
+                progress = Math.min(100, (userData.totalReadingCompleted / 15) * 100);
+                break;
+            case 'perfect_student':
+                progress = Math.min(100, (userData.perfectScores / 5) * 100);
+                break;
+            case 'challenge_champion':
+                progress = Math.min(100, (userData.challengesCompleted.length / 5) * 100);
+                break;
+            case 'level_5_legend':
+                progress = Math.min(100, (userData.level / 5) * 100);
+                break;
+            case 'level_10_master':
+                progress = Math.min(100, (userData.level / 10) * 100);
+                break;
+            case 'weekly_warrior':
+                progress = Math.min(100, (userData.weeklyXP / userData.weeklyGoal) * 100);
+                break;
+            case 'xp_collector':
+                progress = Math.min(100, (userData.xp / 1000) * 100);
+                break;
+            case 'xp_master':
+                progress = Math.min(100, (userData.xp / 5000) * 100);
+                break;
+            default:
+                progress = badge.condition(userData) ? 100 : 0;
+        }
+        
+        return progress;
+    }
+    
+    renderBadge(badgeId, earned = false, showProgress = false, userData = null) {
+        const badge = this.badges[badgeId];
+        if (!badge) return null;
+        
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        const category = this.categories[badge.category];
+        
+        let progressHTML = '';
+        if (showProgress && !earned && userData) {
+            const progress = this.getProgressToNextBadge(userData, badgeId);
+            if (progress !== null) {
+                progressHTML = `
+                    <div class="badge-progress">
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: ${progress}%"></div>
+                        </div>
+                        <span class="progress-text">${Math.round(progress)}%</span>
+                    </div>
+                `;
+            }
+        }
+        
+        return `
+            <div class="achievement-badge ${earned ? 'earned' : 'locked'}" data-badge-id="${badgeId}">
+                <div class="badge-icon" style="border-color: ${category.color}">
+                    ${earned ? badge.icon : '🔒'}
+                </div>
+                <div class="badge-info">
+                    <h4 class="badge-name">${badge.name[lang]}</h4>
+                    <p class="badge-description">${badge.description[lang]}</p>
+                    <span class="badge-category" style="color: ${category.color}">
+                        ${category.name[lang]}
+                    </span>
+                    ${progressHTML}
+                </div>
+            </div>
+        `;
+    }
+    
+    renderBadgeGrid(userData, showLocked = true, categoryFilter = null) {
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        
+        let badgesToShow = Object.values(this.badges);
+        
+        if (categoryFilter) {
+            badgesToShow = badgesToShow.filter(badge => badge.category === categoryFilter);
+        }
+        
+        if (!showLocked) {
+            badgesToShow = badgesToShow.filter(badge => userData.badges.includes(badge.id));
+        }
+        
+        const earnedBadges = badgesToShow.filter(badge => userData.badges.includes(badge.id));
+        const lockedBadges = badgesToShow.filter(badge => !userData.badges.includes(badge.id));
+        
+        // Sort earned badges first, then locked badges
+        const sortedBadges = [...earnedBadges, ...lockedBadges];
+        
+        const badgeHTML = sortedBadges.map(badge => 
+            this.renderBadge(badge.id, userData.badges.includes(badge.id), true, userData)
+        ).join('');
+        
+        return `
+            <div class="achievement-header">
+                <h3>${lang === 'zh' ? '成就徽章' : 'Achievement Badges'}</h3>
+                <div class="achievement-stats">
+                    <span class="earned-count">${earnedBadges.length}</span> / 
+                    <span class="total-count">${badgesToShow.length}</span>
+                    ${lang === 'zh' ? '已获得' : 'Earned'}
+                </div>
+            </div>
+            <div class="achievement-grid">
+                ${badgeHTML}
+            </div>
+        `;
+    }
+    
+    renderCategoryTabs() {
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        
+        const tabs = Object.entries(this.categories).map(([key, category]) => `
+            <button class="category-tab" data-category="${key}" style="border-color: ${category.color}">
+                ${category.name[lang]}
+            </button>
+        `).join('');
+        
+        return `
+            <div class="achievement-categories">
+                <button class="category-tab active" data-category="all">
+                    ${lang === 'zh' ? '全部' : 'All'}
+                </button>
+                ${tabs}
+            </div>
+        `;
+    }
+    
+    getAchievementSummary(userData) {
+        const totalBadges = Object.keys(this.badges).length;
+        const earnedBadges = userData.badges.length;
+        const completionRate = Math.round((earnedBadges / totalBadges) * 100);
+        
+        const categoryProgress = Object.keys(this.categories).map(category => {
+            const categoryBadges = this.getBadgesByCategory(category);
+            const categoryEarned = categoryBadges.filter(badge => 
+                userData.badges.includes(badge.id)
+            ).length;
+            
+            return {
+                category,
+                total: categoryBadges.length,
+                earned: categoryEarned,
+                percentage: Math.round((categoryEarned / categoryBadges.length) * 100)
+            };
+        });
+        
+        return {
+            totalBadges,
+            earnedBadges,
+            completionRate,
+            categoryProgress
+        };
+    }
+}
+
+// Initialize global achievement system
+if (typeof window !== 'undefined') {
+    window.achievementSystem = new AchievementSystem();
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AchievementSystem;
+}
\ No newline at end of file
diff --git a/js/challenges.js b/js/challenges.js
new file mode 100644
index 0000000..bc6279d
--- /dev/null
+++ b/js/challenges.js
@@ -0,0 +1,552 @@
+/**
+ * Mandarin Pathways Challenge System
+ * Daily and weekly challenges to encourage engagement
+ */
+
+class ChallengeSystem {
+    constructor() {
+        this.STORAGE_KEY = 'mandarin_challenges';
+        
+        this.dailyChallenges = {
+            perfect_pronunciation: {
+                id: 'perfect_pronunciation',
+                name: { en: 'Perfect Pronunciation', zh: '完美发音' },
+                description: { en: 'Complete all audio exercises today', zh: '今天完成所有听力练习' },
+                icon: '🎵',
+                type: 'daily',
+                xpReward: 50,
+                difficulty: 'medium',
+                category: 'audio',
+                condition: (progress) => progress.audioExercisesToday >= progress.totalAudioExercises,
+                resetDaily: true
+            },
+            
+            character_master: {
+                id: 'character_master',
+                name: { en: 'Character Master', zh: '汉字大师' },
+                description: { en: 'Practice writing 10 characters', zh: '练习书写10个汉字' },
+                icon: '✍️',
+                type: 'daily',
+                xpReward: 50,
+                difficulty: 'medium',
+                category: 'writing',
+                condition: (progress) => progress.charactersWrittenToday >= 10,
+                resetDaily: true
+            },
+            
+            speed_reader: {
+                id: 'speed_reader',
+                name: { en: 'Speed Reader', zh: '快速阅读者' },
+                description: { en: 'Complete 3 reading exercises', zh: '完成3个阅读练习' },
+                icon: '📚',
+                type: 'daily',
+                xpReward: 50,
+                difficulty: 'easy',
+                category: 'reading',
+                condition: (progress) => progress.readingExercisesToday >= 3,
+                resetDaily: true
+            },
+            
+            consistency_king: {
+                id: 'consistency_king',
+                name: { en: 'Consistency King', zh: '坚持之王' },
+                description: { en: 'Study for 20+ minutes today', zh: '今天学习20+分钟' },
+                icon: '⏰',
+                type: 'daily',
+                xpReward: 50,
+                difficulty: 'medium',
+                category: 'time',
+                condition: (progress) => progress.studyTimeToday >= 20,
+                resetDaily: true
+            },
+            
+            perfect_day: {
+                id: 'perfect_day',
+                name: { en: 'Perfect Day', zh: '完美一天' },
+                description: { en: 'Complete lesson with 100% accuracy', zh: '以100%准确率完成课程' },
+                icon: '🎯',
+                type: 'daily',
+                xpReward: 75,
+                difficulty: 'hard',
+                category: 'accuracy',
+                condition: (progress) => progress.perfectScoresToday >= 1,
+                resetDaily: true
+            }
+        };
+        
+        this.weeklyChallenges = {
+            weekly_warrior: {
+                id: 'weekly_warrior',
+                name: { en: 'Weekly Warrior', zh: '每周战士' },
+                description: { en: 'Complete 5 lessons this week', zh: '本周完成5课' },
+                icon: '⚔️',
+                type: 'weekly',
+                xpReward: 200,
+                difficulty: 'medium',
+                category: 'consistency',
+                condition: (progress) => progress.lessonsThisWeek >= 5,
+                resetWeekly: true
+            },
+            
+            streak_champion: {
+                id: 'streak_champion',
+                name: { en: 'Streak Champion', zh: '连击冠军' },
+                description: { en: 'Maintain daily study streak for 7 days', zh: '保持7天每日学习连击' },
+                icon: '🔥',
+                type: 'weekly',
+                xpReward: 300,
+                difficulty: 'hard',
+                category: 'consistency',
+                condition: (progress) => progress.currentStreak >= 7,
+                resetWeekly: false
+            },
+            
+            skill_master: {
+                id: 'skill_master',
+                name: { en: 'Skill Master', zh: '技能大师' },
+                description: { en: 'Complete 5 writing + 5 reading exercises', zh: '完成5个写作+5个阅读练习' },
+                icon: '🎓',
+                type: 'weekly',
+                xpReward: 250,
+                difficulty: 'hard',
+                category: 'skills',
+                condition: (progress) => progress.writingThisWeek >= 5 && progress.readingThisWeek >= 5,
+                resetWeekly: true
+            },
+            
+            xp_hunter: {
+                id: 'xp_hunter',
+                name: { en: 'XP Hunter', zh: '经验猎人' },
+                description: { en: 'Earn 500 XP this week', zh: '本周获得500经验' },
+                icon: '💎',
+                type: 'weekly',
+                xpReward: 200,
+                difficulty: 'medium',
+                category: 'xp',
+                condition: (progress) => progress.xpThisWeek >= 500,
+                resetWeekly: true
+            }
+        };
+        
+        this.initializeData();
+    }
+    
+    initializeData() {
+        const defaultData = {
+            activeChallenges: [],
+            completedChallenges: [],
+            dailyProgress: {},
+            weeklyProgress: {},
+            lastResetDate: new Date().toDateString(),
+            lastWeekResetDate: this.getWeekStart()
+        };
+        
+        const stored = localStorage.getItem(this.STORAGE_KEY);
+        this.data = stored ? { ...defaultData, ...JSON.parse(stored) } : defaultData;
+        
+        this.checkResets();
+        this.generateDailyChallenges();
+        this.generateWeeklyChallenges();
+        this.save();
+    }
+    
+    save() {
+        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.data));
+    }
+    
+    getWeekStart() {
+        const now = new Date();
+        const day = now.getDay();
+        const diff = now.getDate() - day;
+        return new Date(now.setDate(diff)).toDateString();
+    }
+    
+    checkResets() {
+        const today = new Date().toDateString();
+        const currentWeek = this.getWeekStart();
+        
+        // Reset daily challenges
+        if (this.data.lastResetDate !== today) {
+            this.resetDailyChallenges();
+            this.data.lastResetDate = today;
+        }
+        
+        // Reset weekly challenges
+        if (this.data.lastWeekResetDate !== currentWeek) {
+            this.resetWeeklyChallenges();
+            this.data.lastWeekResetDate = currentWeek;
+        }
+    }
+    
+    resetDailyChallenges() {
+        // Remove completed daily challenges
+        this.data.completedChallenges = this.data.completedChallenges.filter(id => {
+            const challenge = this.dailyChallenges[id] || this.weeklyChallenges[id];
+            return challenge && !challenge.resetDaily;
+        });
+        
+        // Reset daily progress
+        this.data.dailyProgress = {};
+        
+        // Generate new daily challenges
+        this.generateDailyChallenges();
+    }
+    
+    resetWeeklyChallenges() {
+        // Remove completed weekly challenges
+        this.data.completedChallenges = this.data.completedChallenges.filter(id => {
+            const challenge = this.dailyChallenges[id] || this.weeklyChallenges[id];
+            return challenge && !challenge.resetWeekly;
+        });
+        
+        // Reset weekly progress
+        this.data.weeklyProgress = {};
+        
+        // Generate new weekly challenges
+        this.generateWeeklyChallenges();
+    }
+    
+    generateDailyChallenges() {
+        const availableDailies = Object.values(this.dailyChallenges).filter(challenge =>
+            !this.data.completedChallenges.includes(challenge.id)
+        );
+        
+        // Select 2-3 random daily challenges
+        const selectedCount = Math.min(3, availableDailies.length);
+        const selected = this.shuffleArray(availableDailies).slice(0, selectedCount);
+        
+        this.data.activeChallenges = this.data.activeChallenges.filter(id => {
+            const challenge = this.weeklyChallenges[id];
+            return challenge && challenge.type === 'weekly';
+        });
+        
+        selected.forEach(challenge => {
+            if (!this.data.activeChallenges.includes(challenge.id)) {
+                this.data.activeChallenges.push(challenge.id);
+            }
+        });
+    }
+    
+    generateWeeklyChallenges() {
+        const availableWeeklies = Object.values(this.weeklyChallenges).filter(challenge =>
+            !this.data.completedChallenges.includes(challenge.id)
+        );
+        
+        // Select 2 random weekly challenges
+        const selectedCount = Math.min(2, availableWeeklies.length);
+        const selected = this.shuffleArray(availableWeeklies).slice(0, selectedCount);
+        
+        selected.forEach(challenge => {
+            if (!this.data.activeChallenges.includes(challenge.id)) {
+                this.data.activeChallenges.push(challenge.id);
+            }
+        });
+    }
+    
+    shuffleArray(array) {
+        const shuffled = [...array];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+        return shuffled;
+    }
+    
+    updateProgress(activityType, amount = 1) {
+        const today = new Date().toDateString();
+        
+        // Initialize daily progress if needed
+        if (!this.data.dailyProgress[today]) {
+            this.data.dailyProgress[today] = {
+                audioExercisesToday: 0,
+                charactersWrittenToday: 0,
+                readingExercisesToday: 0,
+                studyTimeToday: 0,
+                perfectScoresToday: 0,
+                lessonsToday: 0
+            };
+        }
+        
+        // Initialize weekly progress if needed
+        const weekStart = this.getWeekStart();
+        if (!this.data.weeklyProgress[weekStart]) {
+            this.data.weeklyProgress[weekStart] = {
+                lessonsThisWeek: 0,
+                writingThisWeek: 0,
+                readingThisWeek: 0,
+                xpThisWeek: 0
+            };
+        }
+        
+        const dailyProgress = this.data.dailyProgress[today];
+        const weeklyProgress = this.data.weeklyProgress[weekStart];
+        
+        // Update progress based on activity type
+        switch (activityType) {
+            case 'audio_exercise':
+                dailyProgress.audioExercisesToday += amount;
+                break;
+            case 'character_writing':
+                dailyProgress.charactersWrittenToday += amount;
+                break;
+            case 'reading_exercise':
+                dailyProgress.readingExercisesToday += amount;
+                weeklyProgress.readingThisWeek += amount;
+                break;
+            case 'study_time':
+                dailyProgress.studyTimeToday += amount;
+                break;
+            case 'perfect_score':
+                dailyProgress.perfectScoresToday += amount;
+                break;
+            case 'lesson_complete':
+                dailyProgress.lessonsToday += amount;
+                weeklyProgress.lessonsThisWeek += amount;
+                break;
+            case 'writing_exercise':
+                weeklyProgress.writingThisWeek += amount;
+                break;
+            case 'xp_earned':
+                weeklyProgress.xpThisWeek += amount;
+                break;
+        }
+        
+        // Get user data for streak information
+        const userData = window.gamificationSystem ? window.gamificationSystem.getUserData() : {};
+        
+        // Create combined progress object
+        const combinedProgress = {
+            ...dailyProgress,
+            ...weeklyProgress,
+            currentStreak: userData.currentStreak || 0,
+            totalAudioExercises: 1 // This could be dynamic based on lesson content
+        };
+        
+        this.checkChallengeCompletion(combinedProgress);
+        this.save();
+    }
+    
+    checkChallengeCompletion(progress) {
+        const newlyCompleted = [];
+        
+        this.data.activeChallenges.forEach(challengeId => {
+            if (this.data.completedChallenges.includes(challengeId)) {
+                return; // Already completed
+            }
+            
+            const challenge = this.dailyChallenges[challengeId] || this.weeklyChallenges[challengeId];
+            if (challenge && challenge.condition(progress)) {
+                this.completeChallenge(challengeId);
+                newlyCompleted.push(challenge);
+            }
+        });
+        
+        return newlyCompleted;
+    }
+    
+    completeChallenge(challengeId) {
+        if (this.data.completedChallenges.includes(challengeId)) {
+            return false; // Already completed
+        }
+        
+        this.data.completedChallenges.push(challengeId);
+        
+        const challenge = this.dailyChallenges[challengeId] || this.weeklyChallenges[challengeId];
+        if (challenge && window.gamificationSystem) {
+            const result = window.gamificationSystem.completeChallenge(challengeId);
+            
+            if (result) {
+                this.triggerChallengeComplete(challenge);
+            }
+        }
+        
+        this.save();
+        return true;
+    }
+    
+    triggerChallengeComplete(challenge) {
+        window.dispatchEvent(new CustomEvent('challengeComplete', {
+            detail: { challenge }
+        }));
+        
+        // Show notification
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        const message = `🏆 ${lang === 'zh' ? '挑战完成' : 'Challenge Complete'}: ${challenge.name[lang]}!`;
+        
+        if (window.gamificationSystem) {
+            window.gamificationSystem.showNotification(message, 'success');
+        }
+    }
+    
+    getActiveChallenges() {
+        return this.data.activeChallenges.map(id => {
+            const challenge = this.dailyChallenges[id] || this.weeklyChallenges[id];
+            if (!challenge) return null;
+            
+            const isCompleted = this.data.completedChallenges.includes(id);
+            const progress = this.getChallengeProgress(id);
+            
+            return {
+                ...challenge,
+                isCompleted,
+                progress
+            };
+        }).filter(Boolean);
+    }
+    
+    getChallengeProgress(challengeId) {
+        const challenge = this.dailyChallenges[challengeId] || this.weeklyChallenges[challengeId];
+        if (!challenge) return 0;
+        
+        const today = new Date().toDateString();
+        const weekStart = this.getWeekStart();
+        const userData = window.gamificationSystem ? window.gamificationSystem.getUserData() : {};
+        
+        const dailyProgress = this.data.dailyProgress[today] || {};
+        const weeklyProgress = this.data.weeklyProgress[weekStart] || {};
+        
+        const combinedProgress = {
+            ...dailyProgress,
+            ...weeklyProgress,
+            currentStreak: userData.currentStreak || 0,
+            totalAudioExercises: 1
+        };
+        
+        // Calculate progress percentage based on challenge type
+        switch (challengeId) {
+            case 'perfect_pronunciation':
+                return Math.min(100, (combinedProgress.audioExercisesToday / combinedProgress.totalAudioExercises) * 100);
+            case 'character_master':
+                return Math.min(100, (combinedProgress.charactersWrittenToday / 10) * 100);
+            case 'speed_reader':
+                return Math.min(100, (combinedProgress.readingExercisesToday / 3) * 100);
+            case 'consistency_king':
+                return Math.min(100, (combinedProgress.studyTimeToday / 20) * 100);
+            case 'perfect_day':
+                return combinedProgress.perfectScoresToday >= 1 ? 100 : 0;
+            case 'weekly_warrior':
+                return Math.min(100, (combinedProgress.lessonsThisWeek / 5) * 100);
+            case 'streak_champion':
+                return Math.min(100, (combinedProgress.currentStreak / 7) * 100);
+            case 'skill_master':
+                const writingProgress = Math.min(1, combinedProgress.writingThisWeek / 5);
+                const readingProgress = Math.min(1, combinedProgress.readingThisWeek / 5);
+                return (writingProgress + readingProgress) * 50;
+            case 'xp_hunter':
+                return Math.min(100, (combinedProgress.xpThisWeek / 500) * 100);
+            default:
+                return challenge.condition(combinedProgress) ? 100 : 0;
+        }
+    }
+    
+    renderChallengeCard(challenge) {
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        const progressPercent = challenge.progress || 0;
+        
+        const difficultyColors = {
+            easy: '#2ecc71',
+            medium: '#f39c12',
+            hard: '#e74c3c'
+        };
+        
+        const typeLabel = challenge.type === 'daily' 
+            ? (lang === 'zh' ? '每日' : 'Daily')
+            : (lang === 'zh' ? '每周' : 'Weekly');
+        
+        return `
+            <div class="challenge-card ${challenge.isCompleted ? 'completed' : ''}" data-challenge-id="${challenge.id}">
+                <div class="challenge-header">
+                    <div class="challenge-icon">${challenge.icon}</div>
+                    <div class="challenge-info">
+                        <h4 class="challenge-name">${challenge.name[lang]}</h4>
+                        <p class="challenge-description">${challenge.description[lang]}</p>
+                    </div>
+                    <div class="challenge-meta">
+                        <span class="challenge-type" style="background-color: ${difficultyColors[challenge.difficulty]}">
+                            ${typeLabel}
+                        </span>
+                        <span class="challenge-xp">+${challenge.xpReward} XP</span>
+                    </div>
+                </div>
+                <div class="challenge-progress">
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${progressPercent}%"></div>
+                    </div>
+                    <span class="progress-text">${Math.round(progressPercent)}%</span>
+                </div>
+                ${challenge.isCompleted ? '<div class="challenge-completed">✅ ' + (lang === 'zh' ? '已完成' : 'Completed') + '</div>' : ''}
+            </div>
+        `;
+    }
+    
+    renderChallengesSection() {
+        const lang = localStorage.getItem('preferredLanguage') === 'zh-CN' ? 'zh' : 'en';
+        const activeChallenges = this.getActiveChallenges();
+        
+        if (activeChallenges.length === 0) {
+            return `
+                <div class="challenges-section">
+                    <h3>${lang === 'zh' ? '今日挑战' : 'Daily Challenges'}</h3>
+                    <div class="no-challenges">
+                        <p>${lang === 'zh' ? '暂无可用挑战，明天再来看看！' : 'No challenges available, check back tomorrow!'}</p>
+                    </div>
+                </div>
+            `;
+        }
+        
+        const challengeHTML = activeChallenges.map(challenge => 
+            this.renderChallengeCard(challenge)
+        ).join('');
+        
+        const completedCount = activeChallenges.filter(c => c.isCompleted).length;
+        
+        return `
+            <div class="challenges-section">
+                <div class="challenges-header">
+                    <h3>${lang === 'zh' ? '今日挑战' : 'Daily Challenges'}</h3>
+                    <div class="challenges-progress">
+                        <span class="completed-challenges">${completedCount}</span> / 
+                        <span class="total-challenges">${activeChallenges.length}</span>
+                        ${lang === 'zh' ? '已完成' : 'Completed'}
+                    </div>
+                </div>
+                <div class="challenges-grid">
+                    ${challengeHTML}
+                </div>
+            </div>
+        `;
+    }
+    
+    getChallengeStats() {
+        const total = this.data.completedChallenges.length;
+        const today = new Date().toDateString();
+        const weekStart = this.getWeekStart();
+        
+        const dailyCompleted = this.data.completedChallenges.filter(id => {
+            const challenge = this.dailyChallenges[id];
+            return challenge && challenge.resetDaily;
+        }).length;
+        
+        const weeklyCompleted = this.data.completedChallenges.filter(id => {
+            const challenge = this.weeklyChallenges[id];
+            return challenge && challenge.resetWeekly;
+        }).length;
+        
+        return {
+            totalCompleted: total,
+            dailyCompleted,
+            weeklyCompleted,
+            activeChallenges: this.data.activeChallenges.length
+        };
+    }
+}
+
+// Initialize global challenge system
+if (typeof window !== 'undefined') {
+    window.challengeSystem = new ChallengeSystem();
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ChallengeSystem;
+}
\ No newline at end of file
diff --git a/js/gamification.js b/js/gamification.js
new file mode 100644
index 0000000..fede4a8
--- /dev/null
+++ b/js/gamification.js
@@ -0,0 +1,358 @@
+/**
+ * Mandarin Pathways Gamification System
+ * Core XP, levels, streaks, and progress tracking
+ */
+
+class GamificationSystem {
+    constructor() {
+        this.STORAGE_KEY = 'mandarin_gamification';
+        this.XP_REWARDS = {
+            DAILY_LESSON: 25,
+            PERFECT_SCORE: 10,
+            READING_EXERCISE: 15,
+            WRITING_EXERCISE: 20,
+            DAILY_CHALLENGE: 50,
+            STREAK_MILESTONE: {
+                7: 100,
+                14: 200,
+                30: 500,
+                50: 1000
+            }
+        };
+        
+        this.LEVEL_THRESHOLDS = [
+            0, 100, 250, 500, 1000, 1750, 2750, 4000, 5500, 7500, 10000,
+            13000, 16500, 20500, 25000, 30000, 35500, 41500, 48000, 55000, 62500
+        ];
+        
+        this.initializeData();
+    }
+    
+    initializeData() {
+        const defaultData = {
+            user: {
+                xp: 0,
+                level: 1,
+                currentStreak: 0,
+                longestStreak: 0,
+                lastActivityDate: null,
+                badges: [],
+                weeklyXP: 0,
+                weekStartDate: this.getWeekStart(),
+                challengesCompleted: [],
+                weeklyGoal: 300,
+                totalLessonsCompleted: 0,
+                totalReadingCompleted: 0,
+                totalWritingCompleted: 0,
+                perfectScores: 0,
+                preferences: {
+                    showNotifications: true,
+                    streakReminders: true,
+                    celebrateAchievements: true
+                }
+            }
+        };
+        
+        const stored = localStorage.getItem(this.STORAGE_KEY);
+        this.data = stored ? { ...defaultData, ...JSON.parse(stored) } : defaultData;
+        
+        // Ensure user object exists with all properties
+        this.data.user = { ...defaultData.user, ...this.data.user };
+        
+        this.updateWeeklyProgress();
+        this.updateStreak();
+        this.save();
+    }
+    
+    save() {
+        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.data));
+        this.dispatchUpdateEvent();
+    }
+    
+    dispatchUpdateEvent() {
+        window.dispatchEvent(new CustomEvent('gamificationUpdate', {
+            detail: this.data.user
+        }));
+    }
+    
+    getWeekStart() {
+        const now = new Date();
+        const day = now.getDay();
+        const diff = now.getDate() - day;
+        return new Date(now.setDate(diff)).toDateString();
+    }
+    
+    updateWeeklyProgress() {
+        const currentWeekStart = this.getWeekStart();
+        if (this.data.user.weekStartDate !== currentWeekStart) {
+            this.data.user.weeklyXP = 0;
+            this.data.user.weekStartDate = currentWeekStart;
+        }
+    }
+    
+    updateStreak() {
+        const today = new Date().toDateString();
+        const lastActivity = this.data.user.lastActivityDate;
+        
+        if (!lastActivity) {
+            return; // No previous activity
+        }
+        
+        const lastDate = new Date(lastActivity);
+        const todayDate = new Date(today);
+        const diffTime = todayDate - lastDate;
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        
+        if (diffDays > 1) {
+            // Streak broken
+            this.data.user.currentStreak = 0;
+        }
+    }
+    
+    awardXP(amount, activity) {
+        const oldLevel = this.data.user.level;
+        this.data.user.xp += amount;
+        this.data.user.weeklyXP += amount;
+        
+        const newLevel = this.calculateLevel(this.data.user.xp);
+        if (newLevel > oldLevel) {
+            this.data.user.level = newLevel;
+            this.triggerLevelUp(newLevel);
+        }
+        
+        this.recordActivity();
+        this.save();
+        
+        return {
+            xpAwarded: amount,
+            totalXP: this.data.user.xp,
+            levelUp: newLevel > oldLevel,
+            newLevel: newLevel,
+            activity: activity
+        };
+    }
+    
+    recordActivity() {
+        const today = new Date().toDateString();
+        const lastActivity = this.data.user.lastActivityDate;
+        
+        if (lastActivity !== today) {
+            if (lastActivity) {
+                const lastDate = new Date(lastActivity);
+                const todayDate = new Date(today);
+                const diffTime = todayDate - lastDate;
+                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                
+                if (diffDays === 1) {
+                    // Consecutive day
+                    this.data.user.currentStreak++;
+                    if (this.data.user.currentStreak > this.data.user.longestStreak) {
+                        this.data.user.longestStreak = this.data.user.currentStreak;
+                    }
+                    this.checkStreakMilestones();
+                } else {
+                    // Streak broken
+                    this.data.user.currentStreak = 1;
+                }
+            } else {
+                // First activity
+                this.data.user.currentStreak = 1;
+                if (this.data.user.longestStreak === 0) {
+                    this.data.user.longestStreak = 1;
+                }
+            }
+            
+            this.data.user.lastActivityDate = today;
+        }
+    }
+    
+    checkStreakMilestones() {
+        const streak = this.data.user.currentStreak;
+        const milestones = this.XP_REWARDS.STREAK_MILESTONE;
+        
+        if (milestones[streak]) {
+            this.awardXP(milestones[streak], `${streak}-day streak milestone`);
+            this.triggerStreakMilestone(streak);
+        }
+    }
+    
+    calculateLevel(xp) {
+        for (let i = this.LEVEL_THRESHOLDS.length - 1; i >= 0; i--) {
+            if (xp >= this.LEVEL_THRESHOLDS[i]) {
+                return i + 1;
+            }
+        }
+        return 1;
+    }
+    
+    getXPForNextLevel() {
+        const currentLevel = this.data.user.level;
+        if (currentLevel >= this.LEVEL_THRESHOLDS.length) {
+            return null; // Max level reached
+        }
+        return this.LEVEL_THRESHOLDS[currentLevel] - this.data.user.xp;
+    }
+    
+    getProgressToNextLevel() {
+        const currentLevel = this.data.user.level;
+        if (currentLevel >= this.LEVEL_THRESHOLDS.length) {
+            return 100; // Max level
+        }
+        
+        const currentLevelXP = this.LEVEL_THRESHOLDS[currentLevel - 1];
+        const nextLevelXP = this.LEVEL_THRESHOLDS[currentLevel];
+        const progressXP = this.data.user.xp - currentLevelXP;
+        const neededXP = nextLevelXP - currentLevelXP;
+        
+        return Math.min(100, (progressXP / neededXP) * 100);
+    }
+    
+    completeLesson(day, language, perfect = false) {
+        let xpAwarded = this.XP_REWARDS.DAILY_LESSON;
+        let activities = [`Day ${day} lesson`];
+        
+        if (perfect) {
+            xpAwarded += this.XP_REWARDS.PERFECT_SCORE;
+            activities.push('Perfect score bonus');
+            this.data.user.perfectScores++;
+        }
+        
+        this.data.user.totalLessonsCompleted++;
+        
+        const result = this.awardXP(xpAwarded, activities.join(', '));
+        this.checkAchievements();
+        
+        return result;
+    }
+    
+    completeReading() {
+        this.data.user.totalReadingCompleted++;
+        const result = this.awardXP(this.XP_REWARDS.READING_EXERCISE, 'Reading exercise');
+        this.checkAchievements();
+        return result;
+    }
+    
+    completeWriting() {
+        this.data.user.totalWritingCompleted++;
+        const result = this.awardXP(this.XP_REWARDS.WRITING_EXERCISE, 'Writing exercise');
+        this.checkAchievements();
+        return result;
+    }
+    
+    completeChallenge(challengeId) {
+        if (!this.data.user.challengesCompleted.includes(challengeId)) {
+            this.data.user.challengesCompleted.push(challengeId);
+            const result = this.awardXP(this.XP_REWARDS.DAILY_CHALLENGE, `Challenge: ${challengeId}`);
+            this.checkAchievements();
+            return result;
+        }
+        return null;
+    }
+    
+    checkAchievements() {
+        // This will be expanded in achievements.js
+        window.dispatchEvent(new CustomEvent('checkAchievements', {
+            detail: this.data.user
+        }));
+    }
+    
+    awardBadge(badgeId) {
+        if (!this.data.user.badges.includes(badgeId)) {
+            this.data.user.badges.push(badgeId);
+            this.save();
+            this.triggerBadgeAwarded(badgeId);
+        }
+    }
+    
+    triggerLevelUp(newLevel) {
+        window.dispatchEvent(new CustomEvent('levelUp', {
+            detail: { newLevel, user: this.data.user }
+        }));
+        
+        if (this.data.user.preferences.celebrateAchievements) {
+            this.showNotification(`🎉 Level Up! You reached Level ${newLevel}!`, 'success');
+        }
+    }
+    
+    triggerStreakMilestone(streak) {
+        window.dispatchEvent(new CustomEvent('streakMilestone', {
+            detail: { streak, user: this.data.user }
+        }));
+        
+        if (this.data.user.preferences.celebrateAchievements) {
+            this.showNotification(`🔥 Amazing! ${streak}-day learning streak!`, 'success');
+        }
+    }
+    
+    triggerBadgeAwarded(badgeId) {
+        window.dispatchEvent(new CustomEvent('badgeAwarded', {
+            detail: { badgeId, user: this.data.user }
+        }));
+        
+        if (this.data.user.preferences.celebrateAchievements) {
+            this.showNotification(`🏆 New Badge Earned: ${badgeId}!`, 'achievement');
+        }
+    }
+    
+    showNotification(message, type = 'info') {
+        // Create and show notification
+        const notification = document.createElement('div');
+        notification.className = `gamification-notification ${type}`;
+        notification.innerHTML = `
+            <div class="notification-content">
+                <span class="notification-message">${message}</span>
+                <button class="notification-close">&times;</button>
+            </div>
+        `;
+        
+        document.body.appendChild(notification);
+        
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 5000);
+        
+        // Close button functionality
+        notification.querySelector('.notification-close').addEventListener('click', () => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        });
+    }
+    
+    getUserData() {
+        return this.data.user;
+    }
+    
+    resetProgress() {
+        localStorage.removeItem(this.STORAGE_KEY);
+        this.initializeData();
+    }
+    
+    exportData() {
+        return JSON.stringify(this.data, null, 2);
+    }
+    
+    importData(jsonData) {
+        try {
+            this.data = JSON.parse(jsonData);
+            this.save();
+            return true;
+        } catch (error) {
+            console.error('Failed to import data:', error);
+            return false;
+        }
+    }
+}
+
+// Initialize global gamification system
+if (typeof window !== 'undefined') {
+    window.gamificationSystem = new GamificationSystem();
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = GamificationSystem;
+}
\ No newline at end of file
diff --git a/reading.html b/reading.html
index a3e560b..8750d88 100644
--- a/reading.html
+++ b/reading.html
@@ -300,6 +300,26 @@ <h3><span class="zh">理解问题</span><span class="en">Comprehension Questions
                     completedReadings[`${level}_${topic}_${lang}`] = true;
                     localStorage.setItem('completedReadings', JSON.stringify(completedReadings));
                     
+                    // Award XP for reading completion
+                    if (typeof window.gamificationSystem !== 'undefined') {
+                        const xpResult = window.gamificationSystem.completeReading();
+                        
+                        if (xpResult) {
+                            // Show XP notification
+                            setTimeout(() => {
+                                window.gamificationSystem.showNotification(
+                                    `📚 +${xpResult.xpAwarded} XP for reading!`, 
+                                    'success'
+                                );
+                            }, 500);
+                        }
+                    }
+                    
+                    // Update challenge progress
+                    if (typeof window.challengeSystem !== 'undefined') {
+                        window.challengeSystem.updateProgress('reading_exercise', 1);
+                    }
+                    
                     // Update button state
                     completeBtn.classList.add('completed');
                     completeBtn.innerHTML = '<i class="fas fa-check-circle"></i> Completed';
@@ -540,5 +560,8 @@ <h3><span class="zh">理解问题</span><span class="en">Comprehension Questions
             });
         });
     </script>
+    <script src="js/gamification.js"></script>
+    <script src="js/achievements.js"></script>
+    <script src="js/challenges.js"></script>
 </body>
 </html>
diff --git a/writing.html b/writing.html
index 7eab2da..0bb8b03 100644
--- a/writing.html
+++ b/writing.html
@@ -521,6 +521,27 @@ <h3><span class="zh">写作工具</span><span class="pinyin">Xiězuò gōngjù</
                     completedWritings[`${activityType}_${level}_${lang}`] = true;
                     localStorage.setItem('completedWritings', JSON.stringify(completedWritings));
                     
+                    // Award XP for writing completion
+                    if (typeof window.gamificationSystem !== 'undefined') {
+                        const xpResult = window.gamificationSystem.completeWriting();
+                        
+                        if (xpResult) {
+                            // Show XP notification
+                            setTimeout(() => {
+                                window.gamificationSystem.showNotification(
+                                    `✍️ +${xpResult.xpAwarded} XP for writing!`, 
+                                    'success'
+                                );
+                            }, 500);
+                        }
+                    }
+                    
+                    // Update challenge progress
+                    if (typeof window.challengeSystem !== 'undefined') {
+                        window.challengeSystem.updateProgress('writing_exercise', 1);
+                        window.challengeSystem.updateProgress('character_writing', 5); // Assume 5 characters per exercise
+                    }
+                    
                     // Update button state
                     completeBtn.classList.add('completed');
                     
@@ -995,5 +1016,8 @@ <h3><span class="zh">写作工具</span><span class="pinyin">Xiězuò gōngjù</
             });
         });
     </script>
+    <script src="js/gamification.js"></script>
+    <script src="js/achievements.js"></script>
+    <script src="js/challenges.js"></script>
 </body>
 </html>