diff --git a/app/Http/Controllers/Admin/NodeController.php b/app/Http/Controllers/Admin/NodeController.php
index 67bea154..e5304aca 100644
--- a/app/Http/Controllers/Admin/NodeController.php
+++ b/app/Http/Controllers/Admin/NodeController.php
@@ -88,6 +88,7 @@ public function store(StoreNodeRequest $request, Subject $subject)
             'name' => $validated['name'],
             'slug' => $slug,
             'sort_order' => $validated['sort_order'] ?? 0,
+            'is_trackable' => (bool) ($validated['is_trackable'] ?? false),
         ]);
 
         return back()->with('success', 'Folder created successfully.');
@@ -140,6 +141,10 @@ public function update(UpdateNodeRequest $request, Subject $subject, Node $node)
             $node->sort_order = $validated['sort_order'] ?? 0;
         }
 
+        if (array_key_exists('is_trackable', $validated)) {
+            $node->is_trackable = (bool) $validated['is_trackable'];
+        }
+
         $node->save();
 
         return back()->with('success', 'Folder updated successfully.');
diff --git a/app/Http/Controllers/StudyTrackerController.php b/app/Http/Controllers/StudyTrackerController.php
new file mode 100644
index 00000000..677d6128
--- /dev/null
+++ b/app/Http/Controllers/StudyTrackerController.php
@@ -0,0 +1,173 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\DailyStudyLog;
+use App\Models\Node;
+use App\Models\NodeCompletion;
+use App\Models\Subject;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class StudyTrackerController extends Controller
+{
+    public function index(Request $request): Response
+    {
+        $user = $request->user();
+        $course = $user?->curriculum ?: 'hsc';
+
+        $subjects = Subject::where('course', $course)
+            ->where('is_trackable', true)
+            ->orderBy('sort_order', 'asc')
+            ->with(['nodes' => function ($query) {
+                $query->where('is_trackable', true)
+                    ->orderBy('sort_order', 'asc')
+                    ->select('id', 'subject_id', 'name', 'slug', 'sort_order');
+            }])
+            ->get(['id', 'name', 'english_name', 'slug', 'course', 'sort_order'])
+            ->toArray();
+
+        if (! $user) {
+            return Inertia::render('Tracker/Index', [
+                'course' => $course,
+                'subjects' => $subjects,
+                'completedNodeIds' => [],
+                'todaySeconds' => 0,
+                'stats' => [
+                    'currentStreak' => 0,
+                    'longestStreak' => 0,
+                    'totalSeconds' => 0,
+                    'totalDays' => 0,
+                ],
+                'heatmapData' => [],
+            ]);
+        }
+
+        $completedNodeIds = NodeCompletion::where('user_id', $user->id)
+            ->pluck('node_id')
+            ->toArray();
+
+        $todayStr = Carbon::today()->format('Y-m-d');
+        $todayLog = DailyStudyLog::where('user_id', $user->id)
+            ->where('study_date', $todayStr)
+            ->first();
+        $todaySeconds = (int) ($todayLog?->total_seconds ?? 0);
+
+        $studyData = DailyStudyLog::getHeatmapAndStatsForUser($user);
+
+        return Inertia::render('Tracker/Index', [
+            'course' => $course,
+            'subjects' => $subjects,
+            'completedNodeIds' => $completedNodeIds,
+            'todaySeconds' => $todaySeconds,
+            'stats' => $studyData['stats'],
+            'heatmapData' => $studyData['heatmapData'],
+        ]);
+    }
+
+    public function toggleNode(Request $request, Node $node)
+    {
+        $user = $request->user();
+        if (! $user) {
+            return back()->with('error', 'Authentication required');
+        }
+
+        $existing = NodeCompletion::where('user_id', $user->id)
+            ->where('node_id', $node->id)
+            ->first();
+
+        if ($existing) {
+            $existing->delete();
+        } else {
+            NodeCompletion::create([
+                'user_id' => $user->id,
+                'node_id' => $node->id,
+            ]);
+        }
+
+        return back();
+    }
+
+    public function logTime(Request $request)
+    {
+        $user = $request->user();
+        if (! $user) {
+            return back()->with('error', 'Authentication required');
+        }
+
+        $validated = $request->validate([
+            'seconds' => 'required|integer|min:1|max:86400',
+            'date' => 'nullable|date_format:Y-m-d|before_or_equal:today',
+        ]);
+
+        $studyDate = $validated['date'] ?? Carbon::today()->format('Y-m-d');
+
+        $log = DailyStudyLog::firstOrCreate(
+            [
+                'user_id' => $user->id,
+                'study_date' => $studyDate,
+            ],
+            [
+                'total_seconds' => 0,
+            ]
+        );
+
+        $maxAllowed = max(0, 86400 - (int) $log->total_seconds);
+        if ($maxAllowed > 0) {
+            $secondsToAdd = min((int) $validated['seconds'], $maxAllowed);
+            $log->increment('total_seconds', $secondsToAdd);
+        }
+
+        return back();
+    }
+
+    public function resetToday(Request $request)
+    {
+        $user = $request->user();
+        if (! $user) {
+            return back()->with('error', 'Authentication required');
+        }
+
+        $todayStr = Carbon::today()->format('Y-m-d');
+        DailyStudyLog::where('user_id', $user->id)
+            ->where('study_date', $todayStr)
+            ->update(['total_seconds' => 0]);
+
+        return back();
+    }
+
+    public function updateCurriculum(Request $request)
+    {
+        $user = $request->user();
+        if (! $user) {
+            return back()->with('error', 'Authentication required');
+        }
+
+        $validated = $request->validate([
+            'curriculum' => 'required|string|in:hsc,ssc',
+        ]);
+
+        $newCurriculum = $validated['curriculum'];
+
+        if ($user->curriculum !== $newCurriculum) {
+            $user->update([
+                'curriculum' => $newCurriculum,
+            ]);
+
+            // Clear the entire chapter completion track for the user
+            NodeCompletion::where('user_id', $user->id)->delete();
+        }
+
+        if ($request->wantsJson()) {
+            return response()->json([
+                'success' => true,
+                'curriculum' => $newCurriculum,
+            ]);
+        }
+
+        return redirect()->route('tracker.index')
+            ->with('success', 'Curriculum updated to '.strtoupper($newCurriculum).' and chapter track reset.');
+    }
+}
diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index d62ed314..f1f500fa 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -6,10 +6,13 @@
 use App\Models\AppSetting;
 use App\Models\BlogComment;
 use App\Models\BlogReaction;
+use App\Models\DailyStudyLog;
 use App\Models\ForumAnswer;
 use App\Models\ForumPost;
 use App\Models\Node;
+use App\Models\NodeCompletion;
 use App\Models\Resource;
+use App\Models\Subject;
 use App\Models\User;
 use App\Models\UserAppreciation;
 use App\Notifications\StudyPokeNotification;
@@ -31,6 +34,7 @@ public function show(string $username)
             'username' => $user->username,
             'about' => $user->about,
             'institution' => $user->institution,
+            'curriculum' => $user->curriculum ?? 'hsc',
             'image_url' => $user->image_url,
             'facebook' => $user->facebook,
             'instagram' => $user->instagram,
@@ -121,10 +125,6 @@ public function show(string $username)
             ]);
         }
 
-        $questionsCount = ForumPost::where('user_id', $user->id)->approved()->count();
-        $answersCount = ForumAnswer::where('user_id', $user->id)
-            ->whereHas('post', fn ($q) => $q->approved())
-            ->count();
         $forumPosts = ForumPost::where('user_id', $user->id)
             ->approved()
             ->with(['subject:id,name,course,slug', 'node:id,name,slug'])
@@ -144,9 +144,6 @@ public function show(string $username)
             ->latest()
             ->take(5)
             ->get();
-        $blogsCount = $user->blogs()->where('is_published', true)->count();
-        $totalBlogViews = (int) $user->blogs()->where('is_published', true)->sum('views');
-        $sharedResourcesCount = Resource::where('user_id', $user->id)->count();
 
         // Recent Community Activities
         $recentForumPosts = ForumPost::where('user_id', $user->id)
@@ -263,15 +260,10 @@ public function show(string $username)
             ->filter(fn ($item) => $item['title'] !== null)
             ->values();
 
+        $syllabusProgress = $this->getSyllabusProgress($user);
+
         return Inertia::render('User/Show', [
             'profileUser' => $profileUser,
-            'stats' => [
-                'questionsCount' => $questionsCount,
-                'answersCount' => $answersCount,
-                'blogsCount' => $blogsCount,
-                'sharedResourcesCount' => $sharedResourcesCount,
-                'totalBlogViews' => (int) $totalBlogViews,
-            ],
             'appreciationsCount' => $appreciationsCount,
             'appreciatingCount' => $appreciatingCount,
             'isAppreciated' => $isAppreciated,
@@ -294,6 +286,8 @@ public function show(string $username)
             ],
             'suggestedUsers' => $suggestedUsers,
             'pokeData' => $pokeData,
+            'studyHeatmap' => DailyStudyLog::getHeatmapAndStatsForUser($user),
+            'syllabusProgress' => $syllabusProgress,
         ]);
     }
 
@@ -391,4 +385,66 @@ private function buildNodeUrl(Node $node): ?string
 
         return '/'.$node->subject->slug.'/'.implode('/', $slugs);
     }
+
+    private function getSyllabusProgress(User $user): array
+    {
+        $course = $user->curriculum ?: 'hsc';
+        $trackableSubjects = Subject::where('course', $course)
+            ->where('is_trackable', true)
+            ->orderBy('sort_order', 'asc')
+            ->with(['nodes' => function ($query) {
+                $query->where('is_trackable', true)
+                    ->orderBy('sort_order', 'asc')
+                    ->select('id', 'subject_id', 'name', 'slug', 'sort_order');
+            }])
+            ->get(['id', 'name', 'english_name', 'slug', 'course', 'tailwind_format', 'icon', 'sort_order']);
+
+        $completedNodeIds = NodeCompletion::where('user_id', $user->id)
+            ->pluck('node_id')
+            ->toArray();
+
+        $completedSet = array_flip($completedNodeIds);
+
+        $subjectBreakdown = [];
+        $totalChapters = 0;
+        $completedChapters = 0;
+
+        foreach ($trackableSubjects as $subj) {
+            $subjTotal = $subj->nodes->count();
+            $subjCompleted = 0;
+            foreach ($subj->nodes as $node) {
+                if (isset($completedSet[$node->id])) {
+                    $subjCompleted++;
+                }
+            }
+
+            $totalChapters += $subjTotal;
+            $completedChapters += $subjCompleted;
+
+            $subjPercent = $subjTotal > 0 ? (int) round(($subjCompleted / $subjTotal) * 100) : 0;
+
+            $subjectBreakdown[] = [
+                'id' => $subj->id,
+                'name' => $subj->name,
+                'english_name' => $subj->english_name,
+                'slug' => $subj->slug,
+                'course' => $subj->course,
+                'tailwind_format' => $subj->tailwind_format,
+                'icon' => $subj->icon,
+                'completed' => $subjCompleted,
+                'total' => $subjTotal,
+                'percent' => $subjPercent,
+            ];
+        }
+
+        $overallPercent = $totalChapters > 0 ? (int) round(($completedChapters / $totalChapters) * 100) : 0;
+
+        return [
+            'course' => $course,
+            'overallPercent' => $overallPercent,
+            'completedChapters' => $completedChapters,
+            'totalChapters' => $totalChapters,
+            'subjects' => $subjectBreakdown,
+        ];
+    }
 }
diff --git a/app/Http/Requests/Node/StoreNodeRequest.php b/app/Http/Requests/Node/StoreNodeRequest.php
index 333a2886..271f03e0 100644
--- a/app/Http/Requests/Node/StoreNodeRequest.php
+++ b/app/Http/Requests/Node/StoreNodeRequest.php
@@ -27,6 +27,7 @@ public function rules(): array
             'slug' => ['nullable', 'string', 'max:200'],
             'parent_id' => ['nullable', 'integer'],
             'sort_order' => ['sometimes', 'integer'],
+            'is_trackable' => ['sometimes', 'boolean'],
         ];
     }
 }
diff --git a/app/Http/Requests/Node/UpdateNodeRequest.php b/app/Http/Requests/Node/UpdateNodeRequest.php
index deeadfd4..b550ce8c 100644
--- a/app/Http/Requests/Node/UpdateNodeRequest.php
+++ b/app/Http/Requests/Node/UpdateNodeRequest.php
@@ -27,6 +27,7 @@ public function rules(): array
             'slug' => ['sometimes', 'nullable', 'string', 'max:200'],
             'parent_id' => ['sometimes', 'nullable', 'integer'],
             'sort_order' => ['sometimes', 'nullable', 'integer'],
+            'is_trackable' => ['sometimes', 'boolean'],
         ];
     }
 }
diff --git a/app/Http/Requests/Subject/StoreSubjectRequest.php b/app/Http/Requests/Subject/StoreSubjectRequest.php
index 44f3e9b1..45fff49f 100644
--- a/app/Http/Requests/Subject/StoreSubjectRequest.php
+++ b/app/Http/Requests/Subject/StoreSubjectRequest.php
@@ -42,6 +42,7 @@ public function rules(): array
             'icon' => ['required', 'string', 'max:50'],
             'sort_order' => ['required', 'integer'],
             'course' => ['required', 'string', 'in:ssc,hsc'],
+            'is_trackable' => ['sometimes', 'boolean'],
         ];
     }
 }
diff --git a/app/Http/Requests/Subject/UpdateSubjectRequest.php b/app/Http/Requests/Subject/UpdateSubjectRequest.php
index eb8b0e5c..308f00c3 100644
--- a/app/Http/Requests/Subject/UpdateSubjectRequest.php
+++ b/app/Http/Requests/Subject/UpdateSubjectRequest.php
@@ -43,6 +43,7 @@ public function rules(): array
             'sort_order' => ['sometimes', 'integer'],
             'slug' => ['sometimes', 'string', 'max:100', Rule::unique('subjects', 'slug')->ignore($subject->id)],
             'course' => ['sometimes', 'string', 'in:ssc,hsc'],
+            'is_trackable' => ['sometimes', 'boolean'],
         ];
     }
 }
diff --git a/app/Models/DailyStudyLog.php b/app/Models/DailyStudyLog.php
new file mode 100644
index 00000000..c205b85f
--- /dev/null
+++ b/app/Models/DailyStudyLog.php
@@ -0,0 +1,132 @@
+<?php
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Carbon\CarbonPeriod;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class DailyStudyLog extends Model
+{
+    protected $fillable = [
+        'user_id',
+        'study_date',
+        'total_seconds',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'study_date' => 'date:Y-m-d',
+            'total_seconds' => 'integer',
+        ];
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    /**
+     * Get heatmap series and streaks stats for a given user.
+     */
+    public static function getHeatmapAndStatsForUser(User $user): array
+    {
+        $today = Carbon::today();
+        $startDate = (clone $today)->subDays(364);
+
+        $logs = static::where('user_id', $user->id)
+            ->where('study_date', '>=', $startDate->format('Y-m-d'))
+            ->get(['study_date', 'total_seconds'])
+            ->keyBy(function ($log) {
+                return Carbon::parse($log->study_date)->format('Y-m-d');
+            });
+
+        $period = CarbonPeriod::create($startDate, $today);
+        $heatmapData = [];
+
+        foreach ($period as $date) {
+            $dateStr = $date->format('Y-m-d');
+            $seconds = (int) ($logs->get($dateStr)?->total_seconds ?? 0);
+
+            $level = 0;
+            if ($seconds > 0) {
+                if ($seconds < 7200) {
+                    $level = 1;
+                } elseif ($seconds < 14400) {
+                    $level = 2;
+                } elseif ($seconds < 21600) {
+                    $level = 3;
+                } elseif ($seconds < 28800) {
+                    $level = 4;
+                } else {
+                    $level = 5;
+                }
+            }
+
+            $heatmapData[] = [
+                'date' => $dateStr,
+                'seconds' => $seconds,
+                'level' => $level,
+            ];
+        }
+
+        $allActiveLogs = static::where('user_id', $user->id)
+            ->where('total_seconds', '>', 0)
+            ->orderBy('study_date', 'asc')
+            ->pluck('study_date')
+            ->map(fn ($d) => Carbon::parse($d)->format('Y-m-d'))
+            ->values();
+
+        $activeDatesSet = array_flip($allActiveLogs->toArray());
+        $totalSeconds = (int) static::where('user_id', $user->id)->sum('total_seconds');
+        $totalDays = count($activeDatesSet);
+
+        // Calculate current streak
+        $currentStreak = 0;
+        $checkDate = clone $today;
+
+        if (! isset($activeDatesSet[$checkDate->format('Y-m-d')])) {
+            $checkDate->subDay();
+        }
+
+        while (isset($activeDatesSet[$checkDate->format('Y-m-d')])) {
+            $currentStreak++;
+            $checkDate->subDay();
+        }
+
+        // Calculate longest streak
+        $longestStreak = 0;
+        $tempStreak = 0;
+        $prevDate = null;
+
+        foreach ($allActiveLogs as $dateStr) {
+            $currentCarbon = Carbon::parse($dateStr);
+            if ($prevDate === null) {
+                $tempStreak = 1;
+            } else {
+                $diff = $prevDate->diffInDays($currentCarbon);
+                if ($diff === 1) {
+                    $tempStreak++;
+                } elseif ($diff > 1) {
+                    $tempStreak = 1;
+                }
+            }
+            $prevDate = $currentCarbon;
+            if ($tempStreak > $longestStreak) {
+                $longestStreak = $tempStreak;
+            }
+        }
+
+        return [
+            'heatmapData' => $heatmapData,
+            'stats' => [
+                'currentStreak' => $currentStreak,
+                'longestStreak' => $longestStreak,
+                'totalSeconds' => $totalSeconds,
+                'totalDays' => $totalDays,
+            ],
+        ];
+    }
+}
diff --git a/app/Models/Node.php b/app/Models/Node.php
index 0c87cb5a..317da0e4 100644
--- a/app/Models/Node.php
+++ b/app/Models/Node.php
@@ -16,11 +16,13 @@ class Node extends Model
         'name',
         'slug',
         'sort_order',
+        'is_trackable',
     ];
 
     protected function casts(): array
     {
         return [
+            'is_trackable' => 'boolean',
             'children_count' => 'integer',
             'resources_count' => 'integer',
             'upvotes_count' => 'integer',
@@ -67,4 +69,9 @@ public function downvotes()
     {
         return $this->hasMany(NodeVote::class)->where('type', 'down');
     }
+
+    public function completions()
+    {
+        return $this->hasMany(NodeCompletion::class);
+    }
 }
diff --git a/app/Models/NodeCompletion.php b/app/Models/NodeCompletion.php
new file mode 100644
index 00000000..18e7689c
--- /dev/null
+++ b/app/Models/NodeCompletion.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class NodeCompletion extends Model
+{
+    protected $fillable = [
+        'node_id',
+        'user_id',
+    ];
+
+    public function node(): BelongsTo
+    {
+        return $this->belongsTo(Node::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Models/Subject.php b/app/Models/Subject.php
index 611e8171..32be626d 100644
--- a/app/Models/Subject.php
+++ b/app/Models/Subject.php
@@ -8,6 +8,13 @@ class Subject extends Model
 {
     protected $guarded = [];
 
+    protected function casts(): array
+    {
+        return [
+            'is_trackable' => 'boolean',
+        ];
+    }
+
     public function nodes()
     {
         return $this->hasMany(Node::class);
diff --git a/app/Models/User.php b/app/Models/User.php
index 1b0a7fe1..b10f7e74 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -51,6 +51,7 @@ class User extends Authenticatable
         'title',
         'institution',
         'activity_privacy',
+        'curriculum',
         'allow_pokes',
         'facebook',
         'instagram',
@@ -110,6 +111,16 @@ protected function casts(): array
         ];
     }
 
+    public function nodeCompletions(): HasMany
+    {
+        return $this->hasMany(NodeCompletion::class);
+    }
+
+    public function dailyStudyLogs(): HasMany
+    {
+        return $this->hasMany(DailyStudyLog::class);
+    }
+
     public function resources()
     {
         return $this->hasMany(Resource::class);
diff --git a/database/migrations/2026_09_18_124156_add_is_trackable_to_subjects_and_nodes_tables.php b/database/migrations/2026_09_18_124156_add_is_trackable_to_subjects_and_nodes_tables.php
new file mode 100644
index 00000000..1877d5a3
--- /dev/null
+++ b/database/migrations/2026_09_18_124156_add_is_trackable_to_subjects_and_nodes_tables.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('subjects', function (Blueprint $table) {
+            $table->boolean('is_trackable')->default(true)->after('sort_order');
+        });
+
+        Schema::table('nodes', function (Blueprint $table) {
+            $table->boolean('is_trackable')->default(false)->after('sort_order');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('nodes', function (Blueprint $table) {
+            $table->dropColumn('is_trackable');
+        });
+
+        Schema::table('subjects', function (Blueprint $table) {
+            $table->dropColumn('is_trackable');
+        });
+    }
+};
diff --git a/database/migrations/2026_09_18_124804_add_curriculum_to_users_table.php b/database/migrations/2026_09_18_124804_add_curriculum_to_users_table.php
new file mode 100644
index 00000000..97a487c1
--- /dev/null
+++ b/database/migrations/2026_09_18_124804_add_curriculum_to_users_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('curriculum', 10)->default('hsc')->after('institution');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('curriculum');
+        });
+    }
+};
diff --git a/database/migrations/2026_09_18_172000_create_node_completions_table.php b/database/migrations/2026_09_18_172000_create_node_completions_table.php
new file mode 100644
index 00000000..95ba67b1
--- /dev/null
+++ b/database/migrations/2026_09_18_172000_create_node_completions_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('node_completions', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('node_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->timestamps();
+
+            $table->unique(['node_id', 'user_id']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('node_completions');
+    }
+};
diff --git a/database/migrations/2026_09_18_172001_create_daily_study_logs_table.php b/database/migrations/2026_09_18_172001_create_daily_study_logs_table.php
new file mode 100644
index 00000000..383eee21
--- /dev/null
+++ b/database/migrations/2026_09_18_172001_create_daily_study_logs_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('daily_study_logs', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->date('study_date');
+            $table->unsignedInteger('total_seconds')->default(0);
+            $table->timestamps();
+
+            $table->unique(['user_id', 'study_date']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('daily_study_logs');
+    }
+};
diff --git a/resources/js/components/admin/CreateNodeModal.vue b/resources/js/components/admin/CreateNodeModal.vue
index 60826e56..a17cfbec 100644
--- a/resources/js/components/admin/CreateNodeModal.vue
+++ b/resources/js/components/admin/CreateNodeModal.vue
@@ -25,6 +25,7 @@ const props = defineProps<{
         name: string;
         slug: string;
         sort_order?: number;
+        is_trackable?: boolean;
     } | null;
 }>();
 
@@ -35,6 +36,7 @@ const emit = defineEmits<{
 const name = ref('');
 const slug = ref('');
 const sortOrder = ref(0);
+const isTrackable = ref(false);
 const showAdvanced = ref(false);
 const isSaving = ref(false);
 const errorMessage = ref('');
@@ -44,10 +46,12 @@ const initForm = () => {
         name.value = props.node.name || '';
         slug.value = props.node.slug || '';
         sortOrder.value = props.node.sort_order ?? 0;
+        isTrackable.value = Boolean(props.node.is_trackable);
     } else {
         name.value = '';
         slug.value = '';
         sortOrder.value = 0;
+        isTrackable.value = false;
     }
 
     errorMessage.value = '';
@@ -84,6 +88,7 @@ const submitForm = () => {
         slug: slug.value || null,
         parent_id: props.parent?.id || null,
         sort_order: sortOrder.value,
+        is_trackable: isTrackable.value,
     };
 
     if (props.node) {
@@ -227,6 +232,32 @@ const submitForm = () => {
                                 class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
                             />
                         </div>
+
+                        <!-- Trackable Chapter in Study Tracker -->
+                        <div class="pt-1">
+                            <label
+                                class="flex cursor-pointer items-start gap-2.5 select-none"
+                            >
+                                <input
+                                    type="checkbox"
+                                    v-model="isTrackable"
+                                    class="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-900"
+                                />
+                                <div class="text-xs">
+                                    <span
+                                        class="font-semibold text-slate-700 dark:text-gray-200"
+                                    >
+                                        Trackable Chapter (Study Tracker)
+                                    </span>
+                                    <p
+                                        class="text-[11px] text-slate-500 dark:text-gray-400"
+                                    >
+                                        Mark this folder as an official syllabus
+                                        chapter in the Study Tracker checklist.
+                                    </p>
+                                </div>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/admin/CreateSubjectModal.vue b/resources/js/components/admin/CreateSubjectModal.vue
index 4f1ee522..bce5077b 100644
--- a/resources/js/components/admin/CreateSubjectModal.vue
+++ b/resources/js/components/admin/CreateSubjectModal.vue
@@ -23,6 +23,7 @@ const props = defineProps<{
         tailwind_format: string;
         icon: string;
         sort_order: number;
+        is_trackable?: boolean;
     } | null;
 }>();
 
@@ -56,6 +57,7 @@ const course = ref('hsc');
 const tailwindFormat = ref('bg-indigo-50 text-indigo-600');
 const icon = ref('BookOpen');
 const sortOrder = ref(0);
+const isTrackable = ref(false);
 
 const initForm = () => {
     if (props.subject) {
@@ -67,6 +69,7 @@ const initForm = () => {
             props.subject.tailwind_format || 'bg-indigo-50 text-indigo-600';
         icon.value = props.subject.icon || 'BookOpen';
         sortOrder.value = props.subject.sort_order ?? 0;
+        isTrackable.value = Boolean(props.subject.is_trackable);
     } else {
         name.value = '';
         englishName.value = '';
@@ -75,6 +78,7 @@ const initForm = () => {
         tailwindFormat.value = 'bg-indigo-50 text-indigo-600';
         icon.value = 'BookOpen';
         sortOrder.value = 0;
+        isTrackable.value = false;
     }
 
     errorMessage.value = '';
@@ -114,6 +118,7 @@ const submitForm = () => {
         tailwind_format: tailwindFormat.value,
         icon: icon.value,
         sort_order: sortOrder.value,
+        is_trackable: isTrackable.value,
     };
 
     if (props.subject) {
@@ -394,6 +399,32 @@ const submitForm = () => {
                                 class="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 font-mono text-xs text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
                             />
                         </div>
+
+                        <!-- Trackable in Study Tracker -->
+                        <div class="pt-1">
+                            <label
+                                class="flex cursor-pointer items-start gap-2.5 select-none"
+                            >
+                                <input
+                                    type="checkbox"
+                                    v-model="isTrackable"
+                                    class="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-900"
+                                />
+                                <div class="text-xs">
+                                    <span
+                                        class="font-semibold text-slate-700 dark:text-gray-200"
+                                    >
+                                        Trackable Subject (Study Tracker)
+                                    </span>
+                                    <p
+                                        class="text-[11px] text-slate-500 dark:text-gray-400"
+                                    >
+                                        Enable this subject to appear in the
+                                        Study Tracker for students.
+                                    </p>
+                                </div>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/admin/NodeRow.vue b/resources/js/components/admin/NodeRow.vue
index 9fcef54f..de135cca 100644
--- a/resources/js/components/admin/NodeRow.vue
+++ b/resources/js/components/admin/NodeRow.vue
@@ -33,12 +33,18 @@ const handleDelete = () => {
                 <Folder class="h-4.5 w-4.5 stroke-[2]" />
             </div>
 
-            <div class="min-w-0 flex-1">
+            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
                 <h3
                     class="text-sm font-semibold break-words text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                 >
                     {{ node.name }}
                 </h3>
+                <span
+                    v-if="node.is_trackable"
+                    class="inline-flex items-center rounded-md bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-600/20 ring-inset dark:bg-emerald-950/50 dark:text-emerald-300 dark:ring-emerald-500/30"
+                >
+                    Chapter
+                </span>
             </div>
         </div>
 
diff --git a/resources/js/components/admin/SubjectCard.vue b/resources/js/components/admin/SubjectCard.vue
index 4d04132f..c703e253 100644
--- a/resources/js/components/admin/SubjectCard.vue
+++ b/resources/js/components/admin/SubjectCard.vue
@@ -55,6 +55,13 @@ const handleDelete = () => {
                     :status="subject.course"
                     size="xs"
                 />
+
+                <span
+                    v-if="subject.is_trackable"
+                    class="inline-flex items-center rounded-md bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-600/20 ring-inset dark:bg-emerald-950/50 dark:text-emerald-300 dark:ring-emerald-500/30"
+                >
+                    Trackable
+                </span>
             </div>
         </div>
 
diff --git a/resources/js/components/tracker/StopwatchWidget.vue b/resources/js/components/tracker/StopwatchWidget.vue
new file mode 100644
index 00000000..367a284b
--- /dev/null
+++ b/resources/js/components/tracker/StopwatchWidget.vue
@@ -0,0 +1,729 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import {
+    Check,
+    Clock,
+    Heart,
+    Pause,
+    Play,
+    RotateCcw,
+    X,
+} from 'lucide-vue-next';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+interface Props {
+    todaySeconds: number;
+    isAuthenticated: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: 'require-auth'): void;
+}>();
+
+const isRunning = ref(false);
+const startTimestamp = ref<number | null>(null);
+const accumulatedSeconds = ref(0);
+const elapsedSeconds = ref(0);
+let timerInterval: number | null = null;
+
+const STORAGE_KEY_START = 'hsc_tracker_stopwatch_start';
+const STORAGE_KEY_ACCUMULATED = 'hsc_tracker_stopwatch_accumulated';
+const STORAGE_KEY_RUNNING = 'hsc_tracker_stopwatch_running';
+
+const isSubmitting = ref(false);
+const showSaveModal = ref(false);
+const showManualModal = ref(false);
+const showResetTodayModal = ref(false);
+const isResettingToday = ref(false);
+const manualMinutes = ref(30);
+
+const pendingSecondsToLog = ref(0);
+const isPendingFromStopwatch = ref(false);
+
+function syncElapsed() {
+    if (isRunning.value && startTimestamp.value) {
+        const diffMs = Date.now() - startTimestamp.value;
+        const diffSec = Math.max(0, Math.floor(diffMs / 1000));
+        elapsedSeconds.value = accumulatedSeconds.value + diffSec;
+    } else {
+        elapsedSeconds.value = accumulatedSeconds.value;
+    }
+}
+
+function handleVisibilityOrFocus() {
+    if (isRunning.value) {
+        syncElapsed();
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('visibilitychange', handleVisibilityOrFocus);
+    window.addEventListener('focus', handleVisibilityOrFocus);
+
+    const savedRunning = localStorage.getItem(STORAGE_KEY_RUNNING) === 'true';
+    const savedAccumulated = parseInt(
+        localStorage.getItem(STORAGE_KEY_ACCUMULATED) || '0',
+        10,
+    );
+    let savedStart = parseInt(
+        localStorage.getItem(STORAGE_KEY_START) || '0',
+        10,
+    );
+
+    // Support existing seconds-based timestamp if present
+    if (savedStart > 0 && savedStart < 10000000000) {
+        savedStart = savedStart * 1000;
+    }
+
+    accumulatedSeconds.value = isNaN(savedAccumulated) ? 0 : savedAccumulated;
+
+    if (savedRunning && savedStart > 0) {
+        startTimestamp.value = savedStart;
+        syncElapsed();
+        startTimer(false);
+    } else {
+        elapsedSeconds.value = accumulatedSeconds.value;
+    }
+});
+
+onUnmounted(() => {
+    if (timerInterval) {
+        clearInterval(timerInterval);
+    }
+
+    document.removeEventListener('visibilitychange', handleVisibilityOrFocus);
+    window.removeEventListener('focus', handleVisibilityOrFocus);
+});
+
+function startTimer(newStart = true) {
+    if (timerInterval) {
+        clearInterval(timerInterval);
+    }
+
+    isRunning.value = true;
+
+    if (newStart || !startTimestamp.value) {
+        startTimestamp.value = Date.now();
+    }
+
+    localStorage.setItem(STORAGE_KEY_START, startTimestamp.value.toString());
+    localStorage.setItem(STORAGE_KEY_RUNNING, 'true');
+    localStorage.setItem(
+        STORAGE_KEY_ACCUMULATED,
+        accumulatedSeconds.value.toString(),
+    );
+
+    syncElapsed();
+
+    timerInterval = window.setInterval(() => {
+        syncElapsed();
+    }, 500);
+}
+
+function pauseTimer() {
+    syncElapsed();
+
+    if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+    }
+
+    isRunning.value = false;
+    accumulatedSeconds.value = elapsedSeconds.value;
+    startTimestamp.value = null;
+
+    localStorage.setItem(STORAGE_KEY_RUNNING, 'false');
+    localStorage.setItem(
+        STORAGE_KEY_ACCUMULATED,
+        accumulatedSeconds.value.toString(),
+    );
+    localStorage.removeItem(STORAGE_KEY_START);
+}
+
+function toggleTimer() {
+    if (isRunning.value) {
+        pauseTimer();
+    } else {
+        startTimer(true);
+    }
+}
+
+function resetTimer() {
+    if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+    }
+
+    isRunning.value = false;
+    startTimestamp.value = null;
+    accumulatedSeconds.value = 0;
+    elapsedSeconds.value = 0;
+
+    localStorage.removeItem(STORAGE_KEY_START);
+    localStorage.removeItem(STORAGE_KEY_RUNNING);
+    localStorage.removeItem(STORAGE_KEY_ACCUMULATED);
+}
+
+const maxMinutesAllowedForToday = computed(() => {
+    const remainingSeconds = Math.max(0, 86400 - props.todaySeconds);
+
+    return Math.floor(remainingSeconds / 60);
+});
+
+const isDayMaxReached = computed(() => {
+    return props.todaySeconds >= 86400;
+});
+
+function triggerStopwatchSave() {
+    if (!props.isAuthenticated) {
+        emit('require-auth');
+
+        return;
+    }
+
+    if (elapsedSeconds.value <= 0 || isDayMaxReached.value) {
+        return;
+    }
+
+    const remainingAllowed = Math.max(0, 86400 - props.todaySeconds);
+    const secondsToLog = Math.min(elapsedSeconds.value, remainingAllowed);
+
+    if (secondsToLog <= 0) {
+        return;
+    }
+
+    pauseTimer();
+    pendingSecondsToLog.value = secondsToLog;
+    isPendingFromStopwatch.value = true;
+    showSaveModal.value = true;
+}
+
+function triggerQuickLog(minutes: number) {
+    if (!props.isAuthenticated) {
+        emit('require-auth');
+
+        return;
+    }
+
+    if (!minutes || minutes <= 0 || isDayMaxReached.value) {
+        return;
+    }
+
+    const requestedSeconds = minutes * 60;
+    const remainingAllowed = Math.max(0, 86400 - props.todaySeconds);
+    const secondsToLog = Math.min(requestedSeconds, remainingAllowed);
+
+    if (secondsToLog <= 0) {
+        return;
+    }
+
+    showManualModal.value = false;
+    pendingSecondsToLog.value = secondsToLog;
+    isPendingFromStopwatch.value = false;
+    showSaveModal.value = true;
+}
+
+function confirmSaveSession() {
+    const secondsToLog = pendingSecondsToLog.value;
+
+    if (secondsToLog <= 0) {
+        return;
+    }
+
+    isSubmitting.value = true;
+
+    router.post(
+        '/tracker/log-time',
+        { seconds: secondsToLog },
+        {
+            preserveScroll: true,
+            preserveState: true,
+            onSuccess: () => {
+                showSaveModal.value = false;
+
+                if (isPendingFromStopwatch.value) {
+                    resetTimer();
+                }
+
+                pendingSecondsToLog.value = 0;
+                isSubmitting.value = false;
+            },
+            onError: () => {
+                isSubmitting.value = false;
+            },
+        },
+    );
+}
+
+function confirmResetToday() {
+    if (!props.isAuthenticated) {
+        emit('require-auth');
+
+        return;
+    }
+
+    isResettingToday.value = true;
+    router.post(
+        '/tracker/reset-today',
+        {},
+        {
+            preserveScroll: true,
+            preserveState: true,
+            onSuccess: () => {
+                showResetTodayModal.value = false;
+                isResettingToday.value = false;
+            },
+            onError: () => {
+                isResettingToday.value = false;
+            },
+        },
+    );
+}
+
+const formattedStopwatch = computed(() => {
+    const totalSec = elapsedSeconds.value;
+    const hours = Math.floor(totalSec / 3600);
+    const minutes = Math.floor((totalSec % 3600) / 60);
+    const seconds = totalSec % 60;
+
+    const pad = (n: number) => n.toString().padStart(2, '0');
+
+    return {
+        hours: pad(hours),
+        minutes: pad(minutes),
+        seconds: pad(seconds),
+    };
+});
+
+const pendingDurationFormatted = computed(() => {
+    const sec = pendingSecondsToLog.value;
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const s = sec % 60;
+
+    if (h === 0 && m === 0) {
+        return `${s}s`;
+    }
+
+    if (h === 0) {
+        return `${m} min${m === 1 ? '' : 's'}`;
+    }
+
+    if (m === 0) {
+        return `${h} hour${h === 1 ? '' : 's'}`;
+    }
+
+    return `${h} hr ${m} min`;
+});
+
+const todayFormatted = computed(() => {
+    const sec = props.todaySeconds;
+
+    if (sec === 0) {
+        return '0 mins';
+    }
+
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+
+    if (h === 0) {
+        return `${m} mins`;
+    }
+
+    if (m === 0) {
+        return `${h} ${h === 1 ? 'hour' : 'hours'}`;
+    }
+
+    return `${h}h ${m}m`;
+});
+</script>
+
+<template>
+    <div
+        class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-2xs sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+    >
+        <!-- Header -->
+        <div class="flex items-center justify-between pb-2">
+            <div class="flex items-center gap-2">
+                <span
+                    class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 text-slate-700 dark:bg-gray-800 dark:text-gray-300"
+                >
+                    <Clock class="h-4 w-4" />
+                </span>
+                <div>
+                    <h2
+                        class="text-sm font-bold text-slate-900 dark:text-white"
+                    >
+                        Stopwatch
+                    </h2>
+                </div>
+            </div>
+
+            <!-- Today's Total Study Time -->
+            <div
+                class="flex items-center gap-2 rounded-xl border border-slate-100 bg-slate-50 px-2.5 py-1 text-xs dark:border-gray-800 dark:bg-gray-800/60"
+            >
+                <div class="flex items-center gap-1">
+                    <span class="text-slate-400 dark:text-gray-500"
+                        >Today:</span
+                    >
+                    <span
+                        class="font-bold text-slate-900 sm:text-sm dark:text-white"
+                    >
+                        {{ todayFormatted }}
+                    </span>
+                </div>
+
+                <!-- Reset Today Button (when today has logged time) -->
+                <button
+                    v-if="todaySeconds > 0"
+                    type="button"
+                    @click="showResetTodayModal = true"
+                    class="cursor-pointer rounded-md p-0.5 text-slate-400 transition hover:bg-slate-200/70 hover:text-rose-600 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-rose-400"
+                    title="Clear today's recorded time"
+                    aria-label="Clear today's recorded time"
+                >
+                    <RotateCcw class="h-3 w-3" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Digital Timer Display -->
+        <div
+            class="my-4 flex flex-col items-center justify-center py-2 sm:my-6"
+        >
+            <div
+                class="font-mono text-5xl font-extrabold tracking-tight text-slate-900 sm:text-6xl dark:text-white"
+            >
+                <span
+                    :class="{
+                        'text-emerald-600 dark:text-emerald-400': isRunning,
+                    }"
+                >
+                    {{ formattedStopwatch.hours }}:{{
+                        formattedStopwatch.minutes
+                    }}:{{ formattedStopwatch.seconds }}
+                </span>
+            </div>
+
+            <div class="mt-2 flex flex-col items-center gap-1 text-center">
+                <div class="flex items-center gap-1.5 text-xs">
+                    <span
+                        v-if="isRunning"
+                        class="inline-flex items-center gap-1.5 font-semibold text-emerald-600 dark:text-emerald-400"
+                    >
+                        <span
+                            class="h-2 w-2 animate-pulse rounded-full bg-emerald-500"
+                        />
+                        Running
+                    </span>
+                    <span
+                        v-else-if="elapsedSeconds > 0"
+                        class="font-semibold text-amber-600 dark:text-amber-400"
+                    >
+                        Paused
+                    </span>
+                    <span
+                        v-else
+                        class="font-medium text-slate-400 dark:text-gray-500"
+                        >Ready</span
+                    >
+                </div>
+                <p
+                    v-if="isRunning"
+                    class="text-[11px] text-slate-400 dark:text-gray-500"
+                >
+                    You can safely switch tabs or minimize your browser
+                </p>
+            </div>
+        </div>
+
+        <!-- Controls -->
+        <div class="flex items-center justify-center gap-2.5">
+            <button
+                type="button"
+                @click="toggleTimer"
+                :class="[
+                    isRunning
+                        ? 'bg-amber-600 text-white hover:bg-amber-700'
+                        : 'bg-slate-900 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100',
+                ]"
+                class="flex h-11 min-w-[130px] cursor-pointer items-center justify-center gap-2 rounded-xl px-5 text-sm font-bold transition active:scale-95"
+            >
+                <component
+                    :is="isRunning ? Pause : Play"
+                    class="h-4 w-4 fill-current"
+                />
+                <span>{{
+                    isRunning
+                        ? 'Pause'
+                        : elapsedSeconds > 0
+                          ? 'Resume'
+                          : 'Start'
+                }}</span>
+            </button>
+
+            <button
+                v-if="elapsedSeconds > 0"
+                type="button"
+                @click="triggerStopwatchSave"
+                class="flex h-11 cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-emerald-600 bg-emerald-50 px-4 text-xs font-bold text-emerald-700 hover:bg-emerald-100 active:scale-95 dark:border-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
+            >
+                <Check class="h-4 w-4 stroke-[3]" />
+                <span>Save</span>
+            </button>
+
+            <button
+                v-if="elapsedSeconds > 0"
+                type="button"
+                @click="resetTimer"
+                title="Reset stopwatch"
+                class="flex h-11 w-11 cursor-pointer items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 hover:bg-slate-100 active:scale-95 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+            >
+                <RotateCcw class="h-4 w-4" />
+            </button>
+        </div>
+
+        <!-- Offline Study Time Prompt -->
+        <div
+            class="mt-5 flex items-center justify-center gap-1.5 border-t border-slate-100 pt-3.5 text-xs dark:border-gray-800/80"
+        >
+            <span class="text-slate-500 dark:text-gray-400">
+                Read when offline?
+            </span>
+            <button
+                type="button"
+                @click="showManualModal = true"
+                class="cursor-pointer font-bold text-slate-900 underline decoration-slate-300 underline-offset-2 transition hover:text-indigo-600 hover:decoration-indigo-400 dark:text-white dark:decoration-gray-600 dark:hover:text-indigo-400"
+            >
+                Add now
+            </button>
+        </div>
+
+        <!-- Cute Save Confirmation Modal (Used for both Stopwatch & Quick Log) -->
+        <Teleport to="body">
+            <div
+                v-if="showSaveModal"
+                class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            >
+                <div
+                    class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs transition-opacity"
+                    @click="showSaveModal = false"
+                />
+
+                <div
+                    class="animate-in fade-in zoom-in-95 relative z-10 w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-xl duration-150 dark:border-gray-800 dark:bg-gray-900"
+                    role="dialog"
+                    aria-modal="true"
+                    @click.stop
+                >
+                    <div class="flex items-start justify-between gap-3">
+                        <div class="flex items-center gap-2">
+                            <span
+                                class="flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-950/70 dark:text-emerald-400"
+                            >
+                                <Heart class="h-4 w-4 fill-current" />
+                            </span>
+                            <h3
+                                class="text-sm font-bold text-slate-900 dark:text-white"
+                            >
+                                Save Study Session
+                            </h3>
+                        </div>
+                        <button
+                            type="button"
+                            @click="showSaveModal = false"
+                            class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                        >
+                            <X class="h-4 w-4" />
+                        </button>
+                    </div>
+
+                    <!-- Session Time & Loyalty Message -->
+                    <div
+                        class="mt-4 rounded-xl border border-slate-100 bg-slate-50/80 p-3.5 text-center dark:border-gray-800 dark:bg-gray-800/50"
+                    >
+                        <div
+                            class="font-mono text-2xl font-black tracking-tight text-slate-900 dark:text-white"
+                        >
+                            {{ pendingDurationFormatted }}
+                        </div>
+                        <p
+                            class="mt-2 text-xs leading-relaxed font-medium text-slate-600 dark:text-gray-300"
+                        >
+                            পুরো সময়টা কি আসলেই পড়াশোনা করেছেন? নিজের প্রতি সৎ
+                            থাকুন — নিজের ভবিষ্যতের সাথে ফাঁকি দেবেন না! 🎯
+                        </p>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="mt-5 flex items-center justify-end gap-2">
+                        <button
+                            type="button"
+                            @click="showSaveModal = false"
+                            class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        >
+                            No, Close
+                        </button>
+                        <button
+                            type="button"
+                            @click="confirmSaveSession"
+                            :disabled="isSubmitting"
+                            class="cursor-pointer rounded-xl bg-slate-900 px-4 py-2 text-xs font-semibold text-white shadow-xs hover:bg-slate-800 disabled:opacity-50 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                        >
+                            {{ isSubmitting ? 'Saving...' : 'Yes, Save' }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Teleport>
+
+        <!-- Custom Manual Log Modal -->
+        <Teleport to="body">
+            <div
+                v-if="showManualModal"
+                class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            >
+                <div
+                    class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs transition-opacity"
+                    @click="showManualModal = false"
+                />
+
+                <div
+                    class="animate-in fade-in zoom-in-95 relative z-10 w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-xl duration-150 dark:border-gray-800 dark:bg-gray-900"
+                    role="dialog"
+                    aria-modal="true"
+                    @click.stop
+                >
+                    <div class="flex items-start justify-between gap-3">
+                        <h3
+                            class="text-sm font-bold text-slate-900 dark:text-white"
+                        >
+                            Log Study Time
+                        </h3>
+                        <button
+                            type="button"
+                            @click="showManualModal = false"
+                            class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                        >
+                            <X class="h-4 w-4" />
+                        </button>
+                    </div>
+
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                        Add study minutes completed today:
+                    </p>
+
+                    <div class="mt-3">
+                        <input
+                            v-model.number="manualMinutes"
+                            type="number"
+                            min="1"
+                            :max="Math.min(720, maxMinutesAllowedForToday)"
+                            :placeholder="`Minutes (max ${Math.min(720, maxMinutesAllowedForToday)})`"
+                            class="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-900 focus:border-slate-900 focus:outline-hidden dark:border-gray-800 dark:bg-gray-800 dark:text-white dark:focus:border-white"
+                        />
+                    </div>
+
+                    <div class="mt-5 flex items-center justify-end gap-2">
+                        <button
+                            type="button"
+                            @click="showManualModal = false"
+                            class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-100 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            @click="triggerQuickLog(manualMinutes)"
+                            :disabled="
+                                !manualMinutes ||
+                                manualMinutes <= 0 ||
+                                manualMinutes > maxMinutesAllowedForToday
+                            "
+                            class="cursor-pointer rounded-xl bg-slate-900 px-3.5 py-1.5 text-xs font-semibold text-white shadow-xs hover:bg-slate-800 disabled:opacity-50 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                        >
+                            Continue
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Teleport>
+
+        <!-- Reset Today Confirmation Modal -->
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition duration-150 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="showResetTodayModal"
+                    class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                >
+                    <div
+                        class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs transition-opacity"
+                        @click="showResetTodayModal = false"
+                    />
+
+                    <div
+                        class="animate-in fade-in zoom-in-95 relative z-10 w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-xl duration-150 dark:border-gray-800 dark:bg-gray-900"
+                        role="dialog"
+                        aria-modal="true"
+                        @click.stop
+                    >
+                        <div class="flex items-start justify-between gap-3">
+                            <h3
+                                class="text-sm font-bold text-slate-900 dark:text-white"
+                            >
+                                Clear Today's Time
+                            </h3>
+                            <button
+                                type="button"
+                                @click="showResetTodayModal = false"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                            >
+                                <X class="h-4 w-4" />
+                            </button>
+                        </div>
+
+                        <p
+                            class="mt-2 text-xs leading-relaxed text-slate-600 dark:text-gray-300"
+                        >
+                            Are you sure you want to reset today's recorded
+                            study time ({{ todayFormatted }}) back to
+                            <strong>0 mins</strong>?
+                        </p>
+
+                        <div class="mt-5 flex items-center justify-end gap-2">
+                            <button
+                                type="button"
+                                @click="showResetTodayModal = false"
+                                class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-100 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                @click="confirmResetToday"
+                                :disabled="isResettingToday"
+                                class="cursor-pointer rounded-xl bg-rose-600 px-3.5 py-1.5 text-xs font-semibold text-white shadow-xs hover:bg-rose-700 disabled:opacity-50 dark:bg-rose-600 dark:hover:bg-rose-700"
+                            >
+                                {{
+                                    isResettingToday
+                                        ? 'Clearing...'
+                                        : 'Yes, Clear'
+                                }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
+    </div>
+</template>
diff --git a/resources/js/components/tracker/StudyHeatmap.vue b/resources/js/components/tracker/StudyHeatmap.vue
new file mode 100644
index 00000000..e35acf43
--- /dev/null
+++ b/resources/js/components/tracker/StudyHeatmap.vue
@@ -0,0 +1,860 @@
+<script setup lang="ts">
+import { Calendar, Check, ChevronDown, Clock, X } from 'lucide-vue-next';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+export interface HeatmapItem {
+    date: string; // YYYY-MM-DD
+    seconds: number;
+    level: number; // 0, 1, 2, 3, 4
+}
+
+export interface TrackerStats {
+    currentStreak?: number;
+    longestStreak?: number;
+    totalSeconds?: number;
+    totalDays?: number;
+}
+
+interface Props {
+    heatmapData: HeatmapItem[];
+    stats?: TrackerStats;
+    title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: 'Study Activity',
+});
+
+const scrollContainer = ref<HTMLElement | null>(null);
+
+// Time Range Selection State
+interface RangeOption {
+    label: string;
+    days: number;
+}
+
+const RANGES: RangeOption[] = [
+    { label: 'Last 1 month', days: 30 },
+    { label: 'Last 3 months', days: 90 },
+    { label: 'Last 6 months', days: 180 },
+    { label: 'Last 12 months', days: 365 },
+];
+
+const selectedRange = ref<RangeOption>(RANGES[0]);
+const isDropdownOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+// Day Detail Modal State (for click / mobile tap)
+const selectedDay = ref<{
+    date: string;
+    seconds: number;
+    level: number;
+} | null>(null);
+
+const showLegendModal = ref(false);
+
+function handleCellClick(day: DayCell) {
+    if (!day.date) {
+        return;
+    }
+
+    activeHover.value = null;
+    selectedDay.value = {
+        date: day.date,
+        seconds: day.seconds,
+        level: day.level,
+    };
+}
+
+function closeDayModal() {
+    selectedDay.value = null;
+}
+
+function selectRange(range: RangeOption) {
+    selectedRange.value = range;
+    isDropdownOpen.value = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+    if (
+        dropdownRef.value &&
+        !dropdownRef.value.contains(event.target as Node)
+    ) {
+        isDropdownOpen.value = false;
+    }
+}
+
+// Tooltip state
+const activeHover = ref<{
+    date: string;
+    seconds: number;
+    x: number;
+    y: number;
+} | null>(null);
+
+interface DayCell {
+    date: string;
+    seconds: number;
+    level: number;
+    dayOfWeek: number; // 0 = Sun ... 6 = Sat
+    monthName: string;
+    monthIndex: number;
+}
+
+const MONTH_NAMES = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+
+function parseLocalDate(dateStr: string): Date {
+    const parts = dateStr.split('-').map(Number);
+
+    return new Date(parts[0], parts[1] - 1, parts[2]);
+}
+
+const weeks = computed(() => {
+    if (!props.heatmapData || props.heatmapData.length === 0) {
+        return [];
+    }
+
+    const result: DayCell[][] = [];
+    let currentWeek: DayCell[] = [];
+
+    const firstDate = parseLocalDate(props.heatmapData[0].date);
+    const startDayOfWeek = firstDate.getDay();
+
+    // Pad beginning of first week
+    for (let i = 0; i < startDayOfWeek; i++) {
+        currentWeek.push({
+            date: '',
+            seconds: 0,
+            level: -1,
+            dayOfWeek: i,
+            monthName: '',
+            monthIndex: -1,
+        });
+    }
+
+    for (const item of props.heatmapData) {
+        const d = parseLocalDate(item.date);
+        const dayOfWeek = d.getDay();
+        const monthIndex = d.getMonth();
+
+        currentWeek.push({
+            date: item.date,
+            seconds: item.seconds,
+            level: item.level,
+            dayOfWeek,
+            monthName: MONTH_NAMES[monthIndex],
+            monthIndex,
+        });
+
+        if (dayOfWeek === 6) {
+            result.push(currentWeek);
+            currentWeek = [];
+        }
+    }
+
+    if (currentWeek.length > 0) {
+        while (currentWeek.length < 7) {
+            currentWeek.push({
+                date: '',
+                seconds: 0,
+                level: -1,
+                dayOfWeek: currentWeek.length,
+                monthName: '',
+                monthIndex: -1,
+            });
+        }
+
+        result.push(currentWeek);
+    }
+
+    return result;
+});
+
+const monthLabels = computed(() => {
+    const labels: { name: string; colIndex: number; x: number }[] = [];
+    let lastColIndex = -10;
+
+    weeks.value.forEach((week, colIdx) => {
+        const firstValidDay = week.find((d) => d.date && d.monthName);
+
+        if (!firstValidDay) {
+            return;
+        }
+
+        const prevWeek = weeks.value[colIdx - 1];
+        const prevMonth = prevWeek?.find((d) => d.date)?.monthIndex;
+
+        if (
+            prevMonth !== undefined &&
+            firstValidDay.monthIndex !== prevMonth &&
+            colIdx - lastColIndex >= 3
+        ) {
+            labels.push({
+                name: firstValidDay.monthName,
+                colIndex: colIdx,
+                x: 28 + colIdx * 13,
+            });
+            lastColIndex = colIdx;
+        } else if (colIdx === 0) {
+            labels.push({
+                name: firstValidDay.monthName,
+                colIndex: colIdx,
+                x: 28,
+            });
+            lastColIndex = 0;
+        }
+    });
+
+    return labels;
+});
+
+const svgWidth = computed(() => {
+    return Math.max(720, 28 + weeks.value.length * 13 + 10);
+});
+
+function scrollToCurrentWeek() {
+    if (scrollContainer.value) {
+        scrollContainer.value.scrollLeft = scrollContainer.value.scrollWidth;
+    }
+}
+
+watch(
+    () => props.heatmapData,
+    () => {
+        nextTick(() => {
+            scrollToCurrentWeek();
+            setTimeout(scrollToCurrentWeek, 50);
+            setTimeout(scrollToCurrentWeek, 200);
+        });
+    },
+    { deep: true },
+);
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    nextTick(() => {
+        scrollToCurrentWeek();
+        requestAnimationFrame(() => {
+            scrollToCurrentWeek();
+        });
+        setTimeout(scrollToCurrentWeek, 50);
+        setTimeout(scrollToCurrentWeek, 150);
+        setTimeout(scrollToCurrentWeek, 300);
+        setTimeout(scrollToCurrentWeek, 600);
+    });
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('touchstart', handleClickOutside);
+});
+
+const selectedRangeSeconds = computed(() => {
+    if (!props.heatmapData || props.heatmapData.length === 0) {
+        return 0;
+    }
+
+    const recent = props.heatmapData.slice(-selectedRange.value.days);
+
+    return recent.reduce((sum, item) => sum + item.seconds, 0);
+});
+
+const selectedRangeFormatted = computed(() => {
+    const totalSec = selectedRangeSeconds.value;
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+
+    if (h === 0 && m === 0) {
+        return '0 mins';
+    }
+
+    if (h === 0) {
+        return `${m} mins`;
+    }
+
+    if (m === 0) {
+        return `${h} ${h === 1 ? 'hour' : 'hours'}`;
+    }
+
+    return `${h} ${h === 1 ? 'hour' : 'hours'} ${m} ${m === 1 ? 'min' : 'mins'}`;
+});
+
+function formatDuration(seconds: number): string {
+    if (seconds === 0) {
+        return 'No study time';
+    }
+
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+
+    if (h === 0) {
+        return `${m} mins`;
+    }
+
+    if (m === 0) {
+        return `${h} hours`;
+    }
+
+    return `${h}h ${m}m`;
+}
+
+function formatDateDisplay(dateStr: string): string {
+    if (!dateStr) {
+        return '';
+    }
+
+    const date = parseLocalDate(dateStr);
+
+    return date.toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    });
+}
+
+function formatDateFull(dateStr: string): string {
+    if (!dateStr) {
+        return '';
+    }
+
+    const date = parseLocalDate(dateStr);
+
+    return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    });
+}
+
+function formatDayModalDuration(seconds: number): string {
+    if (seconds === 0) {
+        return '0 mins';
+    }
+
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+
+    if (h === 0) {
+        return `${m} min${m === 1 ? '' : 's'}`;
+    }
+
+    if (m === 0) {
+        return `${h} hour${h === 1 ? '' : 's'}`;
+    }
+
+    return `${h} hr ${m} min`;
+}
+
+function handleCellMouseEnter(day: DayCell, event: MouseEvent | TouchEvent) {
+    if (!day.date) {
+        return;
+    }
+
+    const target = event.currentTarget as SVGElement;
+    const rect = target.getBoundingClientRect();
+    activeHover.value = {
+        date: day.date,
+        seconds: day.seconds,
+        x: rect.left + rect.width / 2,
+        y: rect.top - 8,
+    };
+}
+
+function handleCellMouseLeave() {
+    activeHover.value = null;
+}
+
+function getLevelFillClass(level: number): string {
+    switch (level) {
+        case 0:
+            return 'fill-slate-100 dark:fill-gray-800';
+        case 1:
+            return 'fill-emerald-200 dark:fill-emerald-950';
+        case 2:
+            return 'fill-emerald-400 dark:fill-emerald-800';
+        case 3:
+            return 'fill-emerald-500 dark:fill-emerald-600';
+        case 4:
+            return 'fill-emerald-600 dark:fill-emerald-400';
+        case 5:
+            return 'fill-red-500 dark:fill-red-500';
+        default:
+            return 'fill-transparent';
+    }
+}
+</script>
+
+<template>
+    <div
+        class="rounded-2xl border border-slate-200/90 bg-white p-4 shadow-2xs sm:p-5 dark:border-gray-800 dark:bg-gray-900"
+    >
+        <!-- Minimal Header -->
+        <div class="flex items-baseline justify-between gap-2">
+            <div>
+                <h3
+                    class="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                >
+                    Study Activity
+                </h3>
+                <div class="mt-1 flex items-center gap-1.5">
+                    <span
+                        class="text-base font-bold text-slate-900 sm:text-lg dark:text-white"
+                    >
+                        {{ selectedRangeFormatted }}
+                    </span>
+
+                    <!-- Time Range Dropdown Trigger -->
+                    <div
+                        ref="dropdownRef"
+                        class="relative inline-flex items-center"
+                    >
+                        <button
+                            type="button"
+                            @click.stop="isDropdownOpen = !isDropdownOpen"
+                            class="inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600 focus:outline-hidden dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                            aria-haspopup="true"
+                            :aria-expanded="isDropdownOpen"
+                        >
+                            <span>({{ selectedRange.label }})</span>
+                            <ChevronDown
+                                class="h-3 w-3 transition-transform duration-150"
+                                :class="{
+                                    'rotate-180 text-slate-600 dark:text-gray-300':
+                                        isDropdownOpen,
+                                }"
+                            />
+                        </button>
+
+                        <!-- Dropdown Menu -->
+                        <div
+                            v-if="isDropdownOpen"
+                            class="animate-in fade-in zoom-in-95 absolute top-full left-0 z-30 mt-1 min-w-[130px] rounded-xl border border-slate-200 bg-white py-1 shadow-lg backdrop-blur-xs duration-100 dark:border-gray-700 dark:bg-gray-800"
+                        >
+                            <button
+                                v-for="range in RANGES"
+                                :key="range.days"
+                                type="button"
+                                @click.stop="selectRange(range)"
+                                class="flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-left text-xs font-medium transition-colors hover:bg-slate-50 dark:hover:bg-gray-700/60"
+                                :class="[
+                                    selectedRange.days === range.days
+                                        ? 'bg-emerald-50/50 font-semibold text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400'
+                                        : 'text-slate-700 dark:text-gray-200',
+                                ]"
+                            >
+                                <span>{{ range.label }}</span>
+                                <Check
+                                    v-if="selectedRange.days === range.days"
+                                    class="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400"
+                                />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Heatmap SVG Canvas Container -->
+        <div class="mt-4">
+            <div
+                ref="scrollContainer"
+                class="-mx-1 scrollbar-thin overflow-x-auto px-1 pt-1 pb-1"
+            >
+                <svg
+                    :width="svgWidth"
+                    height="116"
+                    :viewBox="`0 0 ${svgWidth} 116`"
+                    class="block overflow-visible select-none"
+                >
+                    <!-- Month Labels -->
+                    <g
+                        class="fill-slate-400 text-[10px] font-medium dark:fill-gray-500"
+                    >
+                        <text
+                            v-for="m in monthLabels"
+                            :key="m.name + m.colIndex"
+                            :x="m.x"
+                            y="12"
+                        >
+                            {{ m.name }}
+                        </text>
+                    </g>
+
+                    <!-- Day of Week Labels (Mon, Wed, Fri) -->
+                    <g
+                        class="fill-slate-400 text-[9px] font-medium dark:fill-gray-500"
+                        text-anchor="start"
+                    >
+                        <text x="4" y="39">Mon</text>
+                        <text x="4" y="65">Wed</text>
+                        <text x="4" y="91">Fri</text>
+                    </g>
+
+                    <!-- Heatmap Grid Squares -->
+                    <g transform="translate(28, 18)">
+                        <g
+                            v-for="(week, colIdx) in weeks"
+                            :key="colIdx"
+                            :transform="`translate(${colIdx * 13}, 0)`"
+                        >
+                            <rect
+                                v-for="(day, rowIdx) in week"
+                                :key="rowIdx"
+                                :y="rowIdx * 13"
+                                width="10.5"
+                                height="10.5"
+                                rx="2.5"
+                                ry="2.5"
+                                :class="[
+                                    day.level === -1
+                                        ? 'pointer-events-none opacity-0'
+                                        : [
+                                              getLevelFillClass(day.level),
+                                              'cursor-pointer transition-opacity hover:opacity-80',
+                                          ],
+                                ]"
+                                @mouseenter="
+                                    (e) => handleCellMouseEnter(day, e)
+                                "
+                                @mouseleave="handleCellMouseLeave"
+                                @click.stop="handleCellClick(day)"
+                            />
+                        </g>
+                    </g>
+                </svg>
+            </div>
+
+            <!-- Footer: Legend (Clickable to view groupings) -->
+            <div class="mt-2 flex items-center justify-end">
+                <button
+                    type="button"
+                    @click="showLegendModal = true"
+                    class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-1.5 py-0.5 text-[10px] text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                    title="Click to view study time level breakdown"
+                >
+                    <span>Less</span>
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-slate-100 dark:bg-gray-800"
+                    />
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-emerald-200 dark:bg-emerald-950"
+                    />
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-emerald-400 dark:bg-emerald-800"
+                    />
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-emerald-500 dark:bg-emerald-600"
+                    />
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-emerald-600 dark:bg-emerald-400"
+                    />
+                    <span
+                        class="h-2.5 w-2.5 rounded-[2px] bg-red-500 dark:bg-red-500"
+                    />
+                    <span>More</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Floating Hover Tooltip (Desktop) -->
+        <Teleport to="body">
+            <div
+                v-if="activeHover"
+                :style="{
+                    position: 'fixed',
+                    left: `${activeHover.x}px`,
+                    top: `${activeHover.y}px`,
+                    transform: 'translate(-50%, -100%)',
+                }"
+                class="pointer-events-none z-50 rounded-lg border border-slate-200/80 bg-slate-900/95 px-2.5 py-1 text-center shadow-lg backdrop-blur-xs dark:border-gray-700 dark:bg-gray-950/95"
+            >
+                <div class="text-[11px] font-bold text-white">
+                    {{ formatDuration(activeHover.seconds) }}
+                </div>
+                <div class="text-[10px] text-slate-300 dark:text-gray-400">
+                    {{ formatDateDisplay(activeHover.date) }}
+                </div>
+            </div>
+        </Teleport>
+
+        <!-- Day Detail Modal (Click / Phone Tap) -->
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition duration-150 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="selectedDay"
+                    class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
+                >
+                    <!-- Backdrop overlay -->
+                    <div
+                        class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs transition-opacity"
+                        @click="closeDayModal"
+                    />
+
+                    <!-- Dialog Card -->
+                    <div
+                        class="animate-in fade-in zoom-in-95 relative z-10 w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-xl duration-150 dark:border-gray-800 dark:bg-gray-900"
+                        role="dialog"
+                        aria-modal="true"
+                        @click.stop
+                    >
+                        <div class="flex items-start justify-between gap-3">
+                            <div
+                                class="flex items-center gap-2 text-slate-500 dark:text-gray-400"
+                            >
+                                <Calendar class="h-4 w-4" />
+                                <span class="text-xs font-semibold"
+                                    >Daily Study Log</span
+                                >
+                            </div>
+                            <button
+                                type="button"
+                                @click="closeDayModal"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                            >
+                                <X class="h-4 w-4" />
+                            </button>
+                        </div>
+
+                        <div class="mt-3">
+                            <h4
+                                class="text-sm font-bold text-slate-900 dark:text-white"
+                            >
+                                {{ formatDateFull(selectedDay.date) }}
+                            </h4>
+
+                            <div
+                                class="mt-3 flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-800/60"
+                            >
+                                <div
+                                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+                                    :class="
+                                        selectedDay.seconds > 0
+                                            ? 'bg-emerald-500 text-white shadow-xs'
+                                            : 'bg-slate-200 text-slate-500 dark:bg-gray-700 dark:text-gray-400'
+                                    "
+                                >
+                                    <Clock class="h-4 w-4" />
+                                </div>
+                                <div class="min-w-0 flex-1">
+                                    <div
+                                        class="text-[11px] font-medium text-slate-400 dark:text-gray-500"
+                                    >
+                                        Study Time
+                                    </div>
+                                    <div
+                                        class="text-sm font-extrabold text-slate-900 dark:text-white"
+                                    >
+                                        {{
+                                            formatDayModalDuration(
+                                                selectedDay.seconds,
+                                            )
+                                        }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-4">
+                            <button
+                                type="button"
+                                @click="closeDayModal"
+                                class="w-full cursor-pointer rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 active:scale-[0.98] dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                            >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
+
+        <!-- Grouping / Legend Breakdown Modal -->
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition duration-150 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="showLegendModal"
+                    class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
+                >
+                    <!-- Backdrop overlay -->
+                    <div
+                        class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs transition-opacity"
+                        @click="showLegendModal = false"
+                    />
+
+                    <!-- Dialog Card -->
+                    <div
+                        class="animate-in fade-in zoom-in-95 relative z-10 w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-xl duration-150 dark:border-gray-800 dark:bg-gray-900"
+                        role="dialog"
+                        aria-modal="true"
+                        @click.stop
+                    >
+                        <div class="flex items-start justify-between gap-3">
+                            <h3
+                                class="text-sm font-bold text-slate-900 dark:text-white"
+                            >
+                                Study Time Levels
+                            </h3>
+                            <button
+                                type="button"
+                                @click="showLegendModal = false"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                            >
+                                <X class="h-4 w-4" />
+                            </button>
+                        </div>
+
+                        <div class="mt-4 space-y-2 text-xs">
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-3 py-2 dark:border-gray-800/80 dark:bg-gray-800/40"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] border border-slate-200 bg-slate-100 dark:border-gray-700 dark:bg-gray-800"
+                                    />
+                                    <span
+                                        class="font-medium text-slate-700 dark:text-gray-300"
+                                        >Level 0</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-semibold text-slate-500 dark:text-gray-400"
+                                    >0 mins</span
+                                >
+                            </div>
+
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-3 py-2 dark:border-gray-800/80 dark:bg-gray-800/40"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] bg-emerald-200 dark:bg-emerald-950"
+                                    />
+                                    <span
+                                        class="font-medium text-slate-700 dark:text-gray-300"
+                                        >Level 1</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-semibold text-slate-900 dark:text-white"
+                                    >&lt; 2 hours</span
+                                >
+                            </div>
+
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-3 py-2 dark:border-gray-800/80 dark:bg-gray-800/40"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] bg-emerald-400 dark:bg-emerald-800"
+                                    />
+                                    <span
+                                        class="font-medium text-slate-700 dark:text-gray-300"
+                                        >Level 2</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-semibold text-slate-900 dark:text-white"
+                                    >2 – 4 hours</span
+                                >
+                            </div>
+
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-3 py-2 dark:border-gray-800/80 dark:bg-gray-800/40"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] bg-emerald-500 dark:bg-emerald-600"
+                                    />
+                                    <span
+                                        class="font-medium text-slate-700 dark:text-gray-300"
+                                        >Level 3</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-semibold text-slate-900 dark:text-white"
+                                    >4 – 6 hours</span
+                                >
+                            </div>
+
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50/60 px-3 py-2 dark:border-gray-800/80 dark:bg-gray-800/40"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] bg-emerald-600 dark:bg-emerald-400"
+                                    />
+                                    <span
+                                        class="font-medium text-slate-700 dark:text-gray-300"
+                                        >Level 4</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-semibold text-slate-900 dark:text-white"
+                                    >6 – 8 hours</span
+                                >
+                            </div>
+
+                            <div
+                                class="flex items-center justify-between rounded-xl border border-rose-100 bg-rose-50/40 px-3 py-2 dark:border-red-900/40 dark:bg-red-950/20"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <span
+                                        class="h-3.5 w-3.5 rounded-[3px] bg-red-500 dark:bg-red-500"
+                                    />
+                                    <span
+                                        class="font-medium text-red-700 dark:text-red-300"
+                                        >Level 5</span
+                                    >
+                                </div>
+                                <span
+                                    class="font-bold text-red-600 dark:text-red-400"
+                                    >8+ hours</span
+                                >
+                            </div>
+                        </div>
+
+                        <div class="mt-4">
+                            <button
+                                type="button"
+                                @click="showLegendModal = false"
+                                class="w-full cursor-pointer rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 active:scale-[0.98] dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                            >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
+    </div>
+</template>
diff --git a/resources/js/components/tracker/SubjectChecklist.vue b/resources/js/components/tracker/SubjectChecklist.vue
new file mode 100644
index 00000000..d6beddc7
--- /dev/null
+++ b/resources/js/components/tracker/SubjectChecklist.vue
@@ -0,0 +1,479 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3';
+import {
+    AlertTriangle,
+    BookOpen,
+    Check,
+    ChevronDown,
+    ChevronUp,
+    ExternalLink,
+    Loader2,
+} from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
+
+export interface TopLevelNode {
+    id: number;
+    subject_id: number;
+    name: string;
+    slug: string;
+    sort_order?: number;
+}
+
+export interface SubjectItem {
+    id: number;
+    name: string;
+    english_name?: string | null;
+    slug: string;
+    course: 'hsc' | 'ssc';
+    sort_order?: number;
+    nodes: TopLevelNode[];
+}
+
+interface Props {
+    course: 'hsc' | 'ssc';
+    subjects: SubjectItem[];
+    completedNodeIds: number[];
+    isAuthenticated: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: 'require-auth'): void;
+}>();
+
+// Active completed IDs state
+const completedIds = ref<Set<number>>(new Set(props.completedNodeIds));
+
+watch(
+    () => props.completedNodeIds,
+    (newIds) => {
+        completedIds.value = new Set(newIds);
+    },
+    { deep: true },
+);
+
+// Expanded accordion cards state
+const expandedSubjectIds = ref<Set<number>>(
+    new Set(props.subjects.slice(0, 3).map((s) => s.id)),
+);
+
+function toggleExpand(subjectId: number) {
+    if (expandedSubjectIds.value.has(subjectId)) {
+        expandedSubjectIds.value.delete(subjectId);
+    } else {
+        expandedSubjectIds.value.add(subjectId);
+    }
+}
+
+const showSwitchConfirmModal = ref(false);
+const pendingCurriculum = ref<'hsc' | 'ssc'>('hsc');
+const isSwitching = ref(false);
+
+function switchCourse(newCourse: 'hsc' | 'ssc') {
+    if (!props.isAuthenticated) {
+        emit('require-auth');
+
+        return;
+    }
+
+    if (props.course !== newCourse) {
+        pendingCurriculum.value = newCourse;
+        showSwitchConfirmModal.value = true;
+    }
+}
+
+function confirmSwitchCurriculum() {
+    isSwitching.value = true;
+    router.post(
+        '/tracker/curriculum',
+        { curriculum: pendingCurriculum.value },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                showSwitchConfirmModal.value = false;
+            },
+            onFinish: () => {
+                isSwitching.value = false;
+            },
+        },
+    );
+}
+
+// Optimistic node toggle
+function toggleNodeCompletion(node: TopLevelNode) {
+    if (!props.isAuthenticated) {
+        emit('require-auth');
+
+        return;
+    }
+
+    const wasCompleted = completedIds.value.has(node.id);
+
+    if (wasCompleted) {
+        completedIds.value.delete(node.id);
+    } else {
+        completedIds.value.add(node.id);
+    }
+
+    router.post(
+        `/tracker/nodes/${node.id}/toggle`,
+        {},
+        {
+            preserveScroll: true,
+            preserveState: true,
+            onError: () => {
+                // Revert on error
+                if (wasCompleted) {
+                    completedIds.value.add(node.id);
+                } else {
+                    completedIds.value.delete(node.id);
+                }
+            },
+        },
+    );
+}
+
+// Overall stats
+const totalChapters = computed(() => {
+    return props.subjects.reduce((sum, s) => sum + s.nodes.length, 0);
+});
+
+const totalCompletedChapters = computed(() => {
+    let count = 0;
+
+    for (const s of props.subjects) {
+        for (const n of s.nodes) {
+            if (completedIds.value.has(n.id)) {
+                count++;
+            }
+        }
+    }
+
+    return count;
+});
+
+const overallPercentage = computed(() => {
+    if (totalChapters.value === 0) {
+        return 0;
+    }
+
+    return Math.round(
+        (totalCompletedChapters.value / totalChapters.value) * 100,
+    );
+});
+
+function getSubjectProgress(subject: SubjectItem) {
+    const total = subject.nodes.length;
+
+    if (total === 0) {
+        return { completed: 0, total: 0, percent: 0 };
+    }
+
+    const completed = subject.nodes.filter((n) =>
+        completedIds.value.has(n.id),
+    ).length;
+    const percent = Math.round((completed / total) * 100);
+
+    return { completed, total, percent };
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-5">
+        <!-- Checklist Header Card -->
+        <div
+            class="rounded-3xl border border-slate-200/80 bg-white p-5 shadow-xs sm:p-6 dark:border-gray-800/90 dark:bg-gray-900"
+        >
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+            >
+                <div>
+                    <div class="flex items-center gap-2">
+                        <span
+                            class="flex h-7 w-7 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/70 dark:text-indigo-400"
+                        >
+                            <BookOpen class="h-4 w-4" />
+                        </span>
+                        <h2
+                            class="text-base font-bold text-slate-900 sm:text-lg dark:text-white"
+                        >
+                            Syllabus Chapter Checklist
+                        </h2>
+                    </div>
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                        পড়া শেষ হওয়া অধ্যায়গুলোতে টিক দিয়ে সিলেবাসের অগ্রগতি
+                        ট্র্যাক করুন
+                    </p>
+                </div>
+
+                <!-- Course Switcher Tabs -->
+                <div
+                    class="flex self-start rounded-2xl bg-slate-100 p-1 sm:self-auto dark:bg-gray-800/80"
+                >
+                    <button
+                        type="button"
+                        @click="switchCourse('hsc')"
+                        :class="[
+                            course === 'hsc'
+                                ? 'bg-white text-indigo-600 shadow-2xs dark:bg-gray-900 dark:text-indigo-400'
+                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white',
+                        ]"
+                        class="rounded-xl px-4 py-1.5 text-xs font-bold transition"
+                    >
+                        HSC
+                    </button>
+                    <button
+                        type="button"
+                        @click="switchCourse('ssc')"
+                        :class="[
+                            course === 'ssc'
+                                ? 'bg-white text-indigo-600 shadow-2xs dark:bg-gray-900 dark:text-indigo-400'
+                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white',
+                        ]"
+                        class="rounded-xl px-4 py-1.5 text-xs font-bold transition"
+                    >
+                        SSC
+                    </button>
+                </div>
+            </div>
+
+            <!-- Overall Progress Bar -->
+            <div
+                class="mt-5 rounded-2xl border border-slate-100 bg-slate-50/70 p-4 dark:border-gray-800/80 dark:bg-gray-800/40"
+            >
+                <div
+                    class="flex items-center justify-between text-xs font-semibold"
+                >
+                    <span class="text-slate-700 dark:text-gray-300">
+                        Total Course Completion
+                    </span>
+                    <span class="text-indigo-600 dark:text-indigo-400">
+                        {{ totalCompletedChapters }} /
+                        {{ totalChapters }} Chapters ({{ overallPercentage }}%)
+                    </span>
+                </div>
+                <div
+                    class="mt-2.5 h-2.5 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-gray-700"
+                >
+                    <div
+                        class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-emerald-500 transition-all duration-500"
+                        :style="{ width: `${overallPercentage}%` }"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Subjects & Chapters List -->
+        <div class="flex flex-col gap-3">
+            <div
+                v-for="subject in subjects"
+                :key="subject.id"
+                class="overflow-hidden rounded-3xl border border-slate-200/80 bg-white shadow-2xs transition dark:border-gray-800/90 dark:bg-gray-900"
+            >
+                <!-- Subject Header (Clickable to Toggle) -->
+                <div
+                    @click="toggleExpand(subject.id)"
+                    class="flex cursor-pointer items-center justify-between p-4.5 transition hover:bg-slate-50/70 sm:p-5 dark:hover:bg-gray-800/40"
+                >
+                    <div class="flex items-center gap-3">
+                        <div
+                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-indigo-50 text-xs font-extrabold text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
+                        >
+                            {{
+                                subject.english_name
+                                    ? subject.english_name
+                                          .charAt(0)
+                                          .toUpperCase()
+                                    : subject.name.charAt(0)
+                            }}
+                        </div>
+                        <div>
+                            <h3
+                                class="text-sm font-bold text-slate-900 sm:text-base dark:text-white"
+                            >
+                                {{ subject.name }}
+                            </h3>
+                            <div
+                                class="flex items-center gap-2 text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                <span v-if="subject.english_name"
+                                    >{{ subject.english_name }} •
+                                </span>
+                                <span
+                                    >{{
+                                        getSubjectProgress(subject).completed
+                                    }}/{{
+                                        getSubjectProgress(subject).total
+                                    }}
+                                    Chapters</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Subject Progress Indicator & Chevron -->
+                    <div class="flex items-center gap-3">
+                        <div class="hidden flex-col items-end gap-1 sm:flex">
+                            <span
+                                class="text-xs font-bold text-slate-800 dark:text-gray-200"
+                            >
+                                {{ getSubjectProgress(subject).percent }}%
+                            </span>
+                            <div
+                                class="h-1.5 w-20 overflow-hidden rounded-full bg-slate-100 dark:bg-gray-800"
+                            >
+                                <div
+                                    class="h-full rounded-full bg-indigo-600 transition-all duration-300 dark:bg-indigo-400"
+                                    :style="{
+                                        width: `${getSubjectProgress(subject).percent}%`,
+                                    }"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 text-slate-500 dark:bg-gray-800 dark:text-gray-400"
+                        >
+                            <component
+                                :is="
+                                    expandedSubjectIds.has(subject.id)
+                                        ? ChevronUp
+                                        : ChevronDown
+                                "
+                                class="h-4 w-4"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Chapters List (Accordion Content) -->
+                <div
+                    v-if="expandedSubjectIds.has(subject.id)"
+                    class="divide-y divide-slate-100 border-t border-slate-100 px-4.5 py-3 sm:px-5 dark:divide-gray-800/60 dark:border-gray-800/80"
+                >
+                    <div
+                        v-if="subject.nodes.length === 0"
+                        class="py-4 text-center text-xs text-slate-400 dark:text-gray-500"
+                    >
+                        No chapters available for this subject yet.
+                    </div>
+
+                    <div
+                        v-for="node in subject.nodes"
+                        :key="node.id"
+                        class="group flex items-center justify-between py-2.5 transition"
+                    >
+                        <!-- Checkbox & Chapter Name -->
+                        <div
+                            @click="toggleNodeCompletion(node)"
+                            class="flex flex-1 cursor-pointer items-center gap-3 pr-2 select-none"
+                        >
+                            <!-- Custom Checkbox -->
+                            <div
+                                :class="[
+                                    completedIds.has(node.id)
+                                        ? 'border-emerald-600 bg-emerald-600 text-white'
+                                        : 'border-slate-300 bg-white hover:border-slate-400 dark:border-gray-700 dark:bg-gray-800',
+                                ]"
+                                class="flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border transition duration-150"
+                            >
+                                <Check
+                                    v-if="completedIds.has(node.id)"
+                                    class="h-3.5 w-3.5 stroke-[3]"
+                                />
+                            </div>
+
+                            <!-- Title -->
+                            <span
+                                :class="[
+                                    completedIds.has(node.id)
+                                        ? 'text-slate-400 line-through dark:text-gray-500'
+                                        : 'text-slate-800 dark:text-gray-200',
+                                ]"
+                                class="text-xs font-medium transition sm:text-sm"
+                            >
+                                {{ node.name }}
+                            </span>
+                        </div>
+
+                        <!-- Link to Subject Resources -->
+                        <Link
+                            :href="`/${subject.slug}`"
+                            target="_blank"
+                            title="Open subject folder"
+                            class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 opacity-80 transition group-hover:opacity-100 hover:bg-slate-100 hover:text-indigo-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
+                        >
+                            <ExternalLink class="h-3.5 w-3.5" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Switch Curriculum Confirmation Modal -->
+        <BaseModal
+            :is-open="showSwitchConfirmModal"
+            title="কারিকুলাম পরিবর্তন করবেন?"
+            description="সতর্কতা: আপনার সিলেবাস ট্র্যাকার রিসেট হবে"
+            max-width="md"
+            @close="showSwitchConfirmModal = false"
+        >
+            <div class="space-y-4 p-5 text-slate-800 dark:text-gray-200">
+                <div
+                    class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50/80 p-3.5 text-xs text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-200"
+                >
+                    <AlertTriangle
+                        class="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400"
+                    />
+                    <div class="space-y-1">
+                        <p class="font-bold">সতর্কতা</p>
+                        <p class="leading-relaxed">
+                            কারিকুলাম পরিবর্তন করলে স্টাডি ট্র্যাকারের টিক দেওয়া
+                            সকল অধ্যায়ের অগ্রগতি রিসেট হয়ে যাবে।
+                        </p>
+                    </div>
+                </div>
+
+                <p class="text-xs text-slate-500 dark:text-gray-400">
+                    আপনি কি নিশ্চিতভাবে কারিকুলাম
+                    <span
+                        class="font-bold text-slate-800 uppercase dark:text-gray-200"
+                        >{{ pendingCurriculum }}</span
+                    >
+                    এ পরিবর্তন করতে চান?
+                </p>
+            </div>
+
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-5 py-3 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="showSwitchConfirmModal = false"
+                    :disabled="isSwitching"
+                    class="cursor-pointer rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    বাতিল
+                </button>
+                <button
+                    type="button"
+                    @click="confirmSwitchCurriculum"
+                    :disabled="isSwitching"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95 disabled:opacity-50"
+                >
+                    <Loader2
+                        v-if="isSwitching"
+                        class="h-3.5 w-3.5 animate-spin"
+                    />
+                    <span>{{
+                        isSwitching
+                            ? 'পরিবর্তন হচ্ছে...'
+                            : 'হ্যাঁ, পরিবর্তন করুন'
+                    }}</span>
+                </button>
+            </div>
+        </BaseModal>
+    </div>
+</template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 604fb6f7..ac173b38 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -37,6 +37,7 @@ const DESKTOP_FOOTER_COMPONENTS = new Set([
     'Forum/Index',
     'Donate',
     'Projects',
+    'Tracker/Index',
     'Support',
     'SupportMyTickets',
     'ContributorGuide',
diff --git a/resources/js/lib/navigation.ts b/resources/js/lib/navigation.ts
index 38f9384d..760943ed 100644
--- a/resources/js/lib/navigation.ts
+++ b/resources/js/lib/navigation.ts
@@ -20,6 +20,14 @@ export const primaryNavItems: NavItem[] = [
             url.startsWith('/ssc?'),
         showInBottom: true,
     },
+    {
+        label: 'Tracker',
+        labelBn: 'স্টাডি ট্র্যাকার',
+        href: '/tracker',
+        icon: 'timer',
+        match: (url) => url.startsWith('/tracker'),
+        showInBottom: true,
+    },
     {
         label: 'People',
         href: '/peers',
@@ -47,7 +55,7 @@ export const primaryNavItems: NavItem[] = [
         href: '/blogs',
         icon: 'menu_book',
         match: (url) => url.startsWith('/blogs'),
-        showInBottom: true,
+        showInBottom: false,
     },
     {
         label: 'AI',
diff --git a/resources/js/lib/useAuth.ts b/resources/js/lib/useAuth.ts
index 946e8d17..fd81bd2b 100644
--- a/resources/js/lib/useAuth.ts
+++ b/resources/js/lib/useAuth.ts
@@ -23,9 +23,28 @@ export function useAuth() {
      * Returns true if user is authenticated, false otherwise.
      */
     const requireAuth = (
-        message = 'Please sign in to perform this action.',
-        action?: () => void,
+        messageOrAction:
+            | string
+            | (() => void) = 'Please sign in to perform this action.',
+        actionOrMessage?: string | (() => void),
     ): boolean => {
+        let message = 'Please sign in to perform this action.';
+        let action: (() => void) | undefined;
+
+        if (typeof messageOrAction === 'string') {
+            message = messageOrAction;
+
+            if (typeof actionOrMessage === 'function') {
+                action = actionOrMessage;
+            }
+        } else if (typeof messageOrAction === 'function') {
+            action = messageOrAction;
+
+            if (typeof actionOrMessage === 'string') {
+                message = actionOrMessage;
+            }
+        }
+
         if (!isAuthenticated.value) {
             authModalMessage.value = message;
             showAuthModal.value = true;
diff --git a/resources/js/pages/Profile.vue b/resources/js/pages/Profile.vue
index ed33d26f..a58f23f7 100644
--- a/resources/js/pages/Profile.vue
+++ b/resources/js/pages/Profile.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { Head, Link, router, useForm, usePage } from '@inertiajs/vue3';
 import {
     Loader2,
     Save,
@@ -15,8 +15,10 @@ import {
     Users,
     Lock,
     Zap,
+    GraduationCap,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
+import BaseModal from '@/components/BaseModal.vue';
 
 import { compressImage } from '@/lib/imageCompression';
 
@@ -33,10 +35,15 @@ const isUnverified = computed(() => {
 
 const showAdvancedSettings = ref(false);
 const showConfirmModal = ref(false);
+const showCurriculumConfirmModal = ref(false);
+const pendingCurriculum = ref<'hsc' | 'ssc'>('hsc');
+const isSwitchingCurriculum = ref(false);
 const isCompressingAvatar = ref(false);
 const avatarPreview = ref<string | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
+const currentCurriculum = computed(() => user.value?.curriculum || 'hsc');
+
 const form = useForm({
     _method: 'PUT',
     name: user.value?.name || '',
@@ -134,6 +141,32 @@ const confirmDisable = () => {
     showConfirmModal.value = false;
 };
 
+const handleSelectCurriculum = (target: 'hsc' | 'ssc') => {
+    if (target === currentCurriculum.value) {
+        return;
+    }
+
+    pendingCurriculum.value = target;
+    showCurriculumConfirmModal.value = true;
+};
+
+const confirmSwitchCurriculum = () => {
+    isSwitchingCurriculum.value = true;
+    router.post(
+        '/tracker/curriculum',
+        { curriculum: pendingCurriculum.value },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                showCurriculumConfirmModal.value = false;
+            },
+            onFinish: () => {
+                isSwitchingCurriculum.value = false;
+            },
+        },
+    );
+};
+
 const submitForm = () => {
     if (isCompressingAvatar.value) {
         return;
@@ -377,6 +410,108 @@ const submitForm = () => {
                 </div>
             </div>
 
+            <!-- Curriculum & Target Syllabus Card -->
+            <div
+                class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-8 dark:border-gray-700 dark:bg-gray-900"
+            >
+                <div
+                    class="mb-6 flex flex-col gap-2 border-b border-slate-100 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800"
+                >
+                    <div class="flex items-center gap-3">
+                        <div
+                            class="flex h-9 w-9 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"
+                        >
+                            <GraduationCap class="h-5 w-5" />
+                        </div>
+                        <div>
+                            <h2
+                                class="text-base font-semibold text-slate-900 dark:text-gray-100"
+                            >
+                                Academic Curriculum
+                            </h2>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                আপনার পড়ার কারিকুলাম লেভেল নির্বাচন করুন
+                            </p>
+                        </div>
+                    </div>
+
+                    <span
+                        class="inline-flex items-center self-start rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-bold tracking-wide text-indigo-700 uppercase sm:self-auto dark:bg-indigo-950/60 dark:text-indigo-300"
+                    >
+                        Active: {{ currentCurriculum }}
+                    </span>
+                </div>
+
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <!-- HSC Option -->
+                    <div
+                        @click="handleSelectCurriculum('hsc')"
+                        class="group relative flex cursor-pointer items-center justify-between rounded-2xl border p-4 transition-all duration-150"
+                        :class="[
+                            currentCurriculum === 'hsc'
+                                ? 'border-indigo-600 bg-indigo-50/40 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/30'
+                                : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800/40',
+                        ]"
+                    >
+                        <div>
+                            <span
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
+                                HSC
+                            </span>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                Class 11–12
+                            </p>
+                        </div>
+                        <span
+                            v-if="currentCurriculum === 'hsc'"
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white dark:bg-indigo-500"
+                        >
+                            <span class="text-[10px] font-bold">✓</span>
+                        </span>
+                    </div>
+
+                    <!-- SSC Option -->
+                    <div
+                        @click="handleSelectCurriculum('ssc')"
+                        class="group relative flex cursor-pointer items-center justify-between rounded-2xl border p-4 transition-all duration-150"
+                        :class="[
+                            currentCurriculum === 'ssc'
+                                ? 'border-amber-600 bg-amber-50/40 ring-1 ring-amber-600 dark:border-amber-500 dark:bg-amber-950/30'
+                                : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50/60 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800/40',
+                        ]"
+                    >
+                        <div>
+                            <span
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
+                                SSC
+                            </span>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                Class 9–10
+                            </p>
+                        </div>
+                        <span
+                            v-if="currentCurriculum === 'ssc'"
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-amber-600 text-white dark:bg-amber-500"
+                        >
+                            <span class="text-[10px] font-bold">✓</span>
+                        </span>
+                    </div>
+                </div>
+
+                <p class="mt-3 text-[11px] text-slate-400 dark:text-gray-500">
+                    * কারিকুলাম পরিবর্তন করলে স্টাডি ট্র্যাকারের অগ্রগতি রিসেট
+                    হবে।
+                </p>
+            </div>
+
             <!-- Profile Photo Card -->
             <div
                 class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-8 dark:border-gray-700 dark:bg-gray-900"
@@ -1022,5 +1157,69 @@ const submitForm = () => {
                 </div>
             </transition>
         </Teleport>
+
+        <!-- Switch Curriculum Confirmation Modal -->
+        <BaseModal
+            :is-open="showCurriculumConfirmModal"
+            title="কারিকুলাম পরিবর্তন করবেন?"
+            description="সতর্কতা: আপনার সিলেবাস ট্র্যাকার রিসেট হবে"
+            max-width="md"
+            @close="showCurriculumConfirmModal = false"
+        >
+            <div class="space-y-4 p-5 text-slate-800 dark:text-gray-200">
+                <div
+                    class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50/80 p-3.5 text-xs text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-200"
+                >
+                    <AlertTriangle
+                        class="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400"
+                    />
+                    <div class="space-y-1">
+                        <p class="font-bold">সতর্কতা</p>
+                        <p class="leading-relaxed">
+                            কারিকুলাম পরিবর্তন করলে স্টাডি ট্র্যাকারের টিক দেওয়া
+                            সকল অধ্যায়ের অগ্রগতি রিসেট হয়ে যাবে।
+                        </p>
+                    </div>
+                </div>
+
+                <p class="text-xs text-slate-500 dark:text-gray-400">
+                    আপনি কি নিশ্চিতভাবে কারিকুলাম
+                    <span
+                        class="font-bold text-slate-800 uppercase dark:text-gray-200"
+                        >{{ pendingCurriculum }}</span
+                    >
+                    এ পরিবর্তন করতে চান?
+                </p>
+            </div>
+
+            <div
+                class="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50/60 px-5 py-3 dark:border-gray-800 dark:bg-gray-900/60"
+            >
+                <button
+                    type="button"
+                    @click="showCurriculumConfirmModal = false"
+                    :disabled="isSwitchingCurriculum"
+                    class="cursor-pointer rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    বাতিল
+                </button>
+                <button
+                    type="button"
+                    @click="confirmSwitchCurriculum"
+                    :disabled="isSwitchingCurriculum"
+                    class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95 disabled:opacity-50"
+                >
+                    <Loader2
+                        v-if="isSwitchingCurriculum"
+                        class="h-3.5 w-3.5 animate-spin"
+                    />
+                    <span>{{
+                        isSwitchingCurriculum
+                            ? 'পরিবর্তন হচ্ছে...'
+                            : 'হ্যাঁ, পরিবর্তন করুন'
+                    }}</span>
+                </button>
+            </div>
+        </BaseModal>
     </div>
 </template>
diff --git a/resources/js/pages/Tracker/Index.vue b/resources/js/pages/Tracker/Index.vue
new file mode 100644
index 00000000..d8d05203
--- /dev/null
+++ b/resources/js/pages/Tracker/Index.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { ArrowRight, Clock, User as UserIcon } from 'lucide-vue-next';
+import { computed } from 'vue';
+import AuthModal from '@/components/AuthModal.vue';
+import StopwatchWidget from '@/components/tracker/StopwatchWidget.vue';
+import SubjectChecklist from '@/components/tracker/SubjectChecklist.vue';
+import type { SubjectItem } from '@/components/tracker/SubjectChecklist.vue';
+import { useAuth } from '@/lib/useAuth';
+
+interface Props {
+    course: 'hsc' | 'ssc';
+    subjects: SubjectItem[];
+    completedNodeIds: number[];
+    todaySeconds: number;
+}
+
+defineProps<Props>();
+
+const { user, requireAuth, showAuthModal, authModalMessage } = useAuth();
+const isAuthenticated = computed(() => !!user.value);
+
+function handleAuthRequired(
+    message = 'Please log in to track your study sessions and chapter progress.',
+) {
+    requireAuth(message);
+}
+</script>
+
+<template>
+    <Head>
+        <title>Study Tracker - HSC Stack</title>
+        <meta
+            name="description"
+            content="Track your daily study time with a simple stopwatch and tick off completed syllabus chapters on HSC Stack."
+        />
+    </Head>
+
+    <div class="mx-auto max-w-4xl px-4 py-6 sm:px-6 sm:py-8">
+        <!-- Page Header -->
+        <div
+            class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+            <div class="flex items-center gap-3">
+                <div
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-900 text-white shadow-2xs dark:bg-white dark:text-slate-900"
+                >
+                    <Clock class="h-5 w-5" />
+                </div>
+                <div>
+                    <h1
+                        class="text-lg font-bold tracking-tight text-slate-900 sm:text-xl dark:text-white"
+                    >
+                        Study Tracker
+                    </h1>
+                    <p class="text-xs text-slate-500 dark:text-gray-400">
+                        দৈনিক পড়ার সময় ট্র্যাক করুন ও সিলেবাসের অগ্রগতি রাখুন
+                    </p>
+                </div>
+            </div>
+
+            <!-- View Activity Link (if logged in) or Guest Prompt -->
+            <div v-if="isAuthenticated && user" class="flex items-center gap-2">
+                <Link
+                    :href="`/u/${user.username}`"
+                    class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                >
+                    <UserIcon
+                        class="h-3.5 w-3.5 text-slate-500 dark:text-gray-400"
+                    />
+                    <span>View activity</span>
+                </Link>
+            </div>
+            <div
+                v-else
+                class="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-2xs sm:self-auto dark:border-gray-800 dark:bg-gray-900"
+            >
+                <span
+                    class="text-xs font-medium text-slate-600 dark:text-gray-300"
+                >
+                    Log in to save your study sessions & progress
+                </span>
+                <Link
+                    :href="`/login?redirect=${encodeURIComponent($page.url)}`"
+                    class="inline-flex cursor-pointer items-center gap-1 rounded-lg bg-slate-900 px-2.5 py-1 text-xs font-semibold text-white transition hover:bg-slate-800 active:scale-95 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+                >
+                    <span>Log in</span>
+                    <ArrowRight class="h-3 w-3" />
+                </Link>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="space-y-6">
+            <!-- Focused Stopwatch Widget -->
+            <div>
+                <StopwatchWidget
+                    :today-seconds="todaySeconds"
+                    :is-authenticated="isAuthenticated"
+                    @require-auth="
+                        handleAuthRequired(
+                            'Log in to save your study sessions.',
+                        )
+                    "
+                />
+            </div>
+
+            <!-- Subject & Chapter Checklist -->
+            <div>
+                <SubjectChecklist
+                    :course="course"
+                    :subjects="subjects"
+                    :completed-node-ids="completedNodeIds"
+                    :is-authenticated="isAuthenticated"
+                    @require-auth="
+                        handleAuthRequired(
+                            'Log in to save your chapter checklist progress.',
+                        )
+                    "
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- Auth Modal -->
+    <AuthModal v-model="showAuthModal" :message="authModalMessage" />
+</template>
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 8543fd1d..c0499263 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -8,6 +8,7 @@ import {
     ArrowUpRight,
     Calendar,
     CheckCircle2,
+    ChevronRight,
     Edit3,
     Eye,
     Facebook,
@@ -30,6 +31,12 @@ import {
 import { computed, ref, watch } from 'vue';
 import BaseModal from '@/components/BaseModal.vue';
 import EmptyState from '@/components/EmptyState.vue';
+import SubjectIcon from '@/components/SubjectIcon.vue';
+import StudyHeatmap from '@/components/tracker/StudyHeatmap.vue';
+import type {
+    HeatmapItem,
+    TrackerStats,
+} from '@/components/tracker/StudyHeatmap.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { formatTimeAgo } from '@/lib/useDate';
@@ -41,6 +48,7 @@ const props = defineProps<{
         username: string;
         about: string | null;
         institution: string | null;
+        curriculum?: 'hsc' | 'ssc';
         image_url: string | null;
         facebook: string | null;
         instagram: string | null;
@@ -48,13 +56,6 @@ const props = defineProps<{
         created_at: string;
         is_verified?: boolean;
     };
-    stats?: {
-        questionsCount: number;
-        answersCount: number;
-        blogsCount: number;
-        sharedResourcesCount: number;
-        totalBlogViews: number;
-    };
     appreciationsCount: number;
     appreciatingCount: number;
     isAppreciated: boolean;
@@ -201,6 +202,28 @@ const props = defineProps<{
         about: string | null;
         is_verified?: boolean;
     }>;
+    studyHeatmap?: {
+        heatmapData: HeatmapItem[];
+        stats: TrackerStats;
+    };
+    syllabusProgress?: {
+        course: string;
+        overallPercent: number;
+        completedChapters: number;
+        totalChapters: number;
+        subjects: Array<{
+            id: number;
+            name: string;
+            english_name?: string | null;
+            slug: string;
+            course: string;
+            tailwind_format: string;
+            icon: string;
+            completed: number;
+            total: number;
+            percent: number;
+        }>;
+    };
 }>();
 
 const page = usePage();
@@ -209,6 +232,7 @@ const isOwnProfile = computed(
     () => currentUser.value?.id === props.profileUser.id,
 );
 
+const showSyllabusModal = ref(false);
 const activeTab = ref<'forum' | 'blogs' | 'activity'>('forum');
 const forumSubTab = ref<'questions' | 'answers'>('questions');
 
@@ -652,113 +676,79 @@ const timeAgo = formatTimeAgo;
                 </div>
             </div>
 
-            <!-- Unlocked Activity & Stats Section -->
+            <!-- Unlocked Activity & Heatmap Section -->
             <template v-if="!isLocked">
-                <!-- Stats Metrics Row (4 Cards Grid: Questions, Answers, Articles, Shared Files) -->
-                <div class="grid grid-cols-2 gap-2.5 sm:grid-cols-4 sm:gap-3">
-                    <!-- Questions Asked -->
-                    <div
-                        class="rounded-xl border border-slate-200/80 bg-white p-3 shadow-xs sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center gap-2.5">
-                            <div
-                                class="flex h-7.5 w-7.5 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <HelpCircle class="h-4 w-4 stroke-[2.2]" />
-                            </div>
-                            <div class="min-w-0">
-                                <p
-                                    class="text-sm font-black text-slate-900 dark:text-gray-100"
-                                >
-                                    {{ stats?.questionsCount ?? 0 }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] font-medium text-slate-400 dark:text-gray-500"
-                                >
-                                    Questions
-                                </p>
-                            </div>
-                        </div>
-                    </div>
+                <!-- Syllabus Completion Progress Card (Ultra-Minimal) -->
+                <div
+                    v-if="
+                        syllabusProgress && syllabusProgress.totalChapters > 0
+                    "
+                    @click="showSyllabusModal = true"
+                    class="group relative flex cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-xl border border-slate-200/80 bg-white px-4 py-3 shadow-2xs transition-all duration-150 hover:border-slate-300 sm:rounded-2xl sm:px-4.5 sm:py-3.5 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+                >
+                    <!-- Left: Percentage + Label + Meta -->
+                    <div class="flex min-w-0 items-center gap-2 sm:gap-2.5">
+                        <span
+                            class="text-xs font-black text-indigo-600 sm:text-sm dark:text-indigo-400"
+                        >
+                            {{ syllabusProgress.overallPercent }}%
+                        </span>
 
-                    <!-- Answers Given -->
-                    <div
-                        class="rounded-xl border border-slate-200/80 bg-white p-3 shadow-xs sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center gap-2.5">
-                            <div
-                                class="flex h-7.5 w-7.5 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400"
-                            >
-                                <MessageSquareCheck
-                                    class="h-4 w-4 stroke-[2.2]"
-                                />
-                            </div>
-                            <div class="min-w-0">
-                                <p
-                                    class="text-sm font-black text-slate-900 dark:text-gray-100"
-                                >
-                                    {{ stats?.answersCount ?? 0 }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] font-medium text-slate-400 dark:text-gray-500"
-                                >
-                                    Answers
-                                </p>
-                            </div>
-                        </div>
-                    </div>
+                        <span
+                            class="text-slate-300 select-none dark:text-gray-700"
+                            >·</span
+                        >
 
-                    <!-- Articles Published -->
-                    <div
-                        class="rounded-xl border border-slate-200/80 bg-white p-3 shadow-xs sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center gap-2.5">
-                            <div
-                                class="flex h-7.5 w-7.5 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950/60 dark:text-blue-400"
-                            >
-                                <FileText class="h-4 w-4 stroke-[2.2]" />
-                            </div>
-                            <div class="min-w-0">
-                                <p
-                                    class="text-sm font-black text-slate-900 dark:text-gray-100"
-                                >
-                                    {{ stats?.blogsCount ?? 0 }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] font-medium text-slate-400 dark:text-gray-500"
-                                >
-                                    Articles
-                                </p>
-                            </div>
-                        </div>
+                        <span
+                            class="truncate text-xs font-semibold text-slate-800 dark:text-gray-200"
+                        >
+                            Syllabus Completed ({{
+                                syllabusProgress.course.toUpperCase()
+                            }})
+                        </span>
+
+                        <span
+                            class="hidden text-xs text-slate-400 sm:inline dark:text-gray-500"
+                        >
+                            ({{ syllabusProgress.completedChapters }}/{{
+                                syllabusProgress.totalChapters
+                            }}
+                            chapters)
+                        </span>
                     </div>
 
-                    <!-- Shared Files -->
-                    <div
-                        class="rounded-xl border border-slate-200/80 bg-white p-3 shadow-xs sm:rounded-2xl dark:border-gray-800 dark:bg-gray-900"
-                    >
-                        <div class="flex items-center gap-2.5">
+                    <!-- Right: Inline Progress Bar + Chevron -->
+                    <div class="flex shrink-0 items-center gap-2.5">
+                        <div
+                            class="h-1.5 w-20 overflow-hidden rounded-full bg-slate-100 sm:w-32 dark:bg-gray-800"
+                        >
                             <div
-                                class="flex h-7.5 w-7.5 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400"
-                            >
-                                <UploadCloud class="h-4 w-4 stroke-[2.2]" />
-                            </div>
-                            <div class="min-w-0">
-                                <p
-                                    class="text-sm font-black text-slate-900 dark:text-gray-100"
-                                >
-                                    {{ stats?.sharedResourcesCount ?? 0 }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] font-medium text-slate-400 dark:text-gray-500"
-                                >
-                                    Shared Files
-                                </p>
-                            </div>
+                                class="h-full rounded-full bg-gradient-to-r from-indigo-500 to-emerald-400 transition-all duration-500"
+                                :style="{
+                                    width: `${syllabusProgress.overallPercent}%`,
+                                }"
+                            />
                         </div>
+
+                        <ChevronRight
+                            class="h-3.5 w-3.5 text-slate-400 transition-transform group-hover:translate-x-0.5 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover:text-indigo-400"
+                        />
                     </div>
                 </div>
 
+                <!-- Study Activity Heatmap Graph (GitHub Style) -->
+                <div
+                    v-if="
+                        studyHeatmap?.heatmapData &&
+                        studyHeatmap.heatmapData.length > 0
+                    "
+                >
+                    <StudyHeatmap
+                        :heatmap-data="studyHeatmap.heatmapData"
+                        :stats="studyHeatmap.stats"
+                    />
+                </div>
+
                 <!-- Tabbed Content Section (3 Tabs: Forum, Articles, Activity) -->
                 <div class="space-y-3.5">
                     <!-- Navigation Tabs Bar -->
@@ -1803,4 +1793,87 @@ const timeAgo = formatTimeAgo;
             </div>
         </template>
     </BaseModal>
+
+    <!-- Syllabus Breakdown Modal -->
+    <BaseModal
+        v-if="syllabusProgress"
+        :is-open="showSyllabusModal"
+        :title="`${profileUser.name}'s Syllabus Progress`"
+        :description="`${syllabusProgress.overallPercent}% completed (${syllabusProgress.completedChapters}/${syllabusProgress.totalChapters} chapters in ${syllabusProgress.course.toUpperCase()})`"
+        max-width="lg"
+        @close="showSyllabusModal = false"
+    >
+        <div class="max-h-[70vh] space-y-3 overflow-y-auto p-4 sm:p-6">
+            <div
+                v-for="subj in syllabusProgress.subjects"
+                :key="subj.id"
+                class="rounded-2xl border border-slate-100 bg-slate-50/60 p-3.5 sm:p-4 dark:border-gray-800/80 dark:bg-gray-800/40"
+            >
+                <div class="flex items-center justify-between gap-3">
+                    <div class="flex min-w-0 items-center gap-3">
+                        <div
+                            :class="[
+                                subj.tailwind_format ||
+                                    'bg-indigo-50 text-indigo-600',
+                                'flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-black/5 dark:border-white/10',
+                            ]"
+                        >
+                            <SubjectIcon
+                                :name="subj.icon"
+                                class-name="h-4.5 w-4.5 stroke-[2]"
+                            />
+                        </div>
+                        <div class="min-w-0">
+                            <h4
+                                class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
+                            >
+                                {{ subj.name }}
+                            </h4>
+                            <p
+                                v-if="subj.english_name"
+                                class="truncate text-[11px] text-slate-400 dark:text-gray-500"
+                            >
+                                {{ subj.english_name }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="shrink-0 text-right">
+                        <span
+                            class="text-xs font-extrabold text-slate-900 dark:text-gray-100"
+                        >
+                            {{ subj.percent }}%
+                        </span>
+                        <p
+                            class="text-[10px] text-slate-400 dark:text-gray-500"
+                        >
+                            {{ subj.completed }}/{{ subj.total }} Chapters
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Progress Bar -->
+                <div
+                    class="mt-2.5 h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-gray-700"
+                >
+                    <div
+                        class="h-full rounded-full bg-indigo-600 transition-all duration-300 dark:bg-indigo-400"
+                        :style="{ width: `${subj.percent}%` }"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex items-center justify-end">
+                <button
+                    type="button"
+                    @click="showSyllabusModal = false"
+                    class="cursor-pointer rounded-xl border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                    Close
+                </button>
+            </div>
+        </template>
+    </BaseModal>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 007873ba..cbf7bc9c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -13,6 +13,7 @@
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ResourceController;
 use App\Http\Controllers\ShortUrlController;
+use App\Http\Controllers\StudyTrackerController;
 use App\Http\Controllers\SubjectController;
 use App\Http\Controllers\SupportTicketController;
 use App\Http\Controllers\UserProfileController;
@@ -34,6 +35,10 @@
     Route::post('/blogs/{blog}/comments', [BlogController::class, 'storeComment'])->name('blogs.comments.store');
     Route::delete('/blogs/comments/{comment}', [BlogController::class, 'destroyComment'])->name('blogs.comments.destroy');
     Route::post('/resources/{resource}/complete', [ResourceController::class, 'toggleComplete'])->name('resources.complete');
+    Route::post('/tracker/nodes/{node}/toggle', [StudyTrackerController::class, 'toggleNode'])->name('tracker.nodes.toggle');
+    Route::post('/tracker/log-time', [StudyTrackerController::class, 'logTime'])->name('tracker.log-time');
+    Route::post('/tracker/reset-today', [StudyTrackerController::class, 'resetToday'])->name('tracker.reset-today');
+    Route::post('/tracker/curriculum', [StudyTrackerController::class, 'updateCurriculum'])->name('tracker.curriculum');
     Route::post('/nodes/{node}/vote', [NodeController::class, 'vote'])->name('nodes.vote');
     Route::post('/u/{user}/appreciate', [UserProfileController::class, 'toggleAppreciate'])->name('user.appreciate');
     Route::post('/u/{user}/poke', [UserProfileController::class, 'poke'])->name('user.poke');
@@ -109,6 +114,7 @@
     Route::get('/forum/questions/{post:slug}', [ForumController::class, 'show'])->name('forum.show');
     Route::get('/chat', [ChatController::class, 'index'])->name('chat.index');
     Route::get('/peers', [PeerController::class, 'index'])->name('peers.index');
+    Route::get('/tracker', [StudyTrackerController::class, 'index'])->name('tracker.index');
     Route::get('/u/{username}', [UserProfileController::class, 'show'])->name('user.profile');
 
     Route::get('/', [SubjectController::class, 'index'])
diff --git a/tests/Feature/StudyTrackerTest.php b/tests/Feature/StudyTrackerTest.php
new file mode 100644
index 00000000..5aa2d49b
--- /dev/null
+++ b/tests/Feature/StudyTrackerTest.php
@@ -0,0 +1,250 @@
+<?php
+
+use App\Models\DailyStudyLog;
+use App\Models\Node;
+use App\Models\NodeCompletion;
+use App\Models\Subject;
+use App\Models\User;
+use Carbon\Carbon;
+
+test('guests can view tracker page with subjects', function () {
+    $subject = Subject::create([
+        'name' => 'Physics',
+        'slug' => 'physics',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-indigo-500',
+        'icon' => 'atom',
+    ]);
+    Node::create([
+        'subject_id' => $subject->id,
+        'name' => 'Chapter 1',
+        'slug' => 'chapter-1',
+    ]);
+
+    $this->get('/tracker')
+        ->assertOk();
+});
+
+test('authenticated user can view tracker page with stats and completions', function () {
+    $user = User::factory()->create();
+    $subject = Subject::create([
+        'name' => 'Chemistry',
+        'slug' => 'chemistry',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-emerald-500',
+        'icon' => 'flask',
+    ]);
+    $node = Node::create([
+        'subject_id' => $subject->id,
+        'name' => 'Organic Chemistry',
+        'slug' => 'organic-chem',
+    ]);
+    NodeCompletion::create([
+        'user_id' => $user->id,
+        'node_id' => $node->id,
+    ]);
+    DailyStudyLog::create([
+        'user_id' => $user->id,
+        'study_date' => Carbon::today()->format('Y-m-d'),
+        'total_seconds' => 3600,
+    ]);
+
+    $this->actingAs($user)
+        ->get('/tracker')
+        ->assertOk();
+});
+
+test('guests cannot toggle node completion or log study time', function () {
+    $subject = Subject::create([
+        'name' => 'Math',
+        'slug' => 'math',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-indigo-500',
+        'icon' => 'calculator',
+    ]);
+    $node = Node::create([
+        'subject_id' => $subject->id,
+        'name' => 'Calculus',
+        'slug' => 'calculus',
+    ]);
+
+    $this->post("/tracker/nodes/{$node->id}/toggle")
+        ->assertRedirect();
+
+    $this->post('/tracker/log-time', ['seconds' => 1200])
+        ->assertRedirect();
+
+    expect(NodeCompletion::count())->toBe(0);
+    expect(DailyStudyLog::count())->toBe(0);
+});
+
+test('authenticated user can toggle node completion multiple times (idempotent toggling)', function () {
+    $user = User::factory()->create();
+    $subject = Subject::create([
+        'name' => 'Biology',
+        'slug' => 'biology',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-emerald-500',
+        'icon' => 'dna',
+    ]);
+    $node = Node::create([
+        'subject_id' => $subject->id,
+        'name' => 'Cell Structure',
+        'slug' => 'cell-structure',
+    ]);
+
+    // First toggle: complete
+    $this->actingAs($user)
+        ->post("/tracker/nodes/{$node->id}/toggle")
+        ->assertRedirect();
+
+    $this->assertDatabaseHas('node_completions', [
+        'user_id' => $user->id,
+        'node_id' => $node->id,
+    ]);
+
+    // Second toggle: uncomplete
+    $this->actingAs($user)
+        ->post("/tracker/nodes/{$node->id}/toggle")
+        ->assertRedirect();
+
+    $this->assertDatabaseMissing('node_completions', [
+        'user_id' => $user->id,
+        'node_id' => $node->id,
+    ]);
+});
+
+test('authenticated user can log study time cumulatively for today', function () {
+    $user = User::factory()->create();
+
+    // Log 25 minutes
+    $this->actingAs($user)
+        ->post('/tracker/log-time', ['seconds' => 1500])
+        ->assertRedirect();
+
+    $this->assertDatabaseHas('daily_study_logs', [
+        'user_id' => $user->id,
+        'study_date' => Carbon::today()->format('Y-m-d'),
+        'total_seconds' => 1500,
+    ]);
+
+    // Increment with another 15 minutes
+    $this->actingAs($user)
+        ->post('/tracker/log-time', ['seconds' => 900])
+        ->assertRedirect();
+
+    $this->assertDatabaseHas('daily_study_logs', [
+        'user_id' => $user->id,
+        'study_date' => Carbon::today()->format('Y-m-d'),
+        'total_seconds' => 2400,
+    ]);
+});
+
+test('tracker only includes trackable subjects and trackable nodes flatly', function () {
+    $trackableSubject = Subject::create([
+        'name' => 'Trackable Subject',
+        'slug' => 'trackable-subject',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-indigo-500',
+        'icon' => 'atom',
+        'is_trackable' => true,
+    ]);
+
+    $untrackableSubject = Subject::create([
+        'name' => 'Untrackable Subject',
+        'slug' => 'untrackable-subject',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-slate-500',
+        'icon' => 'atom',
+        'is_trackable' => false,
+    ]);
+
+    $rootFolderUntrackable = Node::create([
+        'subject_id' => $trackableSubject->id,
+        'name' => 'Poem Folder',
+        'slug' => 'poem-folder',
+        'is_trackable' => false,
+    ]);
+
+    $childChapterTrackable = Node::create([
+        'subject_id' => $trackableSubject->id,
+        'parent_id' => $rootFolderUntrackable->id,
+        'name' => 'Real Chapter 1',
+        'slug' => 'real-chapter-1',
+        'is_trackable' => true,
+    ]);
+
+    $response = $this->get('/tracker?course=hsc');
+    $response->assertOk();
+
+    $page = $response->original->getData()['page'];
+    $subjects = $page['props']['subjects'];
+
+    expect(count($subjects))->toBe(1);
+    expect($subjects[0]['id'])->toBe($trackableSubject->id);
+    expect(count($subjects[0]['nodes']))->toBe(1);
+    expect($subjects[0]['nodes'][0]['id'])->toBe($childChapterTrackable->id);
+    expect($subjects[0]['nodes'][0]['name'])->toBe('Real Chapter 1');
+});
+
+test('authenticated user can reset today study time', function () {
+    $user = User::factory()->create();
+    $todayStr = Carbon::today()->format('Y-m-d');
+
+    DailyStudyLog::create([
+        'user_id' => $user->id,
+        'study_date' => $todayStr,
+        'total_seconds' => 5000,
+    ]);
+
+    $this->actingAs($user)
+        ->post('/tracker/reset-today')
+        ->assertRedirect();
+
+    $log = DailyStudyLog::where('user_id', $user->id)->where('study_date', $todayStr)->first();
+    expect($log->total_seconds)->toBe(0);
+});
+
+test('switching curriculum updates user profile and clears full chapter track', function () {
+    $user = User::factory()->create(['curriculum' => 'hsc']);
+
+    $subject = Subject::create([
+        'name' => 'Physics',
+        'slug' => 'physics',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-indigo-500',
+        'icon' => 'atom',
+        'is_trackable' => true,
+    ]);
+
+    $node = Node::create([
+        'subject_id' => $subject->id,
+        'name' => 'Vector',
+        'slug' => 'vector',
+        'is_trackable' => true,
+    ]);
+
+    NodeCompletion::create([
+        'user_id' => $user->id,
+        'node_id' => $node->id,
+    ]);
+
+    expect(NodeCompletion::where('user_id', $user->id)->count())->toBe(1);
+
+    $this->actingAs($user)
+        ->post('/tracker/curriculum', ['curriculum' => 'ssc'])
+        ->assertRedirect('/tracker');
+
+    expect($user->fresh()->curriculum)->toBe('ssc');
+    expect(NodeCompletion::where('user_id', $user->id)->count())->toBe(0);
+});
+
+test('tracker renders user curriculum for authenticated user', function () {
+    $user = User::factory()->create(['curriculum' => 'ssc']);
+
+    $response = $this->actingAs($user)->get('/tracker');
+    $response->assertOk();
+
+    $page = $response->original->getData()['page'];
+    expect($page['props']['course'])->toBe('ssc');
+});
diff --git a/tests/Feature/UserActivityPrivacyTest.php b/tests/Feature/UserActivityPrivacyTest.php
index 72507299..28ceae32 100644
--- a/tests/Feature/UserActivityPrivacyTest.php
+++ b/tests/Feature/UserActivityPrivacyTest.php
@@ -20,7 +20,6 @@
         ->assertInertia(fn ($page) => $page
             ->component('User/Show')
             ->where('isLocked', false)
-            ->where('stats.questionsCount', 1)
             ->has('forumPosts', 1)
         );
 });
@@ -45,7 +44,6 @@
             ->component('User/Show')
             ->where('isLocked', true)
             ->where('lockReason', 'private')
-            ->missing('stats')
             ->missing('forumPosts')
         );
 });
@@ -67,7 +65,6 @@
         ->assertInertia(fn ($page) => $page
             ->component('User/Show')
             ->where('isLocked', false)
-            ->where('stats.questionsCount', 1)
             ->has('forumPosts', 1)
         );
 });
@@ -92,7 +89,6 @@
             ->component('User/Show')
             ->where('isLocked', true)
             ->where('lockReason', 'appreciators_only')
-            ->missing('stats')
             ->missing('forumPosts')
         );
 });
@@ -117,7 +113,6 @@
         ->assertInertia(fn ($page) => $page
             ->component('User/Show')
             ->where('isLocked', false)
-            ->where('stats.questionsCount', 1)
             ->has('forumPosts', 1)
         );
 });
diff --git a/tests/Feature/UserProfileTest.php b/tests/Feature/UserProfileTest.php
index 666d383e..d9c01391 100644
--- a/tests/Feature/UserProfileTest.php
+++ b/tests/Feature/UserProfileTest.php
@@ -5,6 +5,7 @@
 use App\Models\ForumAnswer;
 use App\Models\ForumPost;
 use App\Models\Node;
+use App\Models\NodeCompletion;
 use App\Models\Subject;
 use App\Models\User;
 use Illuminate\Support\Facades\Storage;
@@ -58,7 +59,6 @@
     $response->assertInertia(fn ($page) => $page
         ->component('User/Show')
         ->where('profileUser.is_verified', true)
-        ->where('stats.blogsCount', 1)
         ->has('blogs', 1)
         ->where('blogs.0.title', 'Calculus Masterclass')
     );
@@ -99,8 +99,6 @@
     $response->assertOk();
     $response->assertInertia(fn ($page) => $page
         ->component('User/Show')
-        ->where('stats.questionsCount', 1)
-        ->where('stats.answersCount', 1)
         ->has('forumPosts', 1)
         ->where('forumPosts.0.title', 'How to calculate cross product angle?')
         ->has('forumAnswers', 1)
@@ -146,8 +144,6 @@
     $response->assertOk();
     $response->assertInertia(fn ($page) => $page
         ->component('User/Show')
-        ->where('stats.questionsCount', 0)
-        ->where('stats.answersCount', 0)
         ->has('forumPosts', 0)
         ->has('forumAnswers', 0)
         ->has('recentActivities.forum_posts', 0)
@@ -276,3 +272,65 @@
     $user2 = User::factory()->create(['image_path' => null]);
     expect($user2->image_url)->toBeNull();
 });
+
+test('public profile accurately displays syllabus progress and subject breakdown', function () {
+    $user = User::factory()->create([
+        'username' => 'syllabus_master',
+        'curriculum' => 'hsc',
+    ]);
+
+    $subject1 = Subject::create([
+        'name' => 'Physics 1st Paper',
+        'slug' => 'physics-1st',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-indigo-500',
+        'icon' => 'atom',
+        'is_trackable' => true,
+    ]);
+
+    $subject2 = Subject::create([
+        'name' => 'Chemistry 1st Paper',
+        'slug' => 'chemistry-1st',
+        'course' => 'hsc',
+        'tailwind_format' => 'bg-emerald-500',
+        'icon' => 'flask',
+        'is_trackable' => true,
+    ]);
+
+    $node1 = Node::create([
+        'subject_id' => $subject1->id,
+        'name' => 'Vector',
+        'slug' => 'vector',
+        'is_trackable' => true,
+    ]);
+
+    $node2 = Node::create([
+        'subject_id' => $subject1->id,
+        'name' => 'Dynamics',
+        'slug' => 'dynamics',
+        'is_trackable' => true,
+    ]);
+
+    $node3 = Node::create([
+        'subject_id' => $subject2->id,
+        'name' => 'Qualitative Chemistry',
+        'slug' => 'qualitative-chem',
+        'is_trackable' => true,
+    ]);
+
+    // Complete 1 out of 2 for Physics, 1 out of 1 for Chemistry => 2 / 3 total = 67%
+    NodeCompletion::create(['user_id' => $user->id, 'node_id' => $node1->id]);
+    NodeCompletion::create(['user_id' => $user->id, 'node_id' => $node3->id]);
+
+    $response = $this->get('/u/syllabus_master');
+    $response->assertOk();
+    $response->assertInertia(fn ($page) => $page
+        ->component('User/Show')
+        ->where('syllabusProgress.overallPercent', 67)
+        ->where('syllabusProgress.completedChapters', 2)
+        ->where('syllabusProgress.totalChapters', 3)
+        ->has('syllabusProgress.subjects', 2)
+        ->where('syllabusProgress.subjects.0.percent', 50)
+        ->where('syllabusProgress.subjects.1.percent', 100)
+    );
+});