diff --git a/app/Http/Controllers/ForumController.php b/app/Http/Controllers/ForumController.php
index c4b24077..9b5ccba7 100644
--- a/app/Http/Controllers/ForumController.php
+++ b/app/Http/Controllers/ForumController.php
@@ -65,8 +65,9 @@ public function index(Request $request): Response
         }
 
         $subjects = Cache::remember('forum_filter_subjects', now()->addDay(), function () {
-            return Subject::select('id', 'name', 'course', 'slug')
-                ->with(['nodes' => fn ($q) => $q->whereNull('parent_id')->select('id', 'subject_id', 'name', 'slug')->orderBy('sort_order')])
+            return Subject::where('is_trackable', true)
+                ->select('id', 'name', 'course', 'slug')
+                ->with(['nodes' => fn ($q) => $q->where('is_trackable', true)->select('id', 'subject_id', 'name', 'slug')->orderBy('sort_order')])
                 ->orderBy('sort_order')
                 ->get()
                 ->toArray();
@@ -182,8 +183,9 @@ public function create(): Response|RedirectResponse
         }
 
         $subjects = Cache::remember('forum_filter_subjects', now()->addDay(), function () {
-            return Subject::select('id', 'name', 'course', 'slug')
-                ->with(['nodes' => fn ($q) => $q->whereNull('parent_id')->select('id', 'subject_id', 'name', 'slug')->orderBy('sort_order')])
+            return Subject::where('is_trackable', true)
+                ->select('id', 'name', 'course', 'slug')
+                ->with(['nodes' => fn ($q) => $q->where('is_trackable', true)->select('id', 'subject_id', 'name', 'slug')->orderBy('sort_order')])
                 ->orderBy('sort_order')
                 ->get()
                 ->toArray();
diff --git a/app/Http/Controllers/StudyTrackerController.php b/app/Http/Controllers/StudyTrackerController.php
index 17f647cf..77f165d8 100644
--- a/app/Http/Controllers/StudyTrackerController.php
+++ b/app/Http/Controllers/StudyTrackerController.php
@@ -18,17 +18,41 @@ public function index(Request $request): Response
         $user = $request->user();
         $course = $user?->curriculum ?: 'hsc';
         $group = $user?->group ?: 'science';
+        $optionalSubjectIds = (array) ($user?->optional_subject_ids ?? []);
 
-        $subjects = Subject::where('course', $course)
+        $subjectsQuery = Subject::where('course', $course)
             ->where('is_trackable', true)
-            ->whereIn('group', [$group, 'common'])
-            ->orderBy('sort_order', 'asc')
+            ->where(function ($query) use ($group, $optionalSubjectIds) {
+                $query->where(function ($q) use ($group) {
+                    $q->where('is_optional', false)
+                        ->whereIn('group', [$group, 'common']);
+                });
+
+                if (! empty($optionalSubjectIds)) {
+                    $query->orWhere(function ($q) use ($group, $optionalSubjectIds) {
+                        $q->where('is_optional', true)
+                            ->whereIn('group', [$group, 'common'])
+                            ->whereIn('id', $optionalSubjectIds);
+                    });
+                }
+            })
+            ->orderBy('sort_order', 'asc');
+
+        $subjects = $subjectsQuery
             ->with(['nodes' => function ($query) {
                 $query->where('is_trackable', true)
+                    ->with('parent:id,name,sort_order')
                     ->orderBy('sort_order', 'asc')
-                    ->select('id', 'subject_id', 'name', 'slug', 'sort_order', 'weight');
+                    ->select('id', 'subject_id', 'parent_id', 'name', 'slug', 'sort_order', 'weight');
             }])
-            ->get(['id', 'name', 'slug', 'course', 'group', 'sort_order'])
+            ->get(['id', 'name', 'slug', 'course', 'group', 'sort_order', 'is_optional'])
+            ->toArray();
+
+        // All trackable optional subjects for curriculum modal (so user can toggle optional subjects on/off)
+        $groupSubjects = Subject::where('is_trackable', true)
+            ->where('is_optional', true)
+            ->orderBy('sort_order', 'asc')
+            ->get(['id', 'name', 'course', 'group', 'is_optional'])
             ->toArray();
 
         if (! $user) {
@@ -36,6 +60,8 @@ public function index(Request $request): Response
                 'course' => $course,
                 'group' => $group,
                 'subjects' => $subjects,
+                'optionalSubjectIds' => [],
+                'optionalSubjects' => $groupSubjects,
                 'completedNodeIds' => [],
                 'todaySeconds' => 0,
                 'stats' => [
@@ -64,6 +90,8 @@ public function index(Request $request): Response
             'course' => $course,
             'group' => $group,
             'subjects' => $subjects,
+            'optionalSubjectIds' => $optionalSubjectIds,
+            'optionalSubjects' => $groupSubjects,
             'completedNodeIds' => $completedNodeIds,
             'todaySeconds' => $todaySeconds,
             'stats' => $studyData['stats'],
@@ -147,9 +175,15 @@ public function updateCurriculum(Request $request)
         $validated = $request->validate([
             'curriculum' => 'required|string|in:hsc,ssc',
             'group' => 'required|string|in:science,humanities,commerce',
+            'optional_subject_ids' => 'nullable|array',
+            'optional_subject_ids.*' => 'integer|exists:subjects,id',
         ]);
 
-        $request->user()->update($validated);
+        $request->user()->update([
+            'curriculum' => $validated['curriculum'],
+            'group' => $validated['group'],
+            'optional_subject_ids' => $validated['optional_subject_ids'] ?? [],
+        ]);
 
         return redirect()->route('tracker.index')
             ->with('success', 'Curriculum updated to '.strtoupper($validated['curriculum']).' ('.ucfirst($validated['group']).').');
diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index 2e78090a..49cbe3c3 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -393,14 +393,32 @@ private function getSyllabusProgress(User $user): array
     {
         $course = $user->curriculum ?: 'hsc';
         $group = $user->group ?: 'science';
-        $trackableSubjects = Subject::where('course', $course)
+        $optionalSubjectIds = (array) ($user->optional_subject_ids ?? []);
+
+        $subjectsQuery = Subject::where('course', $course)
             ->where('is_trackable', true)
-            ->whereIn('group', [$group, 'common'])
-            ->orderBy('sort_order', 'asc')
+            ->where(function ($query) use ($group, $optionalSubjectIds) {
+                $query->where(function ($q) use ($group) {
+                    $q->where('is_optional', false)
+                        ->whereIn('group', [$group, 'common']);
+                });
+
+                if (! empty($optionalSubjectIds)) {
+                    $query->orWhere(function ($q) use ($group, $optionalSubjectIds) {
+                        $q->where('is_optional', true)
+                            ->whereIn('group', [$group, 'common'])
+                            ->whereIn('id', $optionalSubjectIds);
+                    });
+                }
+            })
+            ->orderBy('sort_order', 'asc');
+
+        $trackableSubjects = $subjectsQuery
             ->with(['nodes' => function ($query) {
                 $query->where('is_trackable', true)
+                    ->with('parent:id,name,sort_order')
                     ->orderBy('sort_order', 'asc')
-                    ->select('id', 'subject_id', 'name', 'slug', 'sort_order', 'weight');
+                    ->select('id', 'subject_id', 'parent_id', 'name', 'slug', 'sort_order', 'weight');
             }])
             ->get(['id', 'name', 'slug', 'course', 'tailwind_format', 'icon', 'sort_order']);
 
@@ -439,6 +457,12 @@ private function getSyllabusProgress(User $user): array
                     'name' => $node->name,
                     'weight' => $nodeWeight,
                     'is_completed' => $isDone,
+                    'parent_id' => $node->parent_id,
+                    'parent' => $node->parent ? [
+                        'id' => $node->parent->id,
+                        'name' => $node->parent->name,
+                        'sort_order' => $node->parent->sort_order,
+                    ] : null,
                 ];
             }
 
diff --git a/app/Models/Subject.php b/app/Models/Subject.php
index 32be626d..41691ec6 100644
--- a/app/Models/Subject.php
+++ b/app/Models/Subject.php
@@ -12,6 +12,7 @@ protected function casts(): array
     {
         return [
             'is_trackable' => 'boolean',
+            'is_optional' => 'boolean',
         ];
     }
 
diff --git a/app/Models/User.php b/app/Models/User.php
index d008dffa..99e9c875 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -59,6 +59,7 @@ class User extends Authenticatable
         'facebook',
         'instagram',
         'github',
+        'optional_subject_ids',
         'last_active_at',
         'last_seen_at',
     ];
@@ -121,6 +122,7 @@ protected function casts(): array
             'is_verified' => 'boolean',
             'priority' => 'integer',
             'allow_pokes' => 'boolean',
+            'optional_subject_ids' => 'array',
         ];
     }
 
diff --git a/database/migrations/2026_10_13_155150_add_is_optional_to_subjects_and_optional_subject_ids_to_users.php b/database/migrations/2026_10_13_155150_add_is_optional_to_subjects_and_optional_subject_ids_to_users.php
new file mode 100644
index 00000000..7ef66a88
--- /dev/null
+++ b/database/migrations/2026_10_13_155150_add_is_optional_to_subjects_and_optional_subject_ids_to_users.php
@@ -0,0 +1,63 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\DB;
+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_optional')->default(false)->after('is_trackable');
+        });
+
+        Schema::table('users', function (Blueprint $table) {
+            $table->json('optional_subject_ids')->nullable()->after('group');
+        });
+
+        // Seed initial known optional subjects by unique slug:
+        $optionalSlugs = [
+            // HSC Science
+            'hsc-hmath-1st',
+            'hsc-hmath-2nd',
+            'hsc-biology-1st',
+            'hsc-biology-2nd',
+            // SSC Science
+            'ssc-biology',
+            'ssc-higher-math',
+            // HSC Commerce
+            'hsc-finance-1st',
+            'hsc-finance-2nd',
+            'hsc-marketing-1st',
+            'hsc-marketing-2nd',
+            // HSC Humanities
+            'hsc-economics-1st',
+            'hsc-economics-2nd',
+            'hsc-logic-1st',
+            'hsc-logic-2nd',
+            'hsc-islamic-history-1st',
+            'hsc-islamic-history-2nd',
+        ];
+
+        DB::table('subjects')->whereIn('slug', $optionalSlugs)->update(['is_optional' => true]);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('optional_subject_ids');
+        });
+
+        Schema::table('subjects', function (Blueprint $table) {
+            $table->dropColumn('is_optional');
+        });
+    }
+};
diff --git a/resources/js/components/tracker/SubjectChecklist.vue b/resources/js/components/tracker/SubjectChecklist.vue
index be2da76a..e0d224a0 100644
--- a/resources/js/components/tracker/SubjectChecklist.vue
+++ b/resources/js/components/tracker/SubjectChecklist.vue
@@ -1,25 +1,34 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
 import {
+    ArrowUp,
     BookOpen,
     Check,
     ChevronDown,
+    ChevronRight,
     ChevronUp,
     ExternalLink,
     Loader2,
     Share2,
+    SlidersHorizontal,
 } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import BaseModal from '@/components/BaseModal.vue';
 import SyllabusShareModal from '@/components/tracker/SyllabusShareModal.vue';
 
 export interface TopLevelNode {
     id: number;
     subject_id: number;
+    parent_id?: number | null;
     name: string;
     slug: string;
     sort_order?: number;
     weight?: number;
+    parent?: {
+        id: number;
+        name: string;
+        sort_order?: number;
+    } | null;
 }
 
 export interface SubjectItem {
@@ -31,16 +40,28 @@ export interface SubjectItem {
     nodes: TopLevelNode[];
 }
 
+export interface OptionalSubjectItem {
+    id: number;
+    name: string;
+    course: string;
+    group: string;
+    is_optional: boolean;
+}
+
 interface Props {
     course: 'hsc' | 'ssc';
     group?: 'science' | 'humanities' | 'commerce';
     subjects: SubjectItem[];
+    optionalSubjectIds?: number[];
+    optionalSubjects?: OptionalSubjectItem[];
     completedNodeIds: number[];
     isAuthenticated: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     group: 'science',
+    optionalSubjectIds: () => [],
+    optionalSubjects: () => [],
 });
 
 const emit = defineEmits<{
@@ -63,9 +84,8 @@ const expandedSubjectIds = ref<Set<number>>(new Set());
 
 function toggleExpand(subjectId: number) {
     if (expandedSubjectIds.value.has(subjectId)) {
-        expandedSubjectIds.value.clear();
+        expandedSubjectIds.value.delete(subjectId);
     } else {
-        expandedSubjectIds.value.clear();
         expandedSubjectIds.value.add(subjectId);
     }
 }
@@ -73,16 +93,60 @@ function toggleExpand(subjectId: number) {
 const showSwitchConfirmModal = ref(false);
 const pendingCurriculum = ref<'hsc' | 'ssc'>(props.course);
 const pendingGroup = ref<'science' | 'humanities' | 'commerce'>(props.group);
+const pendingOptionalSubjectIds = ref<Set<number>>(
+    new Set(props.optionalSubjectIds),
+);
 const isSwitching = ref(false);
 
 watch(
-    () => [props.course, props.group] as const,
-    ([newCourse, newGroup]) => {
+    () => [props.course, props.group, props.optionalSubjectIds] as const,
+    ([newCourse, newGroup, newOptionals]) => {
         pendingCurriculum.value = newCourse;
         pendingGroup.value = newGroup;
+        pendingOptionalSubjectIds.value = new Set(newOptionals);
     },
 );
 
+// Optional subjects relevant to the pending curriculum and group
+const relevantOptionalSubjects = computed(() => {
+    return props.optionalSubjects.filter(
+        (s) =>
+            s.course === pendingCurriculum.value &&
+            s.group === pendingGroup.value,
+    );
+});
+
+const selectedOptionalSubjectsCount = computed(() => {
+    return (props.optionalSubjectIds || []).length;
+});
+
+const selectedOptionalSubjectNames = computed(() => {
+    const set = new Set(props.optionalSubjectIds || []);
+
+    return props.optionalSubjects
+        .filter(
+            (s) =>
+                s.course === props.course &&
+                s.group === props.group &&
+                set.has(s.id),
+        )
+        .map((s) => s.name);
+});
+
+const hasAvailableOptionalSubjects = computed(() => {
+    return props.optionalSubjects.some(
+        (s) => s.course === props.course && s.group === props.group,
+    );
+});
+
+function toggleOptionalSubject(subjId: number) {
+    if (pendingOptionalSubjectIds.value.has(subjId)) {
+        pendingOptionalSubjectIds.value.delete(subjId);
+    } else {
+        pendingOptionalSubjectIds.value.add(subjId);
+    }
+}
+
 function openSwitchModal() {
     if (!props.isAuthenticated) {
         emit('require-auth', 'Log in to change your curriculum.');
@@ -92,6 +156,7 @@ function openSwitchModal() {
 
     pendingCurriculum.value = props.course;
     pendingGroup.value = props.group;
+    pendingOptionalSubjectIds.value = new Set(props.optionalSubjectIds);
     showSwitchConfirmModal.value = true;
 }
 
@@ -113,6 +178,7 @@ function confirmSwitchCurriculum() {
         {
             curriculum: pendingCurriculum.value,
             group: pendingGroup.value,
+            optional_subject_ids: Array.from(pendingOptionalSubjectIds.value),
         },
         {
             preserveScroll: true,
@@ -224,6 +290,105 @@ function getSubjectProgress(subject: SubjectItem) {
     return { completed: completedCount, total, percent };
 }
 
+export interface NodeGroup {
+    name: string | null;
+    nodes: TopLevelNode[];
+}
+
+function getSubjectGroups(subject: SubjectItem): NodeGroup[] {
+    const nodes = subject.nodes || [];
+    const hasAnyParent = nodes.some((n) => n.parent_id && n.parent?.name);
+
+    if (!hasAnyParent) {
+        return [{ name: null, nodes }];
+    }
+
+    const groupsMap = new Map<
+        string,
+        { sort: number; nodes: TopLevelNode[] }
+    >();
+    const noParentNodes: TopLevelNode[] = [];
+
+    for (const node of nodes) {
+        if (node.parent?.name) {
+            const parentName = node.parent.name;
+            const parentSort = node.parent.sort_order ?? 999;
+
+            if (!groupsMap.has(parentName)) {
+                groupsMap.set(parentName, { sort: parentSort, nodes: [] });
+            }
+
+            groupsMap.get(parentName)!.nodes.push(node);
+        } else {
+            noParentNodes.push(node);
+        }
+    }
+
+    const result: NodeGroup[] = Array.from(groupsMap.entries())
+        .sort((a, b) => a[1].sort - b[1].sort)
+        .map(([name, data]) => ({ name, nodes: data.nodes }));
+
+    if (noParentNodes.length > 0) {
+        result.push({ name: 'অন্যান্য অধ্যায়', nodes: noParentNodes });
+    }
+
+    return result;
+}
+
+// Collapsed state for sub-groups with names (default: 1st group expanded (index 0), others collapsed)
+const collapsedSubgroups = ref<Set<string>>(new Set());
+
+function isSubgroupExpanded(
+    subjectId: number,
+    groupIndex: number,
+    groupName: string | null,
+): boolean {
+    if (!groupName) {
+        return true;
+    }
+
+    const key = `${subjectId}_${groupName}`;
+
+    if (collapsedSubgroups.value.has(key)) {
+        return false;
+    }
+
+    // Initially expand 1st group (index 0), others collapsed
+    if (groupIndex === 0) {
+        return true;
+    }
+
+    const explicitExpandedKey = `exp_${key}`;
+
+    return collapsedSubgroups.value.has(explicitExpandedKey);
+}
+
+function toggleSubgroup(
+    subjectId: number,
+    groupIndex: number,
+    groupName: string | null,
+) {
+    if (!groupName) {
+        return;
+    }
+
+    const key = `${subjectId}_${groupName}`;
+    const explicitExpandedKey = `exp_${key}`;
+    const currentlyExpanded = isSubgroupExpanded(
+        subjectId,
+        groupIndex,
+        groupName,
+    );
+
+    if (currentlyExpanded) {
+        collapsedSubgroups.value.add(key);
+        collapsedSubgroups.value.delete(explicitExpandedKey);
+    } else {
+        collapsedSubgroups.value.delete(key);
+        collapsedSubgroups.value.add(explicitExpandedKey);
+    }
+}
+
 const page = usePage();
 const authUser = computed(() => page.props.auth?.user);
 const showShareModal = ref(false);
@@ -250,6 +415,35 @@ const shareData = computed(() => {
         })),
     };
 });
+
+// Floating scroll-to-top button
+const showScrollTop = ref(false);
+
+function handleScroll() {
+    const scrollPos =
+        window.scrollY ||
+        document.documentElement?.scrollTop ||
+        document.body?.scrollTop ||
+        0;
+    showScrollTop.value = scrollPos > 250;
+}
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+}
+
+onMounted(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    // Run once on mount in case already scrolled
+    handleScroll();
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
 </script>
 
 <template>
@@ -367,6 +561,75 @@ const shareData = computed(() => {
             </div>
         </div>
 
+        <!-- Optional Subjects Callout Banner -->
+        <div
+            v-if="
+                hasAvailableOptionalSubjects &&
+                selectedOptionalSubjectsCount === 0
+            "
+            class="flex flex-col gap-3 rounded-2xl border border-indigo-200/90 bg-gradient-to-r from-indigo-50/90 via-white to-indigo-50/60 p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-4.5 dark:border-indigo-900/60 dark:bg-gradient-to-r dark:from-indigo-950/40 dark:via-gray-900 dark:to-indigo-950/20"
+        >
+            <div class="flex items-start gap-3 sm:items-center">
+                <span
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-2xs dark:bg-indigo-500"
+                >
+                    <SlidersHorizontal class="h-4.5 w-4.5" />
+                </span>
+                <div>
+                    <h3
+                        class="text-xs font-bold text-slate-900 sm:text-sm dark:text-white"
+                    >
+                        অতিরিক্ত বিষয় নির্বাচন করুন
+                    </h3>
+                    <p
+                        class="mt-0.5 text-[11px] text-slate-600 sm:text-xs dark:text-gray-400"
+                    >
+                        আপনার গ্রুপের ঐচ্ছিক বিষয়গুলো সিলেবাসে যুক্ত করতে
+                        নির্বাচন করুন
+                    </p>
+                </div>
+            </div>
+
+            <button
+                type="button"
+                @click="openSwitchModal"
+                class="inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-bold text-white shadow-2xs transition hover:bg-indigo-700 active:scale-95 dark:bg-indigo-600 dark:hover:bg-indigo-500"
+            >
+                <span>বিষয় নির্বাচন করুন</span>
+                <ChevronRight class="h-3.5 w-3.5" />
+            </button>
+        </div>
+
+        <div
+            v-else-if="
+                hasAvailableOptionalSubjects &&
+                selectedOptionalSubjectsCount > 0
+            "
+            class="flex items-center justify-between rounded-xl border border-slate-200/80 bg-white px-3.5 py-2.5 text-xs shadow-2xs dark:border-gray-800 dark:bg-gray-900"
+        >
+            <div class="flex min-w-0 items-center gap-2">
+                <span
+                    class="flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-emerald-50 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400"
+                >
+                    <Check class="h-3.5 w-3.5 stroke-[2.5]" />
+                </span>
+                <span class="truncate text-slate-600 dark:text-gray-300">
+                    <strong class="font-semibold text-slate-900 dark:text-white"
+                        >অতিরিক্ত বিষয়:</strong
+                    >
+                    {{ selectedOptionalSubjectNames.join(', ') }}
+                </span>
+            </div>
+            <button
+                type="button"
+                @click="openSwitchModal"
+                class="ml-2 inline-flex shrink-0 cursor-pointer items-center gap-1 font-semibold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+            >
+                <span>পরিবর্তন করুন</span>
+                <ChevronRight class="h-3 w-3" />
+            </button>
+        </div>
+
         <!-- Subjects & Chapters List -->
         <div class="flex flex-col gap-3">
             <div
@@ -444,7 +707,7 @@ const shareData = computed(() => {
                 <!-- 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"
+                    class="border-t border-slate-100 px-4.5 py-3 sm:px-5 dark:border-gray-800/80"
                 >
                     <div
                         v-if="subject.nodes.length === 0"
@@ -454,66 +717,121 @@ const shareData = computed(() => {
                     </div>
 
                     <div
-                        v-for="node in subject.nodes"
-                        :key="node.id"
-                        class="group flex items-center justify-between py-2.5 transition"
+                        v-for="(group, gIdx) in getSubjectGroups(subject)"
+                        :key="gIdx"
+                        class="space-y-1"
+                        :class="{
+                            'mt-3 border-t border-slate-100/80 pt-3 dark:border-gray-800/60':
+                                gIdx > 0,
+                        }"
                     >
-                        <!-- Checkbox & Chapter Name -->
+                        <!-- Sub-group Header (collapsible if grouped) -->
                         <div
-                            @click="toggleNodeCompletion(node)"
-                            class="flex flex-1 cursor-pointer items-center gap-3 pr-2 select-none"
+                            v-if="group.name"
+                            @click="
+                                toggleSubgroup(subject.id, gIdx, group.name)
+                            "
+                            class="mb-1.5 flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 text-xs font-bold text-slate-600 transition select-none hover:bg-slate-100/70 dark:text-gray-300 dark:hover:bg-gray-800/60"
                         >
-                            <!-- 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 class="flex items-center gap-2">
+                                <component
+                                    :is="
+                                        isSubgroupExpanded(
+                                            subject.id,
+                                            gIdx,
+                                            group.name,
+                                        )
+                                            ? ChevronDown
+                                            : ChevronRight
+                                    "
+                                    class="h-3.5 w-3.5 text-slate-400 dark:text-gray-500"
                                 />
+                                <span>{{ group.name }}</span>
                             </div>
+                            <span
+                                class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
+                            >
+                                {{
+                                    group.nodes.filter((n) =>
+                                        completedIds.has(n.id),
+                                    ).length
+                                }}/{{ group.nodes.length }}
+                            </span>
+                        </div>
 
-                            <!-- Title + Size Text in Bracket -->
-                            <div class="flex flex-wrap items-center gap-1.5">
-                                <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"
+                        <!-- Chapters under group -->
+                        <div
+                            v-if="
+                                isSubgroupExpanded(subject.id, gIdx, group.name)
+                            "
+                            class="divide-y divide-slate-100 dark:divide-gray-800/60"
+                            :class="{ 'pl-2 sm:pl-3': group.name }"
+                        >
+                            <div
+                                v-for="node in group.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"
                                 >
-                                    {{ node.name }}
-                                </span>
+                                    <!-- 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>
 
-                                <span
-                                    class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
+                                    <!-- Title + Size Text in Bracket -->
+                                    <div
+                                        class="flex flex-wrap items-center gap-1.5"
+                                    >
+                                        <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>
+
+                                        <span
+                                            class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
+                                        >
+                                            ({{
+                                                node.weight === 3
+                                                    ? 'Large Chapter'
+                                                    : node.weight === 1
+                                                      ? 'Small Chapter'
+                                                      : 'Normal Chapter'
+                                            }})
+                                        </span>
+                                    </div>
+                                </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"
                                 >
-                                    ({{
-                                        node.weight === 3
-                                            ? 'Large Chapter'
-                                            : node.weight === 1
-                                              ? 'Small Chapter'
-                                              : 'Normal Chapter'
-                                    }})
-                                </span>
+                                    <ExternalLink class="h-3.5 w-3.5" />
+                                </Link>
                             </div>
                         </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>
@@ -524,7 +842,7 @@ const shareData = computed(() => {
             :is-open="showSwitchConfirmModal"
             title="কারিকুলাম ও বিভাগ পরিবর্তন করুন"
             description="আপনার পড়ার কারিকুলাম লেভেল ও বিভাগ নির্বাচন করুন"
-            max-width="md"
+            max-width="lg"
             @close="showSwitchConfirmModal = false"
         >
             <div class="space-y-4 p-5 text-slate-800 dark:text-gray-200">
@@ -655,6 +973,58 @@ const shareData = computed(() => {
                         </button>
                     </div>
                 </div>
+
+                <!-- Optional Subjects Selection (only if relevant optional subjects exist) -->
+                <div v-if="relevantOptionalSubjects.length > 0">
+                    <div class="mb-2">
+                        <label
+                            class="block text-xs font-bold text-slate-700 dark:text-gray-300"
+                        >
+                            অতিরিক্ত বিষয়সমূহ
+                        </label>
+                        <p
+                            class="text-[11px] text-slate-500 dark:text-gray-400"
+                        >
+                            যে বিষয়গুলো আপনার গ্রুপে আছে সেগুলো নির্বাচন করুন
+                        </p>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                        <button
+                            v-for="subj in relevantOptionalSubjects"
+                            :key="subj.id"
+                            type="button"
+                            @click="toggleOptionalSubject(subj.id)"
+                            :class="[
+                                pendingOptionalSubjectIds.has(subj.id)
+                                    ? 'border-indigo-600 bg-indigo-50/60 text-indigo-950 ring-1 ring-indigo-600 dark:border-indigo-500 dark:bg-indigo-950/40 dark:text-indigo-200'
+                                    : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-800/80 dark:text-gray-300 dark:hover:bg-gray-800',
+                            ]"
+                            class="flex cursor-pointer items-center justify-between rounded-xl border p-2.5 px-3 text-left transition"
+                        >
+                            <span
+                                class="line-clamp-1 text-xs leading-tight font-semibold"
+                            >
+                                {{ subj.name }}
+                            </span>
+                            <span
+                                class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-[10px] font-bold transition"
+                                :class="[
+                                    pendingOptionalSubjectIds.has(subj.id)
+                                        ? 'bg-indigo-600 text-white dark:bg-indigo-500'
+                                        : 'border border-slate-300 bg-transparent text-transparent dark:border-gray-600',
+                                ]"
+                            >
+                                <Check
+                                    v-if="
+                                        pendingOptionalSubjectIds.has(subj.id)
+                                    "
+                                    class="h-3 w-3 stroke-[3]"
+                                />
+                            </span>
+                        </button>
+                    </div>
+                </div>
             </div>
 
             <div
@@ -687,5 +1057,17 @@ const shareData = computed(() => {
 
         <!-- Social Syllabus Share Modal -->
         <SyllabusShareModal v-model="showShareModal" :data="shareData" />
+
+        <!-- Floating Scroll to Top Button -->
+        <button
+            v-if="showScrollTop"
+            type="button"
+            @click="scrollToTop"
+            title="Scroll to top"
+            aria-label="Scroll to top"
+            class="fixed right-4 bottom-[calc(4.5rem+env(safe-area-inset-bottom)+0.5rem)] z-50 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-slate-900/90 text-white shadow-lg ring-1 ring-black/10 backdrop-blur-xs transition duration-150 hover:scale-105 hover:bg-indigo-600 active:scale-95 sm:right-6 sm:bottom-6 sm:h-9.5 sm:w-9.5 dark:bg-gray-800/90 dark:text-gray-100 dark:ring-white/10 dark:hover:bg-indigo-600 dark:hover:text-white"
+        >
+            <ArrowUp class="h-4 w-4 stroke-[2.2]" />
+        </button>
     </div>
 </template>
diff --git a/resources/js/components/tracker/SyllabusBreakdownModal.vue b/resources/js/components/tracker/SyllabusBreakdownModal.vue
index 8a0b5a45..2bc85d99 100644
--- a/resources/js/components/tracker/SyllabusBreakdownModal.vue
+++ b/resources/js/components/tracker/SyllabusBreakdownModal.vue
@@ -17,6 +17,12 @@ export interface SyllabusChapter {
     name: string;
     weight: number;
     is_completed: boolean;
+    parent_id?: number | null;
+    parent?: {
+        id: number;
+        name: string;
+        sort_order?: number;
+    } | null;
 }
 
 export interface SyllabusSubject {
@@ -32,6 +38,11 @@ export interface SyllabusSubject {
     chapters?: SyllabusChapter[];
 }
 
+export interface SyllabusChapterGroup {
+    name: string | null;
+    chapters: SyllabusChapter[];
+}
+
 export interface SyllabusProgressData {
     course: string;
     group?: string;
@@ -67,6 +78,102 @@ const toggleSubjectExpanded = (subjId: number) => {
     }
 };
 
+function getSubjectChapterGroups(
+    subj: SyllabusSubject,
+): SyllabusChapterGroup[] {
+    const chapters = subj.chapters || [];
+    const hasAnyParent = chapters.some((c) => c.parent_id && c.parent?.name);
+
+    if (!hasAnyParent) {
+        return [{ name: null, chapters }];
+    }
+
+    const groupsMap = new Map<
+        string,
+        { sort: number; chapters: SyllabusChapter[] }
+    >();
+    const noParentChapters: SyllabusChapter[] = [];
+
+    for (const chap of chapters) {
+        if (chap.parent?.name) {
+            const parentName = chap.parent.name;
+            const parentSort = chap.parent.sort_order ?? 999;
+
+            if (!groupsMap.has(parentName)) {
+                groupsMap.set(parentName, { sort: parentSort, chapters: [] });
+            }
+
+            groupsMap.get(parentName)!.chapters.push(chap);
+        } else {
+            noParentChapters.push(chap);
+        }
+    }
+
+    const result: SyllabusChapterGroup[] = Array.from(groupsMap.entries())
+        .sort((a, b) => a[1].sort - b[1].sort)
+        .map(([name, data]) => ({ name, chapters: data.chapters }));
+
+    if (noParentChapters.length > 0) {
+        result.push({ name: 'অন্যান্য অধ্যায়', chapters: noParentChapters });
+    }
+
+    return result;
+}
+
+// Collapsed state for sub-groups with names (default: 1st group expanded (index 0), others collapsed)
+const collapsedModalSubgroups = ref<Set<string>>(new Set());
+
+function isModalSubgroupExpanded(
+    subjId: number,
+    groupIndex: number,
+    groupName: string | null,
+): boolean {
+    if (!groupName) {
+        return true;
+    }
+
+    const key = `${subjId}_${groupName}`;
+
+    if (collapsedModalSubgroups.value.has(key)) {
+        return false;
+    }
+
+    // Initially expand 1st group (index 0), others collapsed
+    if (groupIndex === 0) {
+        return true;
+    }
+
+    const explicitExpandedKey = `exp_${key}`;
+
+    return collapsedModalSubgroups.value.has(explicitExpandedKey);
+}
+
+function toggleModalSubgroup(
+    subjId: number,
+    groupIndex: number,
+    groupName: string | null,
+) {
+    if (!groupName) {
+        return;
+    }
+
+    const key = `${subjId}_${groupName}`;
+    const explicitExpandedKey = `exp_${key}`;
+    const currentlyExpanded = isModalSubgroupExpanded(
+        subjId,
+        groupIndex,
+        groupName,
+    );
+
+    if (currentlyExpanded) {
+        collapsedModalSubgroups.value.add(key);
+        collapsedModalSubgroups.value.delete(explicitExpandedKey);
+    } else {
+        collapsedModalSubgroups.value.delete(key);
+        collapsedModalSubgroups.value.add(explicitExpandedKey);
+    }
+}
+
 const formatGroupName = (group?: string) => {
     if (!group) {
         return '';
@@ -242,84 +349,136 @@ function toggleChapterCompletion(subj: SyllabusSubject, chap: SyllabusChapter) {
                     />
                 </div>
 
-                <!-- Expanded Chapters List -->
+                <!-- Expanded Chapters List (Accordion Content) -->
                 <div
                     v-if="
                         expandedSubjects.has(subj.id) &&
                         subj.chapters &&
                         subj.chapters.length > 0
                     "
-                    class="mt-3 divide-y divide-slate-200/60 rounded-xl border border-slate-200/60 bg-white/70 pt-0.5 dark:divide-gray-700/50 dark:border-gray-700/50 dark:bg-gray-900/40"
+                    class="mt-3 space-y-2.5"
                 >
                     <div
-                        v-for="chap in subj.chapters"
-                        :key="chap.id"
-                        @click="
-                            isOwnProfile
-                                ? toggleChapterCompletion(subj, chap)
-                                : null
-                        "
-                        class="flex items-center justify-between gap-2.5 px-3 py-2 text-xs transition"
-                        :class="[
-                            isOwnProfile
-                                ? 'cursor-pointer select-none hover:bg-slate-100/70 active:bg-slate-200/50 dark:hover:bg-gray-800/60 dark:active:bg-gray-800'
-                                : '',
-                        ]"
-                        :role="isOwnProfile ? 'button' : undefined"
-                        :tabindex="isOwnProfile ? 0 : undefined"
-                        @keydown.enter="
-                            isOwnProfile
-                                ? toggleChapterCompletion(subj, chap)
-                                : null
-                        "
-                        @keydown.space.prevent="
-                            isOwnProfile
-                                ? toggleChapterCompletion(subj, chap)
-                                : null
-                        "
+                        v-for="(group, gIdx) in getSubjectChapterGroups(subj)"
+                        :key="gIdx"
+                        class="rounded-xl border border-slate-200/60 bg-white/70 p-1.5 dark:border-gray-700/50 dark:bg-gray-900/40"
                     >
-                        <div class="flex min-w-0 items-center gap-2">
+                        <!-- Sub-group Header (collapsible if grouped) -->
+                        <div
+                            v-if="group.name"
+                            @click="
+                                toggleModalSubgroup(subj.id, gIdx, group.name)
+                            "
+                            class="mb-1 flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 text-xs font-bold text-slate-600 transition select-none hover:bg-slate-100/70 dark:text-gray-300 dark:hover:bg-gray-800/60"
+                        >
+                            <div class="flex items-center gap-1.5">
+                                <component
+                                    :is="
+                                        isModalSubgroupExpanded(
+                                            subj.id,
+                                            gIdx,
+                                            group.name,
+                                        )
+                                            ? ChevronDown
+                                            : ChevronRight
+                                    "
+                                    class="h-3.5 w-3.5 text-slate-400 dark:text-gray-500"
+                                />
+                                <span>{{ group.name }}</span>
+                            </div>
                             <span
-                                :class="[
-                                    chap.is_completed
-                                        ? 'text-emerald-600 dark:text-emerald-400'
-                                        : 'text-slate-300 dark:text-gray-600',
-                                    'shrink-0 transition-colors',
-                                ]"
+                                class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
                             >
-                                <CheckCircle2
-                                    v-if="chap.is_completed"
-                                    class="h-4 w-4 fill-emerald-100 stroke-[2.2] dark:fill-emerald-950"
-                                />
-                                <div
-                                    v-else
-                                    class="h-3.5 w-3.5 rounded-full border-2 border-slate-300 transition-colors dark:border-gray-600"
-                                />
+                                {{
+                                    group.chapters.filter((c) => c.is_completed)
+                                        .length
+                                }}/{{ group.chapters.length }}
                             </span>
+                        </div>
 
-                            <span
+                        <!-- Chapters under group -->
+                        <div
+                            v-if="
+                                isModalSubgroupExpanded(
+                                    subj.id,
+                                    gIdx,
+                                    group.name,
+                                )
+                            "
+                            class="divide-y divide-slate-100 dark:divide-gray-800/60"
+                            :class="{ 'pl-1.5 sm:pl-2': group.name }"
+                        >
+                            <div
+                                v-for="chap in group.chapters"
+                                :key="chap.id"
+                                @click="
+                                    isOwnProfile
+                                        ? toggleChapterCompletion(subj, chap)
+                                        : null
+                                "
+                                class="flex items-center justify-between gap-2.5 rounded-lg px-2.5 py-2 text-xs transition"
                                 :class="[
-                                    chap.is_completed
-                                        ? 'font-medium text-slate-900 dark:text-gray-100'
-                                        : 'text-slate-500 dark:text-gray-400',
-                                    'truncate',
+                                    isOwnProfile
+                                        ? 'cursor-pointer select-none hover:bg-slate-100/70 active:bg-slate-200/50 dark:hover:bg-gray-800/60 dark:active:bg-gray-800'
+                                        : '',
                                 ]"
+                                :role="isOwnProfile ? 'button' : undefined"
+                                :tabindex="isOwnProfile ? 0 : undefined"
+                                @keydown.enter="
+                                    isOwnProfile
+                                        ? toggleChapterCompletion(subj, chap)
+                                        : null
+                                "
+                                @keydown.space.prevent="
+                                    isOwnProfile
+                                        ? toggleChapterCompletion(subj, chap)
+                                        : null
+                                "
                             >
-                                {{ chap.name }}
-                            </span>
-                        </div>
+                                <div class="flex min-w-0 items-center gap-2">
+                                    <span
+                                        :class="[
+                                            chap.is_completed
+                                                ? 'text-emerald-600 dark:text-emerald-400'
+                                                : 'text-slate-300 dark:text-gray-600',
+                                            'shrink-0 transition-colors',
+                                        ]"
+                                    >
+                                        <CheckCircle2
+                                            v-if="chap.is_completed"
+                                            class="h-4 w-4 fill-emerald-100 stroke-[2.2] dark:fill-emerald-950"
+                                        />
+                                        <div
+                                            v-else
+                                            class="h-3.5 w-3.5 rounded-full border-2 border-slate-300 transition-colors dark:border-gray-600"
+                                        />
+                                    </span>
 
-                        <span
-                            class="shrink-0 text-[10px] text-slate-400 dark:text-gray-500"
-                        >
-                            {{
-                                chap.weight === 3
-                                    ? '(Large Chapter)'
-                                    : chap.weight === 1
-                                      ? '(Small Chapter)'
-                                      : '(Normal Chapter)'
-                            }}
-                        </span>
+                                    <span
+                                        :class="[
+                                            chap.is_completed
+                                                ? 'font-medium text-slate-900 dark:text-gray-100'
+                                                : 'text-slate-500 dark:text-gray-400',
+                                            'truncate',
+                                        ]"
+                                    >
+                                        {{ chap.name }}
+                                    </span>
+                                </div>
+
+                                <span
+                                    class="shrink-0 text-[10px] text-slate-400 dark:text-gray-500"
+                                >
+                                    {{
+                                        chap.weight === 3
+                                            ? '(Large Chapter)'
+                                            : chap.weight === 1
+                                              ? '(Small Chapter)'
+                                              : '(Normal Chapter)'
+                                    }}
+                                </span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/pages/Tracker/Index.vue b/resources/js/pages/Tracker/Index.vue
index df293c61..a71fb908 100644
--- a/resources/js/pages/Tracker/Index.vue
+++ b/resources/js/pages/Tracker/Index.vue
@@ -12,6 +12,14 @@ interface Props {
     course: 'hsc' | 'ssc';
     group: 'science' | 'humanities' | 'commerce';
     subjects: SubjectItem[];
+    optionalSubjectIds?: number[];
+    optionalSubjects?: Array<{
+        id: number;
+        name: string;
+        course: string;
+        group: string;
+        is_optional: boolean;
+    }>;
     completedNodeIds: number[];
     todaySeconds: number;
 }
@@ -107,6 +115,8 @@ function handleAuthRequired(
                     :course="course"
                     :group="group"
                     :subjects="subjects"
+                    :optional-subject-ids="optionalSubjectIds"
+                    :optional-subjects="optionalSubjects"
                     :completed-node-ids="completedNodeIds"
                     :is-authenticated="isAuthenticated"
                     @require-auth="handleAuthRequired"