diff --git a/app/Events/PraktikumStatusUpdated.php b/app/Events/PraktikumStatusUpdated.php
index 2254e39..83e1efb 100644
--- a/app/Events/PraktikumStatusUpdated.php
+++ b/app/Events/PraktikumStatusUpdated.php
@@ -5,11 +5,11 @@
 use App\Models\Praktikum;
 use Illuminate\Broadcasting\Channel;
 use Illuminate\Broadcasting\InteractsWithSockets;
-use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
-class PraktikumStatusUpdated implements ShouldBroadcast
+class PraktikumStatusUpdated implements ShouldBroadcastNow
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
 
diff --git a/app/Http/Controllers/API/PraktikumController.php b/app/Http/Controllers/API/PraktikumController.php
index 84f7b50..a35763b 100644
--- a/app/Http/Controllers/API/PraktikumController.php
+++ b/app/Http/Controllers/API/PraktikumController.php
@@ -16,7 +16,7 @@
 
 class PraktikumController extends Controller
 {
-    private const PHASE_SEQUENCE = [
+    private const PHASES = [
         'preparation',
         'ta',
         'fitb_jurnal',
@@ -28,16 +28,10 @@ class PraktikumController extends Controller
     public function index(Request $request): JsonResponse
     {
         try {
-            $praktikums = Praktikum::with(['modul', 'kelas', 'pj'])
-                ->when($request->filled('kelas_id'), function ($query) use ($request) {
-                    $query->where('kelas_id', $request->input('kelas_id'));
-                })
-                ->when($request->filled('modul_id'), function ($query) use ($request) {
-                    $query->where('modul_id', $request->input('modul_id'));
-                })
-                ->when($request->filled('dk'), function ($query) use ($request) {
-                    $query->where('dk', $request->input('dk'));
-                })
+            $data = Praktikum::with(['modul', 'kelas', 'pj'])
+                ->when($request->filled('kelas_id'), fn ($q) => $q->where('kelas_id', $request->kelas_id))
+                ->when($request->filled('modul_id'), fn ($q) => $q->where('modul_id', $request->modul_id))
+                ->when($request->filled('dk'), fn ($q) => $q->where('dk', $request->dk))
                 ->orderBy('kelas_id')
                 ->orderBy('dk')
                 ->orderBy('modul_id')
@@ -46,25 +40,21 @@ public function index(Request $request): JsonResponse
             return response()->json([
                 'status' => 'success',
                 'message' => 'Praktikum retrieved successfully.',
-                'data' => $praktikums,
-                'phases' => self::PHASE_SEQUENCE,
+                'data' => $data,
+                'phases' => self::PHASES,
             ]);
-        } catch (\Throwable $th) {
-            return $this->respondWithServerError($th);
+        } catch (\Throwable $e) {
+            return $this->serverError($e);
         }
     }
 
     public function show(Request $request, int $kelasId): JsonResponse
     {
         try {
-            $praktikums = Praktikum::with(['modul', 'kelas', 'pj'])
+            $data = Praktikum::with(['modul', 'kelas', 'pj'])
                 ->where('kelas_id', $kelasId)
-                ->when($request->filled('modul_id'), function ($query) use ($request) {
-                    $query->where('modul_id', $request->input('modul_id'));
-                })
-                ->when($request->filled('dk'), function ($query) use ($request) {
-                    $query->where('dk', $request->input('dk'));
-                })
+                ->when($request->filled('modul_id'), fn ($q) => $q->where('modul_id', $request->modul_id))
+                ->when($request->filled('dk'), fn ($q) => $q->where('dk', $request->dk))
                 ->orderBy('dk')
                 ->orderBy('modul_id')
                 ->get();
@@ -72,36 +62,17 @@ public function show(Request $request, int $kelasId): JsonResponse
             return response()->json([
                 'status' => 'success',
                 'message' => 'Praktikum retrieved successfully.',
-                'data' => $praktikums,
-                'phases' => self::PHASE_SEQUENCE,
+                'data' => $data,
+                'phases' => self::PHASES,
             ]);
-        } catch (\Throwable $th) {
-            return $this->respondWithServerError($th);
+        } catch (\Throwable $e) {
+            return $this->serverError($e);
         }
     }
 
-    // public function active(): JsonResponse
-    // {
-    //     try {
-    //         $praktikums = Praktikum::with(['modul', 'kelas', 'pj'])
-    //             ->whereIn('status', ['running', 'paused'])
-    //             ->orderBy('kelas_id')
-    //             ->orderBy('dk')
-    //             ->get();
-
-    //         return response()->json([
-    //             'status' => 'success',
-    //             'data' => $praktikums,
-    //             'phases' => self::PHASE_SEQUENCE,
-    //         ]);
-    //     } catch (\Throwable $th) {
-    //         return $this->respondWithServerError($th);
-    //     }
-    // }
-
     public function store(Request $request): JsonResponse
     {
-        $validated = $request->validate([
+        $data = $request->validate([
             'kelas_id' => 'required|exists:kelas,id',
             'modul_id' => 'required|exists:moduls,id',
             'dk' => 'required|string|in:DK1,DK2',
@@ -109,14 +80,13 @@ public function store(Request $request): JsonResponse
 
         $praktikum = Praktikum::firstOrCreate(
             [
-                'kelas_id' => $validated['kelas_id'],
-                'modul_id' => $validated['modul_id'],
-                'dk' => $validated['dk'],
+                'kelas_id' => $data['kelas_id'],
+                'modul_id' => $data['modul_id'],
+                'dk' => $data['dk'],
             ],
             [
-                'dk' => $validated['dk'],
                 'status' => 'idle',
-                'current_phase' => self::PHASE_SEQUENCE[0],
+                'current_phase' => self::PHASES[0],
                 'phase_elapsed_seconds' => 0,
                 'phase_started_at' => null,
                 'isActive' => false,
@@ -141,14 +111,15 @@ public function store(Request $request): JsonResponse
 
     public function update(Request $request, int $id): JsonResponse
     {
-        $validated = $request->validate([
+        $data = $request->validate([
             'action' => 'required|string|in:start,pause,resume,next,exit,report',
             'phase' => 'nullable|string',
             'report_notes' => 'required_if:action,report|string|min:3|max:65535',
         ]);
 
-        $phase = $validated['phase'] ?? null;
-        if ($phase !== null && ! in_array($phase, self::PHASE_SEQUENCE, true)) {
+        $phase = $data['phase'] ?? null;
+
+        if ($phase !== null && ! in_array($phase, self::PHASES, true)) {
             return response()->json([
                 'status' => 'error',
                 'message' => 'Phase is not valid.',
@@ -165,48 +136,39 @@ public function update(Request $request, int $id): JsonResponse
         }
 
         $now = Carbon::now();
-
-        $pjId = null;
-        if ($validated['action'] === 'report') {
-            $pjId = optional($request->user('asisten'))->id ?? optional(Auth::user())->id ?? null;
-        }
+        $pjId = $data['action'] === 'report'
+            ? optional($request->user('asisten'))->id ?? optional(Auth::user())->id
+            : null;
 
         try {
-            switch ($validated['action']) {
-                case 'start':
-                    $this->handleStart($praktikum, $phase ?? self::PHASE_SEQUENCE[0], $now);
-                    break;
-                case 'pause':
-                    $this->handlePause($praktikum, $now);
-                    break;
-                case 'resume':
-                    $this->handleResume($praktikum, $now);
-                    break;
-                case 'next':
-                    $this->handleNext($praktikum, $phase, $now);
-                    break;
-                case 'exit':
-                    $this->handleExit($praktikum, $now);
-                    break;
-                case 'report':
-                    $this->handleReport($praktikum, $validated['report_notes'], $now, $pjId);
-                    break;
-            }
-        } catch (\InvalidArgumentException $exception) {
+            match ($data['action']) {
+                'start' => $this->start($praktikum, $phase ?? self::PHASES[0], $now),
+                'pause' => $this->pause($praktikum, $now),
+                'resume' => $this->resume($praktikum, $now),
+                'next' => $this->next($praktikum, $phase, $now),
+                'exit' => $this->exit($praktikum, $now),
+                'report' => $this->report($praktikum, $data['report_notes'], $now, $pjId),
+            };
+        } catch (\InvalidArgumentException $e) {
             return response()->json([
                 'status' => 'error',
-                'message' => $exception->getMessage(),
+                'message' => $e->getMessage(),
             ], 422);
-        } catch (\Throwable $th) {
-            return $this->respondWithServerError($th);
+        } catch (\Throwable $e) {
+            return $this->serverError($e);
         }
 
         $praktikum = $praktikum->fresh(['modul', 'kelas', 'pj']);
+
         broadcast(new PraktikumStatusUpdated($praktikum));
 
-        $progressService = app(QuestionProgressService::class);
-        $progressPayload = $progressService->buildForPraktikum($praktikum);
-        broadcast(new PraktikumProgressUpdated($praktikum->id, $progressPayload));
+        $progress = app(QuestionProgressService::class)
+            ->buildForPraktikum($praktikum);
+
+        broadcast(new PraktikumProgressUpdated(
+            $praktikum->id,
+            $progress
+        ));
 
         broadcast(new ActivePraktikumBroadcast);
 
@@ -214,60 +176,74 @@ public function update(Request $request, int $id): JsonResponse
             'status' => 'success',
             'message' => 'Praktikum updated successfully.',
             'data' => $praktikum,
-            'phases' => self::PHASE_SEQUENCE,
+            'phases' => self::PHASES,
         ]);
     }
 
-    private function handleStart(Praktikum $praktikum, string $phase, Carbon $now): void
-    {
-        // Check if there's already a running praktikum for the same kelas
-        $runningPraktikum = Praktikum::where('kelas_id', $praktikum->kelas_id)
+    private function start(
+        Praktikum $praktikum,
+        string $phase,
+        Carbon $now
+    ): void {
+        $running = Praktikum::where('kelas_id', $praktikum->kelas_id)
             ->where('dk', $praktikum->dk)
             ->where('id', '!=', $praktikum->id)
             ->whereIn('status', ['running', 'paused'])
             ->first();
 
-        if ($runningPraktikum) {
+        if ($running) {
             throw new \InvalidArgumentException(
                 'Tidak dapat memulai praktikum. Terdapat praktikum lain yang sedang berjalan untuk kelas ini.'
             );
         }
 
-        $praktikum->isActive = true;
-        $praktikum->status = 'running';
-        $praktikum->current_phase = $phase;
-        $praktikum->started_at = $now;
-        $praktikum->ended_at = null;
-        $praktikum->report_notes = null;
-        $praktikum->report_submitted_at = null;
-        $praktikum->pj_id = optional(Auth::user())->id;
-        $this->resetPhaseTiming($praktikum, $now);
+        $praktikum->fill([
+            'isActive' => true,
+            'status' => 'running',
+            'current_phase' => $phase,
+            'started_at' => $now,
+            'ended_at' => null,
+            'report_notes' => null,
+            'report_submitted_at' => null,
+            'pj_id' => optional(Auth::user())->id,
+        ]);
+
+        $this->resetTiming($praktikum, $now);
         $praktikum->save();
     }
 
-    private function handlePause(Praktikum $praktikum, Carbon $now): void
+    private function pause(Praktikum $praktikum, Carbon $now): void
     {
         if ($praktikum->status !== 'running') {
-            throw new \InvalidArgumentException('Praktikum is not running.');
+            throw new \InvalidArgumentException(
+                'Praktikum is not running.'
+            );
         }
 
         $praktikum->status = 'paused';
         $praktikum->isActive = false;
         $praktikum->ended_at = $now;
-        $this->freezePhaseTiming($praktikum, $now);
+
+        $this->freezeTiming($praktikum, $now);
         $praktikum->save();
     }
 
-    private function handleResume(Praktikum $praktikum, Carbon $now): void
+    private function resume(Praktikum $praktikum, Carbon $now): void
     {
         if ($praktikum->status !== 'paused') {
-            throw new \InvalidArgumentException('Praktikum is not paused.');
+            throw new \InvalidArgumentException(
+                'Praktikum is not paused.'
+            );
         }
 
         $elapsed = 0;
+
         if ($praktikum->started_at) {
             $reference = $praktikum->ended_at ?? $now;
-            $elapsed = max(0, $praktikum->started_at->diffInSeconds($reference));
+            $elapsed = max(
+                0,
+                $praktikum->started_at->diffInSeconds($reference)
+            );
         }
 
         $praktikum->status = 'running';
@@ -278,91 +254,120 @@ private function handleResume(Praktikum $praktikum, Carbon $now): void
         $praktikum->save();
     }
 
-    private function handleNext(Praktikum $praktikum, ?string $phase, Carbon $now): void
-    {
-        // If phase is explicitly provided, use it (for frontend control)
+    private function next(
+        Praktikum $praktikum,
+        ?string $phase,
+        Carbon $now
+    ): void {
         if ($phase !== null) {
-            $nextIndex = array_search($phase, self::PHASE_SEQUENCE, true);
+            $index = array_search($phase, self::PHASES, true);
 
-            if ($nextIndex === false) {
-                throw new \InvalidArgumentException('Invalid phase provided.');
+            if ($index === false) {
+                throw new \InvalidArgumentException(
+                    'Invalid phase provided.'
+                );
             }
 
-            $isLastPhase = $nextIndex === count(self::PHASE_SEQUENCE) - 1;
-
-            if ($isLastPhase) {
+            if ($index === count(self::PHASES) - 1) {
                 $praktikum->status = 'completed';
                 $praktikum->isActive = false;
-                $praktikum->ended_at = $now;
                 $praktikum->current_phase = $phase;
-                $this->freezePhaseTiming($praktikum, $now);
+                $praktikum->ended_at = $now;
+                $this->freezeTiming($praktikum, $now);
             } else {
-                $praktikum->current_phase = $phase;
-                $praktikum->status = 'running';
-                $praktikum->isActive = true;
-                if ($praktikum->started_at) {
-                    $reference = $praktikum->ended_at ?? $now;
-                    $elapsed = max(0, $praktikum->started_at->diffInSeconds($reference));
-                    $praktikum->started_at = $now->copy()->subSeconds($elapsed);
-                }
-                $praktikum->ended_at = null;
-                $this->resetPhaseTiming($praktikum, $now);
+                $this->moveToPhase(
+                    $praktikum,
+                    $phase,
+                    $now
+                );
             }
-        } else {
-            // Fallback to auto-calculating next phase
-            $currentPhase = $praktikum->current_phase ?? self::PHASE_SEQUENCE[0];
-            $currentIndex = array_search($currentPhase, self::PHASE_SEQUENCE, true);
 
-            if ($currentIndex === false) {
-                throw new \InvalidArgumentException('Current phase is invalid.');
-            }
+            $praktikum->save();
 
-            $isLastPhase = $currentIndex === count(self::PHASE_SEQUENCE) - 1;
+            return;
+        }
 
-            if ($isLastPhase) {
-                $praktikum->status = 'completed';
-                $praktikum->isActive = false;
-                $praktikum->ended_at = $now;
-                $this->freezePhaseTiming($praktikum, $now);
-            } else {
-                $praktikum->current_phase = self::PHASE_SEQUENCE[$currentIndex + 1];
-                $praktikum->status = 'running';
-                $praktikum->isActive = true;
-                if ($praktikum->started_at) {
-                    $reference = $praktikum->ended_at ?? $now;
-                    $elapsed = max(0, $praktikum->started_at->diffInSeconds($reference));
-                    $praktikum->started_at = $now->copy()->subSeconds($elapsed);
-                }
-                $praktikum->ended_at = null;
-                $this->resetPhaseTiming($praktikum, $now);
-            }
+        $current = $praktikum->current_phase ?? self::PHASES[0];
+        $index = array_search($current, self::PHASES, true);
+
+        if ($index === false) {
+            throw new \InvalidArgumentException(
+                'Current phase is invalid.'
+            );
+        }
+
+        if ($index === count(self::PHASES) - 1) {
+            $praktikum->status = 'completed';
+            $praktikum->isActive = false;
+            $praktikum->ended_at = $now;
+
+            $this->freezeTiming($praktikum, $now);
+        } else {
+            $this->moveToPhase(
+                $praktikum,
+                self::PHASES[$index + 1],
+                $now
+            );
         }
 
         $praktikum->save();
     }
 
-    private function handleExit(Praktikum $praktikum, Carbon $now): void
+    private function moveToPhase(
+        Praktikum $praktikum,
+        string $phase,
+        Carbon $now
+    ): void {
+        if ($praktikum->started_at) {
+            $reference = $praktikum->ended_at ?? $now;
+            $elapsed = max(
+                0,
+                $praktikum->started_at->diffInSeconds($reference)
+            );
+
+            $praktikum->started_at =
+                $now->copy()->subSeconds($elapsed);
+        }
+
+        $praktikum->current_phase = $phase;
+        $praktikum->status = 'running';
+        $praktikum->isActive = true;
+        $praktikum->ended_at = null;
+
+        $this->resetTiming($praktikum, $now);
+    }
+
+    private function exit(Praktikum $praktikum, Carbon $now): void
     {
         $praktikum->status = 'exited';
         $praktikum->isActive = false;
         $praktikum->ended_at = $now;
-        $this->freezePhaseTiming($praktikum, $now);
+
+        $this->freezeTiming($praktikum, $now);
         $praktikum->save();
     }
 
-    private function handleReport(Praktikum $praktikum, string $notes, Carbon $now, ?int $pjId): void
-    {
+    private function report(
+        Praktikum $praktikum,
+        string $notes,
+        Carbon $now,
+        ?int $pjId
+    ): void {
         if ($praktikum->status !== 'completed') {
-            throw new \InvalidArgumentException('Laporan hanya dapat diisi setelah praktikum selesai.');
+            throw new \InvalidArgumentException(
+                'Laporan hanya dapat diisi setelah praktikum selesai.'
+            );
         }
 
-        $trimmedNotes = trim($notes);
+        $notes = trim($notes);
 
-        if ($trimmedNotes === '') {
-            throw new \InvalidArgumentException('Isi laporan tidak boleh kosong.');
+        if ($notes === '') {
+            throw new \InvalidArgumentException(
+                'Isi laporan tidak boleh kosong.'
+            );
         }
 
-        $praktikum->report_notes = $trimmedNotes;
+        $praktikum->report_notes = $notes;
         $praktikum->report_submitted_at = $now;
         $praktikum->pj_id = $pjId;
         $praktikum->save();
@@ -380,94 +385,126 @@ public function checkPraktikum(Request $request): JsonResponse
                 ], 401);
             }
 
-            $kelasId = $user->kelas_id;
-            $dk = $user->dk;
-
-            if (! $kelasId) {
+            if (! $user->kelas_id) {
                 return response()->json([
                     'status' => 'error',
                     'message' => 'Praktikan does not have an assigned kelas.',
                 ], 400);
             }
 
-            if (! $dk) {
+            if (! $user->dk) {
                 return response()->json([
                     'status' => 'success',
                     'message' => 'Praktikan belum memilih DK. Silakan pilih DK terlebih dahulu.',
                     'dk_required' => true,
                     'data' => null,
-                    'phases' => self::PHASE_SEQUENCE,
+                    'phases' => self::PHASES,
                     'feedback_pending' => false,
                     'feedback_modul_id' => null,
                     'feedback_asisten_id' => null,
-                ], 200);
+                ]);
             }
 
-            $activePraktikum = Praktikum::with(['modul', 'kelas', 'pj'])
-                ->where('kelas_id', $kelasId)
-                ->where('dk', $dk)
+            $active = Praktikum::with(['modul', 'kelas', 'pj'])
+                ->where('kelas_id', $user->kelas_id)
+                ->where('dk', $user->dk)
                 ->where('isActive', true)
                 ->whereIn('status', ['running', 'paused'])
                 ->first();
 
-            $latestCompletedPraktikum = Praktikum::query()
-                ->where('kelas_id', $kelasId)
-                ->where('dk', $dk)
+            $completed = Praktikum::with(['modul', 'kelas', 'pj'])
+                ->where('kelas_id', $user->kelas_id)
+                ->where('dk', $user->dk)
                 ->where('status', 'completed')
                 ->orderByDesc('ended_at')
                 ->orderByDesc('updated_at')
                 ->first();
 
             $feedbackPending = false;
-            $pendingModulId = null;
-            $pendingAsistenId = null;
-
-            if ($latestCompletedPraktikum) {
-                $hasSubmittedFeedback = LaporanPraktikan::query()
+            $feedbackModulId = null;
+            $feedbackAsistenId = null;
+
+            /*
+             * Feedback must belong to THIS run.
+             *
+             * Old feedback for the same practitioner/module must not
+             * suppress feedback after the prakticum is started again.
+             */
+            if ($completed) {
+                $feedbackQuery = LaporanPraktikan::query()
                     ->where('praktikan_id', $user->id)
-                    ->where('modul_id', $latestCompletedPraktikum->modul_id)
-                    ->exists();
-
-                $praktikumHasReport = trim((string) ($latestCompletedPraktikum->report_notes ?? '')) !== '';
+                    ->where('modul_id', $completed->modul_id);
+
+                if ($completed->started_at) {
+                    $feedbackQuery->where(
+                        'updated_at',
+                        '>=',
+                        $completed->started_at
+                    );
+                }
 
-                if (! $hasSubmittedFeedback && ! $praktikumHasReport) {
+                if (! $feedbackQuery->exists()) {
                     $feedbackPending = true;
-                    $pendingModulId = $latestCompletedPraktikum->modul_id;
-                    $pendingAsistenId = $latestCompletedPraktikum->pj_id;
+                    $feedbackModulId = $completed->modul_id;
+                    $feedbackAsistenId = $completed->pj_id;
                 }
             }
 
-            if ($activePraktikum) {
-                $activePraktikum->setAttribute(
+            /*
+             * Important for TK:
+             *
+             * entering feedback marks the prakticum completed and
+             * isActive=false. While feedback is still pending, return
+             * that completed praktikum as `data` so PraktikumPage can
+             * observe the TK -> feedback transition and show TK score.
+             */
+            $display = $active ??
+                ($feedbackPending ? $completed : null);
+
+            if ($display) {
+                $sameModule =
+                    $feedbackPending &&
+                    $feedbackModulId !== null &&
+                    (int) $display->modul_id ===
+                        (int) $feedbackModulId;
+
+                $display->setAttribute(
                     'feedback_pending',
-                    $feedbackPending
-                        && $pendingModulId !== null
-                        && $pendingModulId === $activePraktikum->modul_id
-                        && trim((string) ($activePraktikum->report_notes ?? '')) === ''
+                    $sameModule
+                );
+
+                $display->setAttribute(
+                    'feedback_modul_id',
+                    $feedbackModulId
+                );
+
+                $display->setAttribute(
+                    'feedback_asisten_id',
+                    $feedbackAsistenId
                 );
-                $activePraktikum->setAttribute('feedback_modul_id', $pendingModulId);
-                $activePraktikum->setAttribute('feedback_asisten_id', $pendingAsistenId);
             }
 
             return response()->json([
                 'status' => 'success',
-                'message' => $activePraktikum
+                'message' => $active
                     ? 'Active praktikum found.'
-                    : 'No active praktikum for this kelas.',
-                'data' => $activePraktikum,
-                'phases' => self::PHASE_SEQUENCE,
+                    : ($feedbackPending
+                        ? 'Praktikum completed. Feedback pending.'
+                        : 'No active praktikum for this kelas.'),
+                'data' => $display,
+                'phases' => self::PHASES,
                 'feedback_pending' => $feedbackPending,
-                'feedback_modul_id' => $pendingModulId,
-                'feedback_asisten_id' => $pendingAsistenId,
+                'feedback_modul_id' => $feedbackModulId,
+                'feedback_asisten_id' => $feedbackAsistenId,
             ]);
-        } catch (\Throwable $th) {
-            return $this->respondWithServerError($th);
+        } catch (\Throwable $e) {
+            return $this->serverError($e);
         }
     }
 
     public function storeDk(Request $request): JsonResponse
     {
-        $validated = $request->validate([
+        $data = $request->validate([
             'dk' => 'required|string|in:DK1,DK2',
         ]);
 
@@ -480,7 +517,7 @@ public function storeDk(Request $request): JsonResponse
             ], 401);
         }
 
-        $user->dk = $validated['dk'];
+        $user->dk = $data['dk'];
         $user->save();
 
         return response()->json([
@@ -493,14 +530,10 @@ public function storeDk(Request $request): JsonResponse
     public function history(Request $request): JsonResponse
     {
         try {
-            $praktikums = Praktikum::with(['modul', 'kelas', 'pj'])
+            $data = Praktikum::with(['modul', 'kelas', 'pj'])
                 ->whereNotNull('report_notes')
-                ->when($request->filled('kelas_id'), function ($query) use ($request) {
-                    $query->where('kelas_id', $request->input('kelas_id'));
-                })
-                ->when($request->filled('modul_id'), function ($query) use ($request) {
-                    $query->where('modul_id', $request->input('modul_id'));
-                })
+                ->when($request->filled('kelas_id'), fn ($q) => $q->where('kelas_id', $request->kelas_id))
+                ->when($request->filled('modul_id'), fn ($q) => $q->where('modul_id', $request->modul_id))
                 ->orderByDesc('report_submitted_at')
                 ->orderByDesc('updated_at')
                 ->get();
@@ -508,42 +541,58 @@ public function history(Request $request): JsonResponse
             return response()->json([
                 'status' => 'success',
                 'message' => 'History retrieved successfully.',
-                'data' => $praktikums,
+                'data' => $data,
             ]);
-        } catch (\Throwable $th) {
-            return $this->respondWithServerError($th);
+        } catch (\Throwable $e) {
+            return $this->serverError($e);
         }
     }
 
-    private function calculatePhaseElapsedSeconds(Praktikum $praktikum, Carbon $now): int
-    {
-        $baseSeconds = max(0, (int) ($praktikum->phase_elapsed_seconds ?? 0));
+    private function elapsed(
+        Praktikum $praktikum,
+        Carbon $now
+    ): int {
+        $seconds = max(
+            0,
+            (int) ($praktikum->phase_elapsed_seconds ?? 0)
+        );
 
         if ($praktikum->phase_started_at instanceof Carbon) {
-            return $baseSeconds + max(0, $praktikum->phase_started_at->diffInSeconds($now));
+            $seconds += max(
+                0,
+                $praktikum->phase_started_at->diffInSeconds($now)
+            );
         }
 
-        return $baseSeconds;
+        return $seconds;
     }
 
-    private function resetPhaseTiming(Praktikum $praktikum, Carbon $now): void
-    {
+    private function resetTiming(
+        Praktikum $praktikum,
+        Carbon $now
+    ): void {
         $praktikum->phase_elapsed_seconds = 0;
         $praktikum->phase_started_at = $now;
     }
 
-    private function freezePhaseTiming(Praktikum $praktikum, Carbon $now): void
-    {
-        $praktikum->phase_elapsed_seconds = $this->calculatePhaseElapsedSeconds($praktikum, $now);
+    private function freezeTiming(
+        Praktikum $praktikum,
+        Carbon $now
+    ): void {
+        $praktikum->phase_elapsed_seconds =
+            $this->elapsed($praktikum, $now);
+
         $praktikum->phase_started_at = null;
     }
 
-    private function respondWithServerError(\Throwable $throwable): JsonResponse
+    private function serverError(\Throwable $e): JsonResponse
     {
+        report($e);
+
         return response()->json([
             'status' => 'error',
             'message' => 'An error occurred while processing the request.',
-            'error' => $throwable->getMessage(),
+            'error' => $e->getMessage(),
         ], 500);
     }
 }
diff --git a/app/Http/Controllers/API/SoalFITBController.php b/app/Http/Controllers/API/SoalFITBController.php
index 3e6f438..60d1808 100644
--- a/app/Http/Controllers/API/SoalFITBController.php
+++ b/app/Http/Controllers/API/SoalFITBController.php
@@ -62,7 +62,7 @@ public function show($id)
             $all_fitb = SoalFitb::where('modul_id', $id)->get();
             if ($all_fitb->isEmpty()) {
                 return response()->json([
-                    'message' => "Soal dengan modul ID $id tidak ditemukan.",
+                    'message' => "Soal dengan modul ID $id tidak ditemukan, atau mungkin belum ada inputan sama sekali :(",
                 ], 404);
             }
 
diff --git a/app/Http/Controllers/API/SoalJurnalController.php b/app/Http/Controllers/API/SoalJurnalController.php
index 1746512..158ceea 100644
--- a/app/Http/Controllers/API/SoalJurnalController.php
+++ b/app/Http/Controllers/API/SoalJurnalController.php
@@ -64,7 +64,7 @@ public function show($id)
             $all_jurnal = SoalJurnal::where('modul_id', $id)->get();
             if ($all_jurnal->isEmpty()) {
                 return response()->json([
-                    'message' => "Soal dengan modul ID $id tidak ditemukan.",
+                    'message' => "Soal dengan modul ID $id tidak ditemukan, atau mungkin belum ada inputan sama sekali :(",
                 ], 404);
             }
 
diff --git a/app/Http/Controllers/API/SoalTAController.php b/app/Http/Controllers/API/SoalTAController.php
index 94f3c04..221aa73 100644
--- a/app/Http/Controllers/API/SoalTAController.php
+++ b/app/Http/Controllers/API/SoalTAController.php
@@ -60,55 +60,66 @@ public function show(Request $request, int $modulId): JsonResponse
         }
 
         $user = auth('praktikan')->user();
-        $soalQuery = SoalTa::with('options')->where('modul_id', $modulId);
+        $query = SoalTa::with('options')->where('modul_id', $modulId);
 
-        $questionIds = collect(Arr::wrap($request->query('question_ids')))
-            ->flatMap(fn ($value) => is_array($value) ? $value : explode(',', (string) $value))
-            ->map(fn ($value) => (int) $value)
-            ->filter(fn ($value) => $value > 0)
+        $ids = collect(Arr::wrap($request->query('question_ids')))
+            ->flatMap(fn ($v) => is_array($v) ? $v : explode(',', (string) $v))
+            ->map(fn ($v) => (int) $v)
+            ->filter(fn ($v) => $v > 0)
+            ->unique()
             ->values();
 
-        if ($user) {
-            if ($questionIds->isNotEmpty()) {
-                $soals = (clone $soalQuery)
-                    ->whereIn('id', $questionIds)
-                    ->get()
-                    ->keyBy('id');
+        if (! $user) {
+            $soals = $ids->isNotEmpty()
+                ? (clone $query)->whereIn('id', $ids)->get()
+                : $query->get();
 
-                $ordered = $questionIds
-                    ->map(fn ($id) => $soals->get($id))
-                    ->filter();
-
-                $missingCount = max(0, $questionIds->count() - $ordered->count());
-
-                if ($missingCount > 0) {
-                    $fallback = (clone $soalQuery)
-                        ->whereNotIn('id', $questionIds)
-                        ->inRandomOrder()
-                        ->take($missingCount)
-                        ->get();
-
-                    $ordered = $ordered->merge($fallback);
-                }
+            return response()->json([
+                'message' => 'Soal retrieved successfully.',
+                'data' => $soals
+                    ->map(fn (SoalTa $soal) => $this->formatAssistantSoal($soal))
+                    ->values(),
+            ]);
+        }
 
-                $soals = $ordered;
-            } else {
-                $limit = $this->isTotPraktikan($user) ? 15 : 10;
-                $soals = (clone $soalQuery)->inRandomOrder()->take($limit)->get();
-            }
+        $limit = $this->isTotPraktikan($user) ? 15 : 10;
+        $target = min($limit, (clone $query)->count());
 
-            $data = $soals->map(fn (SoalTa $soal) => $this->formatPraktikanSoal($soal));
+        if ($ids->isEmpty()) {
+            $soals = (clone $query)
+                ->inRandomOrder()
+                ->take($target)
+                ->get();
         } else {
-            $soals = $questionIds->isNotEmpty()
-                ? (clone $soalQuery)->whereIn('id', $questionIds)->get()
-                : $soalQuery->get();
-
-            $data = $soals->map(fn (SoalTa $soal) => $this->formatAssistantSoal($soal));
+            $byId = (clone $query)
+                ->whereIn('id', $ids)
+                ->get()
+                ->keyBy('id');
+
+            $soals = $ids
+                ->map(fn ($id) => $byId->get($id))
+                ->filter()
+                ->take($target)
+                ->values();
+
+            $needed = max(0, $target - $soals->count());
+
+            if ($needed) {
+                $extra = (clone $query)
+                    ->whereNotIn('id', $soals->pluck('id'))
+                    ->inRandomOrder()
+                    ->take($needed)
+                    ->get();
+
+                $soals = $soals->merge($extra)->values();
+            }
         }
 
         return response()->json([
             'message' => 'Soal retrieved successfully.',
-            'data' => $data,
+            'data' => $soals
+                ->map(fn (SoalTa $soal) => $this->formatPraktikanSoal($soal))
+                ->values(),
         ]);
     }
 
diff --git a/app/Http/Controllers/API/SoalTKController.php b/app/Http/Controllers/API/SoalTKController.php
index c8b4e35..3cda957 100644
--- a/app/Http/Controllers/API/SoalTKController.php
+++ b/app/Http/Controllers/API/SoalTKController.php
@@ -59,55 +59,66 @@ public function show(Request $request, int $modulId): JsonResponse
         }
 
         $user = auth('praktikan')->user();
-        $soalQuery = SoalTk::with('options')->where('modul_id', $modulId);
+        $query = SoalTk::with('options')->where('modul_id', $modulId);
 
-        $questionIds = collect(Arr::wrap($request->query('question_ids')))
-            ->flatMap(fn ($value) => is_array($value) ? $value : explode(',', (string) $value))
-            ->map(fn ($value) => (int) $value)
-            ->filter(fn ($value) => $value > 0)
+        $ids = collect(Arr::wrap($request->query('question_ids')))
+            ->flatMap(fn ($v) => is_array($v) ? $v : explode(',', (string) $v))
+            ->map(fn ($v) => (int) $v)
+            ->filter(fn ($v) => $v > 0)
+            ->unique()
             ->values();
 
-        if ($user) {
-            if ($questionIds->isNotEmpty()) {
-                $soals = (clone $soalQuery)
-                    ->whereIn('id', $questionIds)
-                    ->get()
-                    ->keyBy('id');
+        if (! $user) {
+            $soals = $ids->isNotEmpty()
+                ? (clone $query)->whereIn('id', $ids)->get()
+                : $query->get();
 
-                $ordered = $questionIds
-                    ->map(fn ($id) => $soals->get($id))
-                    ->filter();
-
-                $missingCount = max(0, $questionIds->count() - $ordered->count());
-
-                if ($missingCount > 0) {
-                    $fallback = (clone $soalQuery)
-                        ->whereNotIn('id', $questionIds)
-                        ->inRandomOrder()
-                        ->take($missingCount)
-                        ->get();
-
-                    $ordered = $ordered->merge($fallback);
-                }
+            return response()->json([
+                'message' => 'Soal retrieved successfully.',
+                'data' => $soals
+                    ->map(fn (SoalTk $soal) => $this->formatAssistantSoal($soal))
+                    ->values(),
+            ]);
+        }
 
-                $soals = $ordered;
-            } else {
-                $limit = $this->isTotPraktikan($user) ? 15 : 10;
-                $soals = (clone $soalQuery)->inRandomOrder()->take($limit)->get();
-            }
+        $limit = $this->isTotPraktikan($user) ? 15 : 10;
+        $target = min($limit, (clone $query)->count());
 
-            $data = $soals->map(fn (SoalTk $soal) => $this->formatPraktikanSoal($soal));
+        if ($ids->isEmpty()) {
+            $soals = (clone $query)
+                ->inRandomOrder()
+                ->take($target)
+                ->get();
         } else {
-            $soals = $questionIds->isNotEmpty()
-                ? (clone $soalQuery)->whereIn('id', $questionIds)->get()
-                : $soalQuery->get();
-
-            $data = $soals->map(fn (SoalTk $soal) => $this->formatAssistantSoal($soal));
+            $byId = (clone $query)
+                ->whereIn('id', $ids)
+                ->get()
+                ->keyBy('id');
+
+            $soals = $ids
+                ->map(fn ($id) => $byId->get($id))
+                ->filter()
+                ->take($target)
+                ->values();
+
+            $needed = max(0, $target - $soals->count());
+
+            if ($needed) {
+                $extra = (clone $query)
+                    ->whereNotIn('id', $soals->pluck('id'))
+                    ->inRandomOrder()
+                    ->take($needed)
+                    ->get();
+
+                $soals = $soals->merge($extra)->values();
+            }
         }
 
         return response()->json([
             'message' => 'Soal retrieved successfully.',
-            'data' => $data,
+            'data' => $soals
+                ->map(fn (SoalTk $soal) => $this->formatPraktikanSoal($soal))
+                ->values(),
         ]);
     }
 
diff --git a/app/Models/SoalTp.php b/app/Models/SoalTp.php
index d0041c5..36c0e09 100644
--- a/app/Models/SoalTp.php
+++ b/app/Models/SoalTp.php
@@ -31,11 +31,13 @@ class SoalTp extends Model
 
     protected $casts = [
         'modul_id' => 'int',
+        'enable_file_upload' => 'boolean',
     ];
 
     protected $fillable = [
         'modul_id',
         'soal',
+        'enable_file_upload',
     ];
 
     public function modul()
diff --git a/bun.lock b/bun.lock
index 9dadfe5..c4e36c4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "dependencies": {
@@ -7,7 +8,8 @@
         "@inertiajs/inertia": "^0.11.1",
         "@tanstack/react-query": "^5.90.5",
         "@types/react": "^19.1.9",
-        "caniuse-lite": "^1.0.30001734",
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
         "js-cookie": "^3.0.5",
         "laravel-echo": "^2.2.4",
         "lodash": "^4.17.21",
@@ -394,6 +396,8 @@
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.11.12", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA=="],
+
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
     "brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
@@ -408,7 +412,7 @@
 
     "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001751", "", {}, "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001809", "", {}, "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ=="],
 
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
 
diff --git a/package-lock.json b/package-lock.json
index 2f77143..af20264 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,10 @@
         "@inertiajs/inertia": "^0.11.1",
         "@tanstack/react-query": "^5.90.5",
         "@types/react": "^19.1.9",
-        "caniuse-lite": "^1.0.30001734",
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
         "js-cookie": "^3.0.5",
+        "katex": "^0.18.2",
         "laravel-echo": "^2.2.4",
         "lodash": "^4.17.21",
         "mermaid": "^11.12.3",
@@ -19,8 +21,10 @@
         "react-markdown": "^10.1.0",
         "react-syntax-highlighter": "^16.1.0",
         "recharts": "^3.6.0",
+        "rehype-katex": "^7.0.1",
         "remark-breaks": "^4.0.0",
-        "remark-gfm": "^4.0.1"
+        "remark-gfm": "^4.0.1",
+        "remark-math": "^6.0.0"
       },
       "devDependencies": {
         "@headlessui/react": "^2.0.0",
@@ -1978,6 +1982,11 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg=="
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
@@ -2243,6 +2252,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.13",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.13.tgz",
+      "integrity": "sha512-k9HNuUVMlqVjQ9UHzfPjIqiDbWw7WqT1AoT7GL8VwvF3r0ZfArtgiSPAlmupyNquNgOJHTuH4CKYf8ttMTWBTQ==",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2352,9 +2372,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001753",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001753.tgz",
-      "integrity": "sha512-Bj5H35MD/ebaOV4iDLqPEtiliTN29qkGtEHCwawWn4cYm+bPJM2NsaP30vtZcnERClMzp52J4+aw2UNbK4o+zw==",
+      "version": "1.0.30001809",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz",
+      "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2368,8 +2388,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/ccount": {
       "version": "2.0.1",
@@ -3303,6 +3322,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3768,6 +3798,83 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.1.tgz",
+      "integrity": "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hastscript": "^9.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html-isomorphic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+      "integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-dom": "^5.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-parse-selector": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
@@ -3808,6 +3915,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -4104,14 +4226,13 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.33",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.33.tgz",
-      "integrity": "sha512-q3N5u+1sY9Bu7T4nlXoiRBXWfwSefNGoKeOwekV+gw0cAXQlz2Ww6BLcmBxVDeXBMUDQv6fK5bcNaJLxob3ZQA==",
+      "version": "0.18.2",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.18.2.tgz",
+      "integrity": "sha512-3snve4y0SXTMequLim1FMiPvLGElySam0blN5xQZBqEY3lOJz1TnuaaiugnBZBqHzlSAGmFTYL7MCQkORuLKCA==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
-      "license": "MIT",
       "dependencies": {
         "commander": "^8.3.0"
       },
@@ -4427,6 +4548,24 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+      "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -4608,6 +4747,29 @@
         "uuid": "^11.1.0"
       }
     },
+    "node_modules/mermaid/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/mermaid/node_modules/katex": {
+      "version": "0.16.47",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -4798,6 +4960,47 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-math/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/micromark-extension-math/node_modules/katex": {
+      "version": "0.16.47",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -5403,6 +5606,17 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-data-parser": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
@@ -5999,6 +6213,47 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/rehype-katex": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
+      "integrity": "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/katex": "^0.16.0",
+        "hast-util-from-html-isomorphic": "^2.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "katex": "^0.16.0",
+        "unist-util-visit-parents": "^6.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/rehype-katex/node_modules/katex": {
+      "version": "0.16.47",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/remark-breaks": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz",
@@ -6032,6 +6287,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-math": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+      "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-math": "^3.0.0",
+        "micromark-extension-math": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -6776,6 +7046,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
@@ -6802,6 +7085,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -6918,6 +7214,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -7099,6 +7408,15 @@
       "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
       "license": "MIT"
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 807d80e..7c8ceed 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,10 @@
     "@inertiajs/inertia": "^0.11.1",
     "@tanstack/react-query": "^5.90.5",
     "@types/react": "^19.1.9",
-    "caniuse-lite": "^1.0.30001734",
+    "baseline-browser-mapping": "^2.11.12",
+    "caniuse-lite": "^1.0.30001809",
     "js-cookie": "^3.0.5",
+    "katex": "^0.18.2",
     "laravel-echo": "^2.2.4",
     "lodash": "^4.17.21",
     "mermaid": "^11.12.3",
@@ -37,7 +39,9 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "recharts": "^3.6.0",
+    "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
   }
 }
diff --git a/resources/js/Components/Assistants/Forms/FormSoalInput.jsx b/resources/js/Components/Assistants/Forms/FormSoalInput.jsx
index bf450db..1a63474 100644
--- a/resources/js/Components/Assistants/Forms/FormSoalInput.jsx
+++ b/resources/js/Components/Assistants/Forms/FormSoalInput.jsx
@@ -1,70 +1,327 @@
-import { Suspense, lazy, useEffect, useMemo, useState } from 'react';
-const SoalInputPG = lazy(() => import('../Soal/SoalInputPG'));
-const SoalInputEssay = lazy(() => import('../Soal/SoalInputEssay'));
-const ModalSaveSoal = lazy(() => import('../Modals/ModalSaveSoal'));
+import {
+    Suspense,
+    lazy,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+
 import { useModulesQuery } from "@/hooks/useModulesQuery";
 import toast from "react-hot-toast";
 
+const SoalInputPG = lazy(() => import("../Soal/SoalInputPG"));
+const SoalInputEssay = lazy(() => import("../Soal/SoalInputEssay"));
+
+const CATEGORIES = [
+    ["tp", "TP", "Tes Pendahuluan"],
+    ["ta", "TA", "Tes Awal"],
+    ["fitb", "FITB", "Fill in the blank"],
+    ["jurnal", "Jurnal", "Jurnal"],
+    ["tm", "Mandiri", "Mandiri"],
+    ["tk", "TK", "Tes Keterampilan"],
+];
+
+const getScrollParent = (node) => {
+    for (let el = node?.parentElement; el && el !== document.body; el = el.parentElement) {
+        if (/(auto|scroll)/.test(getComputedStyle(el).overflowY)) return el;
+    }
+
+    return window;
+};
+
+
+function SoalNavigator({ count, active, onChange }) {
+    const ref = useRef(null);
+    const [capacity, setCapacity] = useState(8);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+
+        const update = () =>
+            setCapacity(Math.max(1, Math.floor(el.clientWidth / 38)));
+
+        update();
+
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+
+        return () => observer.disconnect();
+    }, []);
+
+    if (!count) return null;
+
+    const visible = count <= capacity ? count : Math.max(1, capacity - 2);
+    const start = Math.max(
+        0,
+        Math.min(active - Math.floor(visible / 2), count - visible),
+    );
+    const end = Math.min(count, start + visible);
+
+    const go = (index) => {
+        if (index >= 0 && index < count) onChange(index);
+    };
+
+    return (
+        <div className="flex items-center gap-2 rounded-depth-md border border-depth bg-depth-card p-2 shadow-depth-md">
+            <button
+                type="button"
+                onClick={() => go(active - 1)}
+                disabled={!active}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold text-depth-primary disabled:cursor-not-allowed disabled:opacity-40"
+            >
+                ← <span className="hidden sm:inline">Previous</span>
+            </button>
+
+            <div
+                ref={ref}
+                className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden"
+            >
+                {start > 0 && (
+                    <span className="shrink-0 px-1 text-depth-secondary">…</span>
+                )}
+
+                {Array.from(
+                    { length: end - start },
+                    (_, i) => start + i,
+                ).map((index) => (
+                    <button
+                        key={index}
+                        type="button"
+                        onClick={() => go(index)}
+                        className={`flex h-8 min-w-8 shrink-0 items-center justify-center rounded-depth-md border px-2 text-xs font-semibold transition ${
+                            active === index
+                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white"
+                                : "border-depth bg-depth-interactive text-depth-secondary hover:text-depth-primary"
+                        }`}
+                    >
+                        {index + 1}
+                    </button>
+                ))}
+
+                {end < count && (
+                    <span className="shrink-0 px-1 text-depth-secondary">…</span>
+                )}
+            </div>
+
+            <span className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold text-depth-primary">
+                {active + 1} / {count}
+            </span>
+
+            <button
+                type="button"
+                onClick={() => go(active + 1)}
+                disabled={active >= count - 1}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold text-depth-primary disabled:cursor-not-allowed disabled:opacity-40"
+            >
+                <span className="hidden sm:inline">Next</span> →
+            </button>
+        </div>
+    );
+}
+
+
 export default function FormSoalInput({ isEditable = true }) {
-    const [isModalSaveOpen, setIsModalSaveOpen] = useState(false);
+    const rootRef = useRef(null);
+    const restoreScrollRef = useRef(null);
+
     const [kategoriSoal, setKategoriSoal] = useState("");
     const [selectedModul, setSelectedModul] = useState("");
+    const [activeSoal, setActiveSoal] = useState(0);
+
     const {
         data: moduls = [],
         isLoading: modulesLoading,
         isError: modulesError,
         error: modulesQueryError,
+        refetch: refetchModules,
     } = useModulesQuery();
 
-    const handleModulChange = (e) => {
-        const value = e.target.value;
-        setSelectedModul(value);
+
+    /*
+     * Restore scroll immediately after a card-triggered render.
+     *
+     * This also works when the container did not overflow before
+     * the click but becomes scrollable after mounting the new content.
+     */
+    useLayoutEffect(() => {
+        const saved = restoreScrollRef.current;
+        if (!saved) return;
+
+        restoreScrollRef.current = null;
+
+        if (saved.target === window) {
+            window.scrollTo(saved.left, saved.top);
+        } else {
+            saved.target.scrollLeft = saved.left;
+            saved.target.scrollTop = saved.top;
+        }
+    });
+
+
+    const preserveScroll = (callback) => {
+        const target = getScrollParent(rootRef.current);
+
+        restoreScrollRef.current =
+            target === window
+                ? {
+                      target,
+                      top: window.scrollY,
+                      left: window.scrollX,
+                  }
+                : {
+                      target,
+                      top: target.scrollTop,
+                      left: target.scrollLeft,
+                  };
+
+        callback();
+    };
+
+
+    const selectedModuleData = useMemo(
+        () =>
+            selectedModul
+                ? moduls.find(
+                      (m) => String(m.idM) === String(selectedModul),
+                  ) ?? null
+                : null,
+        [moduls, selectedModul],
+    );
+
+
+    const counts = useMemo(
+        () =>
+            selectedModuleData
+                ? {
+                      tp: selectedModuleData.soal_tp_count ?? 0,
+                      ta: selectedModuleData.soal_ta_count ?? 0,
+                      fitb: selectedModuleData.soal_fitb_count ?? 0,
+                      jurnal: selectedModuleData.soal_jurnal_count ?? 0,
+                      tm: selectedModuleData.soal_tm_count ?? 0,
+                      tk: selectedModuleData.soal_tk_count ?? 0,
+                  }
+                : null,
+        [selectedModuleData],
+    );
+
+    const currentCount = counts?.[kategoriSoal] ?? 0;
+
+
+    /*
+     * Dropdowns and cards ultimately use the same state changes.
+     * No automatic scrolling occurs here.
+     */
+    const changeCategory = (value) => {
+        setKategoriSoal(value);
+        setActiveSoal(0);
     };
 
-    const handleCloseModalSave = () => {
-        setIsModalSaveOpen(false);
-        setKategoriSoal("");
-        setSelectedModul("");
+    const changeModule = (value) => {
+        setSelectedModul(value);
+        setActiveSoal(0);
     };
 
-    const handleValidationError = ({ message, includeModuleNotice = false } = {}) => {
-        const baseMessage = message ?? "Soal belum ditambahkan!!";
-        const notice = includeModuleNotice ? " Pastikan memilih modul terlebih dahulu." : "";
-        toast.error(`${baseMessage}${notice}`.trim());
+
+    /*
+     * Only the question navigator intentionally scrolls.
+     */
+    const goToSoal = (index) => {
+        if (index < 0 || index >= currentCount) return;
+
+        setActiveSoal(index);
+
+        requestAnimationFrame(() => {
+            const target = document.getElementById(
+                `soal-${kategoriSoal}-${index}`,
+            );
+
+            if (!target) return;
+
+            const parent = getScrollParent(target);
+
+            if (parent === window) {
+                window.scrollTo({
+                    top:
+                        window.scrollY +
+                        target.getBoundingClientRect().top -
+                        100,
+                    behavior: "smooth",
+                });
+
+                return;
+            }
+
+            parent.scrollTo({
+                top:
+                    parent.scrollTop +
+                    target.getBoundingClientRect().top -
+                    parent.getBoundingClientRect().top -
+                    100,
+                behavior: "smooth",
+            });
+        });
     };
 
+
+    useEffect(() => {
+        setActiveSoal(0);
+    }, [kategoriSoal, selectedModul]);
+
+
+    const handleValidationError = ({
+        message,
+        includeModuleNotice = false,
+    } = {}) =>
+        toast.error(
+            `${message ?? "Soal belum ditambahkan!!"}${
+                includeModuleNotice
+                    ? " Pastikan memilih modul terlebih dahulu."
+                    : ""
+            }`.trim(),
+        );
+
+
     const handleSuccessNotification = () => {
         toast.success("Soal berhasil ditambahkan!!");
+        refetchModules();
     };
 
-    const selectedModuleData = useMemo(() => {
-        if (!selectedModul) {
-            return null;
-        }
 
-        return (
-            moduls.find((module) => String(module.idM) === String(selectedModul)) ?? null
-        );
-    }, [moduls, selectedModul]);
+    const renderSoal = () => {
+        if (!kategoriSoal || !selectedModul) return null;
 
-    const soalCountMeta = useMemo(() => {
-        if (!selectedModuleData) {
-            return null;
+        const props = {
+            kategoriSoal,
+            modul: selectedModul,
+            modules: moduls,
+            onModalSuccess: handleSuccessNotification,
+            onModalValidation: handleValidationError,
+            onChangeModul: changeModule,
+            isEditable,
+        };
+
+        if (["tp", "fitb", "jurnal", "tm"].includes(kategoriSoal)) {
+            return <SoalInputEssay {...props} />;
         }
 
-        return {
-            tp: selectedModuleData.soal_tp_count ?? 0,
-            ta: selectedModuleData.soal_ta_count ?? 0,
-            fitb: selectedModuleData.soal_fitb_count ?? 0,
-            jurnal: selectedModuleData.soal_jurnal_count ?? 0,
-            tm: selectedModuleData.soal_tm_count ?? 0,
-            tk: selectedModuleData.soal_tk_count ?? 0,
-        };
-    }, [selectedModuleData]);
+        if (["ta", "tk"].includes(kategoriSoal)) {
+            return <SoalInputPG {...props} />;
+        }
+
+        return null;
+    };
+
 
     return (
-        <div className="space-y-6 text-depth-primary">
-            {/* Pilih kategori soal dan modul */}
+        <div
+            ref={rootRef}
+            className="space-y-6 text-depth-primary"
+            style={{ overflowAnchor: "none" }}
+        >
+            {/* Category + Module */}
             <div className="flex flex-col gap-4 lg:flex-row">
                 <div className="flex-1 space-y-2">
                     <label
@@ -73,21 +330,23 @@ export default function FormSoalInput({ isEditable = true }) {
                     >
                         Kategori Soal
                     </label>
+
                     <select
                         id="kategori-soal"
-                        className="w-full rounded-depth-md border border-depth bg-depth-card p-3 text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
                         value={kategoriSoal}
-                        onChange={(e) => setKategoriSoal(e.target.value)}
+                        onChange={(e) => changeCategory(e.target.value)}
+                        className="w-full rounded-depth-md border border-depth bg-depth-card p-3 text-sm text-depth-primary shadow-depth-sm focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
                     >
                         <option value="">- Pilih Kategori Soal -</option>
-                        <option value="tp">Tes Pendahuluan</option>
-                        <option value="ta">Tes Awal</option>
-                        <option value="fitb">Fill in the blank</option>
-                        <option value="jurnal">Jurnal</option>
-                        <option value="tm">Mandiri</option>
-                        <option value="tk">Tes Keterampilan</option>
+
+                        {CATEGORIES.map(([key, , name]) => (
+                            <option key={key} value={key}>
+                                {name}
+                            </option>
+                        ))}
                     </select>
                 </div>
+
                 <div className="flex-1 space-y-2">
                     <label
                         htmlFor="modul_id"
@@ -95,97 +354,184 @@ export default function FormSoalInput({ isEditable = true }) {
                     >
                         Modul
                     </label>
+
                     <select
-                        className="w-full rounded-depth-md border border-depth bg-depth-card p-3 text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
                         id="modul_id"
                         value={selectedModul}
-                        onChange={handleModulChange}
+                        onChange={(e) => changeModule(e.target.value)}
+                        className="w-full rounded-depth-md border border-depth bg-depth-card p-3 text-sm text-depth-primary shadow-depth-sm focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
                     >
                         <option value="">- Pilih Modul -</option>
-                        {modulesLoading && <option disabled>Memuat modul...</option>}
+
+                        {modulesLoading && (
+                            <option disabled>Memuat modul...</option>
+                        )}
+
                         {modulesError && (
                             <option disabled>
-                                {modulesQueryError?.message ?? "Gagal memuat modul"}
+                                {modulesQueryError?.message ??
+                                    "Gagal memuat modul"}
                             </option>
                         )}
-                        {!modulesLoading && !modulesError && moduls.length > 0
-                            ? moduls.map((k) => (
-                                <option key={k.idM} value={k.idM}>
-                                    {k.judul}
+
+                        {!modulesLoading &&
+                            !modulesError &&
+                            moduls.map((m) => (
+                                <option key={m.idM} value={m.idM}>
+                                    {m.judul}
                                 </option>
-                            ))
-                            : null}
+                            ))}
                     </select>
                 </div>
             </div>
 
-            {selectedModuleData && soalCountMeta && (
-                <div className="mt-2 grid gap-3 sm:grid-cols-3 md:grid-cols-6">
-                    {[
-                        { key: 'tp', label: 'TP' },
-                        { key: 'ta', label: 'TA' },
-                        { key: 'fitb', label: 'FITB' },
-                        { key: 'jurnal', label: 'Jurnal' },
-                        { key: 'tm', label: 'Mandiri' },
-                        { key: 'tk', label: 'TK' },
-                    ].map((item) => (
-                        <div
-                            key={item.key}
-                            className="rounded-depth-md border border-depth bg-depth-interactive/40 px-3 py-2 text-center"
-                        >
-                            <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-depth-secondary">
-                                {item.label}
-                            </div>
-                            <div className="text-lg font-bold text-depth-primary">
-                                {soalCountMeta[item.key] ?? 0}
-                            </div>
-                        </div>
-                    ))}
-                </div>
 
+            {/* Module cards */}
+            {!selectedModul && (
+                <section className="space-y-3">
+                    <div>
+                        <h3 className="text-sm font-semibold">
+                            Pilih Modul
+                        </h3>
+
+                        <p className="mt-1 text-xs text-depth-secondary">
+                            Pilih modul Indonesia atau English untuk mulai
+                            mengelola soal.
+                        </p>
+                    </div>
+
+                    {modulesLoading ? (
+                        <p className="text-sm text-depth-secondary">
+                            Memuat modul...
+                        </p>
+                    ) : modulesError ? (
+                        <p className="text-sm text-red-500">
+                            {modulesQueryError?.message ??
+                                "Gagal memuat modul"}
+                        </p>
+                    ) : (
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                            {moduls.map((m) => {
+                                const english =
+                                    Number(m?.isEnglish ?? 0) === 1;
+
+                                return (
+                                    <button
+                                        key={m.idM}
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.currentTarget.blur();
+
+                                            preserveScroll(() =>
+                                                changeModule(String(m.idM)),
+                                            );
+                                        }}
+                                        className="group rounded-depth-lg border border-depth bg-depth-card p-4 text-left shadow-depth-sm transition hover:-translate-y-0.5 hover:border-[var(--depth-color-primary)] hover:shadow-depth-md"
+                                    >
+                                        <div className="mb-3 flex items-center justify-between gap-2">
+                                            <span
+                                                className={`rounded-depth-md border px-2 py-1 text-[10px] font-bold uppercase tracking-wider ${
+                                                    english
+                                                        ? "border-blue-500/40 bg-blue-500/10 text-blue-400"
+                                                        : "border-emerald-500/40 bg-emerald-500/10 text-emerald-400"
+                                                }`}
+                                            >
+                                                {english ? "EN" : "ID"}
+                                            </span>
+
+                                            <span className="text-[10px] text-depth-secondary">
+                                                Modul {m.idM}
+                                            </span>
+                                        </div>
+
+                                        <p className="font-semibold transition group-hover:text-[var(--depth-color-primary)]">
+                                            {m.judul}
+                                        </p>
+
+                                        <p className="mt-1 text-xs text-depth-secondary">
+                                            {english
+                                                ? "English Module"
+                                                : "Modul Indonesia"}
+                                        </p>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    )}
+                </section>
             )}
 
-            {/* Input soal berdasarkan kategori soal */}
-            <Suspense fallback={<div className="text-sm text-depth-secondary">Memuat soal...</div>}>
-                {(() => {
-                    if (!kategoriSoal) return null;
-                    const essayTypes = ["tp", "fitb", "jurnal", "tm"];
-                    const pgTypes = ["ta", "tk"];
-                    if (essayTypes.includes(kategoriSoal) && selectedModul) {
-                        return (
-                            <SoalInputEssay
-                                kategoriSoal={kategoriSoal}
-                                modul={selectedModul}
-                                modules={moduls}
-                                onModalSuccess={handleSuccessNotification}
-                                onModalValidation={handleValidationError}
-                                onChangeModul={setSelectedModul}
-                                isEditable={isEditable}
-                            />
-                        );
-                    }
-                    if (pgTypes.includes(kategoriSoal) && selectedModul) {
+
+            {/* Category cards */}
+            {selectedModuleData && counts && (
+                <div className="grid gap-3 sm:grid-cols-3 md:grid-cols-6">
+                    {CATEGORIES.map(([key, label]) => {
+                        const selected = kategoriSoal === key;
+
                         return (
-                            <SoalInputPG
-                                kategoriSoal={kategoriSoal}
-                                modul={selectedModul}
-                                onModalSuccess={handleSuccessNotification}
-                                onModalValidation={handleValidationError}
-                                modules={moduls}
-                                onChangeModul={setSelectedModul}
-                                isEditable={isEditable}
-                            />
+                            <button
+                                key={key}
+                                type="button"
+                                onClick={(e) => {
+                                    e.currentTarget.blur();
+
+                                    preserveScroll(() =>
+                                        changeCategory(key),
+                                    );
+                                }}
+                                className={`rounded-depth-md border px-3 py-2 text-center shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md ${
+                                    selected
+                                        ? "border-[var(--depth-color-primary)] bg-depth-card ring-1 ring-[var(--depth-color-primary)]"
+                                        : "border-depth bg-depth-interactive hover:border-[var(--depth-color-primary)]"
+                                }`}
+                            >
+                                <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-depth-secondary">
+                                    {label}
+                                </div>
+
+                                <div className="text-lg font-bold">
+                                    {counts[key] ?? 0}
+                                </div>
+                            </button>
                         );
-                    }
-                    return null;
-                })()}
-            </Suspense>
+                    })}
+                </div>
+            )}
 
-            {isModalSaveOpen && (
-                <Suspense fallback={null}>
-                    <ModalSaveSoal onClose={handleCloseModalSave} />
-                </Suspense>
+
+            {/* Sticky navigator */}
+            {selectedModul && kategoriSoal && currentCount > 0 && (
+                <div
+                    className="sticky top-2 z-30"
+                    style={{ overflowAnchor: "none" }}
+                >
+                    <SoalNavigator
+                        count={currentCount}
+                        active={Math.min(
+                            activeSoal,
+                            currentCount - 1,
+                        )}
+                        onChange={goToSoal}
+                    />
+                </div>
             )}
+
+
+            {/* Questions */}
+            <div
+                id="soal-section"
+                style={{ overflowAnchor: "none" }}
+            >
+                <Suspense
+                    fallback={
+                        <div className="text-sm text-depth-secondary">
+                            Memuat soal...
+                        </div>
+                    }
+                >
+                    {renderSoal()}
+                </Suspense>
+            </div>
         </div>
     );
 }
diff --git a/resources/js/Components/Assistants/Modals/ModalBatchEditSoal.jsx b/resources/js/Components/Assistants/Modals/ModalBatchEditSoal.jsx
index a3889b4..a16fe26 100644
--- a/resources/js/Components/Assistants/Modals/ModalBatchEditSoal.jsx
+++ b/resources/js/Components/Assistants/Modals/ModalBatchEditSoal.jsx
@@ -1,351 +1,692 @@
 import { useEffect, useMemo, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkBreaks from "remark-breaks";
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import c from 'react-syntax-highlighter/dist/esm/languages/prism/c';
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+
 import { ModalOverlay } from "@/Components/Common/ModalPortal";
 import ModalCloseButton from "@/Components/Common/ModalCloseButton";
+import DepthToggleButton from "@/Components/Common/DepthToggleButton";
+
+import MarkdownRenderer from "../../MarkdownRenderer";
+import PairNavigator from "./PairNavigator";
+
+
+const getModuleId = (item) => {
+    const value =
+        item?.idM ??
+        item?.id ??
+        item?.value ??
+        item?.uuid ??
+        item?.ID;
+
+    return value == null ? "" : String(value);
+};
+
+
+const getModuleLabel = (item) =>
+    item?.judul ??
+    item?.nama ??
+    item?.nama_modul ??
+    item?.label ??
+    `Modul ${getModuleId(item)}`;
+
+
+const extractQuestions = (dataset) => {
+    if (Array.isArray(dataset)) return dataset;
+
+    return [
+        dataset?.soal,
+        dataset?.questions,
+        dataset?.items,
+        dataset?.data,
+        dataset?.data?.soal,
+        dataset?.data?.questions,
+        dataset?.data?.items,
+        dataset?.data?.data,
+    ].find(Array.isArray) ?? [];
+};
+
+
+const emptyDraft = () => ({
+    id: null,
+    soal: "",
+    enable_file_upload: false,
+    originalSoal: "",
+    originalEnableFileUpload: false,
+    _deleted: false,
+});
+
+
+const createDrafts = (dataset) =>
+    extractQuestions(dataset).map((item) => {
+        const soal = item?.soal ?? item?.pertanyaan ?? "";
+        const upload = Boolean(item?.enable_file_upload);
+
+        return {
+            id: item?.id ?? item?.soal_id ?? null,
+            soal,
+            enable_file_upload: upload,
+            originalSoal: soal,
+            originalEnableFileUpload: upload,
+            _deleted: false,
+        };
+    });
+
+
+const activeCount = (items) =>
+    items.filter(
+        (item) =>
+            !item?._deleted &&
+            String(item?.soal ?? "").trim(),
+    ).length;
+
 
-SyntaxHighlighter.registerLanguage('c', c);
+function QuestionCard({
+    item,
+    index,
+    side,
+    supportsFileUpload,
+    isSaving,
+    onChange,
+    onCreate,
+    onCopy,
+}) {
+    if (!item) {
+        return (
+            <div className="flex min-h-[300px] flex-col items-center justify-center rounded-depth-lg border border-dashed border-depth bg-depth-card p-5 text-center">
+                <p className="text-sm font-semibold text-depth-primary">
+                    Soal {index + 1} tidak ada
+                </p>
+
+                <p className="mt-1 text-xs text-depth-secondary">
+                    Modul {side} memiliki soal lebih sedikit.
+                </p>
+
+                <button
+                    type="button"
+                    onClick={onCreate}
+                    disabled={isSaving}
+                    className="mt-4 rounded-depth-md border border-depth bg-depth-interactive px-4 py-2 text-xs font-semibold text-depth-primary"
+                >
+                    + Buat Soal
+                </button>
+            </div>
+        );
+    }
 
-const tabs = [
-    { key: "text", label: "Text" },
-    { key: "preview", label: "Preview" },
-    { key: "split", label: "Side by Side" },
-];
+    if (item._deleted) {
+        return (
+            <div className="flex min-h-[300px] flex-col items-center justify-center rounded-depth-lg border border-red-500/40 bg-red-500/10 p-5 text-center">
+                <span className="text-xs font-semibold text-red-400">
+                    Soal {index + 1} akan dihapus
+                </span>
+
+                <button
+                    type="button"
+                    onClick={() => onChange({ _deleted: false })}
+                    disabled={isSaving}
+                    className="mt-4 rounded-depth-md border border-depth bg-depth-card px-4 py-2 text-xs font-semibold text-depth-primary"
+                >
+                    Batalkan Hapus
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4 rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-sm">
+            <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-depth-primary">
+                        Soal {index + 1}
+                    </span>
+
+                    <span className="rounded-depth-full border border-depth bg-depth-interactive px-2 py-0.5 text-[10px] font-semibold text-depth-secondary">
+                        {side}
+                    </span>
+
+                    {!item.id && (
+                        <span className="text-[10px] font-semibold text-emerald-500">
+                            BARU
+                        </span>
+                    )}
+                </div>
+
+                <div className="flex gap-2">
+                    {onCopy && (
+                        <button
+                            type="button"
+                            onClick={onCopy}
+                            disabled={!item.soal.trim() || isSaving}
+                            className="rounded-depth-md border border-depth bg-depth-interactive px-2.5 py-1 text-[10px] font-semibold text-depth-secondary disabled:opacity-40"
+                        >
+                            {side === "ID" ? "Copy → EN" : "← Copy to ID"}
+                        </button>
+                    )}
+
+                    <button
+                        type="button"
+                        onClick={() => onChange({ _deleted: true })}
+                        disabled={isSaving}
+                        className="rounded-depth-md border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-[10px] font-semibold text-red-400"
+                    >
+                        Hapus
+                    </button>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
+                <div>
+                    <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                        Markdown
+                    </label>
+
+                    <textarea
+                        value={item.soal}
+                        onChange={(e) => onChange({ soal: e.target.value })}
+                        spellCheck={false}
+                        rows={7}
+                        disabled={isSaving}
+                        className="min-h-[150px] w-full resize-y rounded-depth-md border border-depth bg-depth-card p-3 font-mono text-sm leading-relaxed text-depth-primary shadow-depth-inset focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] disabled:opacity-60"
+                    />
+                </div>
+
+                <div>
+                    <div className="mb-1.5 flex justify-between">
+                        <span className="text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                            Preview
+                        </span>
+
+                        <span className="text-[10px] text-emerald-500">
+                            ● Live
+                        </span>
+                    </div>
+
+                    <div className="min-h-[150px] max-h-[350px] overflow-auto rounded-depth-md border border-depth bg-depth-interactive p-3 shadow-depth-inset">
+                        {item.soal.trim() ? (
+                            <MarkdownRenderer content={item.soal} />
+                        ) : (
+                            <div className="flex min-h-[120px] items-center justify-center text-xs italic text-depth-secondary">
+                                Belum diisi.
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {supportsFileUpload && (
+                <div className="flex items-center justify-between rounded-depth-md border border-depth bg-depth-interactive px-3 py-2">
+                    <div>
+                        <p className="text-xs font-semibold text-depth-primary">
+                            File Upload
+                        </p>
+
+                        <p className="text-[10px] text-depth-secondary">
+                            Izinkan jawaban berupa gambar.
+                        </p>
+                    </div>
+
+                    <DepthToggleButton
+                        isOn={item.enable_file_upload}
+                        onToggle={() =>
+                            onChange({
+                                enable_file_upload:
+                                    !item.enable_file_upload,
+                            })
+                        }
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
 
-const proseClassName =
-    "prose max-w-none whitespace-pre-wrap break-words text-depth-primary prose-headings:text-depth-primary prose-strong:text-depth-primary prose-li:marker:text-depth-secondary";
 
 export default function ModalBatchEditSoal({
-    title,
-    initialValue,
-    variant = "essay",
+    title = "Batch Edit Soal — ID / EN",
+    regularModules = [],
+    englishModules = [],
+    selectedRegularModuleId = "",
+    selectedEnglishModuleId = "",
+    onSelectRegularModule,
+    onSelectEnglishModule,
+    regularDataset = null,
+    englishDataset = null,
+    isLoading = false,
+    isFetching = false,
+    isSaving = false,
+    supportsFileUpload = false,
     onClose,
     onSubmit,
-    moduleOptions = [],
-    initialModuleId = "",
 }) {
-    const [activeTab, setActiveTab] = useState("text");
-    const [content, setContent] = useState(initialValue ?? "");
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const normalizedModuleOptions = useMemo(
-        () =>
-            (moduleOptions ?? [])
-                .map((option) => {
-                    const value = option?.idM ?? option?.id ?? option?.value ?? option?.uuid ?? option?.ID;
-                    if (value === undefined || value === null) {
-                        return null;
-                    }
-
-                    return {
-                        value: String(value),
-                        label: option?.judul ?? option?.name ?? option?.label ?? option?.title ?? String(value),
-                    };
-                })
-                .filter(Boolean),
-        [moduleOptions],
-    );
+    const [regularDrafts, setRegularDrafts] = useState([]);
+    const [englishDrafts, setEnglishDrafts] = useState([]);
+    const [regularDirty, setRegularDirty] = useState(false);
+    const [englishDirty, setEnglishDirty] = useState(false);
+    const [activePair, setActivePair] = useState(0);
 
-    const [selectedModuleId, setSelectedModuleId] = useState(() => {
-        if (initialModuleId) {
-            return String(initialModuleId);
-        }
+    useEffect(() => {
+        setRegularDrafts([]);
+        setRegularDirty(false);
+        setActivePair(0);
+    }, [selectedRegularModuleId]);
 
-        return normalizedModuleOptions[0]?.value ?? "";
-    });
+    useEffect(() => {
+        setEnglishDrafts([]);
+        setEnglishDirty(false);
+        setActivePair(0);
+    }, [selectedEnglishModuleId]);
 
     useEffect(() => {
-        setContent(initialValue ?? "");
-    }, [initialValue]);
+        if (!selectedRegularModuleId || regularDirty || isLoading || isFetching) {
+            return;
+        }
+
+        setRegularDrafts(createDrafts(regularDataset));
+    }, [
+        regularDataset,
+        regularDirty,
+        isLoading,
+        isFetching,
+        selectedRegularModuleId,
+    ]);
 
     useEffect(() => {
-        if (initialModuleId) {
-            setSelectedModuleId(String(initialModuleId));
-        } else if (normalizedModuleOptions.length > 0) {
-            setSelectedModuleId((prev) => prev || normalizedModuleOptions[0]?.value || "");
+        if (!selectedEnglishModuleId || englishDirty || isLoading || isFetching) {
+            return;
         }
-    }, [initialModuleId, normalizedModuleOptions]);
-
-    const markdownComponents = useMemo(
-        () => ({
-            code({ inline, className, children, ...props }) {
-
-                return (
-                    <SyntaxHighlighter
-                        style={vscDarkPlus}
-                        language='c'
-                        showLineNumbers
-                        PreTag="div"
-                        customStyle={{
-                            borderRadius: "0.75rem",
-                            background: "#111827",
-                            padding: "1.25rem",
-                        }}
-                        {...props}
-                    >
-                        {String(children).replace(/\n$/, "")}
-                    </SyntaxHighlighter>
-                );
-            },
-        }),
-        [],
+
+        setEnglishDrafts(createDrafts(englishDataset));
+    }, [
+        englishDataset,
+        englishDirty,
+        isLoading,
+        isFetching,
+        selectedEnglishModuleId,
+    ]);
+
+    const regularCount = useMemo(
+        () => activeCount(regularDrafts),
+        [regularDrafts],
     );
 
-    const previewItems = useMemo(() => {
-        if (variant === "pg") {
-            return parsePgMarkdown(content);
-        }
-        return parseEssayMarkdown(content);
-    }, [content, variant]);
+    const englishCount = useMemo(
+        () => activeCount(englishDrafts),
+        [englishDrafts],
+    );
 
-    const renderPreviewContent = () => {
-        if (!previewItems.length) {
-            return <p className="italic text-depth-secondary">Tidak ada konten untuk ditampilkan.</p>;
-        }
+    const rowCount = Math.max(
+        regularDrafts.length,
+        englishDrafts.length,
+    );
 
-        if (variant === "pg") {
-            return (
-                <ul className="space-y-3">
-                    {previewItems.map((item, index) => (
-                        <li
-                            key={`pg-preview-${index}`}
-                            className="relative p-5"
-                        >
-                            <div className="mb-3">
-                                <strong>Soal: {index + 1}</strong>
-                                <div className={`ml-4 mt-1 text-sm text-justify ${proseClassName}`}>
-                                    <ReactMarkdown
-                                        remarkPlugins={[remarkGfm, remarkBreaks]}
-                                        components={markdownComponents}
-                                    >
-                                        {item.pertanyaan || "_(kosong)_"}
-                                    </ReactMarkdown>
-                                </div>
-                            </div>
-                            <div className="mb-2">
-                                <strong>Pilihan:</strong>
-                                <ul className="ml-4 mt-1 space-y-2">
-                                    {item.options.map((option, optionIndex) => (
-                                        <li
-                                            key={`pg-option-${index}-${optionIndex}`}
-                                            className={`rounded-depth-md border px-3 py-2 text-sm shadow-depth-sm ${option.isCorrect
-                                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white shadow-depth-md"
-                                                : "border-depth bg-depth-interactive text-depth-primary"
-                                                }`}
-                                        >
-                                            <div className="flex items-center justify-between gap-2">
-                                                <div className={`flex-1 ${proseClassName}`}>
-                                                    <ReactMarkdown
-                                                        remarkPlugins={[remarkGfm, remarkBreaks]}
-                                                        components={markdownComponents}
-                                                    >
-                                                        {option.text || "_(kosong)_"}
-                                                    </ReactMarkdown>
-                                                </div>
-                                            </div>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </li>
-                    ))}
-                </ul>
-            );
-        }
+    const hasChanges = regularDirty || englishDirty;
+    const countsMatch = regularCount === englishCount;
 
-        return (
-            <ul className="space-y-3">
-                {previewItems.map((item, index) => (
-                    <li
-                        key={`essay-preview-${index}`}
-                        className="flex items-baseline justify-between rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-md"
-                    >
-                        <div className="flex-1 p-4">
-                            <strong>Soal: {index + 1}</strong>
-                            <br />
-                            <div className={`ml-2 text-sm text-justify ${proseClassName}`}>
-                                <ReactMarkdown
-                                    remarkPlugins={[remarkGfm, remarkBreaks]}
-                                    components={markdownComponents}
-                                >
-                                    {item.soal || "_(kosong)_"}
-                                </ReactMarkdown>
-                            </div>
-                        </div>
-                    </li>
-                ))}
-            </ul>
+    useEffect(() => {
+        setActivePair((current) =>
+            Math.min(current, Math.max(0, rowCount - 1)),
+        );
+    }, [rowCount]);
+
+    const patchRegular = (index, patch) => {
+        setRegularDrafts((items) =>
+            items.map((item, i) =>
+                i === index ? { ...item, ...patch } : item,
+            ),
         );
+
+        setRegularDirty(true);
     };
 
-    const previewPanel = (
-        <div className="min-h-[400px] overflow-y-auto rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-sm">
-            {renderPreviewContent()}
-        </div>
-    );
+    const patchEnglish = (index, patch) => {
+        setEnglishDrafts((items) =>
+            items.map((item, i) =>
+                i === index ? { ...item, ...patch } : item,
+            ),
+        );
 
-    const renderTextEditor = (className = "") => (
-        <textarea
-            className={`h-full min-h-[400px] w-full rounded-depth-lg border border-depth bg-depth-card p-4 font-mono text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0 ${className}`}
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder="Masukkan deskripsi soal dalam format Markdown..."
-        />
-    );
+        setEnglishDirty(true);
+    };
+
+    const createAt = (setter, dirtySetter, index) => {
+        setter((items) => {
+            const next = [...items];
+
+            while (next.length <= index) {
+                next.push(emptyDraft());
+            }
+
+            return next;
+        });
+
+        dirtySetter(true);
+    };
+
+    const copy = (source, setter, dirtySetter, index) => {
+        const item = source[index];
+        if (!item) return;
+
+        setter((items) => {
+            const next = [...items];
+
+            while (next.length <= index) {
+                next.push(emptyDraft());
+            }
+
+            next[index] = {
+                ...next[index],
+                soal: item.soal,
+                enable_file_upload: item.enable_file_upload,
+                _deleted: false,
+            };
+
+            return next;
+        });
+
+        dirtySetter(true);
+    };
+
+    const handleAddPair = () => {
+        const index = rowCount;
+
+        createAt(setRegularDrafts, setRegularDirty, index);
+        createAt(setEnglishDrafts, setEnglishDirty, index);
+
+        setActivePair(index);
+    };
 
-    const handleSubmit = async () => {
-        if (!onSubmit) {
-            onClose();
+    const handleClose = () => {
+        if (isSaving) return;
+
+        if (
+            hasChanges &&
+            !window.confirm("Ada perubahan yang belum disimpan. Tutup Batch Edit?")
+        ) {
+            return;
+        }
+
+        onClose?.();
+    };
+
+    const handleSave = async () => {
+        if (
+            isSaving ||
+            !hasChanges ||
+            !selectedRegularModuleId ||
+            !selectedEnglishModuleId
+        ) {
             return;
         }
 
-        setIsSubmitting(true);
         try {
-            await onSubmit({
-                rawContent: content,
-                items: previewItems,
-                modulId: selectedModuleId,
+            await onSubmit?.({
+                regular: {
+                    modulId: selectedRegularModuleId,
+                    items: regularDrafts,
+                },
+                english: {
+                    modulId: selectedEnglishModuleId,
+                    items: englishDrafts,
+                },
             });
-            onClose();
-        } catch (error) {
-            console.error("Batch edit submission failed:", error);
-        } finally {
-            setIsSubmitting(false);
+        } catch {
+            // Parent handles mutation error.
         }
     };
 
+    const regularItem = regularDrafts[activePair];
+    const englishItem = englishDrafts[activePair];
+
     return (
-        <ModalOverlay onClose={onClose} className="depth-modal-overlay z-50">
+        <ModalOverlay
+            onClose={handleClose}
+            className="depth-modal-overlay z-[70]"
+        >
             <div
-                className="depth-modal-container flex max-h-[90vh] flex-col overflow-hidden"
-                style={{ "--depth-modal-max-width": "72rem" }}
+                className="depth-modal-container flex max-h-[94vh] flex-col overflow-hidden p-0"
+                style={{ width: "96vw", maxWidth: "1500px" }}
             >
-                <div className="depth-modal-header">
-                    <h2 className="depth-modal-title">{title}</h2>
-                    <div className="flex items-center gap-3">
-                        <p>Move into: </p>
-                        {normalizedModuleOptions.length > 0 && (
+                <div className="depth-modal-header shrink-0 border-b border-depth px-6 py-4">
+                    <div>
+                        <h2 className="depth-modal-title">{title}</h2>
+
+                        <p className="mt-1 text-xs text-depth-secondary">
+                            Edit modul Indonesia dan English secara berdampingan.
+                        </p>
+                    </div>
+
+                    <ModalCloseButton
+                        onClick={handleClose}
+                        ariaLabel="Tutup batch edit soal"
+                    />
+                </div>
+
+                <div className="shrink-0 space-y-4 border-b border-depth bg-depth-interactive px-6 py-4">
+                    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                        <div>
+                            <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                                ID Module
+                            </label>
+
                             <select
-                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2 text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0 md:w-auto"
-                                value={selectedModuleId}
-                                onChange={(event) => setSelectedModuleId(event.target.value)}
+                                value={selectedRegularModuleId}
+                                onChange={(e) =>
+                                    onSelectRegularModule?.(e.target.value)
+                                }
+                                disabled={isSaving || hasChanges}
+                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2.5 text-sm font-semibold text-depth-primary"
                             >
-                                {normalizedModuleOptions.map((option) => (
-                                    <option key={option.value} value={option.value}>
-                                        {option.label}
+                                <option value="">Pilih modul ID...</option>
+
+                                {regularModules.map((item) => (
+                                    <option
+                                        key={getModuleId(item)}
+                                        value={getModuleId(item)}
+                                    >
+                                        {getModuleLabel(item)}
                                     </option>
                                 ))}
                             </select>
+                        </div>
+
+                        <div>
+                            <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                                EN Module
+                            </label>
+
+                            <select
+                                value={selectedEnglishModuleId}
+                                onChange={(e) =>
+                                    onSelectEnglishModule?.(e.target.value)
+                                }
+                                disabled={isSaving || hasChanges}
+                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2.5 text-sm font-semibold text-depth-primary"
+                            >
+                                <option value="">Pilih modul EN...</option>
+
+                                {englishModules.map((item) => (
+                                    <option
+                                        key={getModuleId(item)}
+                                        value={getModuleId(item)}
+                                    >
+                                        {getModuleLabel(item)}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2 text-xs">
+                        <span className="rounded-depth-md border border-depth bg-depth-card px-3 py-1.5">
+                            ID: {regularCount}
+                        </span>
+
+                        <span className="rounded-depth-md border border-depth bg-depth-card px-3 py-1.5">
+                            EN: {englishCount}
+                        </span>
+
+                        <span
+                            className={`rounded-depth-md border px-3 py-1.5 font-semibold ${
+                                countsMatch
+                                    ? "border-emerald-500/30 text-emerald-500"
+                                    : "border-amber-500/30 text-amber-500"
+                            }`}
+                        >
+                            {countsMatch
+                                ? "Jumlah sama"
+                                : "Jumlah berbeda"}
+                        </span>
+
+                        {(isLoading || isFetching) && (
+                            <span className="text-depth-secondary">
+                                Memuat...
+                            </span>
                         )}
+
+                        <button
+                            type="button"
+                            onClick={handleAddPair}
+                            disabled={
+                                isSaving ||
+                                isLoading ||
+                                isFetching ||
+                                !selectedRegularModuleId ||
+                                !selectedEnglishModuleId
+                            }
+                            className="ml-auto rounded-depth-md border border-depth bg-depth-card px-4 py-2 font-semibold text-depth-primary disabled:opacity-50"
+                        >
+                            + Tambah Pair
+                        </button>
                     </div>
-                    <ModalCloseButton onClick={onClose} ariaLabel="Tutup editor batch" />
                 </div>
 
-                <div className="flex gap-2 border-[color:var(--depth-border)] px-6 py-3 -mt-3">
-                    {tabs.map((tab) => {
-                        const isActive = activeTab === tab.key;
-                        return (
+                <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+                    {rowCount > 0 && (
+                        <div className="sticky top-0 z-20 mb-4">
+                            <PairNavigator
+                                count={rowCount}
+                                active={activePair}
+                                onChange={setActivePair}
+                            />
+                        </div>
+                    )}
+
+                    {isLoading && rowCount === 0 ? (
+                        <div className="flex min-h-[350px] items-center justify-center text-sm text-depth-secondary">
+                            Memuat soal...
+                        </div>
+                    ) : rowCount === 0 ? (
+                        <div className="flex min-h-[350px] flex-col items-center justify-center rounded-depth-lg border border-dashed border-depth text-center">
+                            <p className="text-sm font-semibold">
+                                Belum ada soal.
+                            </p>
+
                             <button
-                                key={tab.key}
-                                onClick={() => setActiveTab(tab.key)}
                                 type="button"
-                                className={`rounded-depth-md px-4 py-2 text-sm font-semibold transition ${isActive
-                                    ? "bg-[var(--depth-color-primary)] text-white shadow-depth-md"
-                                    : "border border-depth bg-depth-interactive text-depth-primary shadow-depth-sm hover:-translate-y-0.5 hover:shadow-depth-md"
-                                    }`}
+                                onClick={handleAddPair}
+                                className="mt-4 rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-2 text-sm font-semibold text-white"
                             >
-                                {tab.label}
+                                + Tambah Pair
                             </button>
-                        );
-                    })}
-                </div>
-
-                <div className="flex-1 overflow-y-auto px-6 py-4">
-                    {activeTab === "text" && renderTextEditor()}
-                    {activeTab === "preview" && previewPanel}
-                    {activeTab === "split" && (
-                        <div className="grid gap-4 md:grid-cols-2">
-                            {renderTextEditor("md:min-h-[500px]")}
-                            <div className="min-h-[500px] overflow-y-auto rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-sm">
-                                {renderPreviewContent()}
-                            </div>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                            <QuestionCard
+                                item={regularItem}
+                                index={activePair}
+                                side="ID"
+                                supportsFileUpload={supportsFileUpload}
+                                isSaving={isSaving}
+                                onChange={(patch) =>
+                                    patchRegular(activePair, patch)
+                                }
+                                onCreate={() =>
+                                    createAt(
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                    )
+                                }
+                                onCopy={() =>
+                                    copy(
+                                        regularDrafts,
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                    )
+                                }
+                            />
+
+                            <QuestionCard
+                                item={englishItem}
+                                index={activePair}
+                                side="EN"
+                                supportsFileUpload={supportsFileUpload}
+                                isSaving={isSaving}
+                                onChange={(patch) =>
+                                    patchEnglish(activePair, patch)
+                                }
+                                onCreate={() =>
+                                    createAt(
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                    )
+                                }
+                                onCopy={() =>
+                                    copy(
+                                        englishDrafts,
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                    )
+                                }
+                            />
                         </div>
                     )}
                 </div>
 
-                {typeof onSubmit === "function" && (
-                    <div className="flex justify-end border-t border-[color:var(--depth-border)] bg-depth-card/80 px-6 py-4">
+                <div className="flex shrink-0 items-center justify-between gap-3 border-t border-depth bg-depth-card px-6 py-4">
+                    <span
+                        className={`text-xs ${
+                            hasChanges
+                                ? "font-semibold text-amber-500"
+                                : "text-depth-secondary"
+                        }`}
+                    >
+                        {hasChanges
+                            ? "Ada perubahan yang belum disimpan."
+                            : "Belum ada perubahan."}
+                    </span>
+
+                    <div className="flex gap-2">
                         <button
                             type="button"
-                            onClick={handleSubmit}
-                            disabled={isSubmitting}
-                            className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
+                            onClick={handleClose}
+                            disabled={isSaving}
+                            className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold text-depth-primary"
                         >
-                            {isSubmitting ? "Menyimpan..." : "Simpan Perubahan"}
+                            Batal
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={handleSave}
+                            disabled={
+                                isSaving ||
+                                isLoading ||
+                                isFetching ||
+                                !hasChanges ||
+                                !selectedRegularModuleId ||
+                                !selectedEnglishModuleId
+                            }
+                            className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white disabled:opacity-50"
+                        >
+                            {isSaving
+                                ? "Menyimpan..."
+                                : "Simpan Kedua Modul"}
                         </button>
                     </div>
-                )}
+                </div>
             </div>
         </ModalOverlay>
     );
 }
-
-export const parseEssayMarkdown = (markdown) => {
-    if (!markdown) {
-        return [];
-    }
-
-    // Split by "Soal X" pattern and filter empty entries
-    const soalPattern = /^Soal\s+\d+\s*\n/gm;
-    const parts = markdown.split(soalPattern).filter(part => part.trim().length > 0);
-
-    return parts.map((part) => {
-        return {
-            soal: part.trim(),
-        };
-    });
-};
-
-export const parsePgMarkdown = (markdown) => {
-    if (!markdown) {
-        return [];
-    }
-
-    // Split by "Soal X" pattern and filter empty entries
-    const soalPattern = /^Soal\s+\d+\s*\n/gm;
-    const parts = markdown.split(soalPattern).filter(part => part.trim().length > 0);
-
-    return parts.map((part) => {
-        const body = part.trim();
-
-        const questionMatch = body.match(/Pertanyaan:\s*\n([\s\S]*?)(?=\nPilihan:|\Z)/);
-        const question = questionMatch ? questionMatch[1].trim() : "";
-
-        const optionsMatch = body.match(/Pilihan:\s*\n([\s\S]*)/);
-        const optionsSection = optionsMatch ? optionsMatch[1].trim() : "";
-
-        const options = optionsSection
-            .split(/\n+/)
-            .filter((line) => line.trim().startsWith("-"))
-            .map((line) => {
-                const stripped = line.replace(/^-+\s*/, "").trim();
-                const indicatorMatch = stripped.match(/^\[(x|\s)\]\s*/i);
-                const isCorrect = indicatorMatch ? indicatorMatch[1].toLowerCase() === "x" : false;
-                const text = indicatorMatch
-                    ? stripped.replace(/^\[(x|\s)\]\s*/i, "").trim()
-                    : stripped;
-                return {
-                    text,
-                    isCorrect,
-                };
-            });
-
-        return {
-            pertanyaan: question,
-            options,
-        };
-    });
-};
diff --git a/resources/js/Components/Assistants/Modals/ModalBatchEditSoalPG.jsx b/resources/js/Components/Assistants/Modals/ModalBatchEditSoalPG.jsx
new file mode 100644
index 0000000..2239c95
--- /dev/null
+++ b/resources/js/Components/Assistants/Modals/ModalBatchEditSoalPG.jsx
@@ -0,0 +1,857 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { ModalOverlay } from "@/Components/Common/ModalPortal";
+import ModalCloseButton from "@/Components/Common/ModalCloseButton";
+
+import MarkdownRenderer from "../../MarkdownRenderer";
+import PairNavigator from "./PairNavigator";
+
+
+const OPTION_COUNT = 4;
+const LABELS = ["A", "B", "C", "D"];
+
+
+const getModuleId = (item) => {
+    const value =
+        item?.idM ??
+        item?.id ??
+        item?.value ??
+        item?.uuid ??
+        item?.ID;
+
+    return value == null ? "" : String(value);
+};
+
+
+const getModuleLabel = (item) =>
+    item?.judul ??
+    item?.nama ??
+    item?.nama_modul ??
+    item?.label ??
+    `Modul ${getModuleId(item)}`;
+
+
+const extractQuestions = (dataset) => {
+    if (Array.isArray(dataset)) return dataset;
+
+    return [
+        dataset?.soal,
+        dataset?.questions,
+        dataset?.items,
+        dataset?.data,
+        dataset?.data?.soal,
+        dataset?.data?.questions,
+        dataset?.data?.items,
+        dataset?.data?.data,
+    ].find(Array.isArray) ?? [];
+};
+
+
+const isCorrect = (question, option, index) => {
+    if (typeof option?.is_correct === "boolean") {
+        return option.is_correct;
+    }
+
+    if (option?.id && question?.opsi_benar_id) {
+        return option.id === question.opsi_benar_id;
+    }
+
+    return question?.correct_option === index;
+};
+
+
+const emptyOptions = () =>
+    Array.from(
+        { length: OPTION_COUNT },
+        () => ({
+            id: null,
+            text: "",
+            is_correct: false,
+        }),
+    );
+
+
+const emptyDraft = () => ({
+    id: null,
+    pertanyaan: "",
+    options: emptyOptions(),
+    correctIndex: 0,
+    originalPertanyaan: "",
+    originalOptions: emptyOptions(),
+    originalCorrectIndex: 0,
+    _deleted: false,
+});
+
+
+const normalizeOptions = (question) => {
+    const result = (question?.options ?? []).map((option) => ({
+        id: option?.id ?? null,
+        text: option?.text ?? "",
+        is_correct: option?.is_correct,
+    }));
+
+    while (result.length < OPTION_COUNT) {
+        result.push({
+            id: null,
+            text: "",
+            is_correct: false,
+        });
+    }
+
+    return result.slice(0, OPTION_COUNT);
+};
+
+
+const createDrafts = (dataset) =>
+    extractQuestions(dataset).map((question) => {
+        const options = normalizeOptions(question);
+        const found = options.findIndex((option, index) =>
+            isCorrect(question, option, index),
+        );
+
+        const correctIndex =
+            found >= 0
+                ? found
+                : typeof question?.correct_option === "number"
+                  ? question.correct_option
+                  : 0;
+
+        const pertanyaan =
+            question?.pertanyaan ??
+            question?.soal ??
+            "";
+
+        return {
+            id: question?.id ?? null,
+            pertanyaan,
+            options,
+            correctIndex,
+            originalPertanyaan: pertanyaan,
+            originalOptions: options.map((option) => ({ ...option })),
+            originalCorrectIndex: correctIndex,
+            _deleted: false,
+        };
+    });
+
+
+const activeCount = (items) =>
+    items.filter(
+        (item) =>
+            !item?._deleted &&
+            String(item?.pertanyaan ?? "").trim(),
+    ).length;
+
+
+function PGCard({
+    item,
+    index,
+    side,
+    isSaving,
+    onPatch,
+    onOption,
+    onCreate,
+    onCopy,
+}) {
+    if (!item) {
+        return (
+            <div className="flex min-h-[300px] flex-col items-center justify-center rounded-depth-lg border border-dashed border-depth bg-depth-card p-5 text-center">
+                <p className="text-sm font-semibold">
+                    Soal {index + 1} tidak ada
+                </p>
+
+                <p className="mt-1 text-xs text-depth-secondary">
+                    Modul {side} memiliki soal lebih sedikit.
+                </p>
+
+                <button
+                    type="button"
+                    onClick={onCreate}
+                    disabled={isSaving}
+                    className="mt-4 rounded-depth-md border border-depth bg-depth-interactive px-4 py-2 text-xs font-semibold"
+                >
+                    + Buat Soal
+                </button>
+            </div>
+        );
+    }
+
+    if (item._deleted) {
+        return (
+            <div className="flex min-h-[300px] flex-col items-center justify-center rounded-depth-lg border border-red-500/40 bg-red-500/10 p-5">
+                <p className="text-sm font-semibold text-red-400">
+                    Soal {index + 1} akan dihapus
+                </p>
+
+                <button
+                    type="button"
+                    onClick={() => onPatch({ _deleted: false })}
+                    className="mt-4 rounded-depth-md border border-depth bg-depth-card px-4 py-2 text-xs font-semibold"
+                >
+                    Batalkan Hapus
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4 rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-sm">
+            <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">
+                        Soal {index + 1}
+                    </span>
+
+                    <span className="rounded-depth-full border border-depth bg-depth-interactive px-2 py-0.5 text-[10px] font-semibold text-depth-secondary">
+                        {side}
+                    </span>
+
+                    {!item.id && (
+                        <span className="text-[10px] font-semibold text-emerald-500">
+                            BARU
+                        </span>
+                    )}
+                </div>
+
+                <div className="flex gap-2">
+                    <button
+                        type="button"
+                        onClick={onCopy}
+                        disabled={!item.pertanyaan.trim() || isSaving}
+                        className="rounded-depth-md border border-depth bg-depth-interactive px-2.5 py-1 text-[10px] font-semibold text-depth-secondary disabled:opacity-40"
+                    >
+                        {side === "ID" ? "Copy → EN" : "← Copy to ID"}
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={() => onPatch({ _deleted: true })}
+                        disabled={isSaving}
+                        className="rounded-depth-md border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-[10px] font-semibold text-red-400"
+                    >
+                        Hapus
+                    </button>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-3 2xl:grid-cols-2">
+                <div>
+                    <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                        Pertanyaan Markdown
+                    </label>
+
+                    <textarea
+                        value={item.pertanyaan}
+                        onChange={(e) =>
+                            onPatch({
+                                pertanyaan: e.target.value,
+                            })
+                        }
+                        spellCheck={false}
+                        rows={5}
+                        disabled={isSaving}
+                        className="min-h-[120px] w-full resize-y rounded-depth-md border border-depth bg-depth-card p-3 font-mono text-sm leading-relaxed text-depth-primary shadow-depth-inset focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
+                    />
+                </div>
+
+                <div>
+                    <div className="mb-1.5 flex justify-between">
+                        <span className="text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                            Preview
+                        </span>
+
+                        <span className="text-[10px] text-emerald-500">
+                            ● Live
+                        </span>
+                    </div>
+
+                    <div className="min-h-[120px] max-h-[260px] overflow-auto rounded-depth-md border border-depth bg-depth-interactive p-3 shadow-depth-inset">
+                        {item.pertanyaan.trim() ? (
+                            <MarkdownRenderer content={item.pertanyaan} />
+                        ) : (
+                            <div className="flex min-h-[90px] items-center justify-center text-xs italic text-depth-secondary">
+                                Belum diisi.
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                {item.options.map((option, optionIndex) => {
+                    const correct =
+                        item.correctIndex === optionIndex;
+
+                    return (
+                        <div
+                            key={option.id ?? optionIndex}
+                            className={`grid grid-cols-[auto_minmax(0,1fr)] gap-3 rounded-depth-md border p-3 ${
+                                correct
+                                    ? "border-[var(--depth-color-primary)]"
+                                    : "border-depth"
+                            }`}
+                        >
+                            <div className="flex items-start gap-2 pt-2">
+                                <input
+                                    type="radio"
+                                    name={`correct-${side}-${index}`}
+                                    checked={correct}
+                                    onChange={() =>
+                                        onPatch({
+                                            correctIndex: optionIndex,
+                                        })
+                                    }
+                                    disabled={isSaving}
+                                    className="mt-1 h-4 w-4 accent-[var(--depth-color-primary)]"
+                                />
+
+                                <span
+                                    className={`flex h-7 w-7 items-center justify-center rounded-depth-md text-xs font-bold ${
+                                        correct
+                                            ? "bg-[var(--depth-color-primary)] text-white"
+                                            : "border border-depth bg-depth-interactive text-depth-secondary"
+                                    }`}
+                                >
+                                    {LABELS[optionIndex]}
+                                </span>
+                            </div>
+
+                            <div className="grid min-w-0 grid-cols-1 gap-2 2xl:grid-cols-2">
+                                <textarea
+                                    value={option.text}
+                                    onChange={(e) =>
+                                        onOption(
+                                            optionIndex,
+                                            e.target.value,
+                                        )
+                                    }
+                                    spellCheck={false}
+                                    rows={2}
+                                    disabled={isSaving}
+                                    className="min-h-[68px] w-full resize-y rounded-depth-md border border-depth bg-depth-card p-2.5 font-mono text-xs leading-relaxed text-depth-primary shadow-depth-inset focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
+                                />
+
+                                <div className="min-h-[68px] max-h-[150px] overflow-auto rounded-depth-md border border-depth bg-depth-interactive p-2.5 text-sm shadow-depth-inset">
+                                    {option.text.trim() ? (
+                                        <MarkdownRenderer
+                                            content={option.text}
+                                        />
+                                    ) : (
+                                        <div className="flex min-h-[45px] items-center justify-center text-xs italic text-depth-secondary">
+                                            Belum diisi.
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+
+export default function ModalBatchEditSoalPG({
+    title = "Batch Edit Soal PG — ID / EN",
+    regularModules = [],
+    englishModules = [],
+    selectedRegularModuleId = "",
+    selectedEnglishModuleId = "",
+    onSelectRegularModule,
+    onSelectEnglishModule,
+    regularDataset = null,
+    englishDataset = null,
+    isLoading = false,
+    isFetching = false,
+    isSaving = false,
+    onClose,
+    onSubmit,
+}) {
+    const [regularDrafts, setRegularDrafts] = useState([]);
+    const [englishDrafts, setEnglishDrafts] = useState([]);
+    const [regularDirty, setRegularDirty] = useState(false);
+    const [englishDirty, setEnglishDirty] = useState(false);
+    const [activePair, setActivePair] = useState(0);
+
+    useEffect(() => {
+        setRegularDrafts([]);
+        setRegularDirty(false);
+        setActivePair(0);
+    }, [selectedRegularModuleId]);
+
+    useEffect(() => {
+        setEnglishDrafts([]);
+        setEnglishDirty(false);
+        setActivePair(0);
+    }, [selectedEnglishModuleId]);
+
+    useEffect(() => {
+        if (!selectedRegularModuleId || regularDirty || isLoading || isFetching) {
+            return;
+        }
+
+        setRegularDrafts(createDrafts(regularDataset));
+    }, [
+        regularDataset,
+        regularDirty,
+        isLoading,
+        isFetching,
+        selectedRegularModuleId,
+    ]);
+
+    useEffect(() => {
+        if (!selectedEnglishModuleId || englishDirty || isLoading || isFetching) {
+            return;
+        }
+
+        setEnglishDrafts(createDrafts(englishDataset));
+    }, [
+        englishDataset,
+        englishDirty,
+        isLoading,
+        isFetching,
+        selectedEnglishModuleId,
+    ]);
+
+    const regularCount = useMemo(
+        () => activeCount(regularDrafts),
+        [regularDrafts],
+    );
+
+    const englishCount = useMemo(
+        () => activeCount(englishDrafts),
+        [englishDrafts],
+    );
+
+    const rowCount = Math.max(
+        regularDrafts.length,
+        englishDrafts.length,
+    );
+
+    const hasChanges = regularDirty || englishDirty;
+
+    useEffect(() => {
+        setActivePair((current) =>
+            Math.min(current, Math.max(0, rowCount - 1)),
+        );
+    }, [rowCount]);
+
+    const patch = (setter, dirtySetter, index, patch) => {
+        setter((items) =>
+            items.map((item, i) =>
+                i === index
+                    ? {
+                          ...item,
+                          ...patch,
+                      }
+                    : item,
+            ),
+        );
+
+        dirtySetter(true);
+    };
+
+    const createAt = (setter, dirtySetter, index) => {
+        setter((items) => {
+            const next = [...items];
+
+            while (next.length <= index) {
+                next.push(emptyDraft());
+            }
+
+            return next;
+        });
+
+        dirtySetter(true);
+    };
+
+    const patchOption = (
+        setter,
+        dirtySetter,
+        questionIndex,
+        optionIndex,
+        text,
+    ) => {
+        setter((items) =>
+            items.map((item, index) =>
+                index !== questionIndex
+                    ? item
+                    : {
+                          ...item,
+                          options: item.options.map((option, i) =>
+                              i === optionIndex
+                                  ? {
+                                        ...option,
+                                        text,
+                                    }
+                                  : option,
+                          ),
+                      },
+            ),
+        );
+
+        dirtySetter(true);
+    };
+
+    const copy = (source, setter, dirtySetter, index) => {
+        const item = source[index];
+        if (!item) return;
+
+        setter((items) => {
+            const next = [...items];
+
+            while (next.length <= index) {
+                next.push(emptyDraft());
+            }
+
+            const destination = next[index];
+
+            next[index] = {
+                ...destination,
+                pertanyaan: item.pertanyaan,
+                correctIndex: item.correctIndex,
+                _deleted: false,
+                options: item.options.map((option, optionIndex) => ({
+                    id: destination?.options?.[optionIndex]?.id ?? null,
+                    text: option.text,
+                })),
+            };
+
+            return next;
+        });
+
+        dirtySetter(true);
+    };
+
+    const handleAddPair = () => {
+        const index = rowCount;
+
+        createAt(setRegularDrafts, setRegularDirty, index);
+        createAt(setEnglishDrafts, setEnglishDirty, index);
+
+        setActivePair(index);
+    };
+
+    const handleClose = () => {
+        if (isSaving) return;
+
+        if (
+            hasChanges &&
+            !window.confirm("Ada perubahan yang belum disimpan. Tutup Batch Edit?")
+        ) {
+            return;
+        }
+
+        onClose?.();
+    };
+
+    const handleSave = async () => {
+        if (
+            isSaving ||
+            !hasChanges ||
+            !selectedRegularModuleId ||
+            !selectedEnglishModuleId
+        ) {
+            return;
+        }
+
+        try {
+            await onSubmit?.({
+                regular: {
+                    modulId: selectedRegularModuleId,
+                    items: regularDrafts,
+                },
+                english: {
+                    modulId: selectedEnglishModuleId,
+                    items: englishDrafts,
+                },
+            });
+        } catch {
+            // Parent handles mutation error.
+        }
+    };
+
+    const regularItem = regularDrafts[activePair];
+    const englishItem = englishDrafts[activePair];
+
+    return (
+        <ModalOverlay
+            onClose={handleClose}
+            className="depth-modal-overlay z-[70]"
+        >
+            <div
+                className="depth-modal-container flex max-h-[94vh] flex-col overflow-hidden p-0"
+                style={{ width: "96vw", maxWidth: "1600px" }}
+            >
+                <div className="depth-modal-header shrink-0 border-b border-depth px-6 py-4">
+                    <div>
+                        <h2 className="depth-modal-title">{title}</h2>
+
+                        <p className="mt-1 text-xs text-depth-secondary">
+                            Edit PG Indonesia dan English secara berdampingan.
+                        </p>
+                    </div>
+
+                    <ModalCloseButton
+                        onClick={handleClose}
+                        ariaLabel="Tutup batch edit PG"
+                    />
+                </div>
+
+                <div className="shrink-0 space-y-4 border-b border-depth bg-depth-interactive px-6 py-4">
+                    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                        <div>
+                            <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                                ID Module
+                            </label>
+
+                            <select
+                                value={selectedRegularModuleId}
+                                onChange={(e) =>
+                                    onSelectRegularModule?.(e.target.value)
+                                }
+                                disabled={isSaving || hasChanges}
+                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2.5 text-sm font-semibold text-depth-primary"
+                            >
+                                <option value="">Pilih modul ID...</option>
+
+                                {regularModules.map((item) => (
+                                    <option
+                                        key={getModuleId(item)}
+                                        value={getModuleId(item)}
+                                    >
+                                        {getModuleLabel(item)}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div>
+                            <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                                EN Module
+                            </label>
+
+                            <select
+                                value={selectedEnglishModuleId}
+                                onChange={(e) =>
+                                    onSelectEnglishModule?.(e.target.value)
+                                }
+                                disabled={isSaving || hasChanges}
+                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2.5 text-sm font-semibold text-depth-primary"
+                            >
+                                <option value="">Pilih modul EN...</option>
+
+                                {englishModules.map((item) => (
+                                    <option
+                                        key={getModuleId(item)}
+                                        value={getModuleId(item)}
+                                    >
+                                        {getModuleLabel(item)}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2 text-xs">
+                        <span className="rounded-depth-md border border-depth bg-depth-card px-3 py-1.5">
+                            ID: {regularCount}
+                        </span>
+
+                        <span className="rounded-depth-md border border-depth bg-depth-card px-3 py-1.5">
+                            EN: {englishCount}
+                        </span>
+
+                        <span
+                            className={`rounded-depth-md border px-3 py-1.5 font-semibold ${
+                                regularCount === englishCount
+                                    ? "border-emerald-500/30 text-emerald-500"
+                                    : "border-amber-500/30 text-amber-500"
+                            }`}
+                        >
+                            {regularCount === englishCount
+                                ? "Jumlah sama"
+                                : "Jumlah berbeda"}
+                        </span>
+
+                        {(isLoading || isFetching) && (
+                            <span className="text-depth-secondary">
+                                Memuat...
+                            </span>
+                        )}
+
+                        <button
+                            type="button"
+                            onClick={handleAddPair}
+                            disabled={
+                                isSaving ||
+                                isLoading ||
+                                isFetching ||
+                                !selectedRegularModuleId ||
+                                !selectedEnglishModuleId
+                            }
+                            className="ml-auto rounded-depth-md border border-depth bg-depth-card px-4 py-2 font-semibold disabled:opacity-50"
+                        >
+                            + Tambah Pair
+                        </button>
+                    </div>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+                    {rowCount > 0 && (
+                        <div className="sticky top-0 z-20 mb-4">
+                            <PairNavigator
+                                count={rowCount}
+                                active={activePair}
+                                onChange={setActivePair}
+                            />
+                        </div>
+                    )}
+
+                    {isLoading && rowCount === 0 ? (
+                        <div className="flex min-h-[350px] items-center justify-center text-sm text-depth-secondary">
+                            Memuat soal...
+                        </div>
+                    ) : rowCount === 0 ? (
+                        <div className="flex min-h-[350px] flex-col items-center justify-center rounded-depth-lg border border-dashed border-depth">
+                            <p className="text-sm font-semibold">
+                                Belum ada soal.
+                            </p>
+
+                            <button
+                                type="button"
+                                onClick={handleAddPair}
+                                className="mt-4 rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-2 text-sm font-semibold text-white"
+                            >
+                                + Tambah Pair
+                            </button>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-1 gap-4 2xl:grid-cols-2">
+                            <PGCard
+                                item={regularItem}
+                                index={activePair}
+                                side="ID"
+                                isSaving={isSaving}
+                                onPatch={(value) =>
+                                    patch(
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                        value,
+                                    )
+                                }
+                                onOption={(optionIndex, text) =>
+                                    patchOption(
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                        optionIndex,
+                                        text,
+                                    )
+                                }
+                                onCreate={() =>
+                                    createAt(
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                    )
+                                }
+                                onCopy={() =>
+                                    copy(
+                                        regularDrafts,
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                    )
+                                }
+                            />
+
+                            <PGCard
+                                item={englishItem}
+                                index={activePair}
+                                side="EN"
+                                isSaving={isSaving}
+                                onPatch={(value) =>
+                                    patch(
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                        value,
+                                    )
+                                }
+                                onOption={(optionIndex, text) =>
+                                    patchOption(
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                        optionIndex,
+                                        text,
+                                    )
+                                }
+                                onCreate={() =>
+                                    createAt(
+                                        setEnglishDrafts,
+                                        setEnglishDirty,
+                                        activePair,
+                                    )
+                                }
+                                onCopy={() =>
+                                    copy(
+                                        englishDrafts,
+                                        setRegularDrafts,
+                                        setRegularDirty,
+                                        activePair,
+                                    )
+                                }
+                            />
+                        </div>
+                    )}
+                </div>
+
+                <div className="flex shrink-0 items-center justify-between gap-3 border-t border-depth bg-depth-card px-6 py-4">
+                    <span
+                        className={`text-xs ${
+                            hasChanges
+                                ? "font-semibold text-amber-500"
+                                : "text-depth-secondary"
+                        }`}
+                    >
+                        {hasChanges
+                            ? "Ada perubahan yang belum disimpan."
+                            : "Belum ada perubahan."}
+                    </span>
+
+                    <div className="flex gap-2">
+                        <button
+                            type="button"
+                            onClick={handleClose}
+                            disabled={isSaving}
+                            className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold"
+                        >
+                            Batal
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={handleSave}
+                            disabled={
+                                isSaving ||
+                                isLoading ||
+                                isFetching ||
+                                !hasChanges ||
+                                !selectedRegularModuleId ||
+                                !selectedEnglishModuleId
+                            }
+                            className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white disabled:opacity-50"
+                        >
+                            {isSaving
+                                ? "Menyimpan..."
+                                : "Simpan Kedua Modul"}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ModalOverlay>
+    );
+}
diff --git a/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx b/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
index be40db5..dfefaf8 100644
--- a/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
+++ b/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
@@ -1,139 +1,207 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
-import { send } from "@/lib/http";
+
 import { api } from "@/lib/api";
-import {
-    store as storeNilai,
-    update as updateNilai,
-} from "@/lib/routes/nilai";
+import { send } from "@/lib/http";
+import { store as storeNilai, update as updateNilai } from "@/lib/routes/nilai";
 import { ModalOverlay } from "@/Components/Common/ModalPortal";
 import ModalCloseButton from "@/Components/Common/ModalCloseButton";
+import MarkdownRenderer from "../../MarkdownRenderer";
 
-const scoresSchema = [
-    { key: "tp", label: "TP" },
-    { key: "ta", label: "TA" },
-    { key: "d1", label: "D1" },
-    { key: "d2", label: "D2" },
-    { key: "d3", label: "D3" },
-    { key: "d4", label: "D4" },
-    { key: "l1", label: "I1" },
-    { key: "l2", label: "I2" },
+const SCORES = [
+    ["tp", "TP"], ["ta", "TA"], ["d1", "D1"], ["d2", "D2"],
+    ["d3", "D3"], ["d4", "D4"], ["l1", "I1"], ["l2", "I2"],
 ];
 
-const clampScore = (value) => {
-    const parsed = Number(value);
+const TABS = [
+    { key: "tp", label: "Tugas Pendahuluan", needsNim: true },
+    { key: "ta", label: "Tes Awal" },
+    { key: "jurnal", label: "Jurnal" },
+    { key: "fitb", label: "FITB" },
+    { key: "mandiri", label: "Mandiri" },
+    { key: "tk", label: "Tes Keterampilan" },
+];
 
-    if (Number.isNaN(parsed)) {
-        return 0;
-    }
+const CONFIG = {
+    ta: ["jawaban-ta", "jawaban_ta"],
+    jurnal: ["jawaban-jurnal", "jawaban_jurnal"],
+    fitb: ["jawaban-fitb", "jawaban_fitb"],
+    mandiri: ["jawaban-mandiri", "jawaban_mandiri"],
+    tk: ["jawaban-tk", "jawaban_tk"],
+};
 
-    return Math.min(Math.max(parsed, 0), 100);
+const clamp = (v, min, max) => {
+    const n = Number(v);
+    return Number.isNaN(n) ? min : Math.min(Math.max(n, min), max);
 };
 
-const clampRating = (value) => {
-    if (value === "" || value === null || value === undefined) {
-        return null;
-    }
+const clampScore = (v) => clamp(v, 0, 100);
+const clampRating = (v) =>
+    v === "" || v == null ? null : Number(clamp(v, 0.1, 5).toFixed(1));
+
+const isImage = (url) =>
+    typeof url === "string" &&
+    /\.(jpe?g|png|gif|bmp|webp|svg)$/i.test(url.split(/[?#]/)[0]);
 
-    const parsed = Number(value);
+const parseAttachment = (entry) => {
+    const raw = typeof entry?.jawaban === "string" ? entry.jawaban : "";
+    const answer = raw === "-" ? "" : raw;
+    const direct = entry?.attachment_url?.trim?.();
 
-    if (Number.isNaN(parsed)) {
-        return null;
+    if (direct) return { answer, url: direct };
+
+    if (/^\s*[\[{]/.test(answer)) {
+        try {
+            const data = JSON.parse(answer);
+            const url =
+                data?.url ??
+                data?.attachment_url ??
+                data?.fileUrl ??
+                data?.file_url;
+
+            if (url)
+                return {
+                    answer: data?.answer ?? data?.caption ?? "",
+                    url,
+                };
+        } catch {}
     }
 
-    const clamped = Math.min(Math.max(parsed, 0.1), 5);
+    return { answer, url: null };
+};
+
+const normalize = (type, item, index) => {
+    const supportsAttachment = ["tp", "jurnal", "fitb"].includes(type);
+    const attachment = supportsAttachment ? parseAttachment(item) : null;
+    const pg = type === "ta" || type === "tk";
 
-    return Number(clamped.toFixed(1));
+    return {
+        soalId: item.soal_id ?? index,
+        question: item.soal_text ?? item.pertanyaan ?? "Soal tidak tersedia",
+        answer: pg
+            ? null
+            : attachment
+              ? attachment.answer
+              : typeof item.jawaban === "string"
+                ? item.jawaban
+                : "-",
+        attachmentUrl: attachment?.url ?? null,
+        options: pg && Array.isArray(item.options) ? item.options : [],
+        selectedOptionId: pg ? item.selected_opsi_id ?? null : null,
+        correctOptionId: pg ? item.opsi_benar_id ?? null : null,
+    };
 };
 
-const isLikelyImageUrl = (url) => {
-    if (typeof url !== "string" || url.trim() === "") {
-        return false;
-    }
+async function fetchAnswers(type, praktikan, modul) {
+    if (type === "tp") {
+        if (!praktikan?.nim) throw new Error("NIM praktikan tidak ditemukan.");
 
-    try {
-        const normalized = url.split("?")[0] ?? url;
+        const { data } = await api.get(
+            `/api-v1/jawaban-tp/${praktikan.nim}/${modul.id}`,
+        );
 
-        return /\.(jpe?g|png|gif|bmp|webp|svg)$/i.test(normalized);
-    } catch (error) {
-        return false;
-    }
-};
+        if (data?.success === false)
+            throw new Error(data?.message ?? "Gagal memuat jawaban TP.");
+
+        const items = Array.isArray(data?.data?.jawabanData)
+            ? data.data.jawabanData
+            : [];
 
-const normalizeAnswerWithAttachment = (entry) => {
-    const rawAnswer = typeof entry?.jawaban === "string" ? entry.jawaban : "";
-    const normalizedAnswer = rawAnswer === "-" ? "" : rawAnswer;
-    const directAttachmentUrl =
-        typeof entry?.attachment_url === "string" && entry.attachment_url.trim() !== ""
-            ? entry.attachment_url.trim()
-            : null;
-    const directAttachmentFileId =
-        typeof entry?.attachment_file_id === "string" && entry.attachment_file_id.trim() !== ""
-            ? entry.attachment_file_id.trim()
-            : null;
-
-    if (directAttachmentUrl) {
         return {
-            answerText: normalizedAnswer,
-            attachmentUrl: directAttachmentUrl,
-            attachmentFileId: directAttachmentFileId,
+            questions: items.map((x, i) => normalize(type, x, i)),
+            notice: data?.message,
         };
     }
 
-    if (normalizedAnswer.trim().startsWith("{") || normalizedAnswer.trim().startsWith("[")) {
-        try {
-            const parsed = JSON.parse(normalizedAnswer);
-
-            if (parsed && typeof parsed === "object") {
-                const candidateUrl =
-                    typeof parsed.url === "string"
-                        ? parsed.url
-                        : typeof parsed.attachment_url === "string"
-                            ? parsed.attachment_url
-                            : typeof parsed.fileUrl === "string"
-                                ? parsed.fileUrl
-                                : typeof parsed.file_url === "string"
-                                    ? parsed.file_url
-                                    : null;
-
-                if (candidateUrl) {
-                    return {
-                        answerText:
-                            typeof parsed.answer === "string"
-                                ? parsed.answer
-                                : typeof parsed.caption === "string"
-                                    ? parsed.caption
-                                    : "",
-                        attachmentUrl: candidateUrl,
-                        attachmentFileId:
-                            parsed.fileId ??
-                            parsed.file_id ??
-                            parsed.attachment_file_id ??
-                            null,
-                    };
-                }
-            }
-        } catch (error) {
-            // Treat as plain text if parsing fails.
-        }
-    }
+    if (!praktikan?.id) throw new Error("Praktikan tidak ditemukan.");
+
+    const [endpoint, key] = CONFIG[type] ?? [];
+    if (!endpoint) return { questions: [] };
+
+    const { data } = await api.get(
+        `/api-v1/${endpoint}/praktikan/${praktikan.id}/modul/${modul.id}`,
+    );
+
+    if (data?.success === false)
+        throw new Error(data?.message ?? "Gagal memuat jawaban.");
+
+    const items = Array.isArray(data?.[key]) ? data[key] : [];
 
     return {
-        answerText: normalizedAnswer,
-        attachmentUrl: null,
-        attachmentFileId: null,
+        questions: items.map((x, i) => normalize(type, x, i)),
+        notice: data?.message,
     };
-};
+}
 
-const QUESTION_TABS = [
-    { key: "tp", label: "Tugas Pendahuluan", needsNim: true },
-    { key: "ta", label: "Tes Awal" },
-    { key: "jurnal", label: "Jurnal" },
-    { key: "fitb", label: "FITB" },
-    { key: "mandiri", label: "Mandiri" },
-    { key: "tk", label: "Tes Keterampilan" },
-];
+async function fetchAutoScore(type, praktikanId, modulId) {
+    const [, key] = CONFIG[type];
+
+    const { data } = await api.get(
+        `/api-v1/jawaban-${type}/praktikan/${praktikanId}/modul/${modulId}`,
+    );
+
+    const items = Array.isArray(data?.[key]) ? data[key] : [];
+    if (!items.length) return { score: 0, hasAnswers: false };
+
+    const correct = items.filter(
+        (x) =>
+            x.selected_opsi_id &&
+            x.selected_opsi_id === x.opsi_benar_id,
+    ).length;
+
+    return {
+        score: Math.round((correct / items.length) * 10000) / 100,
+        hasAnswers: true,
+    };
+}
+
+function QuestionNav({ count, active, onChange }) {
+    if (!count) return null;
+
+    return (
+        <div className="flex items-center gap-2 rounded-depth-md border border-depth bg-depth-card p-2 shadow-depth-md">
+            <button
+                type="button"
+                disabled={!active}
+                onClick={() => onChange(active - 1)}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold disabled:opacity-40"
+            >
+                ← <span className="hidden sm:inline">Previous</span>
+            </button>
+
+            <div className="flex min-w-0 flex-1 gap-1 overflow-x-auto">
+                {Array.from({ length: count }, (_, i) => (
+                    <button
+                        key={i}
+                        type="button"
+                        onClick={() => onChange(i)}
+                        className={`h-8 min-w-8 shrink-0 rounded-depth-md border px-2 text-xs font-semibold ${
+                            active === i
+                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white"
+                                : "border-depth bg-depth-interactive text-depth-secondary"
+                        }`}
+                    >
+                        {i + 1}
+                    </button>
+                ))}
+            </div>
+
+            <span className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold">
+                {active + 1} / {count}
+            </span>
+
+            <button
+                type="button"
+                disabled={active >= count - 1}
+                onClick={() => onChange(active + 1)}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold disabled:opacity-40"
+            >
+                <span className="hidden sm:inline">Next</span> →
+            </button>
+        </div>
+    );
+}
 
 export default function ModalInputNilai({
     onClose,
@@ -141,946 +209,531 @@ export default function ModalInputNilai({
     asistenId,
     onSaved,
 }) {
+    const bodyRef = useRef(null);
+
     const [scores, setScores] = useState({
-        tp: 0,
-        ta: 0,
-        d1: 0,
-        d2: 0,
-        d3: 0,
-        d4: 0,
-        l1: 0,
-        l2: 0,
+        tp: 0, ta: 0, d1: 0, d2: 0,
+        d3: 0, d4: 0, l1: 0, l2: 0,
     });
-    const [isSaving, setIsSaving] = useState(false);
-    const [activeQuestionTab, setActiveQuestionTab] = useState(null);
+    const [activeTab, setActiveTab] = useState(null);
+    const [activeQuestion, setActiveQuestion] = useState(0);
     const [rating, setRating] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
 
-    const nilaiSebelumnya = assignment?.nilai ?? null;
+    const nilai = assignment?.nilai ?? null;
     const praktikan = assignment?.praktikan ?? null;
     const modul = assignment?.modul ?? null;
     const kelas = praktikan?.kelas ?? null;
 
-    const availableQuestionTabs = useMemo(() => {
-        if (!modul?.id) {
-            return [];
-        }
-
-        return QUESTION_TABS.filter((tab) =>
-            tab.needsNim ? Boolean(praktikan?.nim) : Boolean(praktikan?.id)
-        );
-    }, [modul?.id, praktikan?.id, praktikan?.nim]);
-
-    useEffect(() => {
-        if (availableQuestionTabs.length === 0) {
-            setActiveQuestionTab(null);
-
-            return;
-        }
-
-        if (
-            !availableQuestionTabs.some((tab) => tab.key === activeQuestionTab)
-        ) {
-            setActiveQuestionTab(availableQuestionTabs[0].key);
-        }
-    }, [availableQuestionTabs, activeQuestionTab]);
-
-    const selectedQuestionTab = useMemo(
+    const tabs = useMemo(
         () =>
-            availableQuestionTabs.find(
-                (tab) => tab.key === activeQuestionTab
-            ) ?? null,
-        [availableQuestionTabs, activeQuestionTab]
+            !modul?.id
+                ? []
+                : TABS.filter((x) =>
+                      x.needsNim
+                          ? Boolean(praktikan?.nim)
+                          : Boolean(praktikan?.id),
+                  ),
+        [modul?.id, praktikan?.id, praktikan?.nim],
     );
 
-    const canFetchQuestions = Boolean(
-        selectedQuestionTab &&
-        modul?.id &&
-        (selectedQuestionTab.needsNim ? praktikan?.nim : praktikan?.id)
-    );
+    useEffect(() => {
+        if (!tabs.length) return setActiveTab(null);
+        if (!tabs.some((x) => x.key === activeTab)) setActiveTab(tabs[0].key);
+    }, [tabs, activeTab]);
+
+    useEffect(() => {
+        setActiveQuestion(0);
+        if (bodyRef.current) bodyRef.current.scrollTop = 0;
+    }, [activeTab]);
 
     const {
-        data: questionResult,
-        isLoading: isQuestionsLoading,
-        isError: isQuestionsError,
-        error: questionsError,
-        refetch: refetchQuestions,
+        data: result,
+        isLoading,
+        isError,
+        error,
+        refetch,
     } = useQuery({
         queryKey: [
             "assistant-answers",
-            selectedQuestionTab?.key,
+            activeTab,
             praktikan?.id,
             praktikan?.nim,
             modul?.id,
         ],
-        enabled: canFetchQuestions,
-        retry: (failureCount, error) => {
-            const status = error?.response?.status;
-
-            if (status === 404) {
-                return false;
-            }
-
-            return failureCount < 2;
-        },
+        enabled: Boolean(activeTab && modul?.id),
+        retry: (count, err) =>
+            err?.response?.status === 404 ? false : count < 2,
         queryFn: async () => {
-            if (!selectedQuestionTab || !modul?.id) {
-                return { questions: [] };
-            }
-
             try {
-                switch (selectedQuestionTab.key) {
-                    case "tp": {
-                        const nim = praktikan?.nim;
-
-                        if (!nim) {
-                            throw new Error("NIM praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-tp/${nim}/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ?? "Gagal memuat jawaban TP."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.data?.jawabanData)
-                            ? data.data.jawabanData
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => {
-                                const parsed =
-                                    normalizeAnswerWithAttachment(item);
-
-                                return {
-                                    soalId: item.soal_id ?? index,
-                                    question:
-                                        item.soal_text ??
-                                        "Soal tidak tersedia",
-
-                                    answer: parsed.answerText,
-
-                                    attachmentUrl:
-                                        parsed.attachmentUrl,
-
-                                    attachmentFileId:
-                                        parsed.attachmentFileId,
-
-                                    options: [],
-                                    selectedOptionId: null,
-                                    correctOptionId: null,
-                                };
-                            }),
-
-                            notice: data?.message,
-                        };
-                    }
-                    case "ta": {
-                        const praktikanId = praktikan?.id;
-
-                        if (!praktikanId) {
-                            throw new Error("Praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-ta/praktikan/${praktikanId}/modul/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ??
-                                "Gagal memuat jawaban Tes Awal."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.jawaban_ta)
-                            ? data.jawaban_ta
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => ({
-                                soalId: item.soal_id ?? index,
-                                question:
-                                    item.pertanyaan ?? "Soal tidak tersedia",
-                                answer: null,
-                                options: Array.isArray(item.options)
-                                    ? item.options
-                                    : [],
-                                selectedOptionId: item.selected_opsi_id ?? null,
-                                correctOptionId: item.opsi_benar_id ?? null,
-                            })),
-                            notice: data?.message,
-                        };
-                    }
-                    case "jurnal": {
-                        const praktikanId = praktikan?.id;
-
-                        if (!praktikanId) {
-                            throw new Error("Praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-jurnal/praktikan/${praktikanId}/modul/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ?? "Gagal memuat jawaban jurnal."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.jawaban_jurnal)
-                            ? data.jawaban_jurnal
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => {
-                                const parsed =
-                                    normalizeAnswerWithAttachment(item);
-
-                                return {
-                                    soalId: item.soal_id ?? index,
-                                    question:
-                                        item.soal_text ??
-                                        "Soal tidak tersedia",
-
-                                    answer: parsed.answerText,
-
-                                    attachmentUrl:
-                                        parsed.attachmentUrl,
-
-                                    attachmentFileId:
-                                        parsed.attachmentFileId,
-
-                                    options: [],
-                                    selectedOptionId: null,
-                                    correctOptionId: null,
-                                };
-                            }),
-
-                            notice: data?.message,
-                        };
-                    }
-                    case "fitb": {
-                        const praktikanId = praktikan?.id;
-
-                        if (!praktikanId) {
-                            throw new Error("Praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-fitb/praktikan/${praktikanId}/modul/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ?? "Gagal memuat jawaban FITB."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.jawaban_fitb)
-                            ? data.jawaban_fitb
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => {
-                                const parsed =
-                                    normalizeAnswerWithAttachment(item);
-
-                                return {
-                                    soalId: item.soal_id ?? index,
-                                    question:
-                                        item.soal_text ??
-                                        "Soal tidak tersedia",
-                                    answer: parsed.answerText,
-                                    attachmentUrl: parsed.attachmentUrl,
-                                    attachmentFileId:
-                                        parsed.attachmentFileId,
-                                    options: [],
-                                    selectedOptionId: null,
-                                    correctOptionId: null,
-                                };
-                            }),
-                            notice: data?.message,
-                        };
-                    }
-                    case "mandiri": {
-                        const praktikanId = praktikan?.id;
-
-                        if (!praktikanId) {
-                            throw new Error("Praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-mandiri/praktikan/${praktikanId}/modul/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ?? "Gagal memuat jawaban mandiri."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.jawaban_mandiri)
-                            ? data.jawaban_mandiri
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => ({
-                                soalId: item.soal_id ?? index,
-                                question:
-                                    item.soal_text ?? "Soal tidak tersedia",
-                                answer:
-                                    typeof item.jawaban === "string"
-                                        ? item.jawaban
-                                        : "-",
-                                options: [],
-                                selectedOptionId: null,
-                                correctOptionId: null,
-                            })),
-                            notice: data?.message,
-                        };
-                    }
-                    case "tk": {
-                        const praktikanId = praktikan?.id;
-
-                        if (!praktikanId) {
-                            throw new Error("Praktikan tidak ditemukan.");
-                        }
-
-                        const { data } = await api.get(
-                            `/api-v1/jawaban-tk/praktikan/${praktikanId}/modul/${modul.id}`
-                        );
-
-                        if (data?.success === false) {
-                            throw new Error(
-                                data?.message ??
-                                "Gagal memuat jawaban Tes Keterampilan."
-                            );
-                        }
-
-                        const entries = Array.isArray(data?.jawaban_tk)
-                            ? data.jawaban_tk
-                            : [];
-
-                        return {
-                            questions: entries.map((item, index) => ({
-                                soalId: item.soal_id ?? index,
-                                question:
-                                    item.pertanyaan ?? "Soal tidak tersedia",
-                                answer: null,
-                                options: Array.isArray(item.options)
-                                    ? item.options
-                                    : [],
-                                selectedOptionId: item.selected_opsi_id ?? null,
-                                correctOptionId: item.opsi_benar_id ?? null,
-                            })),
-                            notice: data?.message,
-                        };
-                    }
-                    default:
-                        return { questions: [] };
-                }
-            } catch (error) {
-                const status = error?.response?.status;
-
-                if (status === 404) {
+                return await fetchAnswers(activeTab, praktikan, modul);
+            } catch (err) {
+                if (err?.response?.status === 404)
                     return {
                         questions: [],
                         notice:
-                            error?.response?.data?.message ??
+                            err?.response?.data?.message ??
                             "Jawaban tidak ditemukan.",
                     };
-                }
 
-                throw error;
+                throw err;
             }
         },
     });
 
-    const questions = questionResult?.questions ?? [];
-    const questionNotice = questionResult?.notice;
+    const questions = result?.questions ?? [];
+
+    useEffect(() => {
+        setActiveQuestion((x) =>
+            questions.length ? Math.min(x, questions.length - 1) : 0,
+        );
+    }, [questions.length]);
 
-    const canFetchTestScores = Boolean(praktikan?.id && modul?.id);
+    const canAutoScore = Boolean(praktikan?.id && modul?.id);
 
-    const { data: taScoreData } = useQuery({
+    const { data: taScore } = useQuery({
         queryKey: ["ta-auto-score", praktikan?.id, modul?.id],
-        enabled: canFetchTestScores,
+        enabled: canAutoScore,
+        staleTime: 300000,
         retry: 1,
-        staleTime: 1000 * 60 * 5,
-        queryFn: async () => {
-            const { data } = await api.get(
-                `/api-v1/jawaban-ta/praktikan/${praktikan.id}/modul/${modul.id}`
-            );
-            const entries = Array.isArray(data?.jawaban_ta) ? data.jawaban_ta : [];
-
-            if (entries.length === 0) {
-                return { score: 0, hasAnswers: false };
-            }
-
-            const correct = entries.filter(
-                (e) => e.selected_opsi_id && e.selected_opsi_id === e.opsi_benar_id
-            ).length;
-
-            return {
-                score: Math.round((correct / entries.length) * 100 * 100) / 100,
-                hasAnswers: true,
-            };
-        },
+        queryFn: () => fetchAutoScore("ta", praktikan.id, modul.id),
     });
 
-    const { data: tkScoreData } = useQuery({
+    const { data: tkScore } = useQuery({
         queryKey: ["tk-auto-score", praktikan?.id, modul?.id],
-        enabled: canFetchTestScores,
+        enabled: canAutoScore,
+        staleTime: 300000,
         retry: 1,
-        staleTime: 1000 * 60 * 5,
-        queryFn: async () => {
-            const { data } = await api.get(
-                `/api-v1/jawaban-tk/praktikan/${praktikan.id}/modul/${modul.id}`
-            );
-            const entries = Array.isArray(data?.jawaban_tk) ? data.jawaban_tk : [];
-
-            if (entries.length === 0) {
-                return { score: 0, hasAnswers: false };
-            }
-
-            const correct = entries.filter(
-                (e) => e.selected_opsi_id && e.selected_opsi_id === e.opsi_benar_id
-            ).length;
-
-            return {
-                score: Math.round((correct / entries.length) * 100 * 100) / 100,
-                hasAnswers: true,
-            };
-        },
+        queryFn: () => fetchAutoScore("tk", praktikan.id, modul.id),
     });
 
     useEffect(() => {
-        if (nilaiSebelumnya) {
-            setScores({
-                tp: clampScore(nilaiSebelumnya.tp),
-                ta: clampScore(nilaiSebelumnya.ta),
-                d1: clampScore(nilaiSebelumnya.d1),
-                d2: clampScore(nilaiSebelumnya.d2),
-                d3: clampScore(nilaiSebelumnya.d3),
-                d4: clampScore(nilaiSebelumnya.d4),
-                l1: clampScore(nilaiSebelumnya.l1 ?? nilaiSebelumnya.i1),
-                l2: clampScore(nilaiSebelumnya.l2 ?? nilaiSebelumnya.i2),
-            });
-            setRating(clampRating(nilaiSebelumnya.rating));
-        } else {
-            setScores({
-                tp: 0,
-                ta: 0,
-                d1: 0,
-                d2: 0,
-                d3: 0,
-                d4: 0,
-                l1: 0,
-                l2: 0,
-            });
-            setRating(null);
-        }
-    }, [nilaiSebelumnya]);
+        setScores(
+            nilai
+                ? {
+                      tp: clampScore(nilai.tp),
+                      ta: clampScore(nilai.ta),
+                      d1: clampScore(nilai.d1),
+                      d2: clampScore(nilai.d2),
+                      d3: clampScore(nilai.d3),
+                      d4: clampScore(nilai.d4),
+                      l1: clampScore(nilai.l1 ?? nilai.i1),
+                      l2: clampScore(nilai.l2 ?? nilai.i2),
+                  }
+                : {
+                      tp: 0, ta: 0, d1: 0, d2: 0,
+                      d3: 0, d4: 0, l1: 0, l2: 0,
+                  },
+        );
+
+        setRating(nilai ? clampRating(nilai.rating) : null);
+    }, [nilai]);
 
     useEffect(() => {
-        if (taScoreData?.hasAnswers) {
-            setScores((prev) => ({ ...prev, ta: clampScore(taScoreData.score) }));
-        }
-    }, [taScoreData]);
+        if (taScore?.hasAnswers)
+            setScores((x) => ({ ...x, ta: clampScore(taScore.score) }));
+    }, [taScore]);
 
     useEffect(() => {
-        if (tkScoreData?.hasAnswers) {
-            setScores((prev) => ({ ...prev, l1: clampScore(tkScoreData.score) }));
-        }
-    }, [tkScoreData]);
-
-    const average = useMemo(() => {
-        const total = scoresSchema.reduce(
-            (sum, current) => sum + clampScore(scores[current.key] ?? 0),
-            0
-        );
-        return Number((total / scoresSchema.length).toFixed(2));
-    }, [scores]);
+        if (tkScore?.hasAnswers)
+            setScores((x) => ({ ...x, l1: clampScore(tkScore.score) }));
+    }, [tkScore]);
 
-    const handleScoreChange = (key) => (event) => {
-        const value = clampScore(event.target.value);
-        setScores((prev) => ({ ...prev, [key]: value }));
-    };
+    const average = useMemo(
+        () =>
+            Number(
+                (
+                    SCORES.reduce(
+                        (sum, [key]) => sum + clampScore(scores[key]),
+                        0,
+                    ) / SCORES.length
+                ).toFixed(2),
+            ),
+        [scores],
+    );
 
-    const handleRatingNumberChange = (event) => {
-        const { value } = event.target;
+    const goToQuestion = (index) => {
+        if (index < 0 || index >= questions.length) return;
 
-        if (value === "") {
-            setRating(null);
+        setActiveQuestion(index);
 
-            return;
-        }
+        requestAnimationFrame(() => {
+            const body = bodyRef.current;
+            const target = document.getElementById(
+                `nilai-soal-${activeTab}-${index}`,
+            );
 
-        setRating(clampRating(value));
-    };
+            if (!body || !target) return;
 
-    const handleRatingSliderChange = (event) => {
-        setRating(clampRating(event.target.value));
+            body.scrollTo({
+                top:
+                    body.scrollTop +
+                    target.getBoundingClientRect().top -
+                    body.getBoundingClientRect().top -
+                    70,
+                behavior: "smooth",
+            });
+        });
     };
 
     const handleSubmit = () => {
-        if (!asistenId) {
-            toast.error(
-                "Data asisten tidak ditemukan. Silakan muat ulang halaman."
-            );
-            return;
-        }
+        if (!asistenId)
+            return toast.error("Data asisten tidak ditemukan.");
 
-        if (!praktikan?.id || !modul?.id || !kelas?.id) {
-            toast.error("Data praktikan tidak lengkap untuk menyimpan nilai.");
-            return;
-        }
+        if (!praktikan?.id || !modul?.id || !kelas?.id)
+            return toast.error("Data praktikan tidak lengkap.");
 
-        if (rating !== null && (rating < 0.1 || rating > 5)) {
-            toast.error("Rating harus berada di antara 0.1 hingga 5.0.");
-            return;
-        }
+        if (rating !== null && (rating < 0.1 || rating > 5))
+            return toast.error("Rating harus antara 0.1 hingga 5.0.");
 
         setIsSaving(true);
 
-        const payload = {
-            ...scores,
-            modul_id: modul.id,
-            asisten_id: asistenId,
-            kelas_id: kelas.id,
-            praktikan_id: praktikan.id,
-            rating: rating,
-        };
-
-        const action = nilaiSebelumnya?.id
-            ? updateNilai(nilaiSebelumnya.id)
-            : storeNilai();
-
-        send(action, payload)
+        send(
+            nilai?.id ? updateNilai(nilai.id) : storeNilai(),
+            {
+                ...scores,
+                modul_id: modul.id,
+                asisten_id: asistenId,
+                kelas_id: kelas.id,
+                praktikan_id: praktikan.id,
+                rating,
+            },
+        )
             .then(() => {
                 toast.success("Nilai berhasil disimpan 🎉");
                 onSaved?.();
             })
-            .catch((error) => {
-                const responseMessage = error?.response?.data?.message;
+            .catch((err) =>
                 toast.error(
-                    responseMessage ?? "Terjadi kesalahan saat menyimpan nilai."
-                );
-            })
-            .finally(() => {
-                setIsSaving(false);
-            });
+                    err?.response?.data?.message ??
+                        "Terjadi kesalahan saat menyimpan nilai.",
+                ),
+            )
+            .finally(() => setIsSaving(false));
     };
 
     return (
-        <ModalOverlay onClose={onClose} className="depth-modal-overlay z-50" style={{ padding: 0 }}>
-            <div className="flex h-full w-full items-center justify-center px-2 py-4 sm:py-6 pointer-events-none">
+        <ModalOverlay
+            onClose={onClose}
+            className="depth-modal-overlay z-50"
+            style={{ padding: 0 }}
+        >
+            <div className="pointer-events-none flex h-full w-full items-center justify-center px-2 py-4 sm:py-6">
                 <div
-                    className="depth-modal-container flex w-full max-w-[95vw] max-h-[90vh] flex-col overflow-hidden pointer-events-auto"
+                    className="depth-modal-container pointer-events-auto flex max-h-[90vh] w-full max-w-[95vw] flex-col overflow-hidden"
                     style={{ "--depth-modal-max-width": "95vw" }}
                 >
-                    <div className="relative mb-6">
-                        <ModalCloseButton onClick={onClose} ariaLabel="Tutup input nilai" className="absolute right-0 -top-2" />
-                        <header className="text-center">
-                            <h2 className="text-2xl font-semibold text-depth-primary">
-                                {nilaiSebelumnya ? "Perbarui Nilai" : "Input Nilai"}
-                            </h2>
-                            <p className="mt-2 text-sm text-depth-secondary">
-                                {praktikan?.nama ?? "Praktikan"} (
-                                {praktikan?.nim ?? "-"}) ·{" "}
-                                {modul?.judul ?? "Modul tidak dikenal"}
-                            </p>
-                        </header>
-                    </div>
-
-                    <div className="min-h-0 flex-1 pr-1 sm:pr-2">
-                        <div className="space-y-6 pb-1">
-                            <div className="grid grid-cols-10 gap-4">
-                                {scoresSchema.map(({ key, label }) => (
+                    {/* Fixed header */}
+                    <header className="relative shrink-0 border-b border-depth pb-5 text-center">
+                        <ModalCloseButton
+                            onClick={onClose}
+                            ariaLabel="Tutup input nilai"
+                            className="absolute -top-2 right-0"
+                        />
+
+                        <h2 className="text-2xl font-semibold">
+                            {nilai ? "Perbarui Nilai" : "Input Nilai"}
+                        </h2>
+
+                        <p className="mt-2 text-sm text-depth-secondary">
+                            {praktikan?.nama ?? "Praktikan"} (
+                            {praktikan?.nim ?? "-"}) ·{" "}
+                            {modul?.judul ?? "Modul tidak dikenal"}
+                        </p>
+                    </header>
+
+                    {/* Scrollable body */}
+                    <div
+                        ref={bodyRef}
+                        className="min-h-0 flex-1 overflow-y-auto py-5 pr-1 sm:pr-2"
+                    >
+                        <div className="space-y-6">
+                            {/* Scores */}
+                            <div className="grid grid-cols-2 gap-4 sm:grid-cols-5 lg:grid-cols-10">
+                                {SCORES.map(([key, label]) => (
                                     <label
                                         key={key}
-                                        className="flex flex-col gap-1 text-xs font-semibold text-depth-primary"
+                                        className="flex flex-col gap-1 text-xs font-semibold"
                                     >
-                                        <span>{label}</span>
+                                        {label}
+
                                         <input
                                             type="number"
-                                            inputMode="decimal"
                                             min={0}
                                             max={100}
                                             value={scores[key]}
-                                            onChange={handleScoreChange(key)}
-                                            className="h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
-                                            style={{
-                                                MozAppearance: "textfield",
-                                                appearance: "textfield",
-                                            }}
+                                            onChange={(e) =>
+                                                setScores((x) => ({
+                                                    ...x,
+                                                    [key]: clampScore(
+                                                        e.target.value,
+                                                    ),
+                                                }))
+                                            }
                                             onWheel={(e) => e.target.blur()}
+                                            className="h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm"
                                         />
                                     </label>
                                 ))}
-                                <label className="flex flex-col gap-1 text-xs font-semibold text-depth-primary">
-                                    <span>Rata-rata</span>
+
+                                <label className="flex flex-col gap-1 text-xs font-semibold">
+                                    Rata-rata
                                     <input
-                                        type="number"
                                         readOnly
                                         value={average}
-                                        className="cursor-not-allowed h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
-                                        style={{
-                                            MozAppearance: "textfield",
-                                            appearance: "textfield",
-                                        }}
-                                        onWheel={(e) => e.target.blur()}
+                                        className="h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm"
                                     />
                                 </label>
-                                <label className="flex flex-col gap-1 text-xs font-semibold text-depth-primary">
-                                    <span>Rating</span>
+
+                                <label className="flex flex-col gap-1 text-xs font-semibold">
+                                    Rating
                                     <input
                                         type="number"
-                                        inputMode="decimal"
                                         min={0.1}
                                         max={5}
                                         step={0.1}
                                         value={rating ?? ""}
-                                        onChange={handleRatingNumberChange}
-                                        className="h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
-                                        style={{
-                                            MozAppearance: "textfield",
-                                            appearance: "textfield",
-                                        }}
+                                        onChange={(e) =>
+                                            setRating(
+                                                clampRating(e.target.value),
+                                            )
+                                        }
                                         onWheel={(e) => e.target.blur()}
+                                        className="h-10 rounded-depth-md border border-depth bg-depth-card p-2 text-center text-sm"
                                     />
+
                                     <input
                                         type="range"
                                         min={0.1}
                                         max={5}
                                         step={0.1}
                                         value={rating ?? 0.1}
-                                        onChange={handleRatingSliderChange}
-                                        className="mt-2"
+                                        onChange={(e) =>
+                                            setRating(
+                                                clampRating(e.target.value),
+                                            )
+                                        }
                                     />
                                 </label>
                             </div>
 
+                            {/* Category tabs */}
                             <div className="flex flex-wrap gap-2">
-                                {availableQuestionTabs.length === 0 ? (
-                                    <span className="text-xs text-depth-secondary">
-                                        Tidak ada tipe soal yang dapat
-                                        ditinjau.
-                                    </span>
-                                ) : (
-                                    availableQuestionTabs.map((tab) => {
-                                        const isActive =
-                                            tab.key === activeQuestionTab;
-                                        const baseClasses =
-                                            "rounded-depth-full border px-4 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--depth-color-primary)]";
-                                        const variantClasses = isActive
-                                            ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/15 text-[var(--depth-color-primary)] shadow-depth-sm"
-                                            : "border-depth bg-depth-interactive text-depth-primary shadow-depth-inset hover:-translate-y-0.5 hover:shadow-depth-sm";
-
-                                        return (
-                                            <button
-                                                key={tab.key}
-                                                type="button"
-                                                onClick={() =>
-                                                    setActiveQuestionTab(
-                                                        tab.key
-                                                    )
-                                                }
-                                                className={`${baseClasses} ${variantClasses}`}
-                                            >
-                                                {tab.label}
-                                            </button>
-                                        );
-                                    })
-                                )}
+                                {tabs.map((tab) => (
+                                    <button
+                                        key={tab.key}
+                                        type="button"
+                                        onClick={() => setActiveTab(tab.key)}
+                                        className={`rounded-depth-full border px-4 py-1.5 text-sm font-semibold transition ${
+                                            activeTab === tab.key
+                                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/15 text-[var(--depth-color-primary)]"
+                                                : "border-depth bg-depth-interactive"
+                                        }`}
+                                    >
+                                        {tab.label}
+                                    </button>
+                                ))}
                             </div>
 
-                            {availableQuestionTabs.length === 0 ? (
-                                <div className="mt-4 rounded-depth-md border border-depth bg-depth-interactive/40 p-6 text-sm text-depth-secondary">
-                                    Soal dan jawaban tidak tersedia.
-                                    Pastikan praktikan telah mengerjakan
-                                    modul ini.
+                            {/* Questions */}
+                            {isLoading ? (
+                                <div className="py-10 text-center">
+                                    Memuat jawaban...
+                                </div>
+                            ) : isError ? (
+                                <div className="rounded-depth-md border border-rose-500/40 bg-rose-500/10 p-4 text-sm text-rose-200">
+                                    {error?.response?.data?.message ??
+                                        error?.message ??
+                                        "Gagal memuat jawaban."}
+
+                                    <button
+                                        type="button"
+                                        onClick={() => refetch()}
+                                        className="ml-3 font-semibold underline"
+                                    >
+                                        Coba Lagi
+                                    </button>
+                                </div>
+                            ) : !questions.length ? (
+                                <div className="rounded-depth-md border border-depth bg-depth-interactive p-6 text-sm text-depth-secondary">
+                                    {result?.notice ??
+                                        "Belum ada jawaban yang disubmit."}
                                 </div>
                             ) : (
-                                <div className="mt-4 max-h-[32rem] overflow-y-auto pr-1">
-                                    {isQuestionsLoading ? (
-                                        <div className="flex items-center justify-center gap-2 py-10 text-depth-primary">
-                                            <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--depth-color-primary)] border-t-transparent" />
-                                            Memuat jawaban...
-                                        </div>
-                                    ) : isQuestionsError ? (
-                                        <div className="rounded-depth-md border border-rose-500/40 bg-rose-500/10 p-4 text-sm text-rose-200">
-                                            <p>
-                                                {questionsError?.response
-                                                    ?.data?.message ??
-                                                    questionsError?.message ??
-                                                    "Terjadi kesalahan saat memuat jawaban."}
-                                            </p>
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    refetchQuestions()
-                                                }
-                                                className="mt-3 inline-flex items-center justify-center rounded-depth-full border border-rose-400/60 bg-transparent px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-rose-200 transition hover:border-rose-300 hover:text-rose-100"
-                                            >
-                                                Coba Lagi
-                                            </button>
-                                        </div>
-                                    ) : questions.length === 0 ? (
-                                        <div className="rounded-depth-md border border-depth bg-depth-interactive/40 p-6 text-sm text-depth-secondary">
-                                            {questionNotice ??
-                                                "Belum ada jawaban yang disubmit untuk tipe soal ini."}
-                                        </div>
-                                    ) : (
-                                        <div className="space-y-4 py-1">
-                                            {questions.map(
-                                                (item, index) => {
-                                                    const hasOptions =
-                                                        Array.isArray(
-                                                            item.options
-                                                        ) &&
-                                                        item.options
-                                                            .length > 0;
-                                                    const answerValue =
-                                                        typeof item.answer ===
-                                                            "string"
-                                                            ? item.answer
-                                                            : "";
-                                                    const trimmedAnswer =
-                                                        answerValue.trim();
-                                                    const hasEssayAnswer =
-                                                        trimmedAnswer !==
-                                                        "" &&
-                                                        trimmedAnswer !==
-                                                        "-";
-                                                    const attachmentUrl =
-                                                        typeof item.attachmentUrl ===
-                                                            "string" &&
-                                                            item.attachmentUrl.trim() !== ""
-                                                            ? item.attachmentUrl
-                                                            : null;
-                                                    const hasAttachment = Boolean(
-                                                        attachmentUrl
-                                                    );
-                                                    const showEmptyState =
-                                                        !hasEssayAnswer &&
-                                                        !hasAttachment;
-
-                                                    return (
-                                                        <article
-                                                            key={`${activeQuestionTab ??
-                                                                "tab"
-                                                                }-${item.soalId ??
-                                                                index
-                                                                }`}
-                                                            className="hover:rounded-depth-lg hover:border-depth hover:bg-depth-card/80 hover:shadow-depth-md hover:shadow-depth-lg transition-shadow p-4"
-                                                        >
-                                                            <pre className="text-sm font-semibold text-depth-primary whitespace-pre-line break-words">
-                                                                {index + 1}.{" "}
-                                                                {item.question ??
-                                                                    "Soal tidak tersedia"}
-                                                            </pre>
-
-                                                            {hasOptions ? (
-                                                                <ul className="mt-4 space-y-3">
-                                                                    {item.options.map(
-                                                                        (
-                                                                            option,
-                                                                            optionIndex
-                                                                        ) => {
-                                                                            const optionKey =
-                                                                                option?.id ??
-                                                                                `${item.soalId ??
-                                                                                index
-                                                                                }-${optionIndex}`;
-                                                                            const isCorrect =
-                                                                                Boolean(
-                                                                                    option?.is_correct
-                                                                                );
-                                                                            const isSelected =
-                                                                                item.selectedOptionId ===
-                                                                                option?.id;
-                                                                            const baseOptionClasses =
-                                                                                "rounded-depth-md border p-3 text-sm shadow-depth-sm transition";
-                                                                            let toneClasses =
-                                                                                "border-depth bg-depth-interactive/40 text-depth-primary";
-
-                                                                            if (
-                                                                                isCorrect
-                                                                            ) {
-                                                                                toneClasses =
-                                                                                    "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/10 text-depth-primary";
-                                                                            } else if (
-                                                                                isSelected
-                                                                            ) {
-                                                                                toneClasses =
-                                                                                    "border-amber-400/70 bg-amber-400/15 text-amber-900 dark:text-amber-100";
-                                                                            }
-
-                                                                            const badges =
-                                                                                [];
-
-                                                                            if (
-                                                                                isCorrect
-                                                                            ) {
-                                                                                badges.push(
-                                                                                    {
-                                                                                        key: "correct",
-                                                                                        label: "Benar",
-                                                                                        className:
-                                                                                            "bg-[var(--depth-color-primary)]/20 text-[var(--depth-color-primary)]",
-                                                                                    }
-                                                                                );
-                                                                            }
-
-                                                                            if (
-                                                                                isSelected
-                                                                            ) {
-                                                                                badges.push(
-                                                                                    {
-                                                                                        key: "selected",
-                                                                                        label: "Dipilih",
-                                                                                        className:
-                                                                                            isCorrect
-                                                                                                ? "bg-[var(--depth-color-primary)]/20 text-[var(--depth-color-primary)]"
-                                                                                                : "bg-amber-400/25 text-amber-900 dark:text-amber-100",
-                                                                                    }
-                                                                                );
-                                                                            }
+                                <div className="space-y-4">
+                                    {/* Sticky question navbar */}
+                                    <div className="sticky top-0 z-20 pb-2">
+                                        <QuestionNav
+                                            count={questions.length}
+                                            active={activeQuestion}
+                                            onChange={goToQuestion}
+                                        />
+                                    </div>
+
+                                    {questions.map((item, index) => {
+                                        const hasOptions = item.options.length > 0;
+                                        const answer =
+                                            typeof item.answer === "string"
+                                                ? item.answer
+                                                : "";
+                                        const hasAnswer =
+                                            answer.trim() &&
+                                            answer.trim() !== "-";
 
-                                                                            return (
-                                                                                <li
-                                                                                    key={
-                                                                                        optionKey
-                                                                                    }
-                                                                                    className={`${baseOptionClasses} ${toneClasses}`}
-                                                                                >
-                                                                                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                                                                                        <span className="font-medium">
-                                                                                            {option?.text ??
-                                                                                                "Opsi tidak tersedia"}
-                                                                                        </span>
-
-                                                                                        {badges.length >
-                                                                                            0 && (
-                                                                                                <div className="flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-wide">
-                                                                                                    {badges.map(
-                                                                                                        (
-                                                                                                            badge
-                                                                                                        ) => (
-                                                                                                            <span
-                                                                                                                key={
-                                                                                                                    badge.key
-                                                                                                                }
-                                                                                                                className={`rounded-depth-full px-3 py-1 ${badge.className}`}
-                                                                                                            >
-                                                                                                                {
-                                                                                                                    badge.label
-                                                                                                                }
-                                                                                                            </span>
-                                                                                                        )
-                                                                                                    )}
-                                                                                                </div>
-                                                                                            )}
-                                                                                    </div>
-                                                                                </li>
-                                                                            );
+                                        return (
+                                            <article
+                                                key={item.soalId ?? index}
+                                                id={`nilai-soal-${activeTab}-${index}`}
+                                                className="rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-sm"
+                                            >
+                                                <div className="flex items-start gap-3">
+                                                    <span className="flex h-7 min-w-7 items-center justify-center rounded-depth-full bg-[var(--depth-color-primary)] text-xs font-bold text-white">
+                                                        {index + 1}
+                                                    </span>
+
+                                                    <div className="min-w-0 flex-1">
+                                                        <MarkdownRenderer
+                                                            content={item.question}
+                                                            className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+                                                        />
+                                                    </div>
+                                                </div>
+
+                                                {hasOptions ? (
+                                                    <ul className="mt-4 space-y-3">
+                                                        {item.options.map(
+                                                            (option, i) => {
+                                                                const selected =
+                                                                    String(
+                                                                        item.selectedOptionId ??
+                                                                            "",
+                                                                    ) ===
+                                                                    String(
+                                                                        option?.id ??
+                                                                            "",
+                                                                    );
+
+                                                                const correct =
+                                                                    Boolean(
+                                                                        option?.is_correct,
+                                                                    ) ||
+                                                                    String(
+                                                                        item.correctOptionId ??
+                                                                            "",
+                                                                    ) ===
+                                                                        String(
+                                                                            option?.id ??
+                                                                                "",
+                                                                        );
+
+                                                                return (
+                                                                    <li
+                                                                        key={
+                                                                            option?.id ??
+                                                                            i
                                                                         }
-                                                                    )}
-                                                                </ul>
-                                                            ) : (
-                                                                <div className="mt-4 max-h-72 overflow-auto rounded-depth-md border border-depth bg-depth-interactive/40 p-4 text-sm text-depth-primary shadow-depth-sm">
-                                                                    {(hasAttachment || hasEssayAnswer) && (
-                                                                        <div className="space-y-4">
-                                                                            {hasAttachment && (
-                                                                                <div>
-                                                                                    <p className="text-xs font-semibold uppercase tracking-wide text-depth-secondary">
-                                                                                        Lampiran Jawaban
-                                                                                    </p>
-                                                                                    <div className="mt-2 rounded-depth-md border border-dashed border-depth bg-depth-card/60 p-3">
-                                                                                        {isLikelyImageUrl(
-                                                                                            attachmentUrl
-                                                                                        ) ? (
-                                                                                            <img
-                                                                                                src={
-                                                                                                    attachmentUrl
-                                                                                                }
-                                                                                                alt="Lampiran jawaban praktikan"
-                                                                                                className="h-auto w-full rounded-depth-md object-contain"
-                                                                                                loading="lazy"
-                                                                                            />
-                                                                                        ) : (
-                                                                                            <div className="flex items-center justify-between gap-3 text-sm">
-                                                                                                <span className="text-depth-primary">
-                                                                                                    File lampiran tersedia.
-                                                                                                </span>
-                                                                                                <a
-                                                                                                    href={
-                                                                                                        attachmentUrl
-                                                                                                    }
-                                                                                                    target="_blank"
-                                                                                                    rel="noopener noreferrer"
-                                                                                                    className="inline-flex items-center gap-2 rounded-depth-full bg-[var(--depth-color-primary)] px-3 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                                                >
-                                                                                                    Buka File
-                                                                                                </a>
-                                                                                            </div>
-                                                                                        )}
-                                                                                        <div className="mt-2 text-right">
-                                                                                            <a
-                                                                                                href={
-                                                                                                    attachmentUrl
-                                                                                                }
-                                                                                                target="_blank"
-                                                                                                rel="noopener noreferrer"
-                                                                                                className="text-xs font-semibold text-[var(--depth-color-primary)] underline-offset-2 hover:underline"
-                                                                                            >
-                                                                                                Lihat di tab baru
-                                                                                            </a>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                            )}
-                                                                            {hasEssayAnswer && (
-                                                                                <pre className="min-w-full whitespace-pre-wrap break-words font-sans leading-relaxed">
-                                                                                    {
-                                                                                        answerValue
+                                                                        className={`rounded-depth-md border p-3 ${
+                                                                            correct
+                                                                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/10"
+                                                                                : selected
+                                                                                  ? "border-amber-400/70 bg-amber-400/15"
+                                                                                  : "border-depth bg-depth-interactive"
+                                                                        }`}
+                                                                    >
+                                                                        <div className="flex items-start justify-between gap-3">
+                                                                            <div className="min-w-0 flex-1">
+                                                                                <MarkdownRenderer
+                                                                                    content={
+                                                                                        option?.text ??
+                                                                                        ""
                                                                                     }
-                                                                                </pre>
-                                                                            )}
+                                                                                    className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+                                                                                />
+                                                                            </div>
+
+                                                                            <div className="flex shrink-0 gap-1">
+                                                                                {correct && (
+                                                                                    <span className="rounded-depth-full bg-[var(--depth-color-primary)]/20 px-2 py-1 text-[10px] font-bold text-[var(--depth-color-primary)]">
+                                                                                        BENAR
+                                                                                    </span>
+                                                                                )}
+
+                                                                                {selected && (
+                                                                                    <span className="rounded-depth-full bg-amber-400/20 px-2 py-1 text-[10px] font-bold text-amber-300">
+                                                                                        DIPILIH
+                                                                                    </span>
+                                                                                )}
+                                                                            </div>
                                                                         </div>
-                                                                    )}
-                                                                    {showEmptyState && (
-                                                                        <span className="text-depth-secondary italic">
-                                                                            Belum ada jawaban
-                                                                        </span>
-                                                                    )}
-                                                                </div>
-                                                            )}
-                                                        </article>
-                                                    );
-                                                }
-                                            )}
-                                        </div>
-                                    )}
+                                                                    </li>
+                                                                );
+                                                            },
+                                                        )}
+                                                    </ul>
+                                                ) : (
+                                                    <div className="mt-4 rounded-depth-md border border-depth bg-depth-interactive p-4 text-sm">
+                                                        {item.attachmentUrl && (
+                                                            <div className="mb-4">
+                                                                {isImage(
+                                                                    item.attachmentUrl,
+                                                                ) ? (
+                                                                    <img
+                                                                        src={
+                                                                            item.attachmentUrl
+                                                                        }
+                                                                        alt="Lampiran jawaban"
+                                                                        className="max-h-72 w-full rounded-depth-md object-contain"
+                                                                    />
+                                                                ) : (
+                                                                    <a
+                                                                        href={
+                                                                            item.attachmentUrl
+                                                                        }
+                                                                        target="_blank"
+                                                                        rel="noopener noreferrer"
+                                                                        className="font-semibold text-[var(--depth-color-primary)] hover:underline"
+                                                                    >
+                                                                        Buka
+                                                                        lampiran
+                                                                    </a>
+                                                                )}
+                                                            </div>
+                                                        )}
+
+                                                        {hasAnswer ? (
+                                                            <pre className="whitespace-pre-wrap break-words font-sans leading-relaxed">
+                                                                {answer}
+                                                            </pre>
+                                                        ) : (
+                                                            !item.attachmentUrl && (
+                                                                <span className="italic text-depth-secondary">
+                                                                    Belum ada
+                                                                    jawaban
+                                                                </span>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                )}
+                                            </article>
+                                        );
+                                    })}
                                 </div>
                             )}
                         </div>
                     </div>
 
-                    <footer className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
-                        <button
-                            type="button"
-                            onClick={handleSubmit}
-                            disabled={isSaving}
-                            className="inline-flex items-center justify-center rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                        >
-                            {isSaving ? "Menyimpan..." : "Simpan Nilai"}
-                        </button>
+                    {/* Fixed footer */}
+                    <footer className="shrink-0 border-t border-depth bg-depth-card pt-4">
+                        <div className="flex justify-end">
+                            <button
+                                type="button"
+                                disabled={isSaving}
+                                onClick={handleSubmit}
+                                className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
+                            >
+                                {isSaving ? "Menyimpan..." : "Simpan Nilai"}
+                            </button>
+                        </div>
                     </footer>
                 </div>
             </div>
diff --git a/resources/js/Components/Assistants/Modals/PairNavigator.jsx b/resources/js/Components/Assistants/Modals/PairNavigator.jsx
new file mode 100644
index 0000000..ab93859
--- /dev/null
+++ b/resources/js/Components/Assistants/Modals/PairNavigator.jsx
@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export default function PairNavigator({ count, active, onChange }) {
+    const pagesRef = useRef(null);
+    const [capacity, setCapacity] = useState(5);
+
+    useEffect(() => {
+        const element = pagesRef.current;
+        if (!element) return;
+
+        const update = () => {
+            setCapacity(Math.max(1, Math.floor(element.clientWidth / 34)));
+        };
+
+        update();
+
+        if (typeof ResizeObserver !== "undefined") {
+            const observer = new ResizeObserver(update);
+            observer.observe(element);
+            return () => observer.disconnect();
+        }
+
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, []);
+
+    const { start, end } = useMemo(() => {
+        if (!count) return { start: 0, end: 0 };
+
+        const slots =
+            count <= capacity
+                ? count
+                : Math.max(1, capacity - 2);
+
+        const start = Math.max(
+            0,
+            Math.min(
+                active - Math.floor(slots / 2),
+                count - slots,
+            ),
+        );
+
+        return {
+            start,
+            end: Math.min(count, start + slots),
+        };
+    }, [active, capacity, count]);
+
+    if (!count) return null;
+
+    return (
+        <div className="flex items-center gap-2 rounded-depth-lg border border-depth bg-depth-card p-2 shadow-depth-sm">
+            <button
+                type="button"
+                onClick={() => onChange(active - 1)}
+                disabled={active === 0}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold text-depth-primary transition hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-40"
+            >
+                ← <span className="hidden sm:inline">Previous</span>
+            </button>
+
+            <div
+                ref={pagesRef}
+                className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden"
+            >
+                {start > 0 && (
+                    <span className="shrink-0 px-1 text-depth-secondary">…</span>
+                )}
+
+                {Array.from(
+                    { length: end - start },
+                    (_, offset) => start + offset,
+                ).map((index) => (
+                    <button
+                        key={index}
+                        type="button"
+                        onClick={() => onChange(index)}
+                        className={`flex h-8 min-w-8 shrink-0 items-center justify-center rounded-depth-md border px-2 text-xs font-semibold transition ${
+                            active === index
+                                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white"
+                                : "border-depth bg-depth-interactive text-depth-secondary hover:text-depth-primary"
+                        }`}
+                    >
+                        {index + 1}
+                    </button>
+                ))}
+
+                {end < count && (
+                    <span className="shrink-0 px-1 text-depth-secondary">…</span>
+                )}
+            </div>
+
+            <span className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-2.5 py-2 text-xs font-semibold text-depth-primary">
+                {active + 1} / {count}
+            </span>
+
+            <button
+                type="button"
+                onClick={() => onChange(active + 1)}
+                disabled={active >= count - 1}
+                className="shrink-0 rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-semibold text-depth-primary transition hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-40"
+            >
+                <span className="hidden sm:inline">Next</span> →
+            </button>
+        </div>
+    );
+}
diff --git a/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx b/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
index d2e114e..19fcb3e 100644
--- a/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
+++ b/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
@@ -1,193 +1,250 @@
 import { useMemo, useState } from "react";
-import ModalEditSoalEssay from "../Modals/ModalEditSoalEssay";
-import trashIcon from "../../../../assets/nav/Icon-Delete.svg";
-import editIcon from "../../../../assets/nav/Icon-Edit.svg";
-import { useSoalQuery, soalQueryKey } from "@/hooks/useSoalQuery";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useSoalQuery, soalQueryKey } from "@/hooks/useSoalQuery";
+import { useSoalComparison } from "@/hooks/useSoalComparison";
 import { send } from "@/lib/http";
 import { getSoalController } from "@/lib/soalControllers";
-import toast from "react-hot-toast";
-import ModalBatchEditSoal from "../Modals/ModalBatchEditSoal";
-import ModalCompareSoal from "../Modals/ModalCompareSoal";
-import SoalCommentsButton from "./SoalCommentsButton";
-import { useSoalComparison } from "@/hooks/useSoalComparison";
 import { ModalOverlay } from "@/Components/Common/ModalPortal";
 import ModalCloseButton from "@/Components/Common/ModalCloseButton";
-import DepthToggleButton from "@/Components/Common/DepthToggleButton";
+import ModalBatchEditSoal from "../Modals/ModalBatchEditSoal";
+import SoalCommentsButton from "./SoalCommentsButton";
+import SoalMarkdownEditor from "./SoalMarkdownEditor";
 import MarkdownRenderer from "../../MarkdownRenderer";
+import trashIcon from "../../../../assets/nav/Icon-Delete.svg";
+import editIcon from "../../../../assets/nav/Icon-Edit.svg";
+import toast from "react-hot-toast";
 
-export default function SoalInputEssay({ kategoriSoal, modul, modules = [], onModalSuccess, onModalValidation, onChangeModul, isEditable = true }) {
+const getModuleId = (m) => {
+    const id = m?.idM ?? m?.id ?? m?.value ?? m?.uuid ?? m?.ID;
+    return id == null ? "" : String(id);
+};
+
+export default function SoalInputEssay({
+    kategoriSoal,
+    modul,
+    modules = [],
+    onModalSuccess,
+    onModalValidation,
+    isEditable = true,
+}) {
+    const queryClient = useQueryClient();
     const [addSoal, setAddSoal] = useState({ soal: "" });
     const [enableFileUploadNew, setEnableFileUploadNew] = useState(false);
-    const [isModalOpenEdit, setIsModalOpenEdit] = useState(false);
+    const [isAddingSoal, setIsAddingSoal] = useState(false);
     const [editingSoal, setEditingSoal] = useState(null);
+    const [deleteCandidate, setDeleteCandidate] = useState(null);
     const [isBatchModalOpen, setIsBatchModalOpen] = useState(false);
-    const [compareState, setCompareState] = useState({
-        isOpen: false,
+    const [batchState, setBatchState] = useState({
         regularModuleId: "",
         englishModuleId: "",
     });
-    const [deleteCandidate, setDeleteCandidate] = useState(null);
-
-    const getModuleId = (moduleItem) => {
-        const possibleId = moduleItem?.idM ?? moduleItem?.id ?? moduleItem?.value ?? moduleItem?.uuid ?? moduleItem?.ID;
-        return possibleId === undefined || possibleId === null ? "" : String(possibleId);
-    };
 
     const regularModules = useMemo(
-        () => (modules ?? []).filter((moduleItem) => Number(moduleItem?.isEnglish ?? 0) !== 1),
+        () => modules.filter((m) => Number(m?.isEnglish ?? 0) !== 1),
         [modules],
     );
-
     const englishModules = useMemo(
-        () => (modules ?? []).filter((moduleItem) => Number(moduleItem?.isEnglish ?? 0) === 1),
+        () => modules.filter((m) => Number(m?.isEnglish ?? 0) === 1),
         [modules],
     );
 
-    const queryClient = useQueryClient();
     const soalQuery = useSoalQuery(kategoriSoal, modul);
     const soalList = soalQuery.data ?? [];
     const soalLoading = soalQuery.isLoading;
     const soalError = soalQuery.isError;
     const soalQueryError = soalQuery.error;
-
     const controller = getSoalController(kategoriSoal);
+
     const supportsFileUpload = useMemo(
         () => ["tp", "jurnal", "fitb"].includes(kategoriSoal),
         [kategoriSoal]
     );
 
+    const invalidate = (moduleId = modul) => {
+        if (!moduleId) return;
+        queryClient.invalidateQueries({
+            queryKey: soalQueryKey(kategoriSoal, String(moduleId)),
+        });
+    };
+
     const postSoalMutation = useMutation({
         mutationFn: async (payload) => {
-            if (!controller) {
+            if (!controller)
                 throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
-            const { data } = await send(controller.store(modul), payload);
-            return data;
+            return (await send(controller.store(modul), payload)).data;
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, modul) });
-            if (typeof onModalSuccess === "function") {
-                onModalSuccess();
-            }
+            invalidate();
+            onModalSuccess?.();
         },
-        onError: (err) => {
-            console.error("Error posting soal:", err);
+        onError: (error) => {
+            console.error("Error posting soal:", error);
+            toast.error(
+                error?.response?.data?.message ??
+                    error?.message ??
+                    "Gagal menambahkan soal.",
+            );
         },
     });
 
     const putSoalMutation = useMutation({
         mutationFn: async ({ soalId, payload }) => {
-            if (!controller) {
+            if (!controller)
                 throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
-            const { data } = await send(controller.update(soalId), payload);
-            return data;
+            return (await send(controller.update(soalId), payload)).data;
         },
         onSuccess: (_, variables) => {
-            const previousKey = variables?.previousModulKey ?? modul;
-            const nextKey = variables?.nextModulKey ?? previousKey;
-
-            if (previousKey) {
-                queryClient.invalidateQueries({
-                    queryKey: soalQueryKey(kategoriSoal, previousKey),
-                });
-            }
-
-            if (nextKey && nextKey !== previousKey) {
-                queryClient.invalidateQueries({
-                    queryKey: soalQueryKey(kategoriSoal, nextKey),
-                });
-            }
+            const previous = variables?.previousModulKey ?? modul;
+            const next = variables?.nextModulKey ?? previous;
+            if (previous) invalidate(previous);
+            if (next && next !== previous) invalidate(next);
         },
-        onError: (err) => {
-            console.error("Error updating soal:", err);
+        onError: (error) => {
+            console.error("Error updating soal:", error);
+            toast.error(
+                error?.response?.data?.message ??
+                    error?.message ??
+                    "Gagal memperbarui soal.",
+            );
         },
     });
 
     const deleteSoalMutation = useMutation({
         mutationFn: async (soalId) => {
-            if (!controller) {
+            if (!controller)
                 throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
             await send(controller.destroy(soalId));
         },
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, modul) });
+            invalidate();
             setDeleteCandidate(null);
             toast.success("Soal berhasil dihapus!");
         },
-        onError: (err) => {
-            console.error("Error deleting soal:", err);
-            toast.error(err?.response?.data?.message ?? "Gagal menghapus soal.");
+        onError: (error) => {
+            console.error("Error deleting soal:", error);
+            toast.error(
+                error?.response?.data?.message ??
+                    error?.message ??
+                    "Gagal menghapus soal.",
+            );
         },
     });
 
-    const batchUpdateMutation = useMutation({
-        mutationFn: async ({ items, modulId }) => {
-            if (!controller) {
-                throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
+    const syncBatchModule = async ({ modulId, items }) => {
+        if (!controller)
+            throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
 
-            const targetModulId = Number(modulId ?? modul);
-            if (!targetModulId || Number.isNaN(targetModulId)) {
-                throw new Error("Modul belum dipilih.");
-            }
+        const targetModulId = Number(modulId);
+        if (!targetModulId || Number.isNaN(targetModulId))
+            throw new Error("Modul belum dipilih.");
 
-            const existingItems = soalList ?? [];
-            const maxLength = Math.max(existingItems.length, items?.length ?? 0);
-
-            for (let i = 0; i < maxLength; i += 1) {
-                const existingItem = existingItems[i] ?? null;
-                const desiredItem = items?.[i] ?? null;
-                const desiredText = desiredItem?.soal?.trim() ?? "";
-
-                if (existingItem && desiredText) {
-                    if (existingItem.soal !== desiredText || existingItem.modul_id !== targetModulId) {
-                        await send(controller.update(existingItem.id), {
-                            modul_id: targetModulId,
-                            soal: desiredText,
-                            oldSoal: existingItem.soal,
-                        });
-                    }
-                } else if (existingItem && !desiredText) {
-                    await send(controller.destroy(existingItem.id));
-                } else if (!existingItem && desiredText) {
-                    await send(controller.store(targetModulId), { soal: desiredText });
+        for (const item of items ?? []) {
+            const soalId = item?.id ?? null;
+            const deleted = Boolean(item?._deleted);
+            const soal = String(item?.soal ?? "").trim();
+
+            if (soalId) {
+                if (deleted) {
+                    await send(controller.destroy(soalId));
+                    continue;
                 }
-            }
-        },
-        onSuccess: (_, variables) => {
-            const targetModulId = String(variables?.modulId ?? modul ?? "");
-            const currentModulId = String(modul ?? "");
 
-            if (currentModulId) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, currentModulId) });
+                if (!soal)
+                    throw new Error(
+                        "Soal tidak boleh kosong. Gunakan tombol Hapus jika ingin menghapus soal.",
+                    );
+
+                const originalSoal = String(item?.originalSoal ?? "").trim();
+                const questionChanged = soal !== originalSoal;
+                const uploadChanged =
+                    supportsFileUpload &&
+                    Boolean(item.enable_file_upload) !==
+                        Boolean(item.originalEnableFileUpload);
+
+                if (!questionChanged && !uploadChanged) continue;
+
+                const payload = {
+                    modul_id: targetModulId,
+                    soal,
+                    oldSoal: item.originalSoal ?? soal,
+                };
+
+                if (supportsFileUpload)
+                    payload.enable_file_upload = Boolean(
+                        item.enable_file_upload,
+                    );
+
+                await send(controller.update(soalId), payload);
+                continue;
             }
 
-            if (targetModulId && targetModulId !== currentModulId) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, targetModulId) });
+            if (!deleted && soal) {
+                const payload = { soal };
+
+                if (supportsFileUpload)
+                    payload.enable_file_upload = Boolean(
+                        item.enable_file_upload,
+                    );
+
+                await send(controller.store(targetModulId), payload);
             }
+        }
+    };
 
-            toast.success("Soal berhasil diperbarui.");
+    const batchUpdateMutation = useMutation({
+        mutationFn: async ({ regular, english }) => {
+            await syncBatchModule(regular);
+            await syncBatchModule(english);
+        },
+        onSuccess: (_, variables) => {
+            [
+                ...new Set(
+                    [
+                        variables?.regular?.modulId,
+                        variables?.english?.modulId,
+                        modul,
+                    ]
+                        .filter(Boolean)
+                        .map(String),
+                ),
+            ].forEach(invalidate);
+
+            toast.success("Soal modul ID dan EN berhasil diperbarui.");
         },
         onError: (error) => {
             console.error("Error batch updating soal:", error);
             toast.error(
                 error?.response?.data?.message ??
-                error?.message ??
-                "Gagal memperbarui soal.",
+                    error?.message ??
+                    "Gagal memperbarui soal.",
             );
         },
     });
 
+    const handleOpenTambah = () => {
+        setEditingSoal(null);
+        setIsAddingSoal(true);
+    };
+
+    const handleCancelTambah = () => {
+        if (postSoalMutation.isPending) return;
+        setIsAddingSoal(false);
+        setAddSoal({ soal: "" });
+        setEnableFileUploadNew(false);
+    };
+
     const handleTambahSoal = () => {
         if (!modul) {
-            onModalValidation?.({ message: "Pilih modul terlebih dahulu.", includeModuleNotice: false });
+            onModalValidation?.({
+                message: "Pilih modul terlebih dahulu.",
+                includeModuleNotice: false,
+            });
             return;
         }
 
-        if (!addSoal.soal.trim()) {
+        const soal = addSoal.soal.trim();
+
+        if (!soal) {
             onModalValidation?.({
                 message: "Isi soal terlebih dahulu sebelum menyimpan.",
                 includeModuleNotice: false,
@@ -195,375 +252,537 @@ export default function SoalInputEssay({ kategoriSoal, modul, modules = [], onMo
             return;
         }
 
-        postSoalMutation.mutate({
-            soal: addSoal.soal.trim(),
-            enable_file_upload: supportsFileUpload ? enableFileUploadNew : false,
-        });
-        setAddSoal({ soal: "" });
-        setEnableFileUploadNew(false);
+        postSoalMutation.mutate(
+            {
+                soal,
+                enable_file_upload: supportsFileUpload
+                    ? enableFileUploadNew
+                    : false,
+            },
+            {
+                onSuccess: () => {
+                    setAddSoal({ soal: "" });
+                    setEnableFileUploadNew(false);
+                    setIsAddingSoal(false);
+                    toast.success("Soal berhasil ditambahkan.");
+                },
+            },
+        );
     };
 
-    const handleOpenModalDelete = (soalItem) => {
-        setDeleteCandidate(soalItem);
-    };
+    const handleStartEdit = (item) => {
+        setIsAddingSoal(false);
 
-    const handleCancelDelete = () => {
-        if (!deleteSoalMutation.isPending) {
-            setDeleteCandidate(null);
-        }
+        const originalModulId =
+            item?.modul_id ?? (modul ? Number(modul) : null);
+
+        setEditingSoal({
+            id: item.id,
+            soal: item.soal ?? "",
+            modul_id: originalModulId ?? "",
+            enable_file_upload: Boolean(item.enable_file_upload),
+            originalSoal: item.soal ?? "",
+            originalModulId,
+        });
     };
 
-    const handleConfirmDelete = () => {
-        if (!deleteCandidate?.id || deleteSoalMutation.isPending) {
-            return;
-        }
+    const updateEditingSoal = (field, value) =>
+        setEditingSoal((prev) =>
+            prev ? { ...prev, [field]: value } : prev,
+        );
 
-        deleteSoalMutation.mutate(deleteCandidate.id);
+    const handleCancelEdit = () => {
+        if (!putSoalMutation.isPending) setEditingSoal(null);
     };
 
-    const handleOpenModalEdit = (soalItem) => {
-        setEditingSoal(soalItem);
-        setIsModalOpenEdit(true);
-    };
+    const handleConfirmEdit = () => {
+        if (!editingSoal?.id || putSoalMutation.isPending) return;
 
-    const handleCloseModalEdit = () => {
-        setEditingSoal(null);
-        setIsModalOpenEdit(false);
-    };
+        const soal = editingSoal.soal?.trim() ?? "";
+        if (!soal) {
+            toast.error("Isi soal terlebih dahulu.");
+            return;
+        }
 
-    const handleConfirmEdit = (updatedSoal) => {
-        const previousModulKey =
-            editingSoal?.modul_id !== undefined && editingSoal?.modul_id !== null
-                ? String(editingSoal.modul_id)
-                : modul;
-        const parsedNextModulId =
-            updatedSoal.modul_id !== undefined && updatedSoal.modul_id !== null
-                ? Number(updatedSoal.modul_id)
-                : Number.NaN;
-        const nextModulId = Number.isNaN(parsedNextModulId)
-            ? editingSoal?.modul_id ?? (modul ? Number(modul) : undefined)
-            : parsedNextModulId;
-        const nextModulKey =
-            nextModulId !== undefined && nextModulId !== null
-                ? String(nextModulId)
-                : previousModulKey;
-
-        if (nextModulId === undefined || nextModulId === null) {
+        const nextModulId = Number(editingSoal.modul_id);
+        if (!nextModulId || Number.isNaN(nextModulId)) {
             toast.error("Pilih modul untuk soal ini.");
             return;
         }
 
+        const previousModulKey =
+            editingSoal.originalModulId != null
+                ? String(editingSoal.originalModulId)
+                : String(modul ?? "");
+        const nextModulKey = String(nextModulId);
+
         const payload = {
             modul_id: nextModulId,
-            soal: updatedSoal.soal,
-            oldSoal: editingSoal?.soal ?? updatedSoal.soal,
+            soal,
+            oldSoal: editingSoal.originalSoal ?? soal,
         };
 
-        if (supportsFileUpload) {
-            payload.enable_file_upload = Boolean(updatedSoal.enable_file_upload);
-        }
+        if (supportsFileUpload)
+            payload.enable_file_upload = Boolean(
+                editingSoal.enable_file_upload,
+            );
 
-        putSoalMutation.mutate({
-            soalId: updatedSoal.id,
-            payload,
-            previousModulKey,
-            nextModulKey,
-        });
-        handleCloseModalEdit();
+        putSoalMutation.mutate(
+            {
+                soalId: editingSoal.id,
+                payload,
+                previousModulKey,
+                nextModulKey,
+            },
+            {
+                onSuccess: () => {
+                    setEditingSoal(null);
+                    toast.success("Soal berhasil diperbarui.");
+                },
+            },
+        );
     };
 
-    const batchContent = useMemo(() => {
-        if (!Array.isArray(soalList) || soalList.length === 0) {
-            return "Daftar Soal\n\n_Belum ada soal untuk ditampilkan._";
-        }
+    const handleOpenModalDelete = (item) => setDeleteCandidate(item);
 
-        return soalList
-            .map(
-                (item, index) =>
-                    `Soal ${index + 1}\n\n${item.soal?.trim() ?? "_(kosong)_"}\n`,
-            )
-            .join("\n\n");
-    }, [soalList]);
-
-    const handleBatchSubmit = async ({ items, modulId }) => {
-        const normalizedItems = Array.isArray(items)
-            ? items.map((item) => ({
-                soal: (item?.soal ?? "").trim(),
-            }))
-            : [];
-
-        const targetModulId = modulId ?? modul;
-        await batchUpdateMutation.mutateAsync({ items: normalizedItems, modulId: targetModulId });
-
-        if (targetModulId && onChangeModul && String(targetModulId) !== String(modul ?? "")) {
-            onChangeModul(String(targetModulId));
-        }
+    const handleCancelDelete = () => {
+        if (!deleteSoalMutation.isPending) setDeleteCandidate(null);
     };
 
-    const handleOpenCompareModal = () => {
-        const hasModules = regularModules.length > 0 || englishModules.length > 0;
-        if (!hasModules) {
-            toast.error("Belum ada modul lain untuk dibandingkan.");
+    const handleConfirmDelete = () => {
+        if (!deleteCandidate?.id || deleteSoalMutation.isPending) return;
+        deleteSoalMutation.mutate(deleteCandidate.id);
+    };
+
+    const handleOpenBatchModal = () => {
+        if (!regularModules.length || !englishModules.length) {
+            toast.error(
+                "Modul Indonesia dan English harus tersedia untuk Batch Edit.",
+            );
             return;
         }
 
         const currentModuleId = modul ? String(modul) : "";
-        const currentModule = modules.find((moduleItem) => getModuleId(moduleItem) === currentModuleId);
-        const isCurrentEnglish = Number(currentModule?.isEnglish ?? 0) === 1;
-        const firstRegularId = getModuleId(regularModules[0]);
-        const firstEnglishId = getModuleId(englishModules[0]);
+        const currentModule = modules.find(
+            (m) => getModuleId(m) === currentModuleId,
+        );
+        const currentIsEnglish =
+            Number(currentModule?.isEnglish ?? 0) === 1;
 
-        setCompareState((previous) => ({
-            isOpen: true,
+        setBatchState((prev) => ({
             regularModuleId:
-                previous.regularModuleId
-                || (!isCurrentEnglish && currentModuleId ? currentModuleId : firstRegularId || ""),
+                (!currentIsEnglish && currentModuleId) ||
+                prev.regularModuleId ||
+                getModuleId(regularModules[0]),
             englishModuleId:
-                previous.englishModuleId
-                || (isCurrentEnglish && currentModuleId ? currentModuleId : firstEnglishId || ""),
-        }));
-    };
-
-    const handleCloseCompareModal = () => {
-        setCompareState((previous) => ({
-            ...previous,
-            isOpen: false,
+                (currentIsEnglish && currentModuleId) ||
+                prev.englishModuleId ||
+                getModuleId(englishModules[0]),
         }));
-    };
 
-    const handleSelectCompareRegular = (value) => {
-        setCompareState((previous) => ({
-            ...previous,
-            regularModuleId: value,
-        }));
+        setIsBatchModalOpen(true);
     };
 
-    const handleSelectCompareEnglish = (value) => {
-        setCompareState((previous) => ({
-            ...previous,
-            englishModuleId: value,
-        }));
+    const handleCloseBatchModal = () => {
+        if (!batchUpdateMutation.isPending) setIsBatchModalOpen(false);
     };
 
-    const handleExportJson = () => {
-        if (!Array.isArray(soalList) || soalList.length === 0) {
-            toast.error("Belum ada soal untuk diekspor.");
-            return;
-        }
-
-        try {
-            const moduleLabel = modules.find((moduleItem) => getModuleId(moduleItem) === String(modul))?.judul;
-            const payload = {
-                kategori: kategoriSoal,
-                modul_id: modul ?? null,
-                modul_label: moduleLabel ?? null,
-                exported_at: new Date().toISOString(),
-                soal: soalList,
-            };
-
-            const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
-            const url = URL.createObjectURL(blob);
-            const anchor = document.createElement("a");
-            anchor.href = url;
-            const safeCategory = kategoriSoal ?? "soal";
-            const moduleSuffix = modul ? `-modul-${modul}` : "";
-            anchor.download = `soal-${safeCategory}${moduleSuffix}.json`;
-            document.body.appendChild(anchor);
-            anchor.click();
-            document.body.removeChild(anchor);
-            URL.revokeObjectURL(url);
-            toast.success("Soal berhasil diekspor.");
-        } catch (error) {
-            console.error("Error exporting soal:", error);
-            toast.error("Gagal mengekspor data soal.");
-        }
+    const handleBatchSubmit = async (payload) => {
+        await batchUpdateMutation.mutateAsync(payload);
+        setIsBatchModalOpen(false);
     };
 
     const {
-        data: comparisonData,
-        isLoading: isComparisonLoading,
-        isFetching: isComparisonFetching,
-        refetch: refetchComparison,
+        data: batchComparisonData,
+        isLoading: isBatchComparisonLoading,
+        isFetching: isBatchComparisonFetching,
     } = useSoalComparison(
         kategoriSoal,
-        compareState.isOpen ? compareState.regularModuleId : null,
-        compareState.isOpen ? compareState.englishModuleId : null,
+        isBatchModalOpen ? batchState.regularModuleId : null,
+        isBatchModalOpen ? batchState.englishModuleId : null,
         {
             enabled:
-                compareState.isOpen
-                && Boolean(
-                    kategoriSoal
-                    && (compareState.regularModuleId || compareState.englishModuleId),
+                isBatchModalOpen &&
+                Boolean(
+                    kategoriSoal &&
+                        batchState.regularModuleId &&
+                        batchState.englishModuleId,
                 ),
-            keepPreviousData: true,
+            keepPreviousData: false,
         },
     );
 
     return (
         <div className="space-y-6 text-depth-primary">
-            {isEditable && (
-                <div className="space-y-2">
-                    <label className="block text-xs font-semibold uppercase tracking-wide text-depth-secondary">
-                        Soal
-                    </label>
-                    <textarea
-                        className="h-48 w-full rounded-depth-lg border border-depth bg-depth-card p-4 text-sm text-depth-primary shadow-depth-sm transition duration-200 placeholder:text-depth-secondary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--depth-color-card)]"
-                        rows="8"
-                        placeholder="Masukkan soal..."
-                        value={addSoal.soal}
-                        onChange={(e) => setAddSoal({ soal: e.target.value })}
-                    />
-                    {supportsFileUpload && (
-                        <div className="flex items-center justify-between rounded-depth-md border border-depth bg-depth-interactive/40 px-4 py-3 text-sm font-semibold text-depth-primary">
-                            <span>Izinkan unggah file untuk soal ini</span>
-                            <DepthToggleButton
-                                isOn={enableFileUploadNew}
-                                onToggle={() => setEnableFileUploadNew((prev) => !prev)}
-                            />
-                        </div>
-                    )}
-                </div>
-            )}
-
             {isEditable && (
                 <div className="flex flex-wrap justify-end gap-3">
                     <button
-                        className="rounded-depth-md border border-depth bg-depth-card px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                        onClick={handleOpenCompareModal}
                         type="button"
-                        disabled={regularModules.length === 0 && englishModules.length === 0}
+                        onClick={handleOpenBatchModal}
+                        disabled={!regularModules.length || !englishModules.length}
+                        className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
                     >
-                        Compare
-                    </button>
-                    {/* <button
-                        className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                        onClick={handleExportJson}
-                        type="button"
-                        disabled={!Array.isArray(soalList) || soalList.length === 0}
-                    >
-                        Export JSON
-                    </button> */}
-                    <button
-                        className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
-                        onClick={() => setIsBatchModalOpen(true)}
-                        disabled={soalLoading || soalList.length === 0}
-                    >
-                        Batch Edit
+                        Batch Edit ID / EN
                     </button>
+
                     <button
-                        className="rounded-depth-md bg-[var(--depth-color-primary)] px-6 py-2 text-sm font-semibold text-white shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--depth-color-card)] disabled:opacity-70"
-                        onClick={handleTambahSoal}
-                        disabled={postSoalMutation.isPending}
+                        type="button"
+                        onClick={handleOpenTambah}
+                        disabled={
+                            isAddingSoal || postSoalMutation.isPending
+                        }
+                        className="rounded-depth-md bg-[var(--depth-color-primary)] px-6 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
                     >
-                        {postSoalMutation.isPending ? "Menyimpan..." : "+ Tambah Soal"}
+                        {isAddingSoal
+                            ? "Menambah Soal..."
+                            : "+ Tambah Soal"}
                     </button>
                 </div>
             )}
 
+            {isEditable && isAddingSoal && (
+                <section className="overflow-hidden rounded-depth-lg border border-[var(--depth-color-primary)]/40 bg-depth-card shadow-depth-md">
+                    <div className="flex flex-wrap items-center justify-between gap-3 border-b border-depth bg-depth-interactive px-5 py-4">
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <h3 className="text-base font-semibold">
+                                    Tambah Soal Baru
+                                </h3>
+
+                                <span className="rounded-depth-full bg-[var(--depth-color-primary)]/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--depth-color-primary)]">
+                                    New
+                                </span>
+                            </div>
+
+                            <p className="mt-1 text-xs text-depth-secondary">
+                                Tulis Markdown dan lihat hasil render secara
+                                langsung.
+                            </p>
+                        </div>
+
+                        <button
+                            type="button"
+                            onClick={handleCancelTambah}
+                            disabled={postSoalMutation.isPending}
+                            className="flex h-8 w-8 items-center justify-center rounded-depth-md border border-depth bg-depth-card text-lg text-depth-secondary transition hover:text-depth-primary disabled:opacity-50"
+                            aria-label="Tutup form tambah soal"
+                            title="Tutup"
+                        >
+                            ×
+                        </button>
+                    </div>
+
+                    <div className="p-5">
+                        <SoalMarkdownEditor
+                            value={addSoal.soal}
+                            onChange={(soal) => setAddSoal({ soal })}
+                            placeholder="Tulis soal menggunakan Markdown..."
+                            supportsFileUpload={supportsFileUpload}
+                            enableFileUpload={enableFileUploadNew}
+                            onToggleFileUpload={() =>
+                                setEnableFileUploadNew((v) => !v)
+                            }
+                            isSaving={postSoalMutation.isPending}
+                            saveLabel="Tambah Soal"
+                            onCancel={handleCancelTambah}
+                            onSave={handleTambahSoal}
+                        />
+                    </div>
+                </section>
+            )}
+
             <div className="space-y-4">
-                <h3 className="text-base font-semibold text-depth-secondary">Daftar Soal</h3>
-                {soalLoading && <p className="text-sm text-depth-secondary">Memuat soal...</p>}
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                    <h3 className="text-base font-semibold text-depth-secondary">
+                        Soal yang telah ditambahkan:
+                    </h3>
+
+                    {!soalLoading && !soalError && (
+                        <span className="text-xs text-depth-secondary">
+                            {soalList.length} soal
+                        </span>
+                    )}
+                </div>
+
+                {soalLoading && (
+                    <p className="text-sm text-depth-secondary">
+                        Memuat soal...
+                    </p>
+                )}
+
                 {soalError && (
-                    <p className="text-sm text-red-500">
+                    <p className="rounded-depth-md border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-500">
                         {soalQueryError?.message ?? "Gagal memuat soal"}
                     </p>
                 )}
-                {!soalLoading && !soalError && (
-                    <ul className="space-y-4">
-                        {soalList.map((soalItem, index) => (
-                            <li
-                                key={soalItem.id ?? index}
-                                className="relative flex items-start justify-between gap-4 rounded-depth-lg border border-depth bg-depth-card p-5 shadow-depth-md transition duration-200 hover:shadow-depth-lg"
+
+                {!soalLoading && !soalError && soalList.length === 0 && (
+                    <div className="flex min-h-[120px] flex-col items-center justify-center rounded-depth-lg border border-dashed border-depth bg-depth-card p-8 text-center">
+                        <p className="text-sm font-medium text-depth-secondary">
+                            Belum ada soal.
+                        </p>
+
+                        {isEditable && (
+                            <button
+                                type="button"
+                                onClick={handleOpenTambah}
+                                className="mt-3 text-sm font-semibold text-[var(--depth-color-primary)] transition hover:opacity-80"
                             >
-                                <div className="flex-1 space-y-2">
-                                    <div className="text-sm font-semibold text-depth-secondary">
-                                        <span>Soal {index + 1}</span>
-                                        {soalItem.enable_file_upload && (
-                                            <span className="ml-2 rounded-depth-full border border-emerald-500/40 bg-emerald-500/15 px-2 py-0.5 text-xs font-semibold text-emerald-600">
-                                                File Upload
+                                + Tambah soal pertama
+                            </button>
+                        )}
+                    </div>
+                )}
+
+                {!soalLoading && !soalError && soalList.length > 0 && (
+                    <ul className="space-y-4">
+                        {soalList.map((item, index) => {
+                            const isEditing = editingSoal?.id === item.id;
+
+                            return (
+                                <li
+                                    id={`soal-${kategoriSoal}-${index}`}
+                                    key={item.id ?? index}
+                                    className={`relative overflow-hidden rounded-depth-lg border bg-depth-card shadow-depth-md transition ${
+                                        isEditing
+                                            ? "border-[var(--depth-color-primary)] ring-1 ring-[var(--depth-color-primary)]/20"
+                                            : "border-depth hover:shadow-depth-lg"
+                                    }`}
+                                >
+                                    <div className="flex flex-wrap items-center justify-between gap-3 border-b border-depth bg-depth-interactive px-5 py-3">
+                                        <div className="flex flex-wrap items-center gap-2">
+                                            <span className="text-sm font-semibold text-depth-secondary">
+                                                Soal {index + 1}
                                             </span>
+
+                                            {Boolean(item.enable_file_upload) && (
+                                                <span className="rounded-depth-full border border-emerald-500/40 bg-emerald-500/15 px-2 py-0.5 text-xs font-semibold text-emerald-600">File Upload</span>
+                                            )}
+
+                                            {isEditing && (
+                                                <span className="rounded-depth-full bg-[var(--depth-color-primary)]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--depth-color-primary)]">
+                                                    Editing
+                                                </span>
+                                            )}
+                                        </div>
+
+                                        {!isEditing && (
+                                            <div className="flex gap-2">
+                                                {isEditable && (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            handleOpenModalDelete(
+                                                                item,
+                                                            )
+                                                        }
+                                                        className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive text-red-500 shadow-depth-sm transition hover:border-red-400 hover:shadow-depth-md"
+                                                        title="Hapus soal"
+                                                        aria-label={`Hapus soal ${
+                                                            index + 1
+                                                        }`}
+                                                    >
+                                                        <img
+                                                            src={trashIcon}
+                                                            className="h-4 w-4"
+                                                            alt=""
+                                                        />
+                                                    </button>
+                                                )}
+
+                                                <SoalCommentsButton
+                                                    kategoriSoal={kategoriSoal}
+                                                    modulId={
+                                                        item?.modul_id ??
+                                                        (modul
+                                                            ? Number(modul)
+                                                            : null)
+                                                    }
+                                                    soalId={item?.id}
+                                                    variant="icon"
+                                                />
+
+                                                {isEditable && (
+                                                    <button
+                                                        type="button"
+                                                        onClick={() =>
+                                                            handleStartEdit(
+                                                                item,
+                                                            )
+                                                        }
+                                                        className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive shadow-depth-sm transition hover:border-blue-400 hover:shadow-depth-md"
+                                                        title="Edit soal"
+                                                        aria-label={`Edit soal ${
+                                                            index + 1
+                                                        }`}
+                                                    >
+                                                        <img
+                                                            src={editIcon}
+                                                            className="edit-icon-filter h-4 w-4"
+                                                            alt=""
+                                                        />
+                                                    </button>
+                                                )}
+                                            </div>
                                         )}
                                     </div>
-                                    <div className="whitespace-pre-wrap break-words rounded-depth-md bg-depth-interactive p-3 text-sm text-depth-primary shadow-depth-inset max-h-[60vh] overflow-y-auto min-w-0">
-                                        <MarkdownRenderer content={soalItem.soal} />
+
+                                    <div className="p-5">
+                                        {isEditing ? (
+                                            <div className="space-y-4">
+                                                {!!modules.length && (
+                                                    <div className="max-w-sm">
+                                                        <label
+                                                            htmlFor={`soal-module-${item.id}`}
+                                                            className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-depth-secondary"
+                                                        >
+                                                            Modul
+                                                        </label>
+
+                                                        <select
+                                                            id={`soal-module-${item.id}`}
+                                                            value={
+                                                                editingSoal.modul_id ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                updateEditingSoal(
+                                                                    "modul_id",
+                                                                    e.target
+                                                                        .value,
+                                                                )
+                                                            }
+                                                            disabled={
+                                                                putSoalMutation.isPending
+                                                            }
+                                                            className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2 text-sm text-depth-primary shadow-depth-sm focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]/30 disabled:opacity-60"
+                                                        >
+                                                            {modules.map(
+                                                                (m) => {
+                                                                    const id =
+                                                                        getModuleId(
+                                                                            m,
+                                                                        );
+
+                                                                    if (!id)
+                                                                        return null;
+
+                                                                    return (
+                                                                        <option
+                                                                            key={
+                                                                                id
+                                                                            }
+                                                                            value={
+                                                                                id
+                                                                            }
+                                                                        >
+                                                                            {m?.judul ??
+                                                                                m?.nama ??
+                                                                                `Modul ${id}`}
+                                                                        </option>
+                                                                    );
+                                                                },
+                                                            )}
+                                                        </select>
+                                                    </div>
+                                                )}
+
+                                                <SoalMarkdownEditor
+                                                    value={editingSoal.soal}
+                                                    onChange={(value) =>
+                                                        updateEditingSoal(
+                                                            "soal",
+                                                            value,
+                                                        )
+                                                    }
+                                                    supportsFileUpload={
+                                                        supportsFileUpload
+                                                    }
+                                                    enableFileUpload={
+                                                        editingSoal.enable_file_upload
+                                                    }
+                                                    onToggleFileUpload={() =>
+                                                        updateEditingSoal(
+                                                            "enable_file_upload",
+                                                            !editingSoal.enable_file_upload,
+                                                        )
+                                                    }
+                                                    isSaving={
+                                                        putSoalMutation.isPending
+                                                    }
+                                                    saveLabel="Simpan Perubahan"
+                                                    onCancel={handleCancelEdit}
+                                                    onSave={handleConfirmEdit}
+                                                />
+                                            </div>
+                                        ) : (
+                                            <div className="min-w-0 max-h-[60vh] overflow-y-auto break-words rounded-depth-md bg-depth-interactive p-4 text-sm text-depth-primary shadow-depth-inset">
+                                                {item.soal ? (
+                                                    <MarkdownRenderer
+                                                        content={item.soal}
+                                                    />
+                                                ) : (
+                                                    <p className="italic text-depth-secondary">
+                                                        Soal kosong.
+                                                    </p>
+                                                )}
+                                            </div>
+                                        )}
                                     </div>
-                                </div>
-                                <div className="absolute right-4 top-4 flex gap-2">
-                                    {isEditable && (
-                                        <button
-                                            onClick={() => handleOpenModalDelete(soalItem)}
-                                            className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive text-red-500 shadow-depth-sm transition duration-150 hover:border-red-400 hover:shadow-depth-md"
-                                            type="button"
-                                        >
-                                            <img className="h-4 w-4" src={trashIcon} alt="Delete" />
-                                        </button>
-                                    )}
-                                    <SoalCommentsButton
-                                        kategoriSoal={kategoriSoal}
-                                        modulId={soalItem?.modul_id ?? (modul ? Number(modul) : null)}
-                                        soalId={soalItem?.id}
-                                        variant="icon"
-                                    />
-                                    {isEditable && (
-                                        <button
-                                            onClick={() => handleOpenModalEdit(soalItem)}
-                                            className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive shadow-depth-sm transition duration-150 hover:border-blue-400 hover:shadow-depth-md"
-                                            type="button"
-                                        >
-                                            <img className="edit-icon-filter h-4 w-4" src={editIcon} alt="Edit" />
-                                        </button>
-                                    )}
-
-                                </div>
-                            </li>
-                        ))}
+                                </li>
+                            );
+                        })}
                     </ul>
                 )}
             </div>
 
-            {compareState.isOpen && (
-                <ModalCompareSoal
-                    kategoriSoal={kategoriSoal}
+            {isBatchModalOpen && (
+                <ModalBatchEditSoal
+                    title="Batch Edit Soal — ID / EN"
                     regularModules={regularModules}
                     englishModules={englishModules}
-                    selectedRegularModuleId={compareState.regularModuleId}
-                    selectedEnglishModuleId={compareState.englishModuleId}
-                    onSelectRegularModule={handleSelectCompareRegular}
-                    onSelectEnglishModule={handleSelectCompareEnglish}
-                    regularDataset={comparisonData?.regular ?? null}
-                    englishDataset={comparisonData?.english ?? null}
-                    isLoading={isComparisonLoading}
-                    isFetching={isComparisonFetching}
-                    onRefresh={refetchComparison}
-                    onClose={handleCloseCompareModal}
-                />
-            )}
-            {isModalOpenEdit && (
-                <ModalEditSoalEssay
-                    soalItem={editingSoal}
-                    onClose={handleCloseModalEdit}
-                    onSave={handleConfirmEdit}
+                    selectedRegularModuleId={batchState.regularModuleId}
+                    selectedEnglishModuleId={batchState.englishModuleId}
+                    onSelectRegularModule={(value) =>
+                        setBatchState((v) => ({
+                            ...v,
+                            regularModuleId: value,
+                        }))
+                    }
+                    onSelectEnglishModule={(value) =>
+                        setBatchState((v) => ({
+                            ...v,
+                            englishModuleId: value,
+                        }))
+                    }
+                    regularDataset={batchComparisonData?.regular ?? null}
+                    englishDataset={batchComparisonData?.english ?? null}
+                    isLoading={isBatchComparisonLoading}
+                    isFetching={isBatchComparisonFetching}
+                    isSaving={batchUpdateMutation.isPending}
                     supportsFileUpload={supportsFileUpload}
-                />
-            )}
-            {isBatchModalOpen && (
-                <ModalBatchEditSoal
-                    title="Batch Edit Soal Essay"
-                    initialValue={batchContent}
-                    variant="essay"
-                    moduleOptions={modules}
-                    initialModuleId={modul}
-                    onClose={() => setIsBatchModalOpen(false)}
+                    onClose={handleCloseBatchModal}
                     onSubmit={handleBatchSubmit}
                 />
             )}
+
             {deleteCandidate && (
-                <ModalOverlay onClose={handleCancelDelete} className="depth-modal-overlay z-[70]">
+                <ModalOverlay
+                    onClose={handleCancelDelete}
+                    className="depth-modal-overlay z-[70]"
+                >
                     <div className="depth-modal-container max-w-sm space-y-4 text-center">
                         <div className="depth-modal-header justify-center">
-                            <h3 className="depth-modal-title text-center">Hapus Soal</h3>
-                            <ModalCloseButton onClick={handleCancelDelete} ariaLabel="Tutup konfirmasi hapus soal" />
+                            <h3 className="depth-modal-title text-center">
+                                Hapus Soal
+                            </h3>
+
+                            <ModalCloseButton
+                                onClick={handleCancelDelete}
+                                ariaLabel="Tutup konfirmasi hapus soal"
+                            />
                         </div>
+
                         <p className="text-sm text-depth-secondary">
                             Apakah Anda yakin ingin menghapus soal{" "}
                             <span className="font-semibold text-depth-primary">
@@ -571,22 +790,26 @@ export default function SoalInputEssay({ kategoriSoal, modul, modules = [], onMo
                             </span>
                             ?
                         </p>
+
                         <div className="flex justify-center gap-3">
                             <button
                                 type="button"
                                 onClick={handleCancelDelete}
                                 disabled={deleteSoalMutation.isPending}
-                                className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
+                                className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
                             >
                                 Batal
                             </button>
+
                             <button
                                 type="button"
                                 onClick={handleConfirmDelete}
                                 disabled={deleteSoalMutation.isPending}
-                                className="rounded-depth-md border border-red-500/60 bg-red-500/15 px-5 py-2 text-sm font-semibold text-red-400 shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
+                                className="rounded-depth-md border border-red-500/60 bg-red-500/15 px-5 py-2 text-sm font-semibold text-red-400 shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
                             >
-                                {deleteSoalMutation.isPending ? "Menghapus..." : "Hapus"}
+                                {deleteSoalMutation.isPending
+                                    ? "Menghapus..."
+                                    : "Hapus"}
                             </button>
                         </div>
                     </div>
diff --git a/resources/js/Components/Assistants/Soal/SoalInputPG.jsx b/resources/js/Components/Assistants/Soal/SoalInputPG.jsx
index dff91c8..ea0d8df 100644
--- a/resources/js/Components/Assistants/Soal/SoalInputPG.jsx
+++ b/resources/js/Components/Assistants/Soal/SoalInputPG.jsx
@@ -1,794 +1,2203 @@
-import { useMemo, useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState, } from "react";
+import { useMutation, useQueryClient, } from "@tanstack/react-query";
 import { send } from "@/lib/http";
-import { useSoalQuery, soalQueryKey } from "@/hooks/useSoalQuery";
-import { getSoalController } from "@/lib/soalControllers";
-import ModalEditSoalPG from "../Modals/ModalEditSoalPG";
+import { useSoalQuery, soalQueryKey, } from "@/hooks/useSoalQuery";
+import { useSoalComparison } from "@/hooks/useSoalComparison";
+import { getSoalController, } from "@/lib/soalControllers";
+
 import trashIcon from "../../../../assets/nav/Icon-Delete.svg";
 import editIcon from "../../../../assets/nav/Icon-Edit.svg";
+
 import toast from "react-hot-toast";
-import ModalBatchEditSoal from "../Modals/ModalBatchEditSoal";
-import ModalCompareSoal from "../Modals/ModalCompareSoal";
+
+import ModalBatchEditSoalPG from "../Modals/ModalBatchEditSoalPG";
 import ModalAnalyzeSoalPG from "../Modals/ModalAnalyzeSoalPG";
+
 import SoalCommentsButton from "./SoalCommentsButton";
-import { useSoalComparison } from "@/hooks/useSoalComparison";
-import { ModalOverlay } from "@/Components/Common/ModalPortal";
+import SoalPGEditor from "./SoalPGEditor";
+
+import { ModalOverlay, } from "@/Components/Common/ModalPortal";
 import ModalCloseButton from "@/Components/Common/ModalCloseButton";
 import MarkdownRenderer from "../../MarkdownRenderer";
 
 const OPTION_COUNT = 4;
-const EMPTY_OPTIONS = Array.from({ length: OPTION_COUNT }, () => "");
 
-const isOptionCorrect = (soalItem, option, optionIndex) => {
-    if (typeof option?.is_correct === "boolean") {
+const OPTION_LABELS = [
+    "A",
+    "B",
+    "C",
+    "D",
+];
+
+const EMPTY_OPTIONS =
+    Array.from( { length: OPTION_COUNT, }, () => "");
+
+
+/*
+ * ============================================================
+ * OPTION HELPERS
+ * ============================================================
+ */
+
+const isOptionCorrect = (
+    soalItem,
+    option,
+    optionIndex
+) => {
+    if (
+        typeof option?.is_correct ===
+        "boolean"
+    ) {
         return option.is_correct;
     }
 
-    if (option?.id && soalItem?.opsi_benar_id) {
-        return option.id === soalItem.opsi_benar_id;
+    if (
+        option?.id &&
+        soalItem?.opsi_benar_id
+    ) {
+        return (
+            option.id ===
+            soalItem.opsi_benar_id
+        );
     }
 
-    if (typeof soalItem?.correct_option === "number") {
-        return soalItem.correct_option === optionIndex;
+    if (
+        typeof soalItem?.correct_option ===
+        "number"
+    ) {
+        return (
+            soalItem.correct_option ===
+            optionIndex
+        );
     }
 
     return false;
 };
 
-const normalizeOptionsForDisplay = (soalItem) => {
-    const options = soalItem?.options ?? [];
-    const normalized = options.map((option) => ({
-        id: option?.id ?? null,
-        text: option?.text ?? "",
-        is_correct: option?.is_correct,
-    }));
 
-    while (normalized.length < OPTION_COUNT) {
-        normalized.push({ id: null, text: "", is_correct: false });
+const normalizeOptionsForDisplay = (
+    soalItem
+) => {
+    const options =
+        soalItem?.options ??
+        [];
+
+    const normalized =
+        options.map(
+            (option) => ({
+                id:
+                    option?.id ??
+                    null,
+
+                text:
+                    option?.text ??
+                    "",
+
+                is_correct:
+                    option?.is_correct,
+            })
+        );
+
+    while (
+        normalized.length <
+        OPTION_COUNT
+    ) {
+        normalized.push({
+            id:
+                null,
+
+            text:
+                "",
+
+            is_correct:
+                false,
+        });
     }
 
-    return normalized;
+    return normalized.slice(
+        0,
+        OPTION_COUNT
+    );
 };
 
-export default function SoalInputPG({ kategoriSoal, modul, modules = [], onModalSuccess, onModalValidation, onChangeModul, isEditable = true }) {
-    const [formState, setFormState] = useState({
-        pertanyaan: "",
-        options: [...EMPTY_OPTIONS],
-        correctIndex: 0,
+
+const validatePGForm = ({
+    pertanyaan,
+    options,
+}) => {
+    if (
+        !String(
+            pertanyaan ??
+                ""
+        ).trim()
+    ) {
+        return "Pertanyaan tidak boleh kosong.";
+    }
+
+    const normalizedOptions =
+        options.map(
+            (option) =>
+                String(
+                    typeof option ===
+                        "string"
+                        ? option
+                        : option?.text ??
+                          ""
+                ).trim()
+        );
+
+    if (
+        normalizedOptions.some(
+            (option) =>
+                option.length ===
+                0
+        )
+    ) {
+        return "Semua pilihan jawaban harus diisi.";
+    }
+
+    const uniqueOptions =
+        new Set(
+            normalizedOptions
+        );
+
+    if (
+        uniqueOptions.size !==
+        normalizedOptions.length
+    ) {
+        return "Teks pilihan tidak boleh duplikat.";
+    }
+
+    return null;
+};
+
+
+export default function SoalInputPG({
+    kategoriSoal,
+    modul,
+    modules = [],
+
+    onModalSuccess,
+    onModalValidation,
+
+    isEditable = true,
+}) {
+    /*
+     * ============================================================
+     * STATE
+     * ============================================================
+     */
+
+    const [
+        formState,
+        setFormState,
+    ] = useState({
+        pertanyaan:
+            "",
+
+        options:
+            [
+                ...EMPTY_OPTIONS,
+            ],
+
+        correctIndex:
+            0,
     });
-    const [isModalOpenEdit, setIsModalOpenEdit] = useState(false);
-    const [editingSoal, setEditingSoal] = useState(null);
-    const [isBatchModalOpen, setIsBatchModalOpen] = useState(false);
-    const [compareState, setCompareState] = useState({
-        isOpen: false,
-        regularModuleId: "",
-        englishModuleId: "",
+
+
+    const [
+        isAddingSoal,
+        setIsAddingSoal,
+    ] = useState(false);
+
+
+    const [
+        editingSoal,
+        setEditingSoal,
+    ] = useState(null);
+
+
+    const [
+        deleteCandidate,
+        setDeleteCandidate,
+    ] = useState(null);
+
+
+    const [
+        isBatchModalOpen,
+        setIsBatchModalOpen,
+    ] = useState(false);
+
+
+    const [
+        batchState,
+        setBatchState,
+    ] = useState({
+        regularModuleId:
+            "",
+
+        englishModuleId:
+            "",
     });
-    const [isAnalyzeModalOpen, setIsAnalyzeModalOpen] = useState(false);
-    const [analyzeModuleId, setAnalyzeModuleId] = useState(modul ? String(modul) : "");
-    const isAnalysisSupported = kategoriSoal === "ta" || kategoriSoal === "tk";
-    const [deleteCandidate, setDeleteCandidate] = useState(null);
-
-    const getModuleId = (moduleItem) => {
-        const possibleId = moduleItem?.idM ?? moduleItem?.id ?? moduleItem?.value ?? moduleItem?.uuid ?? moduleItem?.ID;
-        return possibleId === undefined || possibleId === null ? "" : String(possibleId);
-    };
 
-    const regularModules = useMemo(
-        () => (modules ?? []).filter((moduleItem) => Number(moduleItem?.isEnglish ?? 0) !== 1),
-        [modules],
-    );
 
-    const englishModules = useMemo(
-        () => (modules ?? []).filter((moduleItem) => Number(moduleItem?.isEnglish ?? 0) === 1),
-        [modules],
+    const [
+        isAnalyzeModalOpen,
+        setIsAnalyzeModalOpen,
+    ] = useState(false);
+
+
+    const [
+        analyzeModuleId,
+        setAnalyzeModuleId,
+    ] = useState(
+        modul
+            ? String(modul)
+            : ""
     );
 
-    const queryClient = useQueryClient();
-    const soalQuery = useSoalQuery(kategoriSoal, modul);
-    const soalList = soalQuery.data ?? [];
 
-    const controller = getSoalController(kategoriSoal);
+    const isAnalysisSupported =
+        kategoriSoal ===
+            "ta" ||
+        kategoriSoal ===
+            "tk";
+
+
+    /*
+     * ============================================================
+     * MODULE HELPERS
+     * ============================================================
+     */
+
+    const getModuleId = (
+        moduleItem
+    ) => {
+        const possibleId =
+            moduleItem?.idM ??
+            moduleItem?.id ??
+            moduleItem?.value ??
+            moduleItem?.uuid ??
+            moduleItem?.ID;
+
+        return possibleId ===
+            undefined ||
+            possibleId ===
+                null
+            ? ""
+            : String(
+                  possibleId
+              );
+    };
 
-    const postSoalMutation = useMutation({
-        mutationFn: async (payload) => {
-            if (!controller) {
-                throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
 
-            const { data } = await send(controller.store(modul), payload);
-            return data;
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, modul) });
-            if (typeof onModalSuccess === "function") {
-                onModalSuccess();
-            }
-        },
-    });
+    const regularModules =
+        useMemo(
+            () =>
+                (
+                    modules ??
+                    []
+                ).filter(
+                    (
+                        moduleItem
+                    ) =>
+                        Number(
+                            moduleItem?.isEnglish ??
+                                0
+                        ) !==
+                        1
+                ),
+            [modules]
+        );
+
+
+    const englishModules =
+        useMemo(
+            () =>
+                (
+                    modules ??
+                    []
+                ).filter(
+                    (
+                        moduleItem
+                    ) =>
+                        Number(
+                            moduleItem?.isEnglish ??
+                                0
+                        ) ===
+                        1
+                ),
+            [modules]
+        );
 
-    const putSoalMutation = useMutation({
-        mutationFn: async ({ soalId, payload }) => {
-            if (!controller) {
-                throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
 
-            const { data } = await send(controller.update(soalId), payload);
-            return data;
-        },
-        onSuccess: (_, variables) => {
-            const previousKey = variables?.previousModulKey ?? modul;
-            const nextKey = variables?.nextModulKey ?? previousKey;
+    /*
+     * ============================================================
+     * QUERY
+     * ============================================================
+     */
 
-            if (previousKey) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, previousKey) });
-            }
+    const queryClient =
+        useQueryClient();
 
-            if (nextKey && nextKey !== previousKey) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, nextKey) });
-            }
-        },
-    });
 
-    const deleteSoalMutation = useMutation({
-        mutationFn: async (soalId) => {
-            if (!controller) {
-                throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
+    const soalQuery =
+        useSoalQuery(
+            kategoriSoal,
+            modul
+        );
 
-            await send(controller.destroy(soalId));
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, modul) });
-            setDeleteCandidate(null);
-            toast.success("Soal berhasil dihapus!");
-        },
-        onError: (error) => {
-            toast.error(error?.response?.data?.message ?? "Gagal menghapus soal.");
-        },
-    });
 
-    const batchUpdateMutation = useMutation({
-        mutationFn: async ({ items, modulId }) => {
-            if (!controller) {
-                throw new Error(`Kategori soal tidak didukung: ${kategoriSoal}`);
-            }
+    const soalList =
+        soalQuery.data ??
+        [];
 
-            const targetModulId = Number(modulId ?? modul);
-            if (!targetModulId || Number.isNaN(targetModulId)) {
-                throw new Error("Modul belum dipilih.");
-            }
 
-            const existingItems = soalList ?? [];
-            const maxLength = Math.max(existingItems.length, items?.length ?? 0);
-
-            for (let i = 0; i < maxLength; i += 1) {
-                const existingItem = existingItems[i] ?? null;
-                const desiredItem = items?.[i] ?? null;
-                const desiredQuestion = desiredItem?.pertanyaan?.trim() ?? "";
-                const desiredOptions = (desiredItem?.options ?? []).map((option) => ({
-                    text: (option?.text ?? "").trim(),
-                    isCorrect: Boolean(option?.isCorrect),
-                }));
-
-                if (existingItem && desiredQuestion) {
-                    if (desiredOptions.length !== OPTION_COUNT) {
-                        throw new Error(`Soal ${i + 1} harus memiliki ${OPTION_COUNT} pilihan.`);
-                    }
+    const controller =
+        getSoalController(
+            kategoriSoal
+        );
 
-                    if (desiredOptions.some((option) => option.text.length === 0)) {
-                        throw new Error(`Semua pilihan pada Soal ${i + 1} harus diisi.`);
+
+    /*
+     * ============================================================
+     * CREATE
+     * ============================================================
+     */
+
+    const postSoalMutation =
+        useMutation({
+            mutationFn:
+                async (
+                    payload
+                ) => {
+                    if (
+                        !controller
+                    ) {
+                        throw new Error(
+                            `Kategori soal tidak didukung: ${kategoriSoal}`
+                        );
                     }
 
-                    const existingOptions = normalizeOptionsForDisplay(existingItem);
-                    const payloadOptions = desiredOptions.map((option, optionIndex) => ({
-                        id: existingOptions[optionIndex]?.id ?? null,
-                        text: option.text,
-                    }));
-                    const correctIndex = desiredOptions.findIndex((option) => option.isCorrect);
-                    const finalCorrectIndex = correctIndex >= 0 ? correctIndex : 0;
-                    const existingCorrectIndexRaw = existingOptions.findIndex((option, optionIndex) =>
-                        isOptionCorrect(existingItem, option, optionIndex),
+                    const {
+                        data,
+                    } =
+                        await send(
+                            controller.store(
+                                modul
+                            ),
+                            payload
+                        );
+
+                    return data;
+                },
+
+            onSuccess:
+                () => {
+                    queryClient.invalidateQueries(
+                        {
+                            queryKey:
+                                soalQueryKey(
+                                    kategoriSoal,
+                                    modul
+                                ),
+                        }
                     );
-                    const existingCorrectIndex = existingCorrectIndexRaw >= 0 ? existingCorrectIndexRaw : 0;
 
-                    const hasQuestionChanged = existingItem.pertanyaan !== desiredQuestion;
-                    const hasOptionChanged = payloadOptions.some(
-                        (option, optionIndex) =>
-                            option.text !== (existingOptions[optionIndex]?.text ?? ""),
+                    if (
+                        typeof onModalSuccess ===
+                        "function"
+                    ) {
+                        onModalSuccess();
+                    }
+                },
+
+            onError:
+                (
+                    error
+                ) => {
+                    console.error(
+                        "Error posting soal PG:",
+                        error
+                    );
+
+                    toast.error(
+                        error
+                            ?.response
+                            ?.data
+                            ?.message ??
+                            error
+                                ?.message ??
+                            "Gagal menambahkan soal."
                     );
-                    const hasCorrectChanged =
-                        finalCorrectIndex !== (existingCorrectIndex >= 0 ? existingCorrectIndex : 0);
+                },
+        });
+
+
+    /*
+     * ============================================================
+     * UPDATE
+     * ============================================================
+     */
 
+    const putSoalMutation =
+        useMutation({
+            mutationFn:
+                async ({
+                    soalId,
+                    payload,
+                }) => {
                     if (
-                        hasQuestionChanged ||
-                        hasOptionChanged ||
-                        hasCorrectChanged ||
-                        existingItem.modul_id !== targetModulId
+                        !controller
                     ) {
-                        await send(controller.update(existingItem.id), {
-                            modul_id: targetModulId,
-                            pertanyaan: desiredQuestion,
-                            options: payloadOptions,
-                            correct_option: finalCorrectIndex,
-                        });
+                        throw new Error(
+                            `Kategori soal tidak didukung: ${kategoriSoal}`
+                        );
                     }
-                } else if (existingItem && !desiredQuestion) {
-                    await send(controller.destroy(existingItem.id));
-                } else if (!existingItem && desiredQuestion) {
-                    if (desiredOptions.length !== OPTION_COUNT) {
-                        throw new Error(`Soal ${i + 1} harus memiliki ${OPTION_COUNT} pilihan.`);
+
+                    const {
+                        data,
+                    } =
+                        await send(
+                            controller.update(
+                                soalId
+                            ),
+                            payload
+                        );
+
+                    return data;
+                },
+
+            onSuccess:
+                (
+                    _,
+                    variables
+                ) => {
+                    const previousKey =
+                        variables?.previousModulKey ??
+                        modul;
+
+                    const nextKey =
+                        variables?.nextModulKey ??
+                        previousKey;
+
+                    if (
+                        previousKey
+                    ) {
+                        queryClient.invalidateQueries(
+                            {
+                                queryKey:
+                                    soalQueryKey(
+                                        kategoriSoal,
+                                        previousKey
+                                    ),
+                            }
+                        );
                     }
 
-                    if (desiredOptions.some((option) => option.text.length === 0)) {
-                        throw new Error(`Semua pilihan pada Soal ${i + 1} harus diisi.`);
+                    if (
+                        nextKey &&
+                        nextKey !==
+                            previousKey
+                    ) {
+                        queryClient.invalidateQueries(
+                            {
+                                queryKey:
+                                    soalQueryKey(
+                                        kategoriSoal,
+                                        nextKey
+                                    ),
+                            }
+                        );
                     }
+                },
+
+            onError:
+                (
+                    error
+                ) => {
+                    console.error(
+                        "Error updating soal PG:",
+                        error
+                    );
 
-                    const correctIndex = desiredOptions.findIndex((option) => option.isCorrect);
-                    const finalCorrectIndex = correctIndex >= 0 ? correctIndex : 0;
+                    toast.error(
+                        error
+                            ?.response
+                            ?.data
+                            ?.message ??
+                            error
+                                ?.message ??
+                            "Gagal memperbarui soal."
+                    );
+                },
+        });
 
-                    await send(controller.store(targetModulId), {
-                        pertanyaan: desiredQuestion,
-                        options: desiredOptions.map((option) => ({ text: option.text })),
-                        correct_option: finalCorrectIndex,
-                    });
-                }
+
+    /*
+     * ============================================================
+     * DELETE
+     * ============================================================
+     */
+
+    const deleteSoalMutation =
+        useMutation({
+            mutationFn:
+                async (
+                    soalId
+                ) => {
+                    if (
+                        !controller
+                    ) {
+                        throw new Error(
+                            `Kategori soal tidak didukung: ${kategoriSoal}`
+                        );
+                    }
+
+                    await send(
+                        controller.destroy(
+                            soalId
+                        )
+                    );
+                },
+
+            onSuccess:
+                () => {
+                    queryClient.invalidateQueries(
+                        {
+                            queryKey:
+                                soalQueryKey(
+                                    kategoriSoal,
+                                    modul
+                                ),
+                        }
+                    );
+
+                    setDeleteCandidate(
+                        null
+                    );
+
+                    toast.success(
+                        "Soal berhasil dihapus!"
+                    );
+                },
+
+            onError:
+                (
+                    error
+                ) => {
+                    toast.error(
+                        error
+                            ?.response
+                            ?.data
+                            ?.message ??
+                            "Gagal menghapus soal."
+                    );
+                },
+        });
+
+
+    /*
+     * ============================================================
+     * ADD HANDLERS
+     * ============================================================
+     */
+
+    const handleOpenTambah =
+        () => {
+            setEditingSoal(
+                null
+            );
+
+            setIsAddingSoal(
+                true
+            );
+        };
+
+
+    const handleCancelTambah =
+        () => {
+            if (
+                postSoalMutation.isPending
+            ) {
+                return;
             }
-        },
-        onSuccess: (_, variables) => {
-            const targetModulId = String(variables?.modulId ?? modul ?? "");
-            const currentModulId = String(modul ?? "");
 
-            if (currentModulId) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, currentModulId) });
+            setIsAddingSoal(
+                false
+            );
+
+            setFormState({
+                pertanyaan:
+                    "",
+
+                options:
+                    [
+                        ...EMPTY_OPTIONS,
+                    ],
+
+                correctIndex:
+                    0,
+            });
+        };
+
+
+    const handleOptionChange = (
+        index,
+        value
+    ) => {
+        setFormState(
+            (
+                previous
+            ) => {
+                const updated =
+                    [
+                        ...previous.options,
+                    ];
+
+                updated[
+                    index
+                ] =
+                    value;
+
+                return {
+                    ...previous,
+                    options:
+                        updated,
+                };
+            }
+        );
+    };
+
+
+    const handleTambahSoal =
+        () => {
+            if (!modul) {
+                onModalValidation?.(
+                    {
+                        message:
+                            "Pilih modul terlebih dahulu.",
+
+                        includeModuleNotice:
+                            false,
+                    }
+                );
+
+                return;
             }
 
-            if (targetModulId && targetModulId !== currentModulId) {
-                queryClient.invalidateQueries({ queryKey: soalQueryKey(kategoriSoal, targetModulId) });
+            const validationError =
+                validatePGForm(
+                    formState
+                );
+
+            if (
+                validationError
+            ) {
+                onModalValidation?.(
+                    {
+                        message:
+                            validationError,
+                    }
+                );
+
+                return;
             }
 
-            toast.success("Soal berhasil diperbarui.");
-        },
-        onError: (error) => {
-            console.error("Error batch updating soal PG:", error);
-            toast.error(
-                error?.response?.data?.message ??
-                error?.message ??
-                "Gagal memperbarui soal.",
+            postSoalMutation.mutate(
+                {
+                    pertanyaan:
+                        formState.pertanyaan.trim(),
+
+                    options:
+                        formState.options.map(
+                            (
+                                option
+                            ) => ({
+                                text:
+                                    option.trim(),
+                            })
+                        ),
+
+                    correct_option:
+                        formState.correctIndex,
+                },
+                {
+                    onSuccess:
+                        () => {
+                            setFormState(
+                                {
+                                    pertanyaan:
+                                        "",
+
+                                    options:
+                                        [
+                                            ...EMPTY_OPTIONS,
+                                        ],
+
+                                    correctIndex:
+                                        0,
+                                }
+                            );
+
+                            setIsAddingSoal(
+                                false
+                            );
+
+                            toast.success(
+                                "Soal berhasil ditambahkan."
+                            );
+                        },
+                }
+            );
+        };
+
+
+    /*
+     * ============================================================
+     * INLINE EDIT
+     * ============================================================
+     */
+
+    const handleStartEdit = (
+        soalItem
+    ) => {
+        setIsAddingSoal(
+            false
+        );
+
+        const options =
+            normalizeOptionsForDisplay(
+                soalItem
+            );
+
+        const correctIndexRaw =
+            options.findIndex(
+                (
+                    option,
+                    optionIndex
+                ) =>
+                    isOptionCorrect(
+                        soalItem,
+                        option,
+                        optionIndex
+                    )
             );
-        },
-    });
 
-    const handleOptionChange = (index, value) => {
-        setFormState((prev) => {
-            const updated = [...prev.options];
-            updated[index] = value;
-            return { ...prev, options: updated };
+        setEditingSoal({
+            id:
+                soalItem.id,
+
+            modul_id:
+                soalItem?.modul_id ??
+                (modul
+                    ? Number(
+                          modul
+                      )
+                    : ""),
+
+            pertanyaan:
+                soalItem.pertanyaan ??
+                "",
+
+            options:
+                options.map(
+                    (
+                        option
+                    ) => ({
+                        id:
+                            option.id,
+
+                        text:
+                            option.text,
+                    })
+                ),
+
+            correctIndex:
+                correctIndexRaw >=
+                0
+                    ? correctIndexRaw
+                    : 0,
+
+            originalModulId:
+                soalItem?.modul_id ??
+                (modul
+                    ? Number(
+                          modul
+                      )
+                    : null),
         });
     };
 
-    const handleSetCorrect = (index) => {
-        setFormState((prev) => ({ ...prev, correctIndex: index }));
-    };
 
-    const handleTambahSoal = () => {
-        if (!modul) {
-            onModalValidation?.({ message: "Pilih modul terlebih dahulu.", includeModuleNotice: false });
-            return;
-        }
-
-        const { pertanyaan, options, correctIndex } = formState;
-
-        if (!pertanyaan.trim()) {
-            onModalValidation?.({ message: "Pertanyaan tidak boleh kosong." });
-            return;
-        }
-
-        if (options.some((option) => !option.trim())) {
-            onModalValidation?.({ message: "Semua pilihan jawaban harus diisi." });
-            return;
-        }
-
-        const uniqueOptions = new Set(options.map((option) => option.trim()));
-        if (uniqueOptions.size !== options.length) {
-            onModalValidation?.({ message: "Teks pilihan tidak boleh duplikat." });
-            return;
-        }
-
-        postSoalMutation.mutate({
-            pertanyaan: pertanyaan.trim(),
-            options: options.map((option) => ({ text: option.trim() })),
-            correct_option: correctIndex,
-        });
+    const handleCancelEdit =
+        () => {
+            if (
+                putSoalMutation.isPending
+            ) {
+                return;
+            }
 
-        setFormState({
-            pertanyaan: "",
-            options: [...EMPTY_OPTIONS],
-            correctIndex: 0,
-        });
+            setEditingSoal(
+                null
+            );
+        };
 
-    };
 
-    const handleOpenModalDelete = (soalItem) => {
-        setDeleteCandidate(soalItem);
-    };
+    const updateEditingQuestion = (
+        value
+    ) => {
+        setEditingSoal(
+            (
+                previous
+            ) => ({
+                ...previous,
 
-    const handleCancelDelete = () => {
-        if (!deleteSoalMutation.isPending) {
-            setDeleteCandidate(null);
-        }
+                pertanyaan:
+                    value,
+            })
+        );
     };
 
-    const handleConfirmDelete = () => {
-        if (!deleteCandidate?.id || deleteSoalMutation.isPending) {
-            return;
-        }
 
-        deleteSoalMutation.mutate(deleteCandidate.id);
-    };
+    const updateEditingOption = (
+        index,
+        value
+    ) => {
+        setEditingSoal(
+            (
+                previous
+            ) => {
+                if (
+                    !previous
+                ) {
+                    return previous;
+                }
 
-    const handleOpenModalEdit = (soalItem) => {
-        setEditingSoal(soalItem);
-        setIsModalOpenEdit(true);
-    };
+                const options =
+                    previous.options.map(
+                        (
+                            option,
+                            optionIndex
+                        ) =>
+                            optionIndex ===
+                            index
+                                ? {
+                                      ...option,
+
+                                      text:
+                                          value,
+                                  }
+                                : option
+                    );
 
-    const handleCloseModalEdit = () => {
-        setEditingSoal(null);
-        setIsModalOpenEdit(false);
+                return {
+                    ...previous,
+                    options,
+                };
+            }
+        );
     };
 
-    const handleConfirmEdit = (updatedSoal) => {
-        const previousModulKey =
-            editingSoal?.modul_id !== undefined && editingSoal?.modul_id !== null
-                ? String(editingSoal.modul_id)
-                : modul;
-        const parsedNextModulId =
-            updatedSoal.modul_id !== undefined && updatedSoal.modul_id !== null
-                ? Number(updatedSoal.modul_id)
-                : Number.NaN;
-        const nextModulId = Number.isNaN(parsedNextModulId)
-            ? editingSoal?.modul_id ?? (modul ? Number(modul) : undefined)
-            : parsedNextModulId;
-        const nextModulKey =
-            nextModulId !== undefined && nextModulId !== null
-                ? String(nextModulId)
-                : previousModulKey;
-
-        if (nextModulId === undefined || nextModulId === null) {
-            toast.error("Pilih modul untuk soal ini.");
-            return;
-        }
-
-        putSoalMutation.mutate({
-            soalId: updatedSoal.id,
-            payload: {
-                modul_id: nextModulId,
-                pertanyaan: updatedSoal.pertanyaan,
-                options: updatedSoal.options,
-                correct_option: updatedSoal.correct_option,
-            },
-            previousModulKey,
-            nextModulKey,
-        });
 
-        handleCloseModalEdit();
-    };
+    const handleConfirmEdit =
+        () => {
+            if (
+                !editingSoal ||
+                putSoalMutation.isPending
+            ) {
+                return;
+            }
 
-    const batchContent = useMemo(() => {
-        if (!Array.isArray(soalList) || soalList.length === 0) {
-            return "Daftar Soal\n\n_Belum ada soal untuk ditampilkan._";
-        }
-
-        return soalList
-            .map((soalItem, index) => {
-                const options = normalizeOptionsForDisplay(soalItem);
-                const optionsMarkdown = options
-                    .map((option, optionIndex) => {
-                        const isCorrect = isOptionCorrect(soalItem, option, optionIndex);
-                        const indicator = isCorrect ? "[x]" : "[ ]";
-                        const text = option.text?.trim() || "_(kosong)_";
-                        return `- ${indicator} ${text}`;
-                    })
-                    .join("\n");
+            const validationError =
+                validatePGForm({
+                    pertanyaan:
+                        editingSoal.pertanyaan,
 
-                const pertanyaan = soalItem.pertanyaan?.trim() ?? "_(kosong)_";
+                    options:
+                        editingSoal.options,
+                });
 
-                return `Soal ${index + 1}\n\nPertanyaan:\n${pertanyaan}\n\nPilihan:\n${optionsMarkdown}`;
-            })
-            .join("\n\n");
-    }, [soalList]);
-
-    const handleBatchSubmit = async ({ items, modulId }) => {
-        const normalizedItems = Array.isArray(items)
-            ? items.map((item) => ({
-                pertanyaan: (item?.pertanyaan ?? "").trim(),
-                options: (item?.options ?? []).map((option) => ({
-                    text: (option?.text ?? "").trim(),
-                    isCorrect: Boolean(option?.isCorrect),
-                })),
-            }))
-            : [];
-
-        const targetModulId = modulId ?? modul;
-        await batchUpdateMutation.mutateAsync({ items: normalizedItems, modulId: targetModulId });
-
-        if (targetModulId && onChangeModul && String(targetModulId) !== String(modul ?? "")) {
-            onChangeModul(String(targetModulId));
-        }
-    };
+            if (
+                validationError
+            ) {
+                toast.error(
+                    validationError
+                );
 
-    const handleOpenCompareModal = () => {
-        const hasModules = regularModules.length > 0 || englishModules.length > 0;
-        if (!hasModules) {
-            toast.error("Belum ada modul untuk dibandingkan.");
-            return;
-        }
-
-        const currentModuleId = modul ? String(modul) : "";
-        const currentModule = modules.find((moduleItem) => getModuleId(moduleItem) === currentModuleId);
-        const isCurrentEnglish = Number(currentModule?.isEnglish ?? 0) === 1;
-        const firstRegularId = getModuleId(regularModules[0]);
-        const firstEnglishId = getModuleId(englishModules[0]);
-
-        setCompareState((previous) => ({
-            isOpen: true,
-            regularModuleId:
-                previous.regularModuleId
-                || (!isCurrentEnglish && currentModuleId ? currentModuleId : firstRegularId || ""),
-            englishModuleId:
-                previous.englishModuleId
-                || (isCurrentEnglish && currentModuleId ? currentModuleId : firstEnglishId || ""),
-        }));
-    };
+                return;
+            }
 
-    const handleCloseCompareModal = () => {
-        setCompareState((previous) => ({
-            ...previous,
-            isOpen: false,
-        }));
-    };
+            const nextModulId =
+                Number(
+                    editingSoal.modul_id
+                );
+
+            if (
+                !nextModulId ||
+                Number.isNaN(
+                    nextModulId
+                )
+            ) {
+                toast.error(
+                    "Pilih modul untuk soal ini."
+                );
+
+                return;
+            }
 
-    const handleSelectCompareRegular = (value) => {
-        setCompareState((previous) => ({
-            ...previous,
-            regularModuleId: value,
-        }));
-    };
+            const previousModulKey =
+                editingSoal.originalModulId !==
+                    undefined &&
+                editingSoal.originalModulId !==
+                    null
+                    ? String(
+                          editingSoal.originalModulId
+                      )
+                    : String(
+                          modul ??
+                              ""
+                      );
+
+            const nextModulKey =
+                String(
+                    nextModulId
+                );
+
+            putSoalMutation.mutate(
+                {
+                    soalId:
+                        editingSoal.id,
+
+                    payload:
+                        {
+                            modul_id:
+                                nextModulId,
+
+                            pertanyaan:
+                                editingSoal.pertanyaan.trim(),
+
+                            options:
+                                editingSoal.options.map(
+                                    (
+                                        option
+                                    ) => ({
+                                        id:
+                                            option.id ??
+                                            null,
+
+                                        text:
+                                            option.text.trim(),
+                                    })
+                                ),
+
+                            correct_option:
+                                editingSoal.correctIndex,
+                        },
+
+                    previousModulKey,
+
+                    nextModulKey,
+                },
+                {
+                    onSuccess:
+                        () => {
+                            setEditingSoal(
+                                null
+                            );
+
+                            toast.success(
+                                "Soal berhasil diperbarui."
+                            );
+                        },
+                }
+            );
+        };
+
+
+    /*
+     * ============================================================
+     * DELETE HANDLERS
+     * ============================================================
+     */
+
+    const handleCancelDelete =
+        () => {
+            if (
+                !deleteSoalMutation.isPending
+            ) {
+                setDeleteCandidate(
+                    null
+                );
+            }
+        };
 
-    const handleSelectCompareEnglish = (value) => {
-        setCompareState((previous) => ({
-            ...previous,
-            englishModuleId: value,
-        }));
-    };
 
-    const handleExportJson = () => {
-        if (!Array.isArray(soalList) || soalList.length === 0) {
-            toast.error("Belum ada soal untuk diekspor.");
-            return;
-        }
-
-        try {
-            const moduleLabel = modules.find((moduleItem) => getModuleId(moduleItem) === String(modul))?.judul;
-            const payload = {
-                kategori: kategoriSoal,
-                modul_id: modul ?? null,
-                modul_label: moduleLabel ?? null,
-                exported_at: new Date().toISOString(),
-                soal: soalList,
-            };
-
-            const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
-            const url = URL.createObjectURL(blob);
-            const anchor = document.createElement("a");
-            anchor.href = url;
-            const safeCategory = kategoriSoal ?? "soal";
-            const moduleSuffix = modul ? `-modul-${modul}` : "";
-            anchor.download = `soal-${safeCategory}${moduleSuffix}.json`;
-            document.body.appendChild(anchor);
-            anchor.click();
-            document.body.removeChild(anchor);
-            URL.revokeObjectURL(url);
-            toast.success("Soal berhasil diekspor.");
-        } catch (error) {
-            console.error("Error exporting soal:", error);
-            toast.error("Gagal mengekspor data soal.");
-        }
-    };
+    const handleConfirmDelete =
+        () => {
+            if (
+                !deleteCandidate?.id ||
+                deleteSoalMutation.isPending
+            ) {
+                return;
+            }
 
-    const handleOpenAnalyzeModal = () => {
-        if (!String(modul)) {
-            toast.error("Pilih modul terlebih dahulu sebelum menganalisis.");
-            return;
-        }
+            deleteSoalMutation.mutate(
+                deleteCandidate.id
+            );
+        };
+
+
+    /*
+     * ============================================================
+     * PG BATCH SYNC
+     * ============================================================
+     */
+
+    const syncBatchModule =
+        async ({
+            modulId,
+            items,
+        }) => {
+            if (
+                !controller
+            ) {
+                throw new Error(
+                    `Kategori soal tidak didukung: ${kategoriSoal}`
+                );
+            }
 
-        setAnalyzeModuleId(String(modul));
-        setIsAnalyzeModalOpen(true);
-    };
+            const targetModulId =
+                Number(
+                    modulId
+                );
+
+            if (
+                !targetModulId ||
+                Number.isNaN(
+                    targetModulId
+                )
+            ) {
+                throw new Error(
+                    "Modul belum dipilih."
+                );
+            }
 
-    const handleCloseAnalyzeModal = () => {
-        setIsAnalyzeModalOpen(false);
-    };
+            for (
+                const item of
+                items ?? []
+            ) {
+                const deleted =
+                    Boolean(
+                        item?._deleted
+                    );
+
+                const questionId =
+                    item?.id ??
+                    null;
+
+                const validationError =
+                    deleted
+                        ? null
+                        : validatePGForm(
+                              {
+                                  pertanyaan:
+                                      item?.pertanyaan,
+
+                                  options:
+                                      item?.options ??
+                                      [],
+                              }
+                          );
+
+                if (
+                    validationError
+                ) {
+                    throw new Error(
+                        validationError
+                    );
+                }
+
+
+                /*
+                 * Existing.
+                 */
+                if (
+                    questionId
+                ) {
+                    if (
+                        deleted
+                    ) {
+                        await send(
+                            controller.destroy(
+                                questionId
+                            )
+                        );
+
+                        continue;
+                    }
+
+                    const questionChanged =
+                        item.pertanyaan.trim() !==
+                        String(
+                            item.originalPertanyaan ??
+                                ""
+                        ).trim();
+
+
+                    const optionsChanged =
+                        item.options.some(
+                            (
+                                option,
+                                index
+                            ) =>
+                                option.text.trim() !==
+                                String(
+                                    item
+                                        .originalOptions?.[
+                                        index
+                                    ]
+                                        ?.text ??
+                                        ""
+                                ).trim()
+                        );
+
+
+                    const correctChanged =
+                        item.correctIndex !==
+                        item.originalCorrectIndex;
+
+
+                    if (
+                        !questionChanged &&
+                        !optionsChanged &&
+                        !correctChanged
+                    ) {
+                        continue;
+                    }
+
+
+                    await send(
+                        controller.update(
+                            questionId
+                        ),
+                        {
+                            modul_id:
+                                targetModulId,
+
+                            pertanyaan:
+                                item.pertanyaan.trim(),
+
+                            options:
+                                item.options.map(
+                                    (
+                                        option
+                                    ) => ({
+                                        id:
+                                            option.id ??
+                                            null,
+
+                                        text:
+                                            option.text.trim(),
+                                    })
+                                ),
+
+                            correct_option:
+                                item.correctIndex,
+                        }
+                    );
+
+                    continue;
+                }
+
+
+                /*
+                 * New.
+                 */
+                if (
+                    !deleted
+                ) {
+                    await send(
+                        controller.store(
+                            targetModulId
+                        ),
+                        {
+                            pertanyaan:
+                                item.pertanyaan.trim(),
+
+                            options:
+                                item.options.map(
+                                    (
+                                        option
+                                    ) => ({
+                                        text:
+                                            option.text.trim(),
+                                    })
+                                ),
+
+                            correct_option:
+                                item.correctIndex,
+                        }
+                    );
+                }
+            }
+        };
+
+
+    const batchUpdateMutation =
+        useMutation({
+            mutationFn:
+                async ({
+                    regular,
+                    english,
+                }) => {
+                    await syncBatchModule(
+                        regular
+                    );
+
+                    await syncBatchModule(
+                        english
+                    );
+                },
+
+            onSuccess:
+                (
+                    _,
+                    variables
+                ) => {
+                    const moduleIds =
+                        [
+                            variables?.regular?.modulId,
+                            variables?.english?.modulId,
+                            modul,
+                        ]
+                            .filter(
+                                Boolean
+                            )
+                            .map(
+                                String
+                            );
+
+                    [
+                        ...new Set(
+                            moduleIds
+                        ),
+                    ].forEach(
+                        (
+                            moduleId
+                        ) => {
+                            queryClient.invalidateQueries(
+                                {
+                                    queryKey:
+                                        soalQueryKey(
+                                            kategoriSoal,
+                                            moduleId
+                                        ),
+                                }
+                            );
+                        }
+                    );
+
+                    toast.success(
+                        "Soal PG modul ID dan EN berhasil diperbarui."
+                    );
+                },
+
+            onError:
+                (
+                    error
+                ) => {
+                    console.error(
+                        "Error batch updating soal PG:",
+                        error
+                    );
+
+                    toast.error(
+                        error
+                            ?.response
+                            ?.data
+                            ?.message ??
+                            error
+                                ?.message ??
+                            "Gagal memperbarui soal."
+                    );
+                },
+        });
+
+
+    /*
+     * ============================================================
+     * BATCH MODAL HANDLERS
+     * ============================================================
+     */
+
+    const handleOpenBatchModal =
+        () => {
+            if (
+                regularModules.length ===
+                    0 ||
+                englishModules.length ===
+                    0
+            ) {
+                toast.error(
+                    "Modul Indonesia dan English harus tersedia untuk Batch Edit."
+                );
+
+                return;
+            }
+
+            const currentModuleId =
+                modul
+                    ? String(
+                          modul
+                      )
+                    : "";
+
+            const currentModule =
+                modules.find(
+                    (
+                        moduleItem
+                    ) =>
+                        getModuleId(
+                            moduleItem
+                        ) ===
+                        currentModuleId
+                );
+
+            const isEnglish =
+                Number(
+                    currentModule?.isEnglish ??
+                        0
+                ) ===
+                1;
+
+            const firstRegularId =
+                getModuleId(
+                    regularModules[
+                        0
+                    ]
+                );
+
+            const firstEnglishId =
+                getModuleId(
+                    englishModules[
+                        0
+                    ]
+                );
+
+
+            setBatchState(
+                (
+                    previous
+                ) => ({
+                    regularModuleId:
+                        !isEnglish &&
+                        currentModuleId
+                            ? currentModuleId
+                            : previous.regularModuleId ||
+                              firstRegularId,
+
+                    englishModuleId:
+                        isEnglish &&
+                        currentModuleId
+                            ? currentModuleId
+                            : previous.englishModuleId ||
+                              firstEnglishId,
+                })
+            );
+
+            setIsBatchModalOpen(
+                true
+            );
+        };
+
+
+    const handleBatchSubmit =
+        async (
+            payload
+        ) => {
+            await batchUpdateMutation.mutateAsync(
+                payload
+            );
+
+            setIsBatchModalOpen(
+                false
+            );
+        };
+
+
+    /*
+     * ============================================================
+     * ANALYZE
+     * ============================================================
+     */
+
+    const handleOpenAnalyzeModal =
+        () => {
+            if (
+                !String(
+                    modul
+                )
+            ) {
+                toast.error(
+                    "Pilih modul terlebih dahulu sebelum menganalisis."
+                );
+
+                return;
+            }
+
+            setAnalyzeModuleId(
+                String(
+                    modul
+                )
+            );
+
+            setIsAnalyzeModalOpen(
+                true
+            );
+        };
+
+
+    /*
+     * ============================================================
+     * ID / EN DATA
+     * ============================================================
+     */
 
     const {
-        data: comparisonData,
-        isLoading: isComparisonLoading,
-        isFetching: isComparisonFetching,
-        refetch: refetchComparison,
-    } = useSoalComparison(
-        kategoriSoal,
-        compareState.isOpen ? compareState.regularModuleId : null,
-        compareState.isOpen ? compareState.englishModuleId : null,
-        {
-            enabled:
-                compareState.isOpen
-                && Boolean(
-                    kategoriSoal
-                    && (compareState.regularModuleId || compareState.englishModuleId),
-                ),
-            keepPreviousData: true,
-        },
-    );
+        data:
+            batchComparisonData,
+
+        isLoading:
+            isBatchComparisonLoading,
+
+        isFetching:
+            isBatchComparisonFetching,
+    } =
+        useSoalComparison(
+            kategoriSoal,
+
+            isBatchModalOpen
+                ? batchState.regularModuleId
+                : null,
+
+            isBatchModalOpen
+                ? batchState.englishModuleId
+                : null,
+
+            {
+                enabled:
+                    isBatchModalOpen &&
+                    Boolean(
+                        kategoriSoal &&
+                            batchState.regularModuleId &&
+                            batchState.englishModuleId
+                    ),
+
+                keepPreviousData:
+                    false,
+            }
+        );
+
+
+    /*
+     * ============================================================
+     * RENDER
+     * ============================================================
+     */
 
     return (
         <div className="space-y-6 text-depth-primary">
-            {isEditable && (
-                <div className="space-y-2">
-                    <label className="block text-xs font-semibold uppercase tracking-wide text-depth-secondary">
-                        Soal
-                    </label>
-                    <textarea
-                        className="w-full rounded-depth-lg border border-depth bg-depth-card p-4 text-sm text-depth-primary shadow-depth-sm transition duration-200 placeholder:text-depth-secondary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--depth-color-card)]"
-                        rows={4}
-                        placeholder="Masukkan soal..."
-                        value={formState.pertanyaan}
-                        onChange={(e) =>
-                            setFormState((prev) => ({ ...prev, pertanyaan: e.target.value }))
-                        }
-                    />
-                </div>
-            )}
-
-            {isEditable && (
-                <div className="space-y-3">
-                    <label className="block text-xs font-semibold uppercase tracking-wide text-depth-secondary">
-                        Pilihan Jawaban
-                    </label>
-                    <div className="space-y-3">
-                        {formState.options.map((option, index) => (
-                            <div
-                                key={index}
-                                className="flex items-center gap-3 rounded-depth-lg border border-depth bg-depth-card p-3 shadow-depth-sm transition-colors duration-200"
-                            >
-                                <input
-                                    type="radio"
-                                    name="correctOption"
-                                    checked={formState.correctIndex === index}
-                                    onChange={() => handleSetCorrect(index)}
-                                    className="h-4 w-4 accent-[var(--depth-color-primary)]"
-                                />
-                                <input
-                                    type="text"
-                                    className="flex-1 rounded-depth-md border border-transparent bg-depth-interactive p-3 text-sm text-depth-primary shadow-depth-inset transition duration-200 placeholder:text-depth-secondary focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
-                                    placeholder={`Pilihan ${String.fromCharCode(65 + index)}`}
-                                    value={option}
-                                    onChange={(e) => handleOptionChange(index, e.target.value)}
-                                />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            )}
+            {/* ====================================================
+             * TOOLBAR
+             * ==================================================== */}
 
             {isEditable && (
                 <div className="flex flex-wrap justify-end gap-3">
                     {isAnalysisSupported && (
                         <button
-                            className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                            onClick={handleOpenAnalyzeModal}
                             type="button"
-                            disabled={!String(modul)}
+                            onClick={
+                                handleOpenAnalyzeModal
+                            }
+                            disabled={
+                                !String(
+                                    modul
+                                )
+                            }
+                            className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
                         >
                             Analyze
                         </button>
                     )}
+
+
                     <button
-                        className="rounded-depth-md border border-depth bg-depth-card px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                        onClick={handleOpenCompareModal}
                         type="button"
-                        disabled={regularModules.length === 0 && englishModules.length === 0}
-                    >
-                        Compare
-                    </button>
-                    {/* <button
+                        onClick={
+                            handleOpenBatchModal
+                        }
+                        disabled={
+                            regularModules.length ===
+                                0 ||
+                            englishModules.length ===
+                                0
+                        }
                         className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
-                        onClick={handleExportJson}
-                        type="button"
-                        disabled={!Array.isArray(soalList) || soalList.length === 0}
-                    >
-                        Export JSON
-                    </button> */}
-                    <button
-                        className="rounded-depth-md border border-depth bg-depth-interactive px-6 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
-                        onClick={() => setIsBatchModalOpen(true)}
-                        disabled={soalQuery.isLoading || soalList.length === 0}
                     >
-                        Batch Edit
+                        Batch Edit ID / EN
                     </button>
+
+
                     <button
-                        className="rounded-depth-md bg-[var(--depth-color-primary)] px-6 py-2 text-sm font-semibold text-white shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--depth-color-card)] disabled:opacity-70"
-                        onClick={handleTambahSoal}
-                        disabled={postSoalMutation.isPending}
+                        type="button"
+                        onClick={
+                            handleOpenTambah
+                        }
+                        disabled={
+                            isAddingSoal ||
+                            postSoalMutation.isPending
+                        }
+                        className="rounded-depth-md bg-[var(--depth-color-primary)] px-6 py-2 text-sm font-semibold text-white shadow-depth-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
                     >
-                        {postSoalMutation.isPending ? "Menyimpan..." : "+ Tambah Soal"}
+                        {isAddingSoal
+                            ? "Menambah Soal..."
+                            : "+ Tambah Soal"}
                     </button>
                 </div>
             )}
 
+
+            {/* ====================================================
+             * ADD QUESTION
+             * ==================================================== */}
+
+            {isEditable &&
+                isAddingSoal && (
+                    <section className="overflow-hidden rounded-depth-lg border border-[var(--depth-color-primary)] bg-depth-card shadow-depth-md">
+                        <div className="border-b border-depth bg-depth-interactive px-5 py-4">
+                            <div className="flex items-center gap-2">
+                                <h3 className="text-base font-semibold text-depth-primary">
+                                    Tambah Soal PG
+                                </h3>
+
+                                <span className="rounded-depth-full bg-[var(--depth-color-primary)]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--depth-color-primary)]">
+                                    New
+                                </span>
+                            </div>
+
+                            <p className="mt-1 text-xs text-depth-secondary">
+                                Pertanyaan dan seluruh pilihan mendukung Markdown.
+                            </p>
+                        </div>
+
+                        <div className="p-5">
+                            <SoalPGEditor
+                                pertanyaan={
+                                    formState.pertanyaan
+                                }
+                                options={
+                                    formState.options
+                                }
+                                correctIndex={
+                                    formState.correctIndex
+                                }
+                                onQuestionChange={(
+                                    value
+                                ) =>
+                                    setFormState(
+                                        (
+                                            previous
+                                        ) => ({
+                                            ...previous,
+
+                                            pertanyaan:
+                                                value,
+                                        })
+                                    )
+                                }
+                                onOptionChange={
+                                    handleOptionChange
+                                }
+                                onCorrectChange={(
+                                    index
+                                ) =>
+                                    setFormState(
+                                        (
+                                            previous
+                                        ) => ({
+                                            ...previous,
+
+                                            correctIndex:
+                                                index,
+                                        })
+                                    )
+                                }
+                                onSave={
+                                    handleTambahSoal
+                                }
+                                onCancel={
+                                    handleCancelTambah
+                                }
+                                saveLabel="Tambah Soal"
+                                isSaving={
+                                    postSoalMutation.isPending
+                                }
+                            />
+                        </div>
+                    </section>
+                )}
+
+
+            {/* ====================================================
+             * QUESTION LIST
+             * ==================================================== */}
+
             <div className="space-y-4">
-                <h3 className="text-base font-semibold text-depth-secondary">
-                    Soal yang telah ditambahkan:
-                </h3>
+                <div className="flex items-center justify-between">
+                    <h3 className="text-base font-semibold text-depth-secondary">
+                        Soal yang telah ditambahkan:
+                    </h3>
+
+                    {!soalQuery.isLoading &&
+                        !soalQuery.isError && (
+                            <span className="text-xs text-depth-secondary">
+                                {soalList.length} soal
+                            </span>
+                        )}
+                </div>
+
+
                 {soalQuery.isLoading && (
-                    <p className="text-sm text-depth-secondary">Memuat soal...</p>
+                    <p className="text-sm text-depth-secondary">
+                        Memuat soal...
+                    </p>
                 )}
+
+
                 {soalQuery.isError && (
                     <p className="text-sm text-red-500">
-                        {soalQuery.error?.message ?? "Gagal memuat soal"}
+                        {soalQuery.error
+                            ?.message ??
+                            "Gagal memuat soal"}
                     </p>
                 )}
-                {!soalQuery.isLoading && !soalQuery.isError && (
-                    <ul className="space-y-4">
-                        {soalList.map((soalItem, index) => (
-                            <li
-                                key={soalItem.id ?? index}
-                                className="relative rounded-depth-lg border border-depth bg-depth-card p-5 shadow-depth-md transition duration-200 hover:shadow-depth-lg"
-                            >
-                                <div className="mb-4 space-y-2">
-                                    <div className="text-sm font-semibold text-depth-secondary">
-                                        Soal {index + 1}
-                                    </div>
-                                    <div className="whitespace-pre-wrap break-words rounded-depth-md bg-depth-interactive p-3 text-sm text-depth-primary shadow-depth-inset max-h-[60vh] overflow-y-auto min-w-0">
-                                        <MarkdownRenderer content={soalItem.pertanyaan} />
-                                    </div>
-                                </div>
-
-                                <div className="space-y-2">
-                                    <div className="text-xs font-semibold uppercase tracking-wide text-depth-secondary">
-                                        Pilihan
-                                    </div>
-                                    <ul className="space-y-2">
-                                        {normalizeOptionsForDisplay(soalItem).map((option, optionIndex) => {
-                                            const isCorrect = isOptionCorrect(soalItem, option, optionIndex);
-
-                                            return (
-                                                <li
-                                                    key={option.id ?? `${option.text}-${optionIndex}`}
-                                                    className={`flex items-center gap-2 rounded-depth-md border border-transparent px-3 py-2 text-sm shadow-depth-sm transition duration-150 ${isCorrect
-                                                        ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white shadow-depth-md"
-                                                        : "bg-depth-interactive text-depth-primary"
-                                                        }`}
-                                                >
-                                                    <div className="flex-1 min-w-0">
-                                                        {option.text ? (
-                                                            <MarkdownRenderer content={option.text} />
-                                                        ) : (
-                                                            <span className="italic text-depth-secondary">
-                                                                Belum diisi
-                                                            </span>
+
+
+                {!soalQuery.isLoading &&
+                    !soalQuery.isError &&
+                    soalList.length ===
+                        0 && (
+                        <div className="rounded-depth-lg border border-dashed border-depth bg-depth-card p-8 text-center">
+                            <p className="text-sm text-depth-secondary">
+                                Belum ada soal.
+                            </p>
+
+                            {isEditable && (
+                                <button
+                                    type="button"
+                                    onClick={
+                                        handleOpenTambah
+                                    }
+                                    className="mt-3 text-sm font-semibold text-[var(--depth-color-primary)] hover:underline"
+                                >
+                                    + Tambah soal pertama
+                                </button>
+                            )}
+                        </div>
+                    )}
+
+
+                {!soalQuery.isLoading &&
+                    !soalQuery.isError &&
+                    soalList.length >
+                        0 && (
+                        <ul className="space-y-4">
+                            {soalList.map(
+                                (
+                                    soalItem,
+                                    index
+                                ) => {
+                                    const isEditing =
+                                        editingSoal?.id ===
+                                        soalItem.id;
+
+                                    return (
+                                        <li
+                                            id={`soal-${kategoriSoal}-${index}`}
+                                            key={soalItem.id ?? index}
+                                            className={`scroll-mt-24 relative overflow-hidden rounded-depth-lg border bg-depth-card shadow-depth-md transition duration-200 ${
+                                                isEditing
+                                                    ? "border-[var(--depth-color-primary)] ring-1 ring-[var(--depth-color-primary)]"
+                                                    : "border-depth hover:shadow-depth-lg"
+                                            }`}
+                                        >
+                                            {/* Header */}
+                                            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-depth bg-depth-interactive px-5 py-3">
+                                                <div className="flex items-center gap-2">
+                                                    <span className="text-sm font-semibold text-depth-secondary">
+                                                        Soal{" "}
+                                                        {index +
+                                                            1}
+                                                    </span>
+
+                                                    {isEditing && (
+                                                        <span className="rounded-depth-full bg-[var(--depth-color-primary)]/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--depth-color-primary)]">
+                                                            Editing
+                                                        </span>
+                                                    )}
+                                                </div>
+
+
+                                                {!isEditing && (
+                                                    <div className="flex gap-2">
+                                                        {isEditable && (
+                                                            <button
+                                                                type="button"
+                                                                onClick={() =>
+                                                                    setDeleteCandidate(
+                                                                        soalItem
+                                                                    )
+                                                                }
+                                                                className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive text-red-500 shadow-depth-sm transition hover:border-red-400 hover:shadow-depth-md"
+                                                                title="Hapus soal"
+                                                            >
+                                                                <img
+                                                                    className="h-4 w-4"
+                                                                    src={
+                                                                        trashIcon
+                                                                    }
+                                                                    alt=""
+                                                                />
+                                                            </button>
+                                                        )}
+
+
+                                                        <SoalCommentsButton
+                                                            kategoriSoal={
+                                                                kategoriSoal
+                                                            }
+                                                            modulId={
+                                                                soalItem?.modul_id ??
+                                                                (modul
+                                                                    ? Number(
+                                                                          modul
+                                                                      )
+                                                                    : null)
+                                                            }
+                                                            soalId={
+                                                                soalItem?.id
+                                                            }
+                                                            variant="icon"
+                                                        />
+
+
+                                                        {isEditable && (
+                                                            <button
+                                                                type="button"
+                                                                onClick={() =>
+                                                                    handleStartEdit(
+                                                                        soalItem
+                                                                    )
+                                                                }
+                                                                className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive shadow-depth-sm transition hover:border-blue-400 hover:shadow-depth-md"
+                                                                title="Edit soal"
+                                                            >
+                                                                <img
+                                                                    className="edit-icon-filter h-4 w-4"
+                                                                    src={
+                                                                        editIcon
+                                                                    }
+                                                                    alt=""
+                                                                />
+                                                            </button>
                                                         )}
                                                     </div>
-                                                </li>
-                                            );
-                                        })}
-                                    </ul>
-                                </div>
-
-                                <div className="absolute right-4 top-4 flex gap-2">
-                                    {isEditable && (
-                                        <button
-                                            onClick={() => handleOpenModalDelete(soalItem)}
-                                            className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive text-red-500 shadow-depth-sm transition duration-150 hover:border-red-400 hover:shadow-depth-md hover:-translate-y-0.5"
-                                            type="button"
-                                        >
-                                            <img className="h-4 w-4" src={trashIcon} alt="Delete" />
-                                        </button>
-                                    )}
-                                    <SoalCommentsButton
-                                        kategoriSoal={kategoriSoal}
-                                        modulId={soalItem?.modul_id ?? (modul ? Number(modul) : null)}
-                                        soalId={soalItem?.id}
-                                        variant="icon"
-                                    />
-                                    {isEditable && (
-                                        <button
-                                            onClick={() => handleOpenModalEdit(soalItem)}
-                                            className="flex h-9 w-9 items-center justify-center rounded-depth-md border border-depth bg-depth-interactive shadow-depth-sm transition duration-150 hover:border-blue-400 hover:shadow-depth-md hover:-translate-y-0.5"
-                                            type="button"
-                                        >
-                                            <img className="edit-icon-filter h-4 w-4" src={editIcon} alt="Edit" />
-                                        </button>
-                                    )}
-
-                                </div>
-                            </li>
-                        ))}
-                    </ul>
-                )}
+                                                )}
+                                            </div>
+
+
+                                            <div className="p-5">
+                                                {isEditing ? (
+                                                    <div className="space-y-5">
+                                                        {/* Module */}
+                                                        <div className="max-w-sm">
+                                                            <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                                                                Modul
+                                                            </label>
+
+                                                            <select
+                                                                value={
+                                                                    editingSoal.modul_id ??
+                                                                    ""
+                                                                }
+                                                                onChange={(
+                                                                    event
+                                                                ) =>
+                                                                    setEditingSoal(
+                                                                        (
+                                                                            previous
+                                                                        ) => ({
+                                                                            ...previous,
+
+                                                                            modul_id:
+                                                                                event
+                                                                                    .target
+                                                                                    .value,
+                                                                        })
+                                                                    )
+                                                                }
+                                                                disabled={
+                                                                    putSoalMutation.isPending
+                                                                }
+                                                                className="w-full rounded-depth-md border border-depth bg-depth-card px-3 py-2 text-sm text-depth-primary shadow-depth-sm focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
+                                                            >
+                                                                {modules.map(
+                                                                    (
+                                                                        moduleItem
+                                                                    ) => {
+                                                                        const moduleId =
+                                                                            getModuleId(
+                                                                                moduleItem
+                                                                            );
+
+                                                                        if (
+                                                                            !moduleId
+                                                                        ) {
+                                                                            return null;
+                                                                        }
+
+                                                                        return (
+                                                                            <option
+                                                                                key={
+                                                                                    moduleId
+                                                                                }
+                                                                                value={
+                                                                                    moduleId
+                                                                                }
+                                                                            >
+                                                                                {moduleItem?.judul ??
+                                                                                    moduleItem?.nama ??
+                                                                                    `Modul ${moduleId}`}
+                                                                            </option>
+                                                                        );
+                                                                    }
+                                                                )}
+                                                            </select>
+                                                        </div>
+
+
+                                                        <SoalPGEditor
+                                                            pertanyaan={
+                                                                editingSoal.pertanyaan
+                                                            }
+                                                            options={
+                                                                editingSoal.options
+                                                            }
+                                                            correctIndex={
+                                                                editingSoal.correctIndex
+                                                            }
+                                                            onQuestionChange={
+                                                                updateEditingQuestion
+                                                            }
+                                                            onOptionChange={
+                                                                updateEditingOption
+                                                            }
+                                                            onCorrectChange={(
+                                                                optionIndex
+                                                            ) =>
+                                                                setEditingSoal(
+                                                                    (
+                                                                        previous
+                                                                    ) => ({
+                                                                        ...previous,
+
+                                                                        correctIndex:
+                                                                            optionIndex,
+                                                                    })
+                                                                )
+                                                            }
+                                                            onSave={
+                                                                handleConfirmEdit
+                                                            }
+                                                            onCancel={
+                                                                handleCancelEdit
+                                                            }
+                                                            saveLabel="Simpan Perubahan"
+                                                            isSaving={
+                                                                putSoalMutation.isPending
+                                                            }
+                                                        />
+                                                    </div>
+                                                ) : (
+                                                    <div className="space-y-5">
+                                                        {/* Question */}
+                                                        <div className="space-y-2">
+                                                            <span className="text-xs font-semibold uppercase tracking-wide text-depth-secondary">
+                                                                Pertanyaan
+                                                            </span>
+
+                                                            <div className="min-w-0 max-h-[60vh] overflow-y-auto break-words rounded-depth-md bg-depth-interactive p-4 text-sm text-depth-primary shadow-depth-inset">
+                                                                <MarkdownRenderer
+                                                                    content={
+                                                                        soalItem.pertanyaan
+                                                                    }
+                                                                />
+                                                            </div>
+                                                        </div>
+
+
+                                                        {/* Options */}
+                                                        <div className="space-y-2">
+                                                            <span className="text-xs font-semibold uppercase tracking-wide text-depth-secondary">
+                                                                Pilihan Jawaban
+                                                            </span>
+
+                                                            <ul className="space-y-2">
+                                                                {normalizeOptionsForDisplay(
+                                                                    soalItem
+                                                                ).map(
+                                                                    (
+                                                                        option,
+                                                                        optionIndex
+                                                                    ) => {
+                                                                        const isCorrect =
+                                                                            isOptionCorrect(
+                                                                                soalItem,
+                                                                                option,
+                                                                                optionIndex
+                                                                            );
+
+                                                                        return (
+                                                                            <li
+                                                                                key={
+                                                                                    option.id ??
+                                                                                    optionIndex
+                                                                                }
+                                                                                className={`flex items-start gap-3 rounded-depth-md border px-3 py-3 text-sm shadow-depth-sm transition ${
+                                                                                    isCorrect
+                                                                                        ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white shadow-depth-md"
+                                                                                        : "border-depth bg-depth-interactive text-depth-primary"
+                                                                                }`}
+                                                                            >
+                                                                                <span
+                                                                                    className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-depth-md text-xs font-bold ${
+                                                                                        isCorrect
+                                                                                            ? "bg-white/20 text-white"
+                                                                                            : "border border-depth bg-depth-card text-depth-secondary"
+                                                                                    }`}
+                                                                                >
+                                                                                    {
+                                                                                        OPTION_LABELS[
+                                                                                            optionIndex
+                                                                                        ]
+                                                                                    }
+                                                                                </span>
+
+                                                                                <div className="min-w-0 flex-1">
+                                                                                    {option.text ? (
+                                                                                        <MarkdownRenderer
+                                                                                            content={
+                                                                                                option.text
+                                                                                            }
+                                                                                        />
+                                                                                    ) : (
+                                                                                        <span className="italic text-depth-secondary">
+                                                                                            Belum diisi
+                                                                                        </span>
+                                                                                    )}
+                                                                                </div>
+
+                                                                                {isCorrect && (
+                                                                                    <span className="shrink-0 rounded-depth-full bg-white/15 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-white">
+                                                                                        Benar
+                                                                                    </span>
+                                                                                )}
+                                                                            </li>
+                                                                        );
+                                                                    }
+                                                                )}
+                                                            </ul>
+                                                        </div>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </li>
+                                    );
+                                }
+                            )}
+                        </ul>
+                    )}
             </div>
-            {compareState.isOpen && (
-                <ModalCompareSoal
-                    kategoriSoal={kategoriSoal}
-                    regularModules={regularModules}
-                    englishModules={englishModules}
-                    selectedRegularModuleId={compareState.regularModuleId}
-                    selectedEnglishModuleId={compareState.englishModuleId}
-                    onSelectRegularModule={handleSelectCompareRegular}
-                    onSelectEnglishModule={handleSelectCompareEnglish}
-                    regularDataset={comparisonData?.regular ?? null}
-                    englishDataset={comparisonData?.english ?? null}
-                    isLoading={isComparisonLoading}
-                    isFetching={isComparisonFetching}
-                    onRefresh={refetchComparison}
-                    onClose={handleCloseCompareModal}
-                />
-            )}
+
+
+            {/* ====================================================
+             * ANALYZE
+             * ==================================================== */}
+
             {isAnalyzeModalOpen && (
                 <ModalAnalyzeSoalPG
-                    kategoriSoal={kategoriSoal}
-                    modules={modules}
-                    initialModuleId={analyzeModuleId}
-                    onClose={handleCloseAnalyzeModal}
-                />
-            )}
-            {isModalOpenEdit && (
-                <ModalEditSoalPG
-                    soalItem={editingSoal}
-                    onClose={handleCloseModalEdit}
-                    onConfirm={handleConfirmEdit}
+                    kategoriSoal={
+                        kategoriSoal
+                    }
+                    modules={
+                        modules
+                    }
+                    initialModuleId={
+                        analyzeModuleId
+                    }
+                    onClose={() =>
+                        setIsAnalyzeModalOpen(
+                            false
+                        )
+                    }
                 />
             )}
+
+
+            {/* ====================================================
+             * BATCH EDIT ID / EN
+             * ==================================================== */}
+
             {isBatchModalOpen && (
-                <ModalBatchEditSoal
-                    title="Batch Edit Soal Pilihan Ganda"
-                    initialValue={batchContent}
-                    variant="pg"
-                    moduleOptions={modules}
-                    initialModuleId={modul}
-                    onClose={() => setIsBatchModalOpen(false)}
-                    onSubmit={handleBatchSubmit}
+                <ModalBatchEditSoalPG
+                    regularModules={
+                        regularModules
+                    }
+                    englishModules={
+                        englishModules
+                    }
+                    selectedRegularModuleId={
+                        batchState.regularModuleId
+                    }
+                    selectedEnglishModuleId={
+                        batchState.englishModuleId
+                    }
+                    onSelectRegularModule={(
+                        value
+                    ) =>
+                        setBatchState(
+                            (
+                                previous
+                            ) => ({
+                                ...previous,
+
+                                regularModuleId:
+                                    value,
+                            })
+                        )
+                    }
+                    onSelectEnglishModule={(
+                        value
+                    ) =>
+                        setBatchState(
+                            (
+                                previous
+                            ) => ({
+                                ...previous,
+
+                                englishModuleId:
+                                    value,
+                            })
+                        )
+                    }
+                    regularDataset={
+                        batchComparisonData?.regular ??
+                        null
+                    }
+                    englishDataset={
+                        batchComparisonData?.english ??
+                        null
+                    }
+                    isLoading={
+                        isBatchComparisonLoading
+                    }
+                    isFetching={
+                        isBatchComparisonFetching
+                    }
+                    isSaving={
+                        batchUpdateMutation.isPending
+                    }
+                    onClose={() => {
+                        if (
+                            !batchUpdateMutation.isPending
+                        ) {
+                            setIsBatchModalOpen(
+                                false
+                            );
+                        }
+                    }}
+                    onSubmit={
+                        handleBatchSubmit
+                    }
                 />
             )}
+
+
+            {/* ====================================================
+             * DELETE CONFIRMATION
+             * ==================================================== */}
+
             {deleteCandidate && (
-                <ModalOverlay onClose={handleCancelDelete} className="depth-modal-overlay z-[70]">
+                <ModalOverlay
+                    onClose={
+                        handleCancelDelete
+                    }
+                    className="depth-modal-overlay z-[70]"
+                >
                     <div className="depth-modal-container max-w-sm space-y-4 text-center">
                         <div className="depth-modal-header justify-center">
-                            <h3 className="depth-modal-title text-center">Hapus Soal</h3>
-                            <ModalCloseButton onClick={handleCancelDelete} ariaLabel="Tutup konfirmasi hapus soal" />
+                            <h3 className="depth-modal-title text-center">
+                                Hapus Soal
+                            </h3>
+
+                            <ModalCloseButton
+                                onClick={
+                                    handleCancelDelete
+                                }
+                                ariaLabel="Tutup konfirmasi hapus soal"
+                            />
                         </div>
+
                         <p className="text-sm text-depth-secondary">
                             Apakah Anda yakin ingin menghapus soal{" "}
                             <span className="font-semibold text-depth-primary">
-                                {deleteCandidate?.pertanyaan?.slice(0, 40) ?? "ini"}
+                                {deleteCandidate?.pertanyaan?.slice(
+                                    0,
+                                    40
+                                ) ??
+                                    "ini"}
                             </span>
                             ?
                         </p>
+
                         <div className="flex justify-center gap-3">
                             <button
                                 type="button"
-                                onClick={handleCancelDelete}
-                                disabled={deleteSoalMutation.isPending}
-                                className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
+                                onClick={
+                                    handleCancelDelete
+                                }
+                                disabled={
+                                    deleteSoalMutation.isPending
+                                }
+                                className="rounded-depth-md border border-depth bg-depth-interactive px-5 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
                             >
                                 Batal
                             </button>
+
                             <button
                                 type="button"
-                                onClick={handleConfirmDelete}
-                                disabled={deleteSoalMutation.isPending}
-                                className="rounded-depth-md border border-red-500/60 bg-red-500/15 px-5 py-2 text-sm font-semibold text-red-400 shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-60"
+                                onClick={
+                                    handleConfirmDelete
+                                }
+                                disabled={
+                                    deleteSoalMutation.isPending
+                                }
+                                className="rounded-depth-md border border-red-500/60 bg-red-500/15 px-5 py-2 text-sm font-semibold text-red-400 shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:opacity-60"
                             >
-                                {deleteSoalMutation.isPending ? "Menghapus..." : "Hapus"}
+                                {deleteSoalMutation.isPending
+                                    ? "Menghapus..."
+                                    : "Hapus"}
                             </button>
                         </div>
                     </div>
diff --git a/resources/js/Components/Assistants/Soal/SoalMarkdownEditor.jsx b/resources/js/Components/Assistants/Soal/SoalMarkdownEditor.jsx
new file mode 100644
index 0000000..b37a01f
--- /dev/null
+++ b/resources/js/Components/Assistants/Soal/SoalMarkdownEditor.jsx
@@ -0,0 +1,137 @@
+import MarkdownRenderer from "../../MarkdownRenderer";
+import DepthToggleButton from "@/Components/Common/DepthToggleButton";
+
+export default function SoalMarkdownEditor({
+    value = "",
+    onChange,
+    onSave,
+    onCancel,
+    saveLabel = "Simpan",
+    cancelLabel = "Batal",
+    isSaving = false,
+
+    supportsFileUpload = false,
+    enableFileUpload = false,
+    onToggleFileUpload,
+
+    placeholder = "Tulis soal menggunakan Markdown...",
+}) {
+    const handleKeyDown = (event) => {
+        // Ctrl/Cmd + Enter = save
+        if (
+            (event.ctrlKey || event.metaKey) &&
+            event.key === "Enter"
+        ) {
+            event.preventDefault();
+
+            if (!isSaving) {
+                onSave?.();
+            }
+        }
+
+        // Escape = cancel
+        if (event.key === "Escape") {
+            event.preventDefault();
+
+            if (!isSaving) {
+                onCancel?.();
+            }
+        }
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                {/* Markdown source */}
+                <div className="min-w-0 space-y-2">
+                    <div className="flex items-center justify-between">
+                        <span className="text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                            Markdown
+                        </span>
+
+                        <span className="text-[10px] text-depth-secondary">
+                            Ctrl/⌘ + Enter untuk simpan
+                        </span>
+                    </div>
+
+                    <textarea
+                        value={value}
+                        onChange={(event) =>
+                            onChange?.(event.target.value)
+                        }
+                        onKeyDown={handleKeyDown}
+                        rows={12}
+                        autoFocus
+                        placeholder={placeholder}
+                        className="min-h-[18rem] w-full resize-y rounded-depth-lg border border-depth bg-depth-card p-4 font-mono text-sm leading-relaxed text-depth-primary shadow-depth-inset transition placeholder:text-depth-secondary focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
+                    />
+                </div>
+
+                {/* Live preview */}
+                <div className="min-w-0 space-y-2">
+                    <div className="flex items-center justify-between">
+                        <span className="text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                            Preview
+                        </span>
+
+                        <span className="inline-flex items-center gap-1 text-[10px] text-emerald-500">
+                            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                            Live
+                        </span>
+                    </div>
+
+                    <div className="min-h-[18rem] max-h-[34rem] overflow-auto rounded-depth-lg border border-depth bg-depth-interactive/40 p-4 shadow-depth-inset">
+                        {value.trim() ? (
+                            <MarkdownRenderer content={value} />
+                        ) : (
+                            <div className="flex min-h-[16rem] items-center justify-center text-center">
+                                <p className="text-sm italic text-depth-secondary">
+                                    Preview akan muncul di sini saat Anda mengetik.
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {supportsFileUpload && (
+                <div className="flex items-center justify-between rounded-depth-md border border-depth bg-depth-interactive/40 px-4 py-3">
+                    <div>
+                        <p className="text-sm font-semibold text-depth-primary">
+                            Izinkan unggah file
+                        </p>
+
+                        <p className="mt-0.5 text-xs text-depth-secondary">
+                            Praktikan dapat mengirim gambar sebagai jawaban.
+                        </p>
+                    </div>
+
+                    <DepthToggleButton
+                        isOn={enableFileUpload}
+                        onToggle={onToggleFileUpload}
+                    />
+                </div>
+            )}
+
+            <div className="flex justify-end gap-2 border-t border-depth pt-4">
+                <button
+                    type="button"
+                    onClick={onCancel}
+                    disabled={isSaving}
+                    className="rounded-depth-md border border-depth bg-depth-interactive px-4 py-2 text-sm font-semibold text-depth-primary transition hover:bg-depth-card disabled:opacity-50"
+                >
+                    {cancelLabel}
+                </button>
+
+                <button
+                    type="button"
+                    onClick={onSave}
+                    disabled={isSaving || !value.trim()}
+                    className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    {isSaving ? "Menyimpan..." : saveLabel}
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/Components/Assistants/Soal/SoalPGEditor.jsx b/resources/js/Components/Assistants/Soal/SoalPGEditor.jsx
new file mode 100644
index 0000000..b830544
--- /dev/null
+++ b/resources/js/Components/Assistants/Soal/SoalPGEditor.jsx
@@ -0,0 +1,318 @@
+import MarkdownRenderer from "../../MarkdownRenderer";
+
+const OPTION_LABELS = ["A", "B", "C", "D"];
+
+export default function SoalPGEditor({
+    pertanyaan = "",
+    options = [],
+    correctIndex = 0,
+
+    onQuestionChange,
+    onOptionChange,
+    onCorrectChange,
+
+    onSave,
+    onCancel,
+
+    saveLabel = "Simpan",
+    isSaving = false,
+}) {
+    const handleKeyDown = (event) => {
+        if (
+            (event.ctrlKey || event.metaKey) &&
+            event.key === "Enter"
+        ) {
+            event.preventDefault();
+
+            if (!isSaving) {
+                onSave?.();
+            }
+
+            return;
+        }
+
+        if (event.key === "Escape") {
+            event.preventDefault();
+
+            if (!isSaving) {
+                onCancel?.();
+            }
+        }
+    };
+
+
+    return (
+        <div className="space-y-6">
+            {/* ====================================================
+             * QUESTION
+             * ==================================================== */}
+
+            <div className="space-y-2">
+                <div className="flex items-center justify-between gap-3">
+                    <span className="text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                        Pertanyaan
+                    </span>
+
+                    <span className="text-[10px] text-depth-secondary">
+                        Ctrl/⌘ + Enter untuk simpan
+                    </span>
+                </div>
+
+
+                <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                    {/* Markdown */}
+                    <div className="space-y-2">
+                        <span className="text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                            Markdown
+                        </span>
+
+                        <textarea
+                            value={pertanyaan}
+                            onChange={(event) =>
+                                onQuestionChange?.(
+                                    event.target.value
+                                )
+                            }
+                            onKeyDown={handleKeyDown}
+                            spellCheck={false}
+                            rows={8}
+                            placeholder="Tulis pertanyaan menggunakan Markdown..."
+                            className="min-h-[180px] w-full resize-y rounded-depth-md border border-depth bg-depth-card p-3 font-mono text-sm leading-relaxed text-depth-primary shadow-depth-inset transition placeholder:text-depth-secondary focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] disabled:opacity-60"
+                            disabled={isSaving}
+                        />
+                    </div>
+
+
+                    {/* Preview */}
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between gap-2">
+                            <span className="text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                                Preview
+                            </span>
+
+                            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-emerald-500">
+                                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+
+                                Live
+                            </span>
+                        </div>
+
+                        <div className="min-h-[180px] max-h-[360px] overflow-auto rounded-depth-md border border-depth bg-depth-interactive p-3 shadow-depth-inset">
+                            {pertanyaan.trim() ? (
+                                <MarkdownRenderer
+                                    content={
+                                        pertanyaan
+                                    }
+                                />
+                            ) : (
+                                <div className="flex min-h-[150px] items-center justify-center text-center">
+                                    <p className="text-xs italic text-depth-secondary">
+                                        Preview pertanyaan akan muncul di sini.
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            {/* ====================================================
+             * OPTIONS
+             * ==================================================== */}
+
+            <div className="space-y-3">
+                <div>
+                    <h4 className="text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                        Pilihan Jawaban
+                    </h4>
+
+                    <p className="mt-1 text-xs text-depth-secondary">
+                        Pilih radio button untuk menentukan jawaban yang benar.
+                    </p>
+                </div>
+
+
+                <div className="space-y-4">
+                    {options.map(
+                        (
+                            option,
+                            index
+                        ) => {
+                            const optionText =
+                                typeof option ===
+                                "string"
+                                    ? option
+                                    : option?.text ??
+                                      "";
+
+                            const isCorrect =
+                                correctIndex ===
+                                index;
+
+                            return (
+                                <div
+                                    key={
+                                        option?.id ??
+                                        index
+                                    }
+                                    className={`rounded-depth-lg border p-4 transition ${
+                                        isCorrect
+                                            ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/5"
+                                            : "border-depth bg-depth-card"
+                                    }`}
+                                >
+                                    <div className="mb-3 flex items-center gap-3">
+                                        <input
+                                            type="radio"
+                                            name="correct-option-editor"
+                                            checked={
+                                                isCorrect
+                                            }
+                                            onChange={() =>
+                                                onCorrectChange?.(
+                                                    index
+                                                )
+                                            }
+                                            disabled={
+                                                isSaving
+                                            }
+                                            className="h-4 w-4 accent-[var(--depth-color-primary)]"
+                                        />
+
+                                        <span
+                                            className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-depth-md text-xs font-bold ${
+                                                isCorrect
+                                                    ? "bg-[var(--depth-color-primary)] text-white"
+                                                    : "border border-depth bg-depth-interactive text-depth-secondary"
+                                            }`}
+                                        >
+                                            {
+                                                OPTION_LABELS[
+                                                    index
+                                                ]
+                                            }
+                                        </span>
+
+                                        <div>
+                                            <p className="text-xs font-semibold text-depth-primary">
+                                                Pilihan{" "}
+                                                {
+                                                    OPTION_LABELS[
+                                                        index
+                                                    ]
+                                                }
+                                            </p>
+
+                                            {isCorrect && (
+                                                <p className="text-[10px] font-semibold text-[var(--depth-color-primary)]">
+                                                    Jawaban Benar
+                                                </p>
+                                            )}
+                                        </div>
+                                    </div>
+
+
+                                    <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
+                                        {/* Option markdown */}
+                                        <div>
+                                            <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                                                Markdown
+                                            </label>
+
+                                            <textarea
+                                                value={ optionText }
+                                                onChange={( event) =>
+                                                    onOptionChange?.( index, event .target .value)
+                                                }
+                                                onKeyDown={ handleKeyDown }
+                                                spellCheck={ false }
+                                                rows={ 1 }
+                                                placeholder={`Pilihan ${ OPTION_LABELS[ index ] }`}
+                                                disabled={ isSaving }
+                                                className="min-h-[40px] w-full resize-y rounded-depth-md border border-depth bg-depth-card p-3 font-mono text-sm leading-relaxed text-depth-primary shadow-depth-inset transition placeholder:text-depth-secondary focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] disabled:opacity-60"
+                                            />
+                                        </div>
+
+
+                                        {/* Option preview */}
+                                        <div>
+                                            <div className="mb-1.5 flex items-center justify-between">
+                                                <span className="text-[10px] font-semibold uppercase tracking-wider text-depth-secondary">
+                                                    Preview
+                                                </span>
+
+                                                <span className="inline-flex items-center gap-1 text-[10px] text-emerald-500">
+                                                    <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+
+                                                    Live
+                                                </span>
+                                            </div>
+
+                                            <div className="min-h-[40px] max-h-[240px] overflow-auto rounded-depth-md border border-depth bg-depth-interactive p-3 shadow-depth-inset">
+                                                {optionText.trim() ? (
+                                                    <MarkdownRenderer
+                                                        content={
+                                                            optionText
+                                                        }
+                                                    />
+                                                ) : (
+                                                    <div className="flex min-h-[40px] items-center justify-center">
+                                                        <p className="text-xs italic text-depth-secondary">
+                                                            Belum diisi.
+                                                        </p>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        }
+                    )}
+                </div>
+            </div>
+
+
+            {/* ====================================================
+             * ACTIONS
+             * ==================================================== */}
+
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-depth pt-4">
+                <p className="text-[11px] text-depth-secondary">
+                    Esc untuk batal
+                </p>
+
+                <div className="flex gap-2">
+                    <button
+                        type="button"
+                        onClick={
+                            onCancel
+                        }
+                        disabled={
+                            isSaving
+                        }
+                        className="rounded-depth-md border border-depth bg-depth-interactive px-4 py-2 text-sm font-semibold text-depth-primary shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        Batal
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={
+                            onSave
+                        }
+                        disabled={
+                            isSaving
+                        }
+                        className="rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        {isSaving
+                            ? "Menyimpan..."
+                            : saveLabel}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/Components/MarkdownRenderer.jsx b/resources/js/Components/MarkdownRenderer.jsx
index cdcac9c..732f527 100644
--- a/resources/js/Components/MarkdownRenderer.jsx
+++ b/resources/js/Components/MarkdownRenderer.jsx
@@ -1,86 +1,620 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkBreaks from 'remark-breaks';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import c from 'react-syntax-highlighter/dist/esm/languages/prism/c';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import mermaid from 'mermaid';
-
-SyntaxHighlighter.registerLanguage('c', c);
-
-const Mermaid = ({ chart }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        mermaid.initialize({ startOnLoad: false, theme: 'dark' });
-
-        const renderChart = async () => {
-            if (ref.current) {
-                try {
-                    const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-                    const { svg } = await mermaid.render(id, chart);
-                    if (ref.current) {
-                        ref.current.innerHTML = svg;
-                    }
-                } catch (error) {
-                    console.error("Mermaid parsing error", error);
-                    if (ref.current) {
-                        ref.current.innerHTML = `<div class="text-red-500 text-sm border border-red-500 p-2 rounded">Failed to render Mermaid diagram</div>`;
+import React, { useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
+
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import c from "react-syntax-highlighter/dist/esm/languages/prism/c";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import mermaid from "mermaid";
+
+SyntaxHighlighter.registerLanguage("c", c);
+
+const parseMediaSize = (alt = "") => {
+    if (typeof alt !== "string") return { altText: "", width: null };
+
+    const match = alt.match(
+        /^(.*?)\s*\|\s*(\d+(?:\.\d+)?)\s*(px|%)?\s*$/i,
+    );
+
+    if (!match) return { altText: alt, width: null };
+
+    const altText = match[1].trim();
+    const value = Number(match[2]);
+    const unit = (match[3] ?? "px").toLowerCase();
+
+    if (!Number.isFinite(value) || value <= 0)
+        return { altText: alt, width: null };
+
+    return {
+        altText,
+        width:
+            unit === "%"
+                ? `${Math.min(value, 100)}%`
+                : `${Math.min(value, 2000)}px`,
+    };
+};
+
+
+/* ============================================================
+ * GitHub Alerts
+ * ============================================================ */
+
+const ALERT_PATTERN =
+    /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\r?\n)?/i;
+
+const remarkGithubAlerts = () => (tree) => {
+    const walk = (node) => {
+        if (!Array.isArray(node?.children)) return;
+
+        node.children.forEach((child) => {
+            if (
+                child.type === "blockquote" &&
+                Array.isArray(child.children) &&
+                child.children.length
+            ) {
+                const paragraph = child.children[0];
+                const first = paragraph?.children?.[0];
+
+                if (
+                    paragraph?.type === "paragraph" &&
+                    first?.type === "text"
+                ) {
+                    const match = first.value.match(ALERT_PATTERN);
+
+                    if (match) {
+                        const type = match[1].toLowerCase();
+
+                        first.value = first.value.replace(
+                            ALERT_PATTERN,
+                            "",
+                        );
+
+                        if (!first.value) paragraph.children.shift();
+
+                        while (paragraph.children[0]?.type === "break")
+                            paragraph.children.shift();
+
+                        if (!paragraph.children.length)
+                            child.children.shift();
+
+                        const old =
+                            child.data?.hProperties?.className;
+                        const classes = Array.isArray(old)
+                            ? old
+                            : old
+                              ? [old]
+                              : [];
+
+                        child.data = {
+                            ...(child.data ?? {}),
+                            hProperties: {
+                                ...(child.data?.hProperties ?? {}),
+                                className: [
+                                    ...classes,
+                                    "markdown-alert",
+                                    `markdown-alert-${type}`,
+                                ],
+                            },
+                        };
                     }
                 }
             }
+
+            walk(child);
+        });
+    };
+
+    walk(tree);
+};
+
+
+/* ============================================================
+ * Mermaid
+ * ============================================================ */
+
+function Mermaid({ chart }) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: "dark",
+        });
+
+        let cancelled = false;
+
+        const render = async () => {
+            try {
+                const id = `mermaid-${Math.random()
+                    .toString(36)
+                    .slice(2, 11)}`;
+
+                const { svg } = await mermaid.render(id, chart);
+
+                if (!cancelled && ref.current)
+                    ref.current.innerHTML = svg;
+            } catch (error) {
+                console.error("Mermaid parsing error", error);
+
+                if (!cancelled && ref.current)
+                    ref.current.innerHTML =
+                        '<div class="text-red-500 text-sm border border-red-500 p-2 rounded">Failed to render Mermaid diagram</div>';
+            }
+        };
+
+        render();
+
+        return () => {
+            cancelled = true;
         };
-        renderChart();
     }, [chart]);
-    return <div ref={ref} className="flex justify-center my-4 overflow-x-auto" />;
+
+    return (
+        <div
+            ref={ref}
+            className="my-4 flex justify-center overflow-x-auto"
+        />
+    );
+}
+
+
+/* ============================================================
+ * Copy
+ * ============================================================ */
+
+function CopyButton({ value }) {
+    const [copied, setCopied] = useState(false);
+
+    const copy = async () => {
+        try {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(value);
+            } else {
+                const textarea = document.createElement("textarea");
+                textarea.value = value;
+                textarea.style.cssText =
+                    "position:fixed;opacity:0;pointer-events:none";
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand("copy");
+                textarea.remove();
+            }
+
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        } catch (error) {
+            console.error("Failed to copy code", error);
+        }
+    };
+
+    return (
+        <button
+            type="button"
+            onClick={copy}
+            className="inline-flex items-center gap-1.5 rounded-depth-md border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white"
+            title="Copy code"
+        >
+            {copied ? (
+                <>
+                    <svg
+                        className="h-3.5 w-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M5 13l4 4L19 7"
+                        />
+                    </svg>
+                    Copied
+                </>
+            ) : (
+                <>
+                    <svg
+                        className="h-3.5 w-3.5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                    >
+                        <rect
+                            x="9"
+                            y="9"
+                            width="11"
+                            height="11"
+                            rx="2"
+                        />
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M15 9V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7a2 2 0 002 2h3"
+                        />
+                    </svg>
+                    Copy
+                </>
+            )}
+        </button>
+    );
+}
+
+
+/* ============================================================
+ * Code Block
+ * ============================================================ */
+
+function FencedCodeBlock({ children }) {
+    const child = React.Children.only(children);
+    const className = child?.props?.className ?? "";
+    const language =
+        /language-([\w-]+)/.exec(className)?.[1] ?? null;
+    const code = String(
+        child?.props?.children ?? "",
+    ).replace(/\n$/, "");
+
+    if (language === "mermaid")
+        return <Mermaid chart={code} />;
+
+    return (
+        <div className="my-4 overflow-hidden rounded-depth-md border border-depth shadow-depth-md">
+            <div className="flex min-h-10 items-center justify-between border-b border-white/10 bg-[#1e1e1e] px-3 py-2">
+                <span className="font-mono text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+                    {language ?? "code"}
+                </span>
+
+                <CopyButton value={code} />
+            </div>
+
+            <div className="overflow-x-auto">
+                <SyntaxHighlighter
+                    style={vscDarkPlus}
+                    language={language ?? undefined}
+                    PreTag="div"
+                    showLineNumbers={Boolean(language)}
+                    startingLineNumber={1}
+                    lineNumberStyle={{
+                        minWidth: "3.25em",
+                        paddingRight: "1em",
+                        textAlign: "right",
+                        userSelect: "none",
+                        opacity: 0.45,
+                    }}
+                    customStyle={{
+                        margin: 0,
+                        borderRadius: 0,
+                        padding: "1rem",
+                        background: "#1e1e1e",
+                    }}
+                    codeTagProps={{
+                        style: {
+                            fontFamily:
+                                "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                        },
+                    }}
+                >
+                    {code}
+                </SyntaxHighlighter>
+            </div>
+        </div>
+    );
+}
+
+
+/* ============================================================
+ * Media
+ *
+ * IMPORTANT:
+ * Use <span>, NOT <div>.
+ *
+ * Markdown images normally live inside <p>, therefore:
+ *
+ * <p><span><img /></span></p>  -> valid
+ * <p><div><img /></div></p>    -> invalid hydration nesting
+ * ============================================================ */
+
+const VIDEO_EXTENSIONS = /\.(mp4|webm|ogg|m4v|mov)$/i;
+
+const isVideoUrl = (src) =>
+    typeof src === "string" &&
+    src.trim() !== "" &&
+    VIDEO_EXTENSIONS.test(src.split(/[?#]/)[0]);
+
+function MarkdownMedia({ src, alt, title }) {
+    if (!src) return null;
+
+    const { altText, width } = parseMediaSize(alt);
+    const style = {
+        width: width ?? "100%",
+        maxWidth: "100%",
+    };
+
+    if (isVideoUrl(src)) {
+        return (
+            <span className="my-4 flex w-full justify-center">
+                <video
+                    src={src}
+                    title={title}
+                    controls
+                    preload="metadata"
+                    style={style}
+                    className="max-h-[70vh] rounded-depth-lg border border-depth bg-black object-contain shadow-depth-md"
+                >
+                    Your browser does not support video playback.
+                </video>
+            </span>
+        );
+    }
+
+    return (
+        <span className="my-4 flex w-full justify-center">
+            <a
+                href={src}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={title}
+                style={style}
+                className="block"
+            >
+                <img
+                    src={src}
+                    alt={altText}
+                    loading="lazy"
+                    className="h-auto max-h-[70vh] w-full rounded-depth-lg border border-depth object-contain shadow-depth-md transition hover:opacity-90"
+                />
+            </a>
+        </span>
+    );
+}
+
+
+/* ============================================================
+ * Alerts
+ * ============================================================ */
+
+const ALERT_STYLES = {
+    note: {
+        label: "Note",
+        container: "border-blue-500/50 bg-blue-500/10",
+        title: "text-blue-400",
+    },
+    tip: {
+        label: "Tip",
+        container: "border-emerald-500/50 bg-emerald-500/10",
+        title: "text-emerald-400",
+    },
+    important: {
+        label: "Important",
+        container: "border-violet-500/50 bg-violet-500/10",
+        title: "text-violet-400",
+    },
+    warning: {
+        label: "Warning",
+        container: "border-amber-500/50 bg-amber-500/10",
+        title: "text-amber-400",
+    },
+    caution: {
+        label: "Caution",
+        container: "border-red-500/50 bg-red-500/10",
+        title: "text-red-400",
+    },
 };
 
+const getAlertType = (className = "") =>
+    /markdown-alert-(note|tip|important|warning|caution)/.exec(
+        className,
+    )?.[1] ?? null;
 
-export default function MarkdownRenderer({ content, className = '' }) {
-    const processedContent = content;
+
+/* ============================================================
+ * Renderer
+ * ============================================================ */
+
+export default function MarkdownRenderer({
+    content,
+    className = "",
+}) {
+    const value =
+        typeof content === "string"
+            ? content
+            : String(content ?? "");
 
     return (
-        <div className={`prose prose-invert max-w-none ${className}`}>
+        <div
+            className={`prose prose-invert max-w-none ${className}`}
+        >
             <ReactMarkdown
-                remarkPlugins={[remarkGfm, remarkBreaks]}
+                remarkPlugins={[
+                    remarkGfm,
+                    remarkMath,
+                    remarkGithubAlerts,
+                    remarkBreaks,
+                ]}
+                rehypePlugins={[rehypeKatex]}
                 components={{
-                    code({ node, inline, className, children, ...props }) {
-                        const match = /language-(\w+)/.exec(className || "");
-                        const codeString = String(children).replace(/\n$/, "");
-
-                        if (!inline && match && match[1] === 'mermaid') {
-                            return <Mermaid chart={codeString} />;
-                        }
-
-                        return !inline ? (
-                            <div className="relative my-4">
-                                <SyntaxHighlighter
-                                    style={vscDarkPlus}
-                                    language={match ? match[1] : "c"}
-                                    PreTag="div"
-                                    className="rounded-depth-md shadow-depth-md"
+                    pre: ({ children }) => (
+                        <FencedCodeBlock>
+                            {children}
+                        </FencedCodeBlock>
+                    ),
+
+                    code: ({
+                        className = "",
+                        children,
+                        ...props
+                    }) => (
+                        <code
+                            className={`rounded border border-depth bg-depth-card px-1.5 py-0.5 font-mono text-sm ${className}`}
+                            {...props}
+                        >
+                            {children}
+                        </code>
+                    ),
+
+                    h1: ({ children }) => (
+                        <h1 className="mb-4 mt-6 border-b border-depth pb-2 text-3xl font-bold leading-tight text-depth-primary first:mt-0">
+                            {children}
+                        </h1>
+                    ),
+
+                    h2: ({ children }) => (
+                        <h2 className="mb-3 mt-6 border-b border-depth pb-1.5 text-2xl font-bold leading-tight text-depth-primary first:mt-0">
+                            {children}
+                        </h2>
+                    ),
+
+                    h3: ({ children }) => (
+                        <h3 className="mb-3 mt-5 text-xl font-semibold leading-snug text-depth-primary first:mt-0">
+                            {children}
+                        </h3>
+                    ),
+
+                    h4: ({ children }) => (
+                        <h4 className="mb-2 mt-4 text-lg font-semibold leading-snug text-depth-primary first:mt-0">
+                            {children}
+                        </h4>
+                    ),
+
+                    h5: ({ children }) => (
+                        <h5 className="mb-2 mt-4 text-base font-semibold leading-snug text-depth-primary first:mt-0">
+                            {children}
+                        </h5>
+                    ),
+
+                    h6: ({ children }) => (
+                        <h6 className="mb-2 mt-3 text-sm font-semibold uppercase tracking-wide text-depth-secondary first:mt-0">
+                            {children}
+                        </h6>
+                    ),
+
+                    blockquote: ({
+                        className = "",
+                        children,
+                        ...props
+                    }) => {
+                        const type =
+                            getAlertType(className);
+
+                        if (!type)
+                            return (
+                                <blockquote
+                                    className="my-4 border-l-4 border-depth pl-4 text-depth-secondary"
                                     {...props}
                                 >
-                                    {codeString}
-                                </SyntaxHighlighter>
+                                    {children}
+                                </blockquote>
+                            );
+
+                        const alert = ALERT_STYLES[type];
+
+                        return (
+                            <div
+                                className={`my-4 rounded-depth-md border-l-4 px-4 py-3 ${alert.container}`}
+                            >
+                                <div
+                                    className={`mb-2 flex items-center gap-2 text-sm font-bold ${alert.title}`}
+                                >
+                                    <svg
+                                        className="h-4 w-4 shrink-0"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                    >
+                                        <circle
+                                            cx="12"
+                                            cy="12"
+                                            r="9"
+                                        />
+                                        <path
+                                            strokeLinecap="round"
+                                            d="M12 11v5"
+                                        />
+                                        <path
+                                            strokeLinecap="round"
+                                            d="M12 8h.01"
+                                        />
+                                    </svg>
+
+                                    {alert.label}
+                                </div>
+
+                                <div className="text-sm text-depth-primary [&>*:last-child]:mb-0">
+                                    {children}
+                                </div>
                             </div>
-                        ) : (
-                            <code className="bg-depth-card px-1.5 py-0.5 rounded text-sm border border-depth" {...props}>
-                                {children}
-                            </code>
                         );
                     },
-                    p: ({ children }) => <div className="mb-2 whitespace-pre-wrap">{children}</div>,
-                    ul: ({ children }) => <ul className="list-disc list-inside mb-2">{children}</ul>,
-                    ol: ({ children }) => <ol className="list-decimal list-inside mb-2">{children}</ol>,
-                    table: ({ children }) => <div className="overflow-x-auto my-3"><table className="min-w-full border-collapse border border-depth text-sm">{children}</table></div>,
-                    thead: ({ children }) => <thead className="bg-depth-interactive">{children}</thead>,
-                    tbody: ({ children }) => <tbody className="divide-y divide-depth">{children}</tbody>,
-                    th: ({ children }) => <th className="px-2.5 py-1 text-left text-xs font-semibold uppercase tracking-wider text-depth-secondary border border-depth whitespace-nowrap">{children}</th>,
-                    td: ({ children }) => <td className="px-2.5 py-1 text-sm text-depth-primary border-x border-depth">{children}</td>,
+
+                    img: ({ src, alt, title }) => (
+                        <MarkdownMedia
+                            src={src}
+                            alt={alt}
+                            title={title}
+                        />
+                    ),
+
+                    p: ({ children }) => (
+                        <p className="mb-2 whitespace-pre-wrap">
+                            {children}
+                        </p>
+                    ),
+
+                    ul: ({ children }) => (
+                        <ul className="mb-2 list-inside list-disc">
+                            {children}
+                        </ul>
+                    ),
+
+                    ol: ({ children }) => (
+                        <ol className="mb-2 list-inside list-decimal">
+                            {children}
+                        </ol>
+                    ),
+
+                    table: ({ children }) => (
+                        <div className="my-3 overflow-x-auto">
+                            <table className="min-w-full border-collapse border border-depth text-sm">
+                                {children}
+                            </table>
+                        </div>
+                    ),
+
+                    thead: ({ children }) => (
+                        <thead className="bg-depth-interactive">
+                            {children}
+                        </thead>
+                    ),
+
+                    tbody: ({ children }) => (
+                        <tbody className="divide-y divide-depth">
+                            {children}
+                        </tbody>
+                    ),
+
+                    th: ({ children }) => (
+                        <th className="whitespace-nowrap border border-depth px-2.5 py-1 text-left text-xs font-semibold uppercase tracking-wider text-depth-secondary">
+                            {children}
+                        </th>
+                    ),
+
+                    td: ({ children }) => (
+                        <td className="border-x border-depth px-2.5 py-1 text-sm text-depth-primary">
+                            {children}
+                        </td>
+                    ),
+
+                    hr: () => (
+                        <hr className="my-6 border-0 border-t border-depth" />
+                    ),
                 }}
             >
-                {processedContent}
+                {value}
             </ReactMarkdown>
         </div>
     );
diff --git a/resources/js/Components/Praktikans/Common/QuestionNavigator.jsx b/resources/js/Components/Praktikans/Common/QuestionNavigator.jsx
new file mode 100644
index 0000000..f400142
--- /dev/null
+++ b/resources/js/Components/Praktikans/Common/QuestionNavigator.jsx
@@ -0,0 +1,83 @@
+const answered = (value) => {
+    if (value == null) return false;
+    if (typeof value === "string")
+        return Boolean(value.trim());
+    if (typeof value === "object")
+        return Object.keys(value).length > 0;
+    return true;
+};
+
+export default function QuestionNavigator({
+    questions = [],
+    answers = [],
+    active = 0,
+    onChange,
+}) {
+    if (!questions.length) return null;
+
+    const style = (i) => {
+        const done = answered(answers[i]);
+        const current = i === active;
+
+        if (current)
+            return done
+                ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white"
+                : "border-amber-400 bg-amber-400 text-black";
+
+        return done
+            ? "border-[var(--depth-color-primary)] bg-depth-interactive text-depth-primary"
+            : "border-amber-400/70 bg-amber-400/10 text-amber-300";
+    };
+
+    return (
+        <div className="sticky top-0 z-20 mb-4 flex items-center gap-2 rounded-depth-lg border border-depth bg-depth-card p-2 shadow-depth-md">
+            <button
+                type="button"
+                disabled={!active}
+                onClick={() =>
+                    onChange(active - 1)
+                }
+                className="rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-bold disabled:opacity-40"
+            >
+                ←
+            </button>
+
+            <div className="flex min-w-0 flex-1 gap-1 overflow-x-auto">
+                {questions.map((_, i) => (
+                    <button
+                        key={i}
+                        type="button"
+                        onClick={() =>
+                            onChange(i)
+                        }
+                        className={`relative h-8 min-w-8 shrink-0 rounded-depth-md border text-xs font-bold ${style(i)}`}
+                    >
+                        {i + 1}
+
+                        {!answered(answers[i]) && (
+                            <span className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-amber-400" />
+                        )}
+                    </button>
+                ))}
+            </div>
+
+            <span className="shrink-0 text-xs font-semibold text-depth-secondary">
+                {active + 1}/{questions.length}
+            </span>
+
+            <button
+                type="button"
+                disabled={
+                    active >=
+                    questions.length - 1
+                }
+                onClick={() =>
+                    onChange(active + 1)
+                }
+                className="rounded-depth-md border border-depth bg-depth-interactive px-3 py-2 text-xs font-bold disabled:opacity-40"
+            >
+                →
+            </button>
+        </div>
+    );
+}
diff --git a/resources/js/Components/Praktikans/Sections/FeedbackPhase.jsx b/resources/js/Components/Praktikans/Sections/FeedbackPhase.jsx
index 375d5ff..de5cd8b 100644
--- a/resources/js/Components/Praktikans/Sections/FeedbackPhase.jsx
+++ b/resources/js/Components/Praktikans/Sections/FeedbackPhase.jsx
@@ -6,76 +6,64 @@ import { useAsistensQuery } from "@/hooks/useAsistensQuery";
 import { useModulesQuery } from "@/hooks/useModulesQuery";
 import { api } from "@/lib/api";
 
-const STAR_VALUES = [1, 2, 3, 4, 5];
+const STARS = [1, 2, 3, 4, 5];
 
-const formatAssistantOption = (assistant) => {
-    if (!assistant) {
-        return "";
-    }
+const assistantLabel = (a, fallback = "") => {
+    if (!a) return fallback;
+    const code = a.kode ?? a.code ?? "";
+    const name = a.nama ?? a.name ?? "";
 
-    const code = assistant.kode ?? assistant.code ?? "";
-    const name = assistant.nama ?? assistant.name ?? "";
-
-    if (!code && !name) {
-        return "";
-    }
-
-    if (!name) {
-        return code;
-    }
-
-    if (!code) {
-        return name;
-    }
-
-    return `${code} — ${name}`;
+    return code && name
+        ? `${code} — ${name}`
+        : code || name || fallback;
 };
 
-const getAssistantLabel = (assistant, fallback = "") => {
-    if (!assistant) {
-        return fallback ?? "";
-    }
-
-    const formatted = formatAssistantOption(assistant);
-    if (formatted.trim() !== "") {
-        return formatted;
-    }
-
-    const backup =
-        assistant.nama ??
-        assistant.name ??
-        assistant.kode ??
-        assistant.code ??
-        fallback ??
-        "";
-
-    return backup;
-};
+const matches = (a, query) => {
+    const q = query.trim().toLowerCase();
+
+    if (!q) return true;
 
-const matchesAssistantQuery = (assistant, query) => {
-    if (!assistant) {
-        return false;
-    }
-
-    const normalized = query.trim().toLowerCase();
-    if (normalized === "") {
-        return true;
-    }
-
-    const candidates = [
-        assistant.nama,
-        assistant.name,
-        assistant.kode,
-        assistant.code,
-        formatAssistantOption(assistant),
-    ];
-
-    return candidates
+    return [
+        a?.nama,
+        a?.name,
+        a?.kode,
+        a?.code,
+        assistantLabel(a),
+    ]
         .filter(Boolean)
-        .map((value) => value.toLowerCase())
-        .some((value) => value.includes(normalized));
+        .some((x) =>
+            String(x).toLowerCase().includes(q),
+        );
 };
 
+function RatingStars({ value, onChange }) {
+    return (
+        <div className="mt-4 rounded-depth-lg border border-depth bg-depth-card px-4 py-3 shadow-depth-inset">
+            {STARS.map((star) => (
+                <button
+                    key={star}
+                    type="button"
+                    onClick={() => onChange(star)}
+                    className="mx-2 p-1"
+                    aria-label={`${star} bintang`}
+                >
+                    <svg
+                        className={`h-8 w-8 drop-shadow-sm transition ${
+                            star <= value
+                                ? "text-yellow-400"
+                                : "text-depth-disabled"
+                        }`}
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                    >
+                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+                    </svg>
+                </button>
+            ))}
+        </div>
+    );
+}
+
 export default function FeedbackPhase({
     praktikan,
     modulId = null,
@@ -84,317 +72,423 @@ export default function FeedbackPhase({
     onClose,
     onSubmitted,
 }) {
-    const praktikanData = praktikan ?? null;
-    const praktikanId = praktikanData?.id ?? null;
-    const normalizedModulId = modulId ? String(modulId) : null;
-    const normalizedAssistantId = assistantId ? String(assistantId) : null;
+    const praktikanId = praktikan?.id ?? null;
+    const moduleId = modulId ? String(modulId) : null;
+    const initialAssistantId =
+        assistantId != null
+            ? String(assistantId)
+            : null;
 
     const [feedback, setFeedback] = useState("");
     const [ratingPraktikum, setRatingPraktikum] = useState(0);
     const [ratingAsisten, setRatingAsisten] = useState(0);
-    const [selectedAssistantId, setSelectedAssistantId] = useState(
-        normalizedAssistantId ? String(normalizedAssistantId) : null
-    );
+    const [selectedAssistantId, setSelectedAssistantId] =
+        useState(initialAssistantId);
     const [searchTerm, setSearchTerm] = useState("");
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [highlighted, setHighlighted] = useState(-1);
+    const [submitting, setSubmitting] = useState(false);
 
     const dropdownRef = useRef(null);
-    const initialAssistantAppliedRef = useRef(false);
+    const initializedRef = useRef(false);
 
-    const { data: assistantOptions = [] } = useAsistensQuery();
+    const { data: assistants = [] } = useAsistensQuery();
     const { data: modules = [] } = useModulesQuery();
 
-    const modulData = useMemo(() => {
-        if (!normalizedModulId) {
-            return null;
-        }
-
-        return (
-            modules.find((module) => String(module?.idM ?? module?.id) === normalizedModulId) ?? null
-        );
-    }, [modules, normalizedModulId]);
+    const module = useMemo(
+        () =>
+            moduleId
+                ? modules.find(
+                      (m) =>
+                          String(m?.idM ?? m?.id) ===
+                          moduleId,
+                  ) ?? null
+                : null,
+        [modules, moduleId],
+    );
 
-    const modulLabel =
+    const moduleLabel =
         moduleLabelOverride ??
-        modulData?.judul ??
-        modulData?.name ??
-        (normalizedModulId ? `Modul #${normalizedModulId}` : null);
-
+        module?.judul ??
+        module?.name ??
+        (moduleId ? `Modul #${moduleId}` : null);
+
+    /*
+     * Apply assistant from PraktikumPage only once.
+     * Do not erase it after useAsistensQuery finishes.
+     */
     useEffect(() => {
-        if (initialAssistantAppliedRef.current) {
+        if (
+            initializedRef.current ||
+            !assistants.length
+        )
+            return;
+
+        initializedRef.current = true;
+
+        if (!initialAssistantId) {
+            setSelectedAssistantId(null);
+            setSearchTerm("");
             return;
         }
 
-        if (!assistantOptions) {
+        const assistant = assistants.find(
+            (a) =>
+                String(a?.id) ===
+                initialAssistantId,
+        );
+
+        if (!assistant) {
+            setSelectedAssistantId(null);
+            setSearchTerm("");
             return;
         }
 
-        initialAssistantAppliedRef.current = true;
-        setSelectedAssistantId(null);
-        setSearchTerm("");
-    }, [assistantOptions]);
+        setSelectedAssistantId(initialAssistantId);
+        setSearchTerm(assistantLabel(assistant));
+    }, [assistants, initialAssistantId]);
 
     useEffect(() => {
-        const handleOutsideClick = (event) => {
-            if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
-                return;
+        const close = (e) => {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(
+                    e.target,
+                )
+            ) {
+                setOpen(false);
+                setHighlighted(-1);
             }
-            setIsDropdownOpen(false);
-            setHighlightedIndex(-1);
-        };
-
-        document.addEventListener("mousedown", handleOutsideClick);
-        return () => {
-            document.removeEventListener("mousedown", handleOutsideClick);
         };
-    }, []);
 
+        document.addEventListener("mousedown", close);
 
-    const filteredAssistants = useMemo(() => {
-        if (!searchTerm) {
-            return assistantOptions;
-        }
+        return () =>
+            document.removeEventListener(
+                "mousedown",
+                close,
+            );
+    }, []);
 
-        return assistantOptions.filter((assistant) => matchesAssistantQuery(assistant, searchTerm));
-    }, [assistantOptions, searchTerm]);
+    const filtered = useMemo(
+        () =>
+            assistants.filter((a) =>
+                matches(a, searchTerm),
+            ),
+        [assistants, searchTerm],
+    );
 
     useEffect(() => {
-        if (!isDropdownOpen || filteredAssistants.length === 0) {
-            setHighlightedIndex(-1);
+        if (!open || !filtered.length) {
+            setHighlighted(-1);
             return;
         }
 
-        setHighlightedIndex((previous) => {
-            if (previous === -1) {
-                return 0;
-            }
+        setHighlighted((x) =>
+            x < 0 || x >= filtered.length ? 0 : x,
+        );
+    }, [open, filtered.length]);
 
-            if (previous >= filteredAssistants.length) {
-                return filteredAssistants.length - 1;
-            }
+    const selectAssistant = (id) => {
+        const value =
+            id != null ? String(id) : null;
 
-            return previous;
-        });
-    }, [filteredAssistants.length, isDropdownOpen]);
-
-    const handleAssistantSelect = (nextAssistantId) => {
-        const resolvedId = nextAssistantId !== null && nextAssistantId !== undefined ? String(nextAssistantId) : null;
-        setSelectedAssistantId(resolvedId);
-        initialAssistantAppliedRef.current = true;
-        const assistant = assistantOptions.find((option) => String(option?.id) === resolvedId);
-        setSearchTerm(getAssistantLabel(assistant, searchTerm));
-        setIsDropdownOpen(false);
-        setHighlightedIndex(-1);
-    };
+        const assistant = assistants.find(
+            (a) => String(a?.id) === value,
+        );
 
-    const handleClose = () => {
-        if (typeof onClose === "function") {
-            onClose();
-            return;
-        }
+        setSelectedAssistantId(value);
+        setSearchTerm(
+            assistantLabel(
+                assistant,
+                searchTerm,
+            ),
+        );
+        setOpen(false);
+        setHighlighted(-1);
+    };
 
+    const close = () => {
+        if (onClose) return onClose();
         router.visit(route("praktikum"));
     };
 
-    const handleSubmit = async () => {
-        const trimmedFeedback = feedback.trim();
-
-        if (!normalizedModulId) {
-            toast.error("Modul feedback tidak ditemukan.");
-            return;
-        }
-
-        if (!praktikanId) {
-            toast.error("Data praktikan tidak valid.");
-            return;
-        }
-
-        const hasRatings = ratingPraktikum > 0 && ratingAsisten > 0;
-
-        if (trimmedFeedback.length < 10 || trimmedFeedback.length > 1000 || !selectedAssistantId || !hasRatings) {
-            if (trimmedFeedback.length < 10) {
-                toast.error("Feedback minimal 10 karakter.");
-            } else if (trimmedFeedback.length > 1000) {
-                toast.error("Feedback maksimal 1000 karakter.");
-            } else {
-                toast.error("Lengkapi feedback, pilih asisten penanggung jawab, dan berikan rating praktik & asisten.");
-            }
-            return;
+    const submit = async () => {
+        const text = feedback.trim();
+
+        if (!moduleId)
+            return toast.error(
+                "Modul feedback tidak ditemukan.",
+            );
+
+        if (!praktikanId)
+            return toast.error(
+                "Data praktikan tidak valid.",
+            );
+
+        if (text.length < 10)
+            return toast.error(
+                "Feedback minimal 10 karakter.",
+            );
+
+        if (text.length > 1000)
+            return toast.error(
+                "Feedback maksimal 1000 karakter.",
+            );
+
+        if (
+            !selectedAssistantId ||
+            !ratingPraktikum ||
+            !ratingAsisten
+        ) {
+            return toast.error(
+                "Lengkapi feedback, pilih asisten penanggung jawab, dan berikan rating praktik & asisten.",
+            );
         }
 
         try {
-            setIsSubmitting(true);
-            await api.post("/api-v1/laporan-praktikan", {
-                praktikan_id: praktikanId,
-                modul_id: Number(normalizedModulId),
-                laporan: trimmedFeedback,
-                pesan: trimmedFeedback,
-                rating: ratingPraktikum || null,
-                rating_praktikum: ratingPraktikum || null,
-                rating_asisten: ratingAsisten || null,
-                asisten_id: selectedAssistantId ? Number(selectedAssistantId) : null,
-            });
-
-            toast.success("Feedback berhasil dikirim. Terima kasih!");
-            if (typeof onSubmitted === "function") {
-                onSubmitted();
-            } else {
-                handleClose();
-            }
+            setSubmitting(true);
+
+            await api.post(
+                "/api-v1/laporan-praktikan",
+                {
+                    praktikan_id: praktikanId,
+                    modul_id: Number(moduleId),
+                    laporan: text,
+                    pesan: text,
+                    rating: ratingPraktikum,
+                    rating_praktikum:
+                        ratingPraktikum,
+                    rating_asisten:
+                        ratingAsisten,
+                    asisten_id: Number(
+                        selectedAssistantId,
+                    ),
+                },
+            );
+
+            toast.success(
+                "Feedback berhasil dikirim. Terima kasih!",
+            );
+
+            onSubmitted
+                ? onSubmitted()
+                : close();
         } catch (error) {
-            toast.error(error?.response?.data?.message ?? error?.message ?? "Gagal mengirim feedback.");
+            toast.error(
+                error?.response?.data?.message ??
+                    error?.message ??
+                    "Gagal mengirim feedback.",
+            );
         } finally {
-            setIsSubmitting(false);
+            setSubmitting(false);
         }
     };
 
-    const ratingsComplete = ratingPraktikum > 0 && ratingAsisten > 0;
-    const feedbackLength = feedback.trim().length;
-    const feedbackValid = feedbackLength >= 10 && feedbackLength <= 1000;
+    const length = feedback.trim().length;
+    const feedbackValid =
+        length >= 10 && length <= 1000;
 
-    const isSubmitDisabled =
-        !normalizedModulId ||
+    const disabled =
+        !moduleId ||
         !selectedAssistantId ||
         !feedbackValid ||
-        !ratingsComplete ||
-        isSubmitting;
+        !ratingPraktikum ||
+        !ratingAsisten ||
+        submitting;
 
     return (
         <div
             className="mt-6 flex flex-1 flex-col gap-6 overflow-hidden"
-            style={{ maxHeight: "calc(100vh - 4rem)" }}
+            style={{
+                maxHeight: "calc(100vh - 4rem)",
+            }}
         >
             <div className="flex flex-1 flex-col gap-6 overflow-y-auto pr-1">
-                <div className="">
-                    <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-                        <div>
-                            <h1 className="text-3xl font-bold text-depth-primary">Feedback</h1>
-                            {modulLabel && (
-                                <p className="mt-2 text-xs font-medium text-depth-tertiary">
-                                    Modul Praktikum: <span className="text-depth-primary">{modulLabel}</span>
-                                </p>
-                            )}
-                        </div>
+                <div>
+                    <div className="mb-6">
+                        <h1 className="text-3xl font-bold text-depth-primary">
+                            Feedback
+                        </h1>
+
+                        {moduleLabel && (
+                            <p className="mt-2 text-xs font-medium text-depth-tertiary">
+                                Modul Praktikum:{" "}
+                                <span className="text-depth-primary">
+                                    {moduleLabel}
+                                </span>
+                            </p>
+                        )}
                     </div>
 
-                    {!normalizedModulId && (
+                    {!moduleId && (
                         <div className="mb-6 rounded-depth-md border border-red-200 bg-red-50 p-4 text-sm text-red-700">
-                            Modul untuk feedback belum ditentukan.
+                            Modul untuk feedback belum
+                            ditentukan.
                         </div>
                     )}
 
-                    <div className="mb-6 max-w-3xl" ref={dropdownRef}>
+                    <div
+                        ref={dropdownRef}
+                        className="mb-6 max-w-3xl"
+                    >
                         <label className="mb-3 block text-sm font-semibold text-depth-primary">
                             Pilih Asisten Penanggung Jawab
                         </label>
+
                         <div className="relative">
                             <input
                                 type="search"
                                 value={searchTerm}
-                                onChange={(event) => {
-                                    setSearchTerm(event.target.value);
-                                    setIsDropdownOpen(true);
-                                    setHighlightedIndex(-1);
-                                }}
+                                placeholder="Cari asisten berdasarkan kode atau nama"
                                 onFocus={() => {
-                                    setIsDropdownOpen(true);
-                                    if (filteredAssistants.length > 0 && highlightedIndex === -1) {
-                                        setHighlightedIndex(0);
-                                    }
+                                    setOpen(true);
+                                    if (
+                                        filtered.length &&
+                                        highlighted === -1
+                                    )
+                                        setHighlighted(0);
                                 }}
-                                onKeyDown={(event) => {
-                                    if (event.key === "Enter") {
-                                        event.preventDefault();
-                                        if (
-                                            highlightedIndex >= 0 &&
-                                            highlightedIndex < filteredAssistants.length
-                                        ) {
-                                            handleAssistantSelect(filteredAssistants[highlightedIndex].id);
-                                        } else if (filteredAssistants.length > 0) {
-                                            handleAssistantSelect(filteredAssistants[0].id);
-                                        }
-                                    } else if (event.key === "ArrowDown") {
-                                        event.preventDefault();
-                                        if (!isDropdownOpen) {
-                                            setIsDropdownOpen(true);
-                                            setHighlightedIndex(0);
-                                            return;
-                                        }
-                                        if (filteredAssistants.length === 0) {
-                                            setHighlightedIndex(-1);
-                                            return;
-                                        }
-                                        setHighlightedIndex((previous) => {
-                                            const nextIndex = previous + 1;
-                                            if (nextIndex >= filteredAssistants.length || nextIndex < 0) {
-                                                return 0;
-                                            }
-                                            return nextIndex;
-                                        });
-                                    } else if (event.key === "ArrowUp") {
-                                        event.preventDefault();
-                                        if (!isDropdownOpen) {
-                                            setIsDropdownOpen(true);
-                                            setHighlightedIndex(Math.max(filteredAssistants.length - 1, 0));
+                                onChange={(e) => {
+                                    setSearchTerm(
+                                        e.target.value,
+                                    );
+                                    setSelectedAssistantId(
+                                        null,
+                                    );
+                                    setOpen(true);
+                                    setHighlighted(-1);
+                                }}
+                                onKeyDown={(e) => {
+                                    if (
+                                        e.key === "Escape"
+                                    ) {
+                                        setOpen(false);
+                                        setHighlighted(-1);
+                                        return;
+                                    }
+
+                                    if (
+                                        e.key === "ArrowDown"
+                                    ) {
+                                        e.preventDefault();
+                                        setOpen(true);
+
+                                        if (!filtered.length)
                                             return;
-                                        }
-                                        if (filteredAssistants.length === 0) {
-                                            setHighlightedIndex(-1);
+
+                                        setHighlighted(
+                                            (x) =>
+                                                x < 0 ||
+                                                x >=
+                                                    filtered.length -
+                                                        1
+                                                    ? 0
+                                                    : x +
+                                                      1,
+                                        );
+                                        return;
+                                    }
+
+                                    if (
+                                        e.key === "ArrowUp"
+                                    ) {
+                                        e.preventDefault();
+                                        setOpen(true);
+
+                                        if (!filtered.length)
                                             return;
-                                        }
-                                        setHighlightedIndex((previous) => {
-                                            const nextIndex = previous - 1;
-                                            if (nextIndex < 0) {
-                                                return filteredAssistants.length - 1;
-                                            }
-                                            return nextIndex;
-                                        });
-                                    } else if (event.key === "Escape") {
-                                        setIsDropdownOpen(false);
-                                        setHighlightedIndex(-1);
+
+                                        setHighlighted(
+                                            (x) =>
+                                                x <= 0
+                                                    ? filtered.length -
+                                                      1
+                                                    : x -
+                                                      1,
+                                        );
+                                        return;
+                                    }
+
+                                    if (
+                                        e.key === "Enter"
+                                    ) {
+                                        e.preventDefault();
+
+                                        const assistant =
+                                            filtered[
+                                                highlighted >=
+                                                0
+                                                    ? highlighted
+                                                    : 0
+                                            ];
+
+                                        if (assistant)
+                                            selectAssistant(
+                                                assistant.id,
+                                            );
                                     }
                                 }}
-                                placeholder="Cari asisten berdasarkan kode atau nama"
-                                className="w-full rounded-depth-lg border border-depth bg-depth-card px-4 py-3 text-sm text-depth-primary shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
+                                className="w-full rounded-depth-lg border border-depth bg-depth-card px-4 py-3 text-sm text-depth-primary shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
                             />
-                            {isDropdownOpen && (
+
+                            {open && (
                                 <div className="absolute z-20 mt-2 max-h-56 w-full overflow-y-auto rounded-depth-lg border border-depth bg-depth-card shadow-depth-lg">
-                                    {filteredAssistants.length === 0 ? (
-                                        <div className="px-4 py-3 text-sm text-depth-secondary">Asisten tidak ditemukan.</div>
+                                    {!filtered.length ? (
+                                        <div className="px-4 py-3 text-sm text-depth-secondary">
+                                            Asisten tidak
+                                            ditemukan.
+                                        </div>
                                     ) : (
                                         <ul className="divide-y divide-[color:var(--depth-border)]">
-                                            {filteredAssistants.map((assistant, index) => {
-                                                const isActive = index === highlightedIndex;
-                                                return (
-                                                    <li key={`assistant-option-${assistant.id}`}>
-                                                        <button
-                                                            type="button"
-                                                            onClick={() => handleAssistantSelect(assistant.id)}
-                                                            className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm transition hover:bg-depth-interactive ${String(assistant.id) === selectedAssistantId
-                                                                    ? "bg-depth-interactive/80 font-semibold text-depth-primary"
-                                                                    : isActive
-                                                                        ? "bg-depth-interactive/60 text-depth-primary"
+                                            {filtered.map(
+                                                (
+                                                    assistant,
+                                                    i,
+                                                ) => {
+                                                    const selected =
+                                                        String(
+                                                            assistant.id,
+                                                        ) ===
+                                                        selectedAssistantId;
+
+                                                    return (
+                                                        <li
+                                                            key={
+                                                                assistant.id
+                                                            }
+                                                        >
+                                                            <button
+                                                                type="button"
+                                                                onClick={() =>
+                                                                    selectAssistant(
+                                                                        assistant.id,
+                                                                    )
+                                                                }
+                                                                className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm transition hover:bg-depth-interactive ${
+                                                                    selected ||
+                                                                    i ===
+                                                                        highlighted
+                                                                        ? "bg-depth-interactive font-semibold text-depth-primary"
                                                                         : "text-depth-primary"
                                                                 }`}
-                                                        >
-                                                            <span>{formatAssistantOption(assistant)}</span>
-                                                            {String(assistant.id) === selectedAssistantId && (
-                                                                <svg
-                                                                    className="h-4 w-4 text-[var(--depth-color-primary)]"
-                                                                    viewBox="0 0 24 24"
-                                                                    fill="none"
-                                                                    stroke="currentColor"
-                                                                    strokeWidth={2}
-                                                                >
-                                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                                                                </svg>
-                                                            )}
-                                                        </button>
-                                                    </li>
-                                                );
-                                            })}
+                                                            >
+                                                                <span>
+                                                                    {assistantLabel(
+                                                                        assistant,
+                                                                    )}
+                                                                </span>
+
+                                                                {selected && (
+                                                                    <span className="font-bold text-[var(--depth-color-primary)]">
+                                                                        ✓
+                                                                    </span>
+                                                                )}
+                                                            </button>
+                                                        </li>
+                                                    );
+                                                },
+                                            )}
                                         </ul>
                                     )}
                                 </div>
@@ -403,94 +497,101 @@ export default function FeedbackPhase({
                     </div>
 
                     <div className="grid gap-6 md:grid-cols-2">
-                        <div className="">
-                            <h3 className="text-sm font-semibold text-depth-primary">Praktikum</h3>
-                            <div className="mt-4 w-full rounded-depth-lg border border-depth bg-depth-card px-4 py-3 shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0">
-                                {STAR_VALUES.map((value) => (
-                                    <button
-                                        key={`praktikum-star-${value}`}
-                                        type="button"
-                                        onClick={() => setRatingPraktikum(value)}
-                                        className="p-1 mx-2"
-                                    >
-                                        <svg
-                                            className={`h-8 w-8 drop-shadow-sm transition ${value <= ratingPraktikum ? "text-yellow-400" : "text-depth-disabled"
-                                                }`}
-                                            viewBox="0 0 24 24"
-                                            fill="currentColor"
-                                        >
-                                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-                                        </svg>
-                                    </button>
-                                ))}
-                            </div>
+                        <div>
+                            <h3 className="text-sm font-semibold text-depth-primary">
+                                Praktikum
+                            </h3>
+
+                            <RatingStars
+                                value={
+                                    ratingPraktikum
+                                }
+                                onChange={
+                                    setRatingPraktikum
+                                }
+                            />
                         </div>
-                        <div className="">
-                            <h3 className="text-sm font-semibold text-depth-primary">Asisten</h3>
-                            <div className="mt-4 w-full rounded-depth-lg border border-depth bg-depth-card px-4 py-3 shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0">
-                                {STAR_VALUES.map((value) => (
-                                    <button
-                                        key={`assistant-star-${value}`}
-                                        type="button"
-                                        onClick={() => setRatingAsisten(value)}
-                                        className="p-1 mx-2"
-                                    >
-                                        <svg
-                                            className={`h-8 w-8 drop-shadow-sm transition ${value <= ratingAsisten ? "text-yellow-400" : "text-depth-disabled"
-                                                }`}
-                                            viewBox="0 0 24 24"
-                                            fill="currentColor"
-                                        >
-                                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-                                        </svg>
-                                    </button>
-                                ))}
-                            </div>
+
+                        <div>
+                            <h3 className="text-sm font-semibold text-depth-primary">
+                                Asisten
+                            </h3>
+
+                            <RatingStars
+                                value={ratingAsisten}
+                                onChange={
+                                    setRatingAsisten
+                                }
+                            />
                         </div>
                     </div>
 
                     <div className="mt-6">
-                        <label htmlFor="feedback" className="mb-2 block text-sm font-semibold text-depth-primary">
+                        <label
+                            htmlFor="feedback"
+                            className="mb-2 block text-sm font-semibold text-depth-primary"
+                        >
                             Feedback Praktikan
                         </label>
+
                         <textarea
                             id="feedback"
                             value={feedback}
-                            onChange={(event) => setFeedback(event.target.value.slice(0, 1000))}
                             rows={8}
                             maxLength={1000}
-                            className="w-full rounded-depth-lg border border-depth bg-depth-card p-4 text-sm text-depth-primary shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:ring-offset-0"
+                            onChange={(e) =>
+                                setFeedback(
+                                    e.target.value.slice(
+                                        0,
+                                        1000,
+                                    ),
+                                )
+                            }
                             placeholder="Bagikan pengalaman Anda selama praktikum, kendala yang dihadapi, saran perbaikan, atau hal lain yang ingin disampaikan..."
+                            className="w-full rounded-depth-lg border border-depth bg-depth-card p-4 text-sm text-depth-primary shadow-depth-inset transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
                         />
+
                         <div className="mt-2 flex items-center justify-between text-xs">
-                            <span className={feedbackLength < 10 || feedbackLength > 1000 ? "text-red-500" : "text-green-600 dark:text-green-400"}>
-                                {feedbackLength < 10
-                                    ? `Minimal 10 karakter (${Math.max(0, 10 - feedbackLength)} lagi)`
-                                    : feedbackLength > 1000
-                                        ? `Terlalu panjang (${feedbackLength - 1000} karakter lebih)`
-                                        : "Feedback sudah cukup"}
+                            <span
+                                className={
+                                    feedbackValid
+                                        ? "text-green-600 dark:text-green-400"
+                                        : "text-red-500"
+                                }
+                            >
+                                {length < 10
+                                    ? `Minimal 10 karakter (${10 - length} lagi)`
+                                    : "Feedback sudah cukup"}
+                            </span>
+
+                            <span className="text-depth-secondary">
+                                {length} / 1000 karakter
                             </span>
-                            <span className="text-depth-secondary">{feedbackLength} / 1000 karakter</span>
                         </div>
                     </div>
 
-                    <div className="mt-6 mb-10 flex flex-col justify-end gap-3 sm:flex-row">
+                    <div className="mb-10 mt-6 flex justify-end">
                         <button
                             type="button"
-                            onClick={handleSubmit}
-                            disabled={isSubmitDisabled}
-                            className={`glass-button inline-flex min-w-[160px] items-center justify-center gap-2 rounded-depth-lg px-6 py-3 font-semibold shadow-depth-md transition-all ${isSubmitDisabled ? "cursor-not-allowed opacity-50" : "hover:-translate-y-0.5 hover:shadow-depth-lg"
-                                }`}
-                            style={{
-                                background: isSubmitDisabled
+                            onClick={submit}
+                            disabled={disabled}
+                            className={`glass-button inline-flex min-w-[160px] items-center justify-center gap-2 rounded-depth-lg px-6 py-3 font-semibold shadow-depth-md transition ${
+                                disabled
+                                    ? "cursor-not-allowed opacity-50"
+                                    : "hover:-translate-y-0.5 hover:shadow-depth-lg"
+                            }`}
+                            style={
+                                disabled
                                     ? undefined
-                                    : "linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))",
-                            }}
+                                    : {
+                                          background:
+                                              "linear-gradient(135deg, rgba(34,197,94,.9), rgba(22,163,74,.9))",
+                                      }
+                            }
                         >
-                            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                            {isSubmitting ? "Mengirim..." : "Kirim Feedback"}
+                            {submitting
+                                ? "Mengirim..."
+                                : "Kirim Feedback"}
                         </button>
                     </div>
                 </div>
diff --git a/resources/js/Components/Praktikans/Sections/Jurnal.jsx b/resources/js/Components/Praktikans/Sections/Jurnal.jsx
index 7539619..1c83895 100644
--- a/resources/js/Components/Praktikans/Sections/Jurnal.jsx
+++ b/resources/js/Components/Praktikans/Sections/Jurnal.jsx
@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
+import { Image } from "@imagekit/react";
 import MarkdownRenderer from "../../MarkdownRenderer";
 import QuestionCommentInput from "./QuestionCommentInput";
+import QuestionNavigator from "@/Components/Praktikans/Common/QuestionNavigator";
+import useQuestionNavigation from "@/hooks/praktikum/useQuestionNavigation";
 import { useImageKitUpload } from "@/hooks/useImageKitUpload";
-import { Image } from "@imagekit/react";
-
 
 export default function Jurnal({
     isLoading = false,
@@ -11,519 +12,138 @@ export default function Jurnal({
     questions = [],
     answers = [],
     setAnswers,
-    setQuestionsCount,
-    onSubmitTask,
-    tipeSoal = null,
+    tipeSoal = "jurnal",
     praktikanId = null,
-    isCommentEnabled = false,
+    isCommentEnabled = false
 }) {
-    const [uploadingIndexes, setUploadingIndexes] = useState({});
-    const [uploadProgress, setUploadProgress] = useState({});
+    const [uploading, setUploading] = useState({});
     const [previews, setPreviews] = useState({});
     const { upload } = useImageKitUpload();
-
-    useEffect(() => {
-        setQuestionsCount(Array.isArray(questions) ? questions.length : 0);
-    }, [questions, setQuestionsCount]);
-
-    const groupedQuestions = useMemo(() => {
-        if (!Array.isArray(questions)) {
-            return { fitb: [], jurnal: [] };
-        }
-
-        return {
-            fitb: questions.filter((question) => question.questionType === "fitb"),
-            jurnal: questions.filter((question) => question.questionType !== "fitb"),
-        };
-    }, [questions]);
-
-    const handleInputChange = (index, value) => {
-        const updated = [...answers];
-        updated[index] = value;
-        setAnswers(updated);
+    const { panelRef, active, setActive, goTo } = useQuestionNavigation(questions);
+
+    useEffect(() => () => {
+        Object.values(previews).forEach((url) => url && URL.revokeObjectURL(url));
+    }, [previews]);
+
+    const update = (index, value) => {
+        setActive(index);
+        setAnswers((prev) => {
+            const next = [...prev];
+            next[index] = value;
+            return next;
+        });
     };
 
-    const triggerFileInput = (index) => {
-        const input = document.getElementById(`file-upload-${index}`);
-        if (input) {
-            input.click();
-        }
-    };
+    const pick = (index) => document.getElementById(`jurnal-file-${index}`)?.click();
 
-    const handleFileUpload = async (index, file) => {
-        if (!file) {
-            return;
-        }
+    const uploadFile = async (index, file) => {
+        if (!file) return;
+        if (file.size > 10 * 1024 * 1024) return alert("File size must be less than 10MB");
+        if (!file.type.startsWith("image/")) return alert("Please upload an image file");
 
-        // Check file size (10MB limit)
-        if (file.size > 10485760) {
-            alert("File size must be less than 10MB");
-            return;
-        }
+        setActive(index);
+        setUploading((x) => ({ ...x, [index]: true }));
 
-        // Check file type (images only)
-        if (!file.type.startsWith('image/')) {
-            alert("Please upload an image file");
-            return;
-        }
+        const old = previews[index];
+        if (old) URL.revokeObjectURL(old);
 
-        setUploadingIndexes(prev => ({ ...prev, [index]: true }));
-        setUploadProgress(prev => ({ ...prev, [index]: 0 }));
+        const preview = URL.createObjectURL(file);
+        setPreviews((x) => ({ ...x, [index]: preview }));
 
         try {
-            // Create preview
-            const previewUrl = URL.createObjectURL(file);
-            setPreviews(prev => ({ ...prev, [index]: previewUrl }));
-
-            // Upload to ImageKit
-            const uploadResult = await upload(file, 'daskom/jawaban-jurnal', null, true);
-
-            // Store the upload metadata in answers
-            const updated = [...answers];
-            updated[index] = {
-                type: 'file',
-                url: uploadResult.url,
-                fileId: uploadResult.fileId,
-                filePath: uploadResult.filePath,
-            };
-            setAnswers(updated);
-
+            const result = await upload(file, "daskom/jawaban-jurnal", null, true);
+            update(index, { type: "file", url: result.url, fileId: result.fileId, filePath: result.filePath });
         } catch (error) {
-            console.error('Upload error:', error);
-            alert('Failed to upload file. Please try again.');
-            setPreviews(prev => {
-                const newPreviews = { ...prev };
-                delete newPreviews[index];
-                return newPreviews;
+            console.error("[Jurnal Upload]", error);
+            URL.revokeObjectURL(preview);
+            setPreviews((x) => {
+                const next = { ...x };
+                delete next[index];
+                return next;
             });
+            alert("Failed to upload file. Please try again.");
         } finally {
-            setUploadingIndexes(prev => {
-                const newState = { ...prev };
-                delete newState[index];
-                return newState;
-            });
-            setUploadProgress(prev => {
-                const newState = { ...prev };
-                delete newState[index];
-                return newState;
+            setUploading((x) => {
+                const next = { ...x };
+                delete next[index];
+                return next;
             });
         }
     };
 
-    const handleDeleteFile = (index) => {
-        // Clear the file data
-        const updated = [...answers];
-        updated[index] = '';
-        setAnswers(updated);
-
-        // Clear preview
-        setPreviews(prev => {
-            const newPreviews = { ...prev };
-            if (newPreviews[index]) {
-                URL.revokeObjectURL(newPreviews[index]);
-                delete newPreviews[index];
-            }
-            return newPreviews;
+    const removeFile = (index) => {
+        const preview = previews[index];
+        if (preview) URL.revokeObjectURL(preview);
+        setPreviews((x) => {
+            const next = { ...x };
+            delete next[index];
+            return next;
         });
+        update(index, "");
     };
 
-    const handleSubmit = () => {
-        if (onSubmitTask) {
-            onSubmitTask("Jurnal", answers);
-        }
-    };
-
-
-
-    if (isLoading) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Memuat soal jurnal...</p>
-            </div>
-        );
-    }
-
-    if (errorMessage) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-red-400 font-semibold">{errorMessage}</p>
-            </div>
-        );
-    }
-
-    if (!Array.isArray(questions) || questions.length === 0) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Belum ada soal untuk modul ini.</p>
-            </div>
-        );
-    }
+    if (isLoading) return <State>Memuat soal Jurnal...</State>;
+    if (errorMessage) return <State error>{errorMessage}</State>;
+    if (!questions.length) return <State>Belum ada soal Jurnal untuk modul ini.</State>;
 
     return (
-        <div className="p-5 py-0 transition-all duration-300 w-full ">
-            {/* Header */}
-            <div className="flex bg-[var(--depth-color-primary)] rounded-depth-lg py-2 px-3 mb-4 justify-center shadow-depth-lg">
-                <h1 className="text-white text-center font-bold text-lg">
-                    Jurnal
-                </h1>
-            </div>
-
-            {/* Questions Container */}
-            <div className="space-y-5 max-h-[80vh] p-4 rounded-depth-lg border border-depth bg-depth-card overflow-y-auto overflow-x-hidden shadow-depth-lg">
-                {/* FITB Questions Section */}
-                {groupedQuestions.fitb.length > 0 && (
-                    <section className="space-y-4">
-                        {groupedQuestions.fitb.map((question) => {
-                            const index = questions.findIndex((item) => item.id === question.id);
-
-                            if (index === -1) {
-                                return null;
-                            }
-
-                            const isFileUploadEnabled = question.enable_file_upload || false;
-                            const currentAnswer = answers[index];
-                            const isFileAnswer = typeof currentAnswer === 'object' && currentAnswer?.type === 'file';
-
-                            return (
-                                <div
-                                    key={question.id ?? `fitb-${index}`}
-                                    className="p-3.5 rounded-depth-lg border border-depth bg-depth-interactive shadow-depth-md hover:shadow-depth-lg transition-all duration-200"
-                                >
-                                    {/* Question and Answer Side by Side */}
-                                    <div className="grid grid-cols-2 gap-4">
-                                        {/* Question Column */}
-                                        <div className="flex flex-col gap-3">
-                                            {/* Question Number and Text */}
-                                            <div className="mb-3">
-                                                <div className="flex items-start gap-2.5 pr-8">
-                                                    <span className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-depth-full bg-[var(--depth-color-primary)] text-white font-bold text-xs shadow-depth-sm">
-                                                        {index + 1}
-                                                    </span>
-                                                    <div className="flex-1 min-w-0 text-depth-primary font-medium text-sm leading-relaxed max-h-[60vh] overflow-y-auto">
-                                                        <MarkdownRenderer content={question.text} />
-                                                    </div>
-                                                </div>
-                                                <QuestionCommentInput
-                                                    questionId={question.id ?? question.soalId ?? question.soal_id ?? null}
-                                                    tipeSoal={question.questionType === "fitb" ? "fitb" : tipeSoal}
-                                                    praktikanId={praktikanId}
-                                                    isEnabled={isCommentEnabled}
-                                                    className="pl-11"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        {/* Answer Column */}
-                                        <div className="flex flex-col gap-3 min-w-0">
-                                            {isFileUploadEnabled ? (
-                                                <div className="space-y-3">
-                                                    {!isFileAnswer && !previews[index] ? (
-                                                        <div>
-                                                            <label
-                                                                htmlFor={`file-upload-${index}`}
-                                                                className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-depth rounded-depth-md cursor-pointer bg-depth-card hover:bg-depth-hover transition-all"
-                                                            >
-                                                                <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                                                                    <svg
-                                                                        className="w-10 h-10 mb-3 text-depth-secondary"
-                                                                        fill="none"
-                                                                        stroke="currentColor"
-                                                                        viewBox="0 0 24 24"
-                                                                    >
-                                                                        <path
-                                                                            strokeLinecap="round"
-                                                                            strokeLinejoin="round"
-                                                                            strokeWidth={2}
-                                                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                                                                        />
-                                                                    </svg>
-                                                                    <p className="mb-2 text-sm text-depth-secondary">
-                                                                        <span className="font-semibold">Click to upload</span> or drag and drop
-                                                                    </p>
-                                                                    <p className="text-xs text-depth-secondary">
-                                                                        PNG, JPG, GIF up to 10MB
-                                                                    </p>
-                                                                </div>
-                                                            </label>
-                                                            <div className="mt-3 text-right">
-                                                                <button
-                                                                    type="button"
-                                                                    onClick={() => triggerFileInput(index)}
-                                                                    className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                >
-                                                                    Pilih File
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    ) : (
-                                                        <div className="relative rounded-depth-md border border-depth bg-depth-card p-3">
-                                                            {uploadingIndexes[index] ? (
-                                                                <div className="flex flex-col items-center justify-center py-8">
-                                                                    <div className="w-16 h-16 border-4 border-[var(--depth-color-primary)] border-t-transparent rounded-full animate-spin mb-3"></div>
-                                                                    <p className="text-sm text-depth-secondary">
-                                                                        Uploading... {uploadProgress[index]}%
-                                                                    </p>
-                                                                </div>
-                                                            ) : (
-                                                                <>
-                                                                    {isFileAnswer && currentAnswer.url ? (
-                                                                        <Image
-                                                                            src={currentAnswer.url}
-                                                                            alt="Uploaded answer"
-                                                                            transformation={[{ width: "800", quality: "80" }]}
-                                                                            className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                            loading="lazy"
-                                                                        />
-                                                                    ) : previews[index] ? (
-                                                                        <img
-                                                                            src={previews[index]}
-                                                                            alt="Preview"
-                                                                            className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                        />
-                                                                    ) : null}
-
-                                                                    <button
-                                                                        type="button"
-                                                                        onClick={() => handleDeleteFile(index)}
-                                                                        className="absolute top-5 right-5 p-2 rounded-depth-full bg-red-500 text-white hover:bg-red-600 shadow-depth-md transition-all"
-                                                                        title="Delete image"
-                                                                    >
-                                                                        <svg
-                                                                            className="w-5 h-5"
-                                                                            fill="none"
-                                                                            stroke="currentColor"
-                                                                            viewBox="0 0 24 24"
-                                                                        >
-                                                                            <path
-                                                                                strokeLinecap="round"
-                                                                                strokeLinejoin="round"
-                                                                                strokeWidth={2}
-                                                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                                                            />
-                                                                        </svg>
-                                                                    </button>
-                                                                    <div className="mt-3 text-right">
-                                                                        <button
-                                                                            type="button"
-                                                                            onClick={() => triggerFileInput(index)}
-                                                                            className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                        >
-                                                                            Ganti File
-                                                                        </button>
-                                                                    </div>
-                                                                </>
-                                                            )}
-                                                        </div>
-                                                    )}
-                                                    <input
-                                                        id={`file-upload-${index}`}
-                                                        type="file"
-                                                        className="hidden"
-                                                        accept="image/*"
-                                                        onChange={(e) => {
-                                                            const file = e.target.files[0];
-                                                            if (file) {
-                                                                handleFileUpload(index, file);
-                                                            }
-                                                        }}
-                                                        disabled={uploadingIndexes[index]}
-                                                    />
-                                                </div>
-                                            ) : (
-                                                <textarea
-                                                    className="w-full bg-depth-card h-full   p-3 border border-depth rounded-depth-md text-depth-primary placeholder-depth-secondary shadow-depth-sm focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:border-transparent transition-all "
-                                                    placeholder="Masukkan jawaban di sini..."
-                                                    value={answers[index] ?? ""}
-                                                    onChange={(event) => handleInputChange(index, event.target.value)}
-                                                />
-                                            )}
-                                        </div>
-                                    </div>
+        <div className="w-full p-5 py-0">
+            <div className="mb-4 flex justify-center rounded-depth-lg bg-[var(--depth-color-primary)] px-3 py-2 shadow-depth-lg"><h1 className="text-lg font-bold text-white">Jurnal</h1></div>
+            <div ref={panelRef} className="max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-lg" style={{ overflowAnchor: "none" }}>
+                <QuestionNavigator questions={questions} answers={answers} active={active} onChange={goTo} />
+                <div className="space-y-4">
+                    {questions.map((q, index) => {
+                        const fileEnabled = Boolean(q.enable_file_upload);
+                        const answer = answers[index];
+                        const fileAnswer = typeof answer === "object" && answer?.type === "file";
+                        const preview = previews[index];
+                        const image = fileAnswer ? answer.url : preview;
+                        const isFitb = q.questionType === "fitb";
+
+                        return (
+                            <div key={q.key ?? `${q.questionType}:${q.id ?? index}`} data-question-index={index} onClick={() => setActive(index)} onFocusCapture={() => setActive(index)} className="rounded-depth-lg border border-depth bg-depth-interactive p-4 shadow-depth-md">
+                                <div className="mb-3 flex items-center gap-2">
+                                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-depth-full bg-[var(--depth-color-primary)] text-xs font-bold text-white">{index + 1}</span>
+                                    <span className="rounded-depth-md border border-depth bg-depth-card px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-depth-secondary">{isFitb ? "FITB" : "Jurnal"}</span>
                                 </div>
-                            );
-                        })}
-                    </section>
-                )}
-
-                {/* Jurnal Questions Section */}
-                {groupedQuestions.jurnal.length > 0 && (
-                    <section className="space-y-4">
-                        {groupedQuestions.jurnal.map((question) => {
-                            const index = questions.findIndex((item) => item.id === question.id);
-
-                            if (index === -1) {
-                                return null;
-                            }
-
-                            const isFileUploadEnabled = question.enable_file_upload || false;
-                            const currentAnswer = answers[index];
-                            const isFileAnswer = typeof currentAnswer === 'object' && currentAnswer?.type === 'file';
-
-                            return (
-                                <div
-                                    key={question.id ?? `jurnal-${index}`}
-                                    className="p-3.5 rounded-depth-lg border border-depth bg-depth-interactive shadow-depth-md hover:shadow-depth-lg transition-all duration-200"
-                                >
-                                    {/* Question and Answer Side by Side */}
-                                    <div className="grid grid-cols-2 gap-4">
-                                        {/* Question Column */}
-                                        <div className="flex flex-col gap-3 min-w-0">
-                                            {/* Question Number and Text */}
-                                            <div className="mb-3">
-                                                <div className="flex items-start gap-2.5 pr-8">
-                                                    <span className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-depth-full bg-[var(--depth-color-primary)] text-white font-bold text-xs shadow-depth-sm">
-                                                        {index + 1}
-                                                    </span>
-                                                    <div className="flex-1 min-w-0 text-depth-primary font-medium text-sm leading-relaxed">
-                                                        <MarkdownRenderer content={question.text} />
-                                                    </div>
-                                                </div>
-                                                <QuestionCommentInput
-                                                    questionId={question.id ?? question.soalId ?? question.soal_id ?? null}
-                                                    tipeSoal={question.questionType === "fitb" ? "fitb" : tipeSoal}
-                                                    praktikanId={praktikanId}
-                                                    isEnabled={isCommentEnabled}
-                                                    className="pl-11"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        {/* Answer Column */}
-                                        <div className="flex flex-col gap-3 min-w-0">
-                                            {isFileUploadEnabled ? (
-                                                <div className="space-y-3">
-                                                    {/* File Upload Area */}
-                                                    {!isFileAnswer && !previews[index] ? (
-                                                        <div>
-                                                            <label
-                                                                htmlFor={`file-upload-${index}`}
-                                                                className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-depth rounded-depth-md cursor-pointer bg-depth-card hover:bg-depth-hover transition-all"
-                                                            >
-                                                                <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                                                                    <svg
-                                                                        className="w-10 h-10 mb-3 text-depth-secondary"
-                                                                        fill="none"
-                                                                        stroke="currentColor"
-                                                                        viewBox="0 0 24 24"
-                                                                    >
-                                                                        <path
-                                                                            strokeLinecap="round"
-                                                                            strokeLinejoin="round"
-                                                                            strokeWidth={2}
-                                                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                                                                        />
-                                                                    </svg>
-                                                                    <p className="mb-2 text-sm text-depth-secondary">
-                                                                        <span className="font-semibold">Click to upload</span> or drag and drop
-                                                                    </p>
-                                                                    <p className="text-xs text-depth-secondary">
-                                                                        PNG, JPG, GIF up to 10MB
-                                                                    </p>
-                                                                </div>
-                                                            </label>
-                                                            <div className="mt-3 text-right">
-                                                                <button
-                                                                    type="button"
-                                                                    onClick={() => triggerFileInput(index)}
-                                                                    className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                >
-                                                                    Pilih File
-                                                                </button>
-                                                            </div>
-                                                            <input
-                                                                id={`file-upload-${index}`}
-                                                                type="file"
-                                                                className="hidden"
-                                                                accept="image/*"
-                                                                onChange={(e) => {
-                                                                    const file = e.target.files[0];
-                                                                    if (file) {
-                                                                        handleFileUpload(index, file);
-                                                                    }
-                                                                }}
-                                                                disabled={uploadingIndexes[index]}
-                                                            />
-                                                        </div>
-                                                    ) : (
-                                                        /* Image Preview */
-                                                        <div className="relative rounded-depth-md border border-depth bg-depth-card p-3">
-                                                            {uploadingIndexes[index] ? (
-                                                                <div className="flex flex-col items-center justify-center py-8">
-                                                                    <div className="w-16 h-16 border-4 border-[var(--depth-color-primary)] border-t-transparent rounded-full animate-spin mb-3"></div>
-                                                                    <p className="text-sm text-depth-secondary">
-                                                                        Uploading... {uploadProgress[index]}%
-                                                                    </p>
-                                                                </div>
-                                                            ) : (
-                                                                <>
-                                                                    {isFileAnswer && currentAnswer.url ? (
-                                                                        <Image
-                                                                            src={currentAnswer.url}
-                                                                            alt="Uploaded answer"
-                                                                            transformation={[{ width: "800", quality: "80" }]}
-                                                                            className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                            loading="lazy"
-                                                                        />
-                                                                    ) : previews[index] ? (
-                                                                        <img
-                                                                            src={previews[index]}
-                                                                            alt="Preview"
-                                                                            className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                        />
-                                                                    ) : null}
-
-                                                                    {/* Delete Button */}
-                                                                    <button
-                                                                        type="button"
-                                                                        onClick={() => handleDeleteFile(index)}
-                                                                        className="absolute top-5 right-5 p-2 rounded-depth-full bg-red-500 text-white hover:bg-red-600 shadow-depth-md transition-all"
-                                                                        title="Delete image"
-                                                                    >
-                                                                        <svg
-                                                                            className="w-5 h-5"
-                                                                            fill="none"
-                                                                            stroke="currentColor"
-                                                                            viewBox="0 0 24 24"
-                                                                        >
-                                                                            <path
-                                                                                strokeLinecap="round"
-                                                                                strokeLinejoin="round"
-                                                                                strokeWidth={2}
-                                                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                                                            />
-                                                                        </svg>
-                                                                    </button>
-                                                                    <div className="mt-3 text-right">
-                                                                        <button
-                                                                            type="button"
-                                                                            onClick={() => triggerFileInput(index)}
-                                                                            className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                        >
-                                                                            Ganti File
-                                                                        </button>
-                                                                    </div>
-                                                                </>
-                                                            )}
-                                                        </div>
-                                                    )}
+                                <div className="grid gap-4 md:grid-cols-2">
+                                    <div className="min-w-0">
+                                        <div className="text-sm font-medium leading-relaxed text-depth-primary"><MarkdownRenderer content={q.text} /></div>
+                                        <QuestionCommentInput questionId={q.id ?? q.soalId ?? q.soal_id ?? null} tipeSoal={isFitb ? "fitb" : tipeSoal} praktikanId={praktikanId} isEnabled={isCommentEnabled} className="mt-2" />
+                                    </div>
+                                    {fileEnabled ? (
+                                        <div className="min-w-0">
+                                            {image ? (
+                                                <div className="relative rounded-depth-md border border-depth bg-depth-card p-3">
+                                                    {uploading[index] ? <div className="flex min-h-40 items-center justify-center text-sm font-semibold text-depth-secondary">Uploading...</div> : fileAnswer && answer.url ? <Image src={answer.url} alt={`Jawaban soal ${index + 1}`} transformation={[{ width: "800", quality: "80" }]} className="max-h-96 w-full rounded-depth-md object-contain" loading="lazy" /> : <img src={preview} alt={`Preview soal ${index + 1}`} className="max-h-96 w-full rounded-depth-md object-contain" />}
+                                                    {!uploading[index] && <div className="mt-3 flex justify-end gap-2"><button type="button" onClick={(e) => { e.stopPropagation(); pick(index); }} className="rounded-depth-md border border-depth bg-depth-interactive px-3 py-1.5 text-xs font-semibold text-depth-primary">Ganti File</button><button type="button" onClick={(e) => { e.stopPropagation(); removeFile(index); }} className="rounded-depth-md bg-red-500 px-3 py-1.5 text-xs font-semibold text-white">Hapus</button></div>}
                                                 </div>
                                             ) : (
-                                                /* Text Input */
-                                                <textarea
-                                                    className="w-full bg-depth-card h-full p-3 border border-depth rounded-depth-md text-depth-primary placeholder-depth-secondary shadow-depth-sm focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)] focus:border-transparent transition-all "
-                                                    placeholder="Tulis jawaban lengkap Anda di sini..."
-                                                    value={answers[index] ?? ""}
-                                                    onChange={(event) => handleInputChange(index, event.target.value)}
-                                                />
+                                                <button type="button" onClick={(e) => { e.stopPropagation(); pick(index); }} className="flex min-h-40 w-full flex-col items-center justify-center rounded-depth-md border-2 border-dashed border-depth bg-depth-card p-5 text-center text-sm text-depth-secondary transition hover:bg-depth-interactive">
+                                                    <svg className="mb-2 h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
+                                                    <span className="font-semibold">Pilih gambar</span>
+                                                    <span className="mt-1 text-xs">PNG, JPG, GIF • max 10MB</span>
+                                                </button>
                                             )}
+                                            <input id={`jurnal-file-${index}`} type="file" accept="image/*" className="hidden" disabled={uploading[index]} onChange={(e) => {
+                                                const file = e.target.files?.[0];
+                                                e.target.value = "";
+                                                if (file) uploadFile(index, file);
+                                            }} />
                                         </div>
-                                    </div>
+                                    ) : (
+                                        <textarea value={answers[index] ?? ""} onChange={(e) => update(index, e.target.value)} onFocus={() => setActive(index)} placeholder="Masukkan jawaban di sini..." className="min-h-40 w-full resize-y rounded-depth-md border border-depth bg-depth-card p-3 text-sm text-depth-primary shadow-depth-inset focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]" />
+                                    )}
                                 </div>
-                            );
-                        })}
-                    </section>
-                )}
+                            </div>
+                        );
+                    })}
+                </div>
             </div>
         </div>
     );
 }
+
+function State({ children, error = false }) {
+    return <div className={`mx-auto mt-[20vh] p-5 text-center text-sm font-semibold ${error ? "text-red-400" : "text-depth-secondary"}`}>{children}</div>;
+}
diff --git a/resources/js/Components/Praktikans/Sections/Mandiri.jsx b/resources/js/Components/Praktikans/Sections/Mandiri.jsx
index 166cb61..2a15a61 100644
--- a/resources/js/Components/Praktikans/Sections/Mandiri.jsx
+++ b/resources/js/Components/Praktikans/Sections/Mandiri.jsx
@@ -8,28 +8,16 @@ export default function Mandiri({
     questions = [],
     answers = [],
     setAnswers,
-    setQuestionsCount,
-    onSubmitTask,
     tipeSoal = null,
     praktikanId = null,
     isCommentEnabled = false,
 }) {
-    useEffect(() => {
-        setQuestionsCount(Array.isArray(questions) ? questions.length : 0);
-    }, [questions, setQuestionsCount]);
-
     const handleInputChange = (index, value) => {
         const updated = [...answers];
         updated[index] = value;
         setAnswers(updated);
     };
 
-    const handleSubmit = () => {
-        if (onSubmitTask) {
-            onSubmitTask("Mandiri", answers);
-        }
-    };
-
     if (isLoading) {
         return (
             <div className="mt-[1vh] p-5 text-center">
diff --git a/resources/js/Components/Praktikans/Sections/TesAwal.jsx b/resources/js/Components/Praktikans/Sections/TesAwal.jsx
index 442b779..6af676b 100644
--- a/resources/js/Components/Praktikans/Sections/TesAwal.jsx
+++ b/resources/js/Components/Praktikans/Sections/TesAwal.jsx
@@ -1,134 +1,71 @@
 import { useEffect } from "react";
-import QuestionCommentInput from "./QuestionCommentInput";
 import MarkdownRenderer from "../../MarkdownRenderer";
 
-export default function TesAwal({
-    isLoading = false,
-    errorMessage = null,
-    questions = [],
-    answers = [],
-    setAnswers,
-    setQuestionsCount,
-    onSubmitTask,
-    tipeSoal = null,
-    praktikanId = null,
-    isCommentEnabled = false,
-}) {
-    useEffect(() => {
-        setQuestionsCount(questions.length);
-    }, [questions, setQuestionsCount]);
+import QuestionCommentInput from "./QuestionCommentInput";
+import QuestionNavigator from "@/Components/Praktikans/Common/QuestionNavigator";
+import useQuestionNavigation from "@/hooks/praktikum/useQuestionNavigation";
 
-    const handleOptionChange = (index, optionId) => {
-        const updated = [...answers];
-        updated[index] = optionId;
-        setAnswers(updated);
-    };
+export default function TesAwal({ isLoading = false, errorMessage = null, questions = [], answers = [], setAnswers, tipeSoal = "ta", praktikanId = null, isCommentEnabled = false }) {
+    const { panelRef, active, setActive, goTo } = useQuestionNavigation(questions);
 
-    const handleSubmit = () => {
-        if (onSubmitTask) {
-            onSubmitTask("TesAwal", answers);
-        }
+    const select = (index, optionId) => {
+        setActive(index);
+        setAnswers((prev) => {
+            const next = [...prev];
+            next[index] = optionId;
+            return next;
+        });
     };
 
-    if (isLoading) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Memuat soal tes awal...</p>
-            </div>
-        );
-    }
-
-    if (errorMessage) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-red-400 font-semibold">{errorMessage}</p>
-            </div>
-        );
-    }
-
-    if (!Array.isArray(questions) || questions.length === 0) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Belum ada soal tes awal untuk modul ini.</p>
-            </div>
-        );
-    }
+    if (isLoading) return <State>Memuat soal Tes Awal...</State>;
+    if (errorMessage) return <State error>{errorMessage}</State>;
+    if (!questions.length) return <State>Belum ada soal Tes Awal untuk modul ini.</State>;
 
     return (
-        <div className=" transition-all duration-300 w-full ">
-            {/* Header */}
-            <div className="flex bg-[var(--depth-color-primary)] rounded-depth-lg py-2 px-3 mb-4 justify-center shadow-depth-lg">
-                <h1 className="text-white text-center font-bold text-lg">
-                    Tes Awal
-                </h1>
-            </div>
-
-            {/* Questions Container */}
-            <div className="space-y-5 max-h-[80vh] p-4 pb-14 rounded-depth-lg border border-depth bg-depth-card overflow-y-auto overflow-x-hidden shadow-depth-lg">
-                {questions.map((question, index) => (
-                    <div
-                        key={question.id ?? index}
-                        className="p-3.5 rounded-depth-lg hover:shadow-depth-lg transition-all duration-200 w-[70%]"
-                    >
-                        {/* Question Number and Text */}
-                        <div className="mb-3">
-                            <div className="flex items-start gap-2.5">
-                                <span className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-depth-full bg-[var(--depth-color-primary)] text-white font-bold text-xs shadow-depth-sm">
-                                    {index + 1}
-                                </span>
-                                <div className="flex-1 text-depth-primary font-medium text-sm leading-relaxed">
-                                    <MarkdownRenderer content={question.text} />
+        <div className="w-full p-5 py-0">
+            <Header title="Tes Awal" />
+            <div ref={panelRef} className="max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-lg" style={{ overflowAnchor: "none" }}>
+                <QuestionNavigator questions={questions} answers={answers} active={active} onChange={goTo} />
+                <div className="space-y-4">
+                    {questions.map((q, index) => (
+                        <div key={q.id ?? index} data-question-index={index} onClick={() => setActive(index)} onFocusCapture={() => setActive(index)} className="rounded-depth-lg border border-depth bg-depth-interactive p-4 shadow-depth-md">
+                            <div className="mb-4 flex items-start gap-3">
+                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-depth-full bg-[var(--depth-color-primary)] text-xs font-bold text-white">{index + 1}</span>
+                                <div className="min-w-0 flex-1">
+                                    <div className="text-sm font-medium leading-relaxed text-depth-primary"><MarkdownRenderer content={q.text} /></div>
+                                    <QuestionCommentInput questionId={q.id ?? q.soalId ?? q.soal_id ?? null} tipeSoal={tipeSoal} praktikanId={praktikanId} isEnabled={isCommentEnabled} className="mt-2" />
                                 </div>
                             </div>
-                            <QuestionCommentInput
-                                questionId={question.id ?? question.soalId ?? question.soal_id ?? null}
-                                tipeSoal={tipeSoal}
-                                praktikanId={praktikanId}
-                                isEnabled={isCommentEnabled}
-                                className="pl-11"
-                            />
-                        </div>
-
-                        {/* Options */}
-                        <div className="space-y-2 pl-8">
-                            {(question.options ?? []).map((option, optIdx) => {
-                                const isSelected = answers[index] === option.id;
-                                const optionLabels = ['A', 'B', 'C', 'D'];
-
-                                return (
-                                    <label
-                                        key={option.id}
-                                        className={`max-w-3xl group flex gap-2.5 rounded-depth-md border px-3 py-2 text-xs transition-all duration-200 cursor-pointer ${isSelected
-                                            ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/15 shadow-depth-sm scale-[1.01]"
-                                            : "border-depth bg-depth-card hover:border-[var(--depth-color-primary)]/40 hover:bg-[var(--depth-color-primary)]/5 hover:shadow-depth-sm"
-                                            }`}
-                                        onClick={() => handleOptionChange(index, option.id)}
-                                    >
-                                        <input
-                                            type="radio"
-                                            name={`tes-awal-${question.id}`}
-                                            value={option.id}
-                                            checked={isSelected}
-                                            onChange={() => { }}
-                                            className="sr-only"
-                                        />
-                                        <span className={`mr-1.5 flex items-center justify-center w-5 h-5 rounded-depth-md text-[10px] font-bold transition-all duration-200 flex-shrink-0 ${isSelected
-                                            ? "bg-[var(--depth-color-primary)] text-white shadow-depth-sm"
-                                            : "bg-depth-interactive text-depth-secondary group-hover:bg-[var(--depth-color-primary)]/20 group-hover:text-depth-primary"
-                                            }`}>
-                                            {optionLabels[optIdx]}
-                                        </span>
-                                        <div className={`flex-1 leading-relaxed transition-colors duration-200 text-sm ${isSelected ? "text-depth-primary font-medium" : "text-depth-primary"
-                                            }`}>
-                                            <MarkdownRenderer content={option.text} />
+                            <div role="radiogroup" className="grid gap-2 sm:grid-cols-2">
+                                {(q.options ?? []).map((option) => {
+                                    const selected = String(answers[index] ?? "") === String(option.id);
+                                    return (
+                                        <div key={option.id} role="radio" tabIndex={0} aria-checked={selected} onMouseDown={(e) => e.preventDefault()} onClick={() => select(index, option.id)} onKeyDown={(e) => {
+                                            if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                select(index, option.id);
+                                            }
+                                        }} className={`cursor-pointer rounded-depth-md border p-3 text-sm transition ${selected ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white shadow-depth-md" : "border-depth bg-depth-card text-depth-primary hover:bg-depth-interactive"}`}>
+                                            <div className="flex items-start gap-2">
+                                                <span className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${selected ? "border-white" : "border-depth"}`}>{selected && <span className="h-2 w-2 rounded-full bg-white" />}</span>
+                                                <div className="min-w-0 flex-1"><MarkdownRenderer content={option.text} /></div>
+                                            </div>
                                         </div>
-                                    </label>
-                                );
-                            })}
+                                    );
+                                })}
+                            </div>
                         </div>
-                    </div>
-                ))}
+                    ))}
+                </div>
             </div>
         </div>
     );
 }
+
+function Header({ title }) {
+    return <div className="mb-4 flex justify-center rounded-depth-lg bg-[var(--depth-color-primary)] px-3 py-2 shadow-depth-lg"><h1 className="text-lg font-bold text-white">{title}</h1></div>;
+}
+
+function State({ children, error = false }) {
+    return <div className={`mx-auto mt-[20vh] p-5 text-center text-sm font-semibold ${error ? "text-red-400" : "text-depth-secondary"}`}>{children}</div>;
+}
diff --git a/resources/js/Components/Praktikans/Sections/TesKeterampilan.jsx b/resources/js/Components/Praktikans/Sections/TesKeterampilan.jsx
index a56d458..bc52257 100644
--- a/resources/js/Components/Praktikans/Sections/TesKeterampilan.jsx
+++ b/resources/js/Components/Praktikans/Sections/TesKeterampilan.jsx
@@ -1,134 +1,71 @@
 import { useEffect } from "react";
-import QuestionCommentInput from "./QuestionCommentInput";
 import MarkdownRenderer from "../../MarkdownRenderer";
 
-export default function TesKeterampilan({
-    isLoading = false,
-    errorMessage = null,
-    questions = [],
-    answers = [],
-    setAnswers,
-    setQuestionsCount,
-    onSubmitTask,
-    tipeSoal = null,
-    praktikanId = null,
-    isCommentEnabled = false,
-}) {
-    useEffect(() => {
-        setQuestionsCount(Array.isArray(questions) ? questions.length : 0);
-    }, [questions, setQuestionsCount]);
+import QuestionCommentInput from "./QuestionCommentInput";
+import QuestionNavigator from "@/Components/Praktikans/Common/QuestionNavigator";
+import useQuestionNavigation from "@/hooks/praktikum/useQuestionNavigation";
 
-    const handleOptionChange = (index, optionId) => {
-        const updated = [...answers];
-        updated[index] = optionId;
-        setAnswers(updated);
-    };
+export default function TesKeterampilan({ isLoading = false, errorMessage = null, questions = [], answers = [], setAnswers, tipeSoal = "tk", praktikanId = null, isCommentEnabled = false }) {
+    const { panelRef, active, setActive, goTo } = useQuestionNavigation(questions);
 
-    const handleSubmit = () => {
-        if (onSubmitTask) {
-            onSubmitTask("TesKeterampilan", answers);
-        }
+    const select = (index, optionId) => {
+        setActive(index);
+        setAnswers((prev) => {
+            const next = [...prev];
+            next[index] = optionId;
+            return next;
+        });
     };
 
-    if (isLoading) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Memuat soal tes keterampilan...</p>
-            </div>
-        );
-    }
-
-    if (errorMessage) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-red-400 font-semibold">{errorMessage}</p>
-            </div>
-        );
-    }
-
-    if (!Array.isArray(questions) || questions.length === 0) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-depth-secondary">Belum ada soal tes keterampilan untuk modul ini.</p>
-            </div>
-        );
-    }
+    if (isLoading) return <State>Memuat soal Tes Keterampilan...</State>;
+    if (errorMessage) return <State error>{errorMessage}</State>;
+    if (!questions.length) return <State>Belum ada soal Tes Keterampilan untuk modul ini.</State>;
 
     return (
-        <div className=" transition-all duration-300 w-full mx-auto">
-            {/* Header */}
-            <div className="flex bg-[var(--depth-color-primary)] rounded-depth-lg py-2 px-3 mb-4 justify-center shadow-depth-lg">
-                <h1 className="text-white text-center font-bold text-lg">
-                    Tes Keterampilan
-                </h1>
-            </div>
-
-            {/* Questions Container */}
-            <div className="space-y-5 max-h-[80vh] p-4 pb-14 rounded-depth-lg border border-depth bg-depth-card overflow-y-auto overflow-x-hidden shadow-depth-lg">
-                {questions.map((question, index) => (
-                    <div
-                        key={question.id ?? index}
-                        className="p-3.5 rounded-depth-lg hover:shadow-depth-lg transition-all duration-200 w-[70%]"
-                    >
-                        {/* Question Number and Text */}
-                        <div className="mb-3">
-                            <div className="flex items-start gap-2.5">
-                                <span className="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-depth-full bg-[var(--depth-color-primary)] text-white font-bold text-xs shadow-depth-sm">
-                                    {index + 1}
-                                </span>
-                                <div className="flex-1 text-depth-primary font-medium text-sm leading-relaxed">
-                                    <MarkdownRenderer content={question.text} />
+        <div className="w-full p-5 py-0">
+            <Header />
+            <div ref={panelRef} className="max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-depth-lg border border-depth bg-depth-card p-4 shadow-depth-lg" style={{ overflowAnchor: "none" }}>
+                <QuestionNavigator questions={questions} answers={answers} active={active} onChange={goTo} />
+                <div className="space-y-4">
+                    {questions.map((q, index) => (
+                        <div key={q.id ?? index} data-question-index={index} onClick={() => setActive(index)} onFocusCapture={() => setActive(index)} className="rounded-depth-lg border border-depth bg-depth-interactive p-4 shadow-depth-md">
+                            <div className="mb-4 flex items-start gap-3">
+                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-depth-full bg-[var(--depth-color-primary)] text-xs font-bold text-white">{index + 1}</span>
+                                <div className="min-w-0 flex-1">
+                                    <div className="text-sm font-medium leading-relaxed text-depth-primary"><MarkdownRenderer content={q.text} /></div>
+                                    <QuestionCommentInput questionId={q.id ?? q.soalId ?? q.soal_id ?? null} tipeSoal={tipeSoal} praktikanId={praktikanId} isEnabled={isCommentEnabled} className="mt-2" />
                                 </div>
                             </div>
-                            <QuestionCommentInput
-                                questionId={question.id ?? question.soalId ?? question.soal_id ?? null}
-                                tipeSoal={tipeSoal}
-                                praktikanId={praktikanId}
-                                isEnabled={isCommentEnabled}
-                                className="pl-11"
-                            />
-                        </div>
-
-                        {/* Options */}
-                        <div className="space-y-2 pl-8">
-                            {(question.options ?? []).map((option, optIdx) => {
-                                const isSelected = answers[index] === option.id;
-                                const optionLabels = ['A', 'B', 'C', 'D'];
-
-                                return (
-                                    <label
-                                        key={option.id}
-                                        className={`max-w-2xl group flex gap-2.5 rounded-depth-md border px-3 py-2 text-xs transition-all duration-200 cursor-pointer ${isSelected
-                                            ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)]/15 shadow-depth-sm scale-[1.01]"
-                                            : "border-depth bg-depth-card hover:border-[var(--depth-color-primary)]/40 hover:bg-[var(--depth-color-primary)]/5 hover:shadow-depth-sm"
-                                            }`}
-                                        onClick={() => handleOptionChange(index, option.id)}
-                                    >
-                                        <input
-                                            type="radio"
-                                            name={`tes-keterampilan-${question.id}`}
-                                            value={option.id}
-                                            checked={isSelected}
-                                            onChange={() => { }}
-                                            className="sr-only"
-                                        />
-                                        <span className={`mr-1.5 flex items-center justify-center w-5 h-5 rounded-depth-md text-[10px] font-bold transition-all duration-200 flex-shrink-0 ${isSelected
-                                            ? "bg-[var(--depth-color-primary)] text-white shadow-depth-sm"
-                                            : "bg-depth-interactive text-depth-secondary group-hover:bg-[var(--depth-color-primary)]/20 group-hover:text-depth-primary"
-                                            }`}>
-                                            {optionLabels[optIdx]}
-                                        </span>
-                                        <div className={`flex-1 leading-relaxed transition-colors duration-200 text-sm ${isSelected ? "text-depth-primary font-medium" : "text-depth-primary"
-                                            }`}>
-                                            <MarkdownRenderer content={option.text} />
+                            <div role="radiogroup" className="grid gap-2 sm:grid-cols-2">
+                                {(q.options ?? []).map((option) => {
+                                    const selected = String(answers[index] ?? "") === String(option.id);
+                                    return (
+                                        <div key={option.id} role="radio" tabIndex={0} aria-checked={selected} onMouseDown={(e) => e.preventDefault()} onClick={() => select(index, option.id)} onKeyDown={(e) => {
+                                            if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                select(index, option.id);
+                                            }
+                                        }} className={`cursor-pointer rounded-depth-md border p-3 text-sm transition ${selected ? "border-[var(--depth-color-primary)] bg-[var(--depth-color-primary)] text-white shadow-depth-md" : "border-depth bg-depth-card text-depth-primary hover:bg-depth-interactive"}`}>
+                                            <div className="flex items-start gap-2">
+                                                <span className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${selected ? "border-white" : "border-depth"}`}>{selected && <span className="h-2 w-2 rounded-full bg-white" />}</span>
+                                                <div className="min-w-0 flex-1"><MarkdownRenderer content={option.text} /></div>
+                                            </div>
                                         </div>
-                                    </label>
-                                );
-                            })}
+                                    );
+                                })}
+                            </div>
                         </div>
-                    </div>
-                ))}
+                    ))}
+                </div>
             </div>
         </div>
     );
 }
+
+function Header() {
+    return <div className="mb-4 flex justify-center rounded-depth-lg bg-[var(--depth-color-primary)] px-3 py-2 shadow-depth-lg"><h1 className="text-lg font-bold text-white">Tes Keterampilan</h1></div>;
+}
+
+function State({ children, error = false }) {
+    return <div className={`mx-auto mt-[20vh] p-5 text-center text-sm font-semibold ${error ? "text-red-400" : "text-depth-secondary"}`}>{children}</div>;
+}
diff --git a/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx b/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
index e3223bb..549a86f 100644
--- a/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
+++ b/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
@@ -5,6 +5,9 @@ import QuestionCommentInput from "./QuestionCommentInput";
 import MarkdownRenderer from "../../MarkdownRenderer";
 import { useImageKitUpload } from "@/hooks/useImageKitUpload";
 
+import QuestionNavigator from "@/Components/Praktikans/Common/QuestionNavigator";
+import useQuestionNavigation from "@/hooks/praktikum/useQuestionNavigation";
+
 export default function TugasPendahuluan({
     isLoading = false,
     errorMessage = null,
@@ -19,26 +22,17 @@ export default function TugasPendahuluan({
     showSubmitButton = false,
     submitLabel = "Simpan Jawaban",
 }) {
-    const [uploadingIndexes, setUploadingIndexes] =
-        useState({});
-
-    const [uploadProgress, setUploadProgress] =
-        useState({});
-
-    const [previews, setPreviews] =
-        useState({});
-
+    const [uploadingIndexes, setUploadingIndexes] = useState({});
+    const [previews, setPreviews] = useState({});
     const { upload } = useImageKitUpload();
+    const { panelRef, active, setActive, goTo } = useQuestionNavigation(questions);
 
     useEffect(() => {
-        setQuestionsCount(
-            Array.isArray(questions)
-                ? questions.length
-                : 0
-        );
+        setQuestionsCount?.(Array.isArray(questions) ? questions.length : 0);
     }, [questions, setQuestionsCount]);
 
     const handleInputChange = (index, value) => {
+        setActive(index);
         const updated = [...answers];
 
         updated[index] = value;
@@ -194,324 +188,209 @@ export default function TugasPendahuluan({
         });
     };
 
-    const handleSubmit = () => {
-        if (onSubmitTask) {
-            onSubmitTask(
-                "TugasPendahuluan",
-                answers
-            );
+    const triggerFileInput = (index) => {
+        setActive(index);
+        document.getElementById(`tp-file-upload-${index}`)?.click();
+    };
+
+    const handleFileUpload = async (index, file) => {
+        if (!file) return;
+        if (file.size > 10485760) {
+            alert("File size must be less than 10MB");
+            return;
+        }
+        if (!file.type.startsWith("image/")) {
+            alert("Please upload an image file");
+            return;
+        }
+
+        setActive(index);
+        setUploadingIndexes((prev) => ({ ...prev, [index]: true }));
+
+        const oldPreview = previews[index];
+        if (oldPreview) URL.revokeObjectURL(oldPreview);
+
+        const previewUrl = URL.createObjectURL(file);
+        setPreviews((prev) => ({ ...prev, [index]: previewUrl }));
+
+        try {
+            const result = await upload(file, "daskom/jawaban-tp", null, true);
+            const updated = [...answers];
+            updated[index] = {
+                type: "file",
+                url: result.url,
+                fileId: result.fileId,
+                filePath: result.filePath,
+            };
+            setAnswers(updated);
+        } catch (error) {
+            console.error("TP upload error:", error);
+            alert("Failed to upload file. Please try again.");
+            URL.revokeObjectURL(previewUrl);
+            setPreviews((prev) => {
+                const next = { ...prev };
+                delete next[index];
+                return next;
+            });
+        } finally {
+            setUploadingIndexes((prev) => {
+                const next = { ...prev };
+                delete next[index];
+                return next;
+            });
         }
     };
 
-    if (isLoading) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-gray-600">
-                    Memuat soal tugas pendahuluan...
-                </p>
-            </div>
-        );
-    }
-
-    if (errorMessage) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-red-600 font-semibold">
-                    {errorMessage}
-                </p>
-            </div>
-        );
-    }
-
-    if (
-        !Array.isArray(questions) ||
-        questions.length === 0
-    ) {
-        return (
-            <div className="mt-[1vh] p-5 max-w-4xl mx-auto text-center">
-                <p className="text-gray-600">
-                    Belum ada soal tugas pendahuluan
-                    untuk modul ini.
-                </p>
-            </div>
-        );
-    }
+    const handleDeleteFile = (index) => {
+        setActive(index);
+        const updated = [...answers];
+        updated[index] = "";
+        setAnswers(updated);
+        setPreviews((prev) => {
+            const next = { ...prev };
+            if (next[index]) {
+                URL.revokeObjectURL(next[index]);
+                delete next[index];
+            }
+            return next;
+        });
+    };
+
+    const handleSubmit = () => onSubmitTask?.("TugasPendahuluan", answers);
+
+    if (isLoading) return (
+        <div className="mx-auto mt-[1vh] max-w-4xl p-5 text-center">
+            <p className="text-depth-secondary">Memuat soal tugas pendahuluan...</p>
+        </div>
+    );
+
+    if (errorMessage) return (
+        <div className="mx-auto mt-[1vh] max-w-4xl p-5 text-center">
+            <p className="font-semibold text-red-400">{errorMessage}</p>
+        </div>
+    );
+
+    if (!Array.isArray(questions) || !questions.length) return (
+        <div className="mx-auto mt-[1vh] max-w-4xl p-5 text-center">
+            <p className="text-depth-secondary">Belum ada soal tugas pendahuluan untuk modul ini.</p>
+        </div>
+    );
 
     return (
         <>
-            <div className="mx-auto mt-2 w-full flex flex-col gap-4 rounded-depth-lg border border-depth bg-depth-card/70 p-4 shadow-depth-lg max-h-[70vh] overflow-hidden">
-                <div className="space-y-6 overflow-y-auto min-h-0 flex-1 bg-depth-interactive/40 p-3.5 bg-depth-card rounded-depth-lg">
-                    {questions.map(
-                        (question, index) => {
-                            const isFileUploadEnabled =
-                                question.enable_file_upload ||
-                                false;
-
-                            const currentAnswer =
-                                answers[index];
-
-                            const isFileAnswer =
-                                typeof currentAnswer ===
-                                    "object" &&
-                                currentAnswer?.type ===
-                                    "file";
-
-                            return (
-                                <div
-                                    key={
-                                        question.id ??
-                                        index
-                                    }
-                                    className="space-y-3"
-                                >
-                                    <div className="flex items-start gap-2.5">
-                                        <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[var(--depth-color-primary)] text-xs font-semibold text-white shadow-depth-sm">
-                                            {index + 1}
-                                        </span>
-
-                                        <div className="flex-1 text-sm font-semibold text-depth-primary break-words">
-                                            <MarkdownRenderer
-                                                content={
-                                                    question.text
-                                                }
-                                            />
-                                        </div>
+            <div className="mx-auto mt-2 flex max-h-[70vh] w-full flex-col gap-4 overflow-hidden rounded-depth-lg border border-depth bg-depth-card/70 p-4 shadow-depth-lg">
+                <div ref={panelRef} className="min-h-0 flex-1 space-y-6 overflow-y-auto rounded-depth-lg bg-depth-interactive/40 p-3.5" style={{ overflowAnchor: "none" }}>
+                    <QuestionNavigator questions={questions} answers={answers} active={active} onChange={goTo} />
+
+                    {questions.map((question, index) => {
+                        const isFileUploadEnabled = Boolean(question.enable_file_upload);
+                        const currentAnswer = answers[index];
+                        const isFileAnswer = typeof currentAnswer === "object" && currentAnswer?.type === "file";
+                        const preview = previews[index];
+
+                        return (
+                            <div
+                                key={question.key ?? `tp:${question.id ?? index}`}
+                                data-question-index={index}
+                                onClick={() => setActive(index)}
+                                onFocusCapture={() => setActive(index)}
+                                className="space-y-3 rounded-depth-lg border border-depth bg-depth-card/60 p-4 shadow-depth-sm"
+                            >
+                                <div className="flex items-start gap-2.5">
+                                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--depth-color-primary)] text-xs font-semibold text-white shadow-depth-sm">{index + 1}</span>
+                                    <div className="min-w-0 flex-1 break-words text-sm font-semibold text-depth-primary">
+                                        <MarkdownRenderer content={question.text} />
                                     </div>
+                                </div>
 
-                                    <QuestionCommentInput
-                                        questionId={
-                                            question.id ??
-                                            question.soalId ??
-                                            question.soal_id ??
-                                            null
-                                        }
-                                        tipeSoal={
-                                            tipeSoal
-                                        }
-                                        praktikanId={
-                                            praktikanId
-                                        }
-                                        isEnabled={
-                                            isCommentEnabled
-                                        }
-                                        className="pl-11"
-                                    />
-
-                                    {isFileUploadEnabled ? (
-                                        <div className="space-y-3">
-                                            {!isFileAnswer &&
-                                            !previews[
-                                                index
-                                            ] ? (
-                                                <div>
-                                                    <label
-                                                        htmlFor={`tp-file-upload-${index}`}
-                                                        className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-depth rounded-depth-md cursor-pointer bg-depth-card hover:bg-depth-hover transition-all"
-                                                    >
-                                                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                                                            <svg
-                                                                className="w-10 h-10 mb-3 text-depth-secondary"
-                                                                fill="none"
-                                                                stroke="currentColor"
-                                                                viewBox="0 0 24 24"
-                                                            >
-                                                                <path
-                                                                    strokeLinecap="round"
-                                                                    strokeLinejoin="round"
-                                                                    strokeWidth={
-                                                                        2
-                                                                    }
-                                                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                                                                />
-                                                            </svg>
-
-                                                            <p className="mb-2 text-sm text-depth-secondary">
-                                                                <span className="font-semibold">
-                                                                    Click
-                                                                    to
-                                                                    upload
-                                                                </span>{" "}
-                                                                or
-                                                                drag
-                                                                and
-                                                                drop
-                                                            </p>
-
-                                                            <p className="text-xs text-depth-secondary">
-                                                                PNG,
-                                                                JPG,
-                                                                GIF
-                                                                up
-                                                                to
-                                                                10MB
-                                                            </p>
-                                                        </div>
-                                                    </label>
-
-                                                    <div className="mt-3 text-right">
-                                                        <button
-                                                            type="button"
-                                                            onClick={() =>
-                                                                triggerFileInput(
-                                                                    index
-                                                                )
-                                                            }
-                                                            className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                        >
-                                                            Pilih
-                                                            File
-                                                        </button>
+                                <QuestionCommentInput
+                                    questionId={question.id ?? question.soalId ?? question.soal_id ?? null}
+                                    tipeSoal={tipeSoal}
+                                    praktikanId={praktikanId}
+                                    isEnabled={isCommentEnabled}
+                                    className="pl-9"
+                                />
+
+                                {isFileUploadEnabled ? (
+                                    <div className="space-y-3">
+                                        {!isFileAnswer && !preview ? (
+                                            <div>
+                                                <label
+                                                    htmlFor={`tp-file-upload-${index}`}
+                                                    className="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-depth-md border-2 border-dashed border-depth bg-depth-interactive transition hover:bg-depth-hover"
+                                                >
+                                                    <div className="flex flex-col items-center justify-center pb-6 pt-5">
+                                                        <svg className="mb-3 h-10 w-10 text-depth-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                                                        </svg>
+                                                        <p className="mb-2 text-sm text-depth-secondary"><span className="font-semibold">Click to upload</span> or drag and drop</p>
+                                                        <p className="text-xs text-depth-secondary">PNG, JPG, GIF up to 10MB</p>
                                                     </div>
+                                                </label>
+                                                <div className="mt-3 text-right">
+                                                    <button type="button" onClick={() => triggerFileInput(index)} className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md">Pilih File</button>
                                                 </div>
-                                            ) : (
-                                                <div className="relative rounded-depth-md border border-depth bg-depth-card p-3">
-                                                    {uploadingIndexes[
-                                                        index
-                                                    ] ? (
-                                                        <div className="flex flex-col items-center justify-center py-8">
-                                                            <div className="w-16 h-16 border-4 border-[var(--depth-color-primary)] border-t-transparent rounded-full animate-spin mb-3" />
-
-                                                            <p className="text-sm text-depth-secondary">
-                                                                Uploading...
-                                                            </p>
+                                            </div>
+                                        ) : (
+                                            <div className="relative rounded-depth-md border border-depth bg-depth-interactive p-3">
+                                                {uploadingIndexes[index] ? (
+                                                    <div className="flex flex-col items-center justify-center py-8">
+                                                        <div className="mb-3 h-16 w-16 animate-spin rounded-full border-4 border-[var(--depth-color-primary)] border-t-transparent" />
+                                                        <p className="text-sm text-depth-secondary">Uploading...</p>
+                                                    </div>
+                                                ) : (
+                                                    <>
+                                                        {isFileAnswer && currentAnswer?.url ? (
+                                                            <Image
+                                                                src={currentAnswer.url}
+                                                                alt="Uploaded TP answer"
+                                                                transformation={[{ width: "800", quality: "80" }]}
+                                                                className="h-auto w-full rounded-depth-md shadow-depth-sm"
+                                                                loading="lazy"
+                                                            />
+                                                        ) : preview ? (
+                                                            <img src={preview} alt="TP answer preview" className="h-auto w-full rounded-depth-md shadow-depth-sm" />
+                                                        ) : null}
+
+                                                        <button type="button" onClick={() => handleDeleteFile(index)} className="absolute right-5 top-5 rounded-depth-full bg-red-500 p-2 text-white shadow-depth-md transition-all hover:bg-red-600" title="Delete image">
+                                                            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                                            </svg>
+                                                        </button>
+
+                                                        <div className="mt-3 text-right">
+                                                            <button type="button" onClick={() => triggerFileInput(index)} className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md">Ganti File</button>
                                                         </div>
-                                                    ) : (
-                                                        <>
-                                                            {isFileAnswer &&
-                                                            currentAnswer?.url ? (
-                                                                <Image
-                                                                    src={
-                                                                        currentAnswer.url
-                                                                    }
-                                                                    alt="Uploaded TP answer"
-                                                                    transformation={[
-                                                                        {
-                                                                            width: "800",
-                                                                            quality:
-                                                                                "80",
-                                                                        },
-                                                                    ]}
-                                                                    className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                    loading="lazy"
-                                                                />
-                                                            ) : previews[
-                                                                  index
-                                                              ] ? (
-                                                                <img
-                                                                    src={
-                                                                        previews[
-                                                                            index
-                                                                        ]
-                                                                    }
-                                                                    alt="TP answer preview"
-                                                                    className="w-full h-auto rounded-depth-md shadow-depth-sm"
-                                                                />
-                                                            ) : null}
-
-                                                            <button
-                                                                type="button"
-                                                                onClick={() =>
-                                                                    handleDeleteFile(
-                                                                        index
-                                                                    )
-                                                                }
-                                                                className="absolute top-5 right-5 p-2 rounded-depth-full bg-red-500 text-white hover:bg-red-600 shadow-depth-md transition-all"
-                                                                title="Delete image"
-                                                            >
-                                                                <svg
-                                                                    className="w-5 h-5"
-                                                                    fill="none"
-                                                                    stroke="currentColor"
-                                                                    viewBox="0 0 24 24"
-                                                                >
-                                                                    <path
-                                                                        strokeLinecap="round"
-                                                                        strokeLinejoin="round"
-                                                                        strokeWidth={
-                                                                            2
-                                                                        }
-                                                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                                                    />
-                                                                </svg>
-                                                            </button>
-
-                                                            <div className="mt-3 text-right">
-                                                                <button
-                                                                    type="button"
-                                                                    onClick={() =>
-                                                                        triggerFileInput(
-                                                                            index
-                                                                        )
-                                                                    }
-                                                                    className="inline-flex items-center rounded-depth-md bg-[var(--depth-color-primary)] px-4 py-1.5 text-xs font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                                                >
-                                                                    Ganti
-                                                                    File
-                                                                </button>
-                                                            </div>
-                                                        </>
-                                                    )}
-                                                </div>
-                                            )}
-
-                                            <input
-                                                id={`tp-file-upload-${index}`}
-                                                type="file"
-                                                className="hidden"
-                                                accept="image/*"
-                                                onChange={(
-                                                    event
-                                                ) => {
-                                                    const file =
-                                                        event
-                                                            .target
-                                                            .files?.[0];
-
-                                                    if (
-                                                        file
-                                                    ) {
-                                                        handleFileUpload(
-                                                            index,
-                                                            file
-                                                        );
-                                                    }
-
-                                                    event.target.value =
-                                                        "";
-                                                }}
-                                                disabled={
-                                                    uploadingIndexes[
-                                                        index
-                                                    ]
-                                                }
-                                            />
-                                        </div>
-                                    ) : (
-                                        <textarea
-                                            className="min-h-[15vh] w-full dark:text-gray-700 rounded-depth-md border border-depth bg-depth-card/80 p-2.5 text-sm text-depth-primary shadow-depth-sm transition focus:border-[var(--depth-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
-                                            placeholder="Tulis jawabanmu di sini..."
-                                            value={
-                                                typeof currentAnswer ===
-                                                "string"
-                                                    ? currentAnswer
-                                                    : ""
-                                            }
-                                            onChange={(
-                                                event
-                                            ) =>
-                                                handleInputChange(
-                                                    index,
-                                                    event
-                                                        .target
-                                                        .value
-                                                )
-                                            }
+                                                    </>
+                                                )}
+                                            </div>
+                                        )}
+
+                                        <input
+                                            id={`tp-file-upload-${index}`}
+                                            type="file"
+                                            className="hidden"
+                                            accept="image/*"
+                                            disabled={uploadingIndexes[index]}
+                                            onChange={(event) => {
+                                                const file = event.target.files?.[0];
+                                                event.target.value = "";
+                                                if (file) void handleFileUpload(index, file);
+                                            }}
                                         />
-                                    )}
-                                </div>
-                            );
-                        }
-                    )}
+                                    </div>
+                                ) : (
+                                    <textarea
+                                        className="min-h-[15vh] w-full resize-y rounded-depth-md border border-depth bg-depth-interactive p-3 text-sm text-depth-primary placeholder:text-depth-secondary shadow-depth-inset transition focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[var(--depth-color-primary)]"
+                                        placeholder="Tulis jawabanmu di sini..."
+                                        value={typeof currentAnswer === "string" ? currentAnswer : ""}
+                                        onChange={(event) => handleInputChange(index, event.target.value)}
+                                        onFocus={() => setActive(index)}
+                                    />
+                                )}
+                            </div>
+                        );
+                    })}
                 </div>
             </div>
 
@@ -520,18 +399,10 @@ export default function TugasPendahuluan({
                     <button
                         type="button"
                         onClick={handleSubmit}
-                        disabled={
-                            Object.keys(
-                                uploadingIndexes
-                            ).length > 0
-                        }
+                        disabled={Object.keys(uploadingIndexes).length > 0}
                         className="inline-flex items-center justify-center rounded-depth-md bg-[var(--depth-color-primary)] px-5 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md disabled:cursor-not-allowed disabled:opacity-50"
                     >
-                        {Object.keys(
-                            uploadingIndexes
-                        ).length > 0
-                            ? "Mengunggah..."
-                            : submitLabel}
+                        {Object.keys(uploadingIndexes).length ? "Mengunggah..." : submitLabel}
                     </button>
                 </div>
             )}
diff --git a/resources/js/Pages/Praktikan/PraktikumPage.jsx b/resources/js/Pages/Praktikan/PraktikumPage.jsx
index 696e126..d1ccebf 100644
--- a/resources/js/Pages/Praktikan/PraktikumPage.jsx
+++ b/resources/js/Pages/Praktikan/PraktikumPage.jsx
@@ -1,1596 +1,153 @@
-import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useMemo, useState } from "react";
 import { Head } from "@inertiajs/react";
-import debounce from "lodash/debounce";
 import PraktikanAuthenticated from "@/Layouts/PraktikanAuthenticatedLayout";
-import { api } from "@/lib/api";
-import toast from "react-hot-toast";
 import { useModulesQuery } from "@/hooks/useModulesQuery";
+import usePraktikumTask from "@/hooks/praktikum/usePraktikumTask";
+import usePraktikumSession from "@/hooks/praktikum/usePraktikumSession";
+import { TASKS } from "@/config/praktikum";
 
 const NoPraktikumSection = lazy(() => import("@/Components/Praktikans/Sections/NoPraktikumSection"));
 const TesAwal = lazy(() => import("@/Components/Praktikans/Sections/TesAwal"));
 const Jurnal = lazy(() => import("@/Components/Praktikans/Sections/Jurnal"));
 const Mandiri = lazy(() => import("@/Components/Praktikans/Sections/Mandiri"));
 const TesKeterampilan = lazy(() => import("@/Components/Praktikans/Sections/TesKeterampilan"));
-const PraktikanUtilities = lazy(() => import("@/Components/Praktikans/Layout/PraktikanUtilities"));
-const ScoreDisplayModal = lazy(() => import("@/Components/Modals/ScoreDisplayModal"));
 const FeedbackPhase = lazy(() => import("@/Components/Praktikans/Sections/FeedbackPhase"));
+const ScoreDisplayModal = lazy(() => import("@/Components/Modals/ScoreDisplayModal"));
+const PraktikanUtilities = lazy(() => import("@/Components/Praktikans/Layout/PraktikanUtilities"));
 
-const TASK_COMPONENTS = {
-    TesAwal,
-    Jurnal,
-    Mandiri,
-    TesKeterampilan,
-};
-
-const TASK_NAMES = Object.keys(TASK_COMPONENTS);
-const ALLOWED_COMPONENTS = new Set(["NoPraktikumSection", ...TASK_NAMES, "FeedbackPhase"]);
-
-const INITIAL_COMPLETED_STATE = TASK_NAMES.reduce((accumulator, key) => {
-    accumulator[key] = false;
-
-    return accumulator;
-}, {});
-
-const TASK_CONFIG = {
-    TesAwal: {
-        questionEndpoint: (modulId) => `/api-v1/soal-ta/${modulId}`,
-        submitEndpoint: "/api-v1/jawaban-ta",
-        variant: "multiple-choice",
-        commentType: "ta",
-    },
-    Jurnal: {
-        questionEndpoint: (modulId) => `/api-v1/soal-jurnal/${modulId}`,
-        submitEndpoint: "/api-v1/jawaban-jurnal",
-        variant: "essay",
-        commentType: "jurnal",
-        fitb: {
-            questionEndpoint: (modulId) => `/api-v1/soal-fitb/${modulId}`,
-            submitEndpoint: "/api-v1/jawaban-fitb",
-        },
-    },
-    Mandiri: {
-        questionEndpoint: (modulId) => `/api-v1/soal-tm/${modulId}`,
-        answerEndpoint: null, // Mandiri doesn't fetch previous answers
-        submitEndpoint: "/api-v1/jawaban-tm",
-        variant: "essay",
-        commentType: "mandiri",
-    },
-    TesKeterampilan: {
-        questionEndpoint: (modulId) => `/api-v1/soal-tk/${modulId}`,
-        submitEndpoint: "/api-v1/jawaban-tk",
-        variant: "multiple-choice",
-        commentType: "tk",
-    },
-};
-
-const AUTOSAVE_TYPE_MAP = {
-    TesAwal: "ta",
-    Jurnal: "jurnal",
-    Mandiri: "mandiri",
-    TesKeterampilan: "tk",
-};
-
-const SCORE_PHASE_BY_TASK = {
-    TesAwal: "ta",
-    TesKeterampilan: "tk",
-};
-
-const STICKY_TASKS = new Set(["TesAwal", "Mandiri", "TesKeterampilan"]);
-
-const extractQuestions = (response) => {
-    const payload = response?.data ?? response;
-    if (Array.isArray(payload)) {
-        return payload;
-    }
-
-    if (Array.isArray(payload?.data)) {
-        return payload.data;
-    }
-
-    if (Array.isArray(payload?.questions)) {
-        return payload.questions;
-    }
-
-    return [];
-};
-
-const normalizeEssayQuestions = (items, questionType = "essay") => {
-    return (items ?? [])
-        .filter((item) => item && (item.soal || item.pertanyaan))
-        .map((item) => ({
-            id: item.id,
-            text: item.soal ?? item.pertanyaan ?? "",
-            questionType,
-            enable_file_upload: Boolean(item.enable_file_upload),
-        }));
-};
-
-const normalizeMultipleChoiceQuestions = (items, questionType = "multiple-choice") => {
-    return (items ?? [])
-        .filter((item) => item && item.pertanyaan)
-        .map((item) => ({
-            id: item.id,
-            text: item.pertanyaan,
-            options: (item.options ?? []).map((option) => ({
-                id: option.id,
-                text: option.text,
-            })),
-            questionType,
-        }))
-        .filter((item) => Array.isArray(item.options) && item.options.length > 0);
-};
-
-const reorderQuestionsByIds = (questions, questionIds) => {
-    if (!Array.isArray(questionIds) || questionIds.length === 0) {
-        return questions;
-    }
-
-    const questionMap = new Map();
-    questions.forEach((question) => {
-        if (question?.id !== undefined && question?.id !== null) {
-            questionMap.set(String(question.id), question);
-        }
-    });
-
-    const ordered = [];
-    const usedKeys = new Set();
-
-    questionIds.forEach((id) => {
-        const key = String(id);
-        if (questionMap.has(key) && !usedKeys.has(key)) {
-            ordered.push(questionMap.get(key));
-            usedKeys.add(key);
-        }
-    });
-
-    questions.forEach((question) => {
-        const key = question?.id;
-        if (key === undefined || key === null) {
-            return;
-        }
-        const normalizedKey = String(key);
-        if (!usedKeys.has(normalizedKey)) {
-            ordered.push(question);
-            usedKeys.add(normalizedKey);
-        }
-    });
-
-    return ordered;
-};
-
-const isLikelyJsonObjectString = (value) => {
-    if (typeof value !== "string") {
-        return false;
-    }
-
-    const trimmed = value.trim();
-    if (trimmed === "") {
-        return false;
-    }
-
-    return (
-        (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
-        (trimmed.startsWith("[") && trimmed.endsWith("]"))
-    );
-};
-
-const serializeAnswerForAutosave = (question, answerValue) => {
-    if (!question) {
-        return null;
-    }
-
-    if (question.questionType === "multiple-choice") {
-        if (answerValue === null || answerValue === undefined) {
-            return null;
-        }
-
-        return answerValue;
-    }
-
-    if (answerValue === null || answerValue === undefined) {
-        return null;
-    }
-
-    if (typeof answerValue === "object") {
-        try {
-            return JSON.stringify(answerValue);
-        } catch (error) {
-            console.warn("[Autosave] Failed to serialize answer", error);
-            return null;
-        }
-    }
-
-    if (typeof answerValue === "string") {
-        return answerValue.trim() === "" ? null : answerValue;
-    }
-
-    const normalized = String(answerValue ?? "");
-    return normalized.trim() === "" ? null : normalized;
-};
-
-const hydrateAutosaveAnswer = (question, storedAnswer) => {
-    if (!question) {
-        return storedAnswer ?? "";
-    }
-
-    if (question.questionType === "multiple-choice") {
-        return storedAnswer;
-    }
-
-    if (storedAnswer === null || storedAnswer === undefined) {
-        return "";
-    }
-
-    if (typeof storedAnswer === "object") {
-        return storedAnswer;
-    }
-
-    if (typeof storedAnswer !== "string") {
-        return String(storedAnswer ?? "");
-    }
-
-    const trimmed = storedAnswer.trim();
-    if (trimmed === "") {
-        return "";
-    }
-
-    if (isLikelyJsonObjectString(trimmed)) {
-        try {
-            const parsed = JSON.parse(trimmed);
-            if (parsed && typeof parsed === "object") {
-                return parsed;
-            }
-        } catch (error) {
-            console.warn("[Autosave] Failed to parse stored answer", error);
-        }
-    }
-
-    return storedAnswer;
-};
-
-const serialiseAnswerForSubmission = (answerValue) => {
-    if (answerValue === null || answerValue === undefined) {
-        return "";
-    }
-
-    if (typeof answerValue === "object") {
-        try {
-            return JSON.stringify(answerValue);
-        } catch (error) {
-            console.warn("[Submission] Failed to stringify answer", error);
-            return "";
-        }
-    }
-
-    if (typeof answerValue === "string") {
-        return answerValue;
-    }
-
-    return String(answerValue ?? "");
-};
-
-const PHASE_TO_COMPONENT = {
-    ta: "TesAwal",
-    fitb_jurnal: "Jurnal",
-    mandiri: "Mandiri",
-    tk: "TesKeterampilan",
-    feedback: "FeedbackPhase",
-};
+const COMPONENTS = { TesAwal, Jurnal, Mandiri, TesKeterampilan };
+const title = (m) => typeof m === "string" ? m : m?.judul ?? m?.name ?? (typeof m?.modul === "string" ? m.modul : m?.modul?.judul) ?? null;
 
 export default function PraktikumPage({ auth }) {
-    const [activeComponent, setActiveComponent] = useState("NoPraktikumSection");
-    const [answers, setAnswers] = useState([]);
-    const [questionsCount, setQuestionsCount] = useState(0);
-    const [questions, setQuestions] = useState([]);
-    const [activeTask, setActiveTask] = useState(null);
-    const [completedCategories, setCompletedCategories] = useState(INITIAL_COMPLETED_STATE);
-    const [activeModulId, setActiveModulId] = useState(null);
-    const [moduleMeta, setModuleMeta] = useState(null);
-    const [isLoadingTask, setIsLoadingTask] = useState(false);
-    const [taskError, setTaskError] = useState(null);
-    const [isSubmittingTask, setIsSubmittingTask] = useState(false);
-    const [submissionError, setSubmissionError] = useState(null);
-    const [feedbackReminder, setFeedbackReminder] = useState({
-        isPending: false,
-        modulId: null,
-        asistenId: null,
-    });
-    const [feedbackContext, setFeedbackContext] = useState({
-        modulId: null,
-        assistantId: null,
-    });
-    const [scoreModalState, setScoreModalState] = useState({
-        isOpen: false,
-        phaseType: null,
-        correctAnswers: 0,
-        totalQuestions: 0,
-        percentage: 0,
-        hasError: false,
-        isRetrying: false,
-    });
-
-    const [isSavingProgress, setIsSavingProgress] = useState(false);
-    const [isRefreshingStatus, setIsRefreshingStatus] = useState(false);
-
-    const autosaveDebouncersRef = useRef({});
-    const isRestoringAutosaveRef = useRef(false);
-
-    const praktikanData = auth?.praktikan ?? auth?.user ?? null;
-    const praktikanId = praktikanData?.id ?? null;
-    const kelasId =
-        praktikanData?.kelas_id ??
-        praktikanData?.kelas?.id ??
-        null;
-    const kelasName = praktikanData?.kelas?.kelas ?? "";
-    const kelasIsTotFlag = praktikanData?.kelas?.is_tot ?? false;
-    const isTotClass =
-        Boolean(kelasIsTotFlag) ||
-        kelasName.trim().toUpperCase().startsWith("TOT");
-
-
-    const { data: moduleOptions = [] } = useModulesQuery();
-
-    const resolveModuleTitle = useCallback(
-        (identifier) => {
-            if (!identifier) {
-                return null;
-            }
-
-            const identifierString = String(identifier);
-            const match =
-                moduleOptions.find(
-                    (module) => String(module?.id ?? module?.idM ?? module?.modul_id) === identifierString
-                ) ?? null;
-
-            if (!match) {
-                return null;
-            }
-
-            if (typeof match === "string") {
-                return match;
-            }
-
-            if (match?.judul) {
-                return match.judul;
-            }
-
-            if (match?.name) {
-                return match.name;
-            }
-
-            if (match?.modul) {
-                if (typeof match.modul === "string") {
-                    return match.modul;
-                }
-
-                if (match.modul?.judul) {
-                    return match.modul.judul;
-                }
-            }
-
-            return null;
-        },
-        [moduleOptions]
-    );
-
-    const clearTaskProgress = useCallback(() => {
-        setQuestions([]);
-        setAnswers([]);
-        setQuestionsCount(0);
-    }, []);
-
-    const getAutosaveHandler = useCallback((tipeSoal) => {
-        if (!tipeSoal) {
-            return null;
-        }
-
-        if (!autosaveDebouncersRef.current[tipeSoal]) {
-            autosaveDebouncersRef.current[tipeSoal] = debounce(async (payload) => {
-                try {
-                    await api.post("/api-v1/praktikan/autosave", payload);
-                } catch (error) {
-                    console.warn(`[Autosave] Failed to save ${tipeSoal} snapshot`, error);
-                }
-            }, 600);
-        }
-
-        return autosaveDebouncersRef.current[tipeSoal];
-    }, []);
-
-    useEffect(() => {
-        return () => {
-            Object.values(autosaveDebouncersRef.current).forEach((handler) => {
-                if (handler && typeof handler.cancel === "function") {
-                    handler.cancel();
-                }
-            });
-        };
-    }, []);
-
-    const resetActiveTaskState = useCallback(() => {
-        clearTaskProgress();
-        setActiveTask(null);
-    }, [clearTaskProgress]);
-
-    const scoreFetchLocksRef = useRef(new Set());
-    const scoreAckRequiredRef = useRef(false);
-    const pendingFeedbackNavigationRef = useRef(null);
-
-    const fetchPhaseScore = useCallback(
-        async (phase) => {
-            if (!praktikanId || !activeModulId || !["ta", "tk"].includes(phase)) {
-                return;
-            }
-
-            const cacheKey = `${phase}:${activeModulId}`;
-            if (scoreFetchLocksRef.current.has(cacheKey)) {
-                return;
-            }
-
-            scoreFetchLocksRef.current.add(cacheKey);
-            scoreAckRequiredRef.current = true;
-
-            setScoreModalState((prev) => ({
-                ...prev,
-                isRetrying: true,
-                hasError: false,
-            }));
-
-            try {
-                const endpoint =
-                    phase === "ta"
-                        ? `/api-v1/nilai-ta/${praktikanId}/${activeModulId}`
-                        : `/api-v1/nilai-tk/${praktikanId}/${activeModulId}`;
-
-                const { data } = await api.get(endpoint);
-
-                const totalQuestions = data?.total_questions ?? data?.totalQuestions ?? 0;
-                const correctAnswersRaw = data?.correct_answers ?? data?.correctAnswers;
-                // Resolved percentage in here is not being used, but it's being used in the score modal.
-                // To be removed in the future
-                const resolvedPercentage = typeof data?.score === "number" ? data.score : null;
-                const correctAnswers =
-                    typeof correctAnswersRaw === "number"
-                        ? correctAnswersRaw
-                        : totalQuestions > 0 && typeof resolvedPercentage === "number"
-                            ? Math.round((resolvedPercentage / 100) * totalQuestions)
-                            : 0;
-
-                const percentage =
-                    typeof resolvedPercentage === "number"
-                        ? resolvedPercentage
-                        : totalQuestions > 0
-                            ? (correctAnswers / totalQuestions) * 100
-                            : 0;
-
-                setScoreModalState({
-                    isOpen: true,
-                    phaseType: phase,
-                    correctAnswers,
-                    totalQuestions,
-                    percentage,
-                    hasError: false,
-                    isRetrying: false,
-                });
-            } catch (error) {
-                console.error(`Failed to fetch ${phase.toUpperCase()} score`, error);
-                setScoreModalState((prev) => ({
-                    ...prev,
-                    isOpen: true,
-                    hasError: true,
-                    isRetrying: false,
-                }));
-                scoreFetchLocksRef.current.delete(cacheKey);
-                scoreAckRequiredRef.current = false;
-            }
-        },
-        [praktikanId, activeModulId]
-    );
-
-    useEffect(() => {
-        if (!ALLOWED_COMPONENTS.has(activeComponent)) {
-            setActiveComponent("NoPraktikumSection");
-        }
-    }, [activeComponent]);
-
-    const localStorageKey = useMemo(() => {
-        if (!activeModulId) {
-            return null;
-        }
-
-        return `praktikum:completed:${activeModulId}`;
-    }, [activeModulId]);
-
-    useEffect(() => {
-        if (!localStorageKey) {
-            setCompletedCategories({ ...INITIAL_COMPLETED_STATE });
-
-            return;
-        }
-
-        try {
-            const stored = localStorage.getItem(localStorageKey);
-            if (stored) {
-                const parsed = JSON.parse(stored);
-                setCompletedCategories({ ...INITIAL_COMPLETED_STATE, ...parsed });
-            } else {
-                setCompletedCategories({ ...INITIAL_COMPLETED_STATE });
-            }
-        } catch (error) {
-            console.error("Failed to restore completed categories", error);
-            setCompletedCategories({ ...INITIAL_COMPLETED_STATE });
-        }
-    }, [localStorageKey]);
-
-    useEffect(() => {
-        if (localStorageKey) {
-            localStorage.setItem(localStorageKey, JSON.stringify(completedCategories));
-        }
-    }, [completedCategories, localStorageKey]);
-
-    const fetchStoredQuestionIds = useCallback(
-        async (autosaveType, modulId) => {
-            if (!praktikanId || !autosaveType || !modulId) {
-                return {
-                    questionIds: [],
-                    hasStoredQuestions: false,
-                };
-            }
-
-            try {
-                const { data } = await api.get("/api-v1/praktikan/autosave/questions", {
-                    params: {
-                        praktikan_id: praktikanId,
-                        modul_id: modulId,
-                        tipe_soal: autosaveType,
-                    },
-                });
-
-                const ids = Array.isArray(data?.question_ids)
-                    ? data.question_ids
-                        .map((value) => Number(value))
-                        .filter((value) => Number.isInteger(value) && value > 0)
-                    : [];
-
-                return {
-                    questionIds: ids,
-                    hasStoredQuestions: Boolean(data?.has_stored_questions),
-                };
-            } catch (error) {
-                console.warn(`[Autosave] Failed to fetch stored question ids for ${autosaveType}`, error);
-                return {
-                    questionIds: [],
-                    hasStoredQuestions: false,
-                };
-            }
-        },
-        [praktikanId]
-    );
-
-    const persistQuestionIdsSnapshot = useCallback(
-        async (autosaveType, modulId, questionIds) => {
-            if (!praktikanId || !autosaveType || !modulId) {
-                return;
-            }
-
-            if (!Array.isArray(questionIds) || questionIds.length === 0) {
-                return;
-            }
-
-            try {
-                await api.post("/api-v1/praktikan/autosave/questions", {
-                    praktikan_id: praktikanId,
-                    modul_id: modulId,
-                    tipe_soal: autosaveType,
-                    question_ids: questionIds,
-                });
-            } catch (error) {
-                console.warn(`[Autosave] Failed to persist question ids for ${autosaveType}`, error);
-            }
-        },
-        [praktikanId]
-    );
-
-
-    const fetchTaskData = useCallback(
-        async (taskKey, modulId) => {
-            const config = TASK_CONFIG[taskKey];
-            if (!config || !modulId) {
-                clearTaskProgress();
-                return;
-            }
-
-            setIsLoadingTask(true);
-            setTaskError(null);
-            setSubmissionError(null);
-
-            try {
-                const autosaveType = AUTOSAVE_TYPE_MAP[taskKey];
-                const shouldPersistQuestions = autosaveType && STICKY_TASKS.has(taskKey);
-                let storedQuestionIds = [];
-                let hasStoredQuestionSet = false;
-
-                if (shouldPersistQuestions) {
-                    const stored = await fetchStoredQuestionIds(autosaveType, modulId);
-                    storedQuestionIds = stored.questionIds ?? [];
-                    hasStoredQuestionSet = Boolean(stored.hasStoredQuestions);
-                }
-
-                const questionConfig = storedQuestionIds.length > 0
-                    ? { params: { question_ids: storedQuestionIds } }
-                    : undefined;
-
-                const questionResponse = await api.get(
-                    config.questionEndpoint(modulId),
-                    questionConfig
-                );
-
-                const rawQuestions = extractQuestions(questionResponse);
-
-                let normalizedQuestions = [];
-
-                if (taskKey === "Jurnal" && config.fitb) {
-                    const fitbQuestionResponse = await api
-                        .get(config.fitb.questionEndpoint(modulId))
-                        .catch(() => ({ data: [] }));
-
-                    const rawFitbQuestions = extractQuestions(fitbQuestionResponse);
-                    const fitbQuestions = normalizeEssayQuestions(rawFitbQuestions, "fitb");
-                    const jurnalQuestions = normalizeEssayQuestions(rawQuestions, "jurnal");
-                    normalizedQuestions = [...fitbQuestions, ...jurnalQuestions];
-                } else {
-                    normalizedQuestions =
-                        config.variant === "multiple-choice"
-                            ? normalizeMultipleChoiceQuestions(rawQuestions)
-                            : normalizeEssayQuestions(rawQuestions);
-                }
-
-                if (shouldPersistQuestions) {
-                    const normalizedIds = normalizedQuestions
-                        .map((question) => question?.id)
-                        .filter((id) => id !== undefined && id !== null);
-
-                    if (!hasStoredQuestionSet && normalizedIds.length > 0) {
-                        await persistQuestionIdsSnapshot(autosaveType, modulId, normalizedIds);
-                        storedQuestionIds = normalizedIds;
-                        hasStoredQuestionSet = true;
-                    }
-
-                    if (storedQuestionIds.length > 0) {
-                        normalizedQuestions = reorderQuestionsByIds(
-                            normalizedQuestions,
-                            storedQuestionIds
-                        );
-                    }
-                }
-
-                const defaultAnswers = normalizedQuestions.map((question) =>
-                    question.questionType === "multiple-choice" ? null : ""
-                );
-
-                setQuestions(normalizedQuestions);
-                setQuestionsCount(normalizedQuestions.length);
-
-                let answersToUse = defaultAnswers;
-
-                if (autosaveType && praktikanId) {
-                    try {
-                        const { data: autosaveResponse } = await api.get("/api-v1/praktikan/autosave", {
-                            params: {
-                                praktikan_id: praktikanId,
-                                modul_id: modulId,
-                                tipe_soal: autosaveType,
-                            },
-                        });
-
-                        const snapshotList = Array.isArray(autosaveResponse?.data)
-                            ? autosaveResponse.data
-                            : [];
-                        const snapshot = snapshotList.find(
-                            (item) => item?.tipe_soal === autosaveType
-                        );
-
-                        if (snapshot?.jawaban && typeof snapshot.jawaban === "object") {
-                            answersToUse = normalizedQuestions.map((question) => {
-                                const questionId = question?.id;
-                                if (!questionId) {
-                                    return question.questionType === "multiple-choice" ? null : "";
-                                }
-
-                                const storedAnswer =
-                                    snapshot.jawaban[questionId] ??
-                                    snapshot.jawaban[String(questionId)] ??
-                                    snapshot.jawaban[Number(questionId)];
-                                if (storedAnswer === undefined || storedAnswer === null) {
-                                    return question.questionType === "multiple-choice" ? null : "";
-                                }
-
-                                return hydrateAutosaveAnswer(question, storedAnswer);
-                            });
-                        }
-                    } catch (error) {
-                        console.warn(`[Autosave] Failed to load ${autosaveType} snapshot`, error);
-                    }
-                }
-
-                isRestoringAutosaveRef.current = true;
-                setAnswers(answersToUse);
-                setTimeout(() => {
-                    isRestoringAutosaveRef.current = false;
-                }, 0);
-            } catch (error) {
-                console.error("Failed to fetch task data", error);
-                const message = error?.response?.data?.message ?? error.message ?? "Gagal memuat data tugas.";
-                setTaskError(message);
-                clearTaskProgress();
-            } finally {
-                setIsLoadingTask(false);
-            }
-        },
-        [clearTaskProgress, fetchStoredQuestionIds, persistQuestionIdsSnapshot, praktikanId]
-    );
-
-    useEffect(() => {
-        const currentTask = activeTask;
-        const autosaveType = AUTOSAVE_TYPE_MAP[currentTask];
-
-        if (!autosaveType || !praktikanId || !activeModulId) {
-            return;
-        }
-
-        if (!Array.isArray(questions) || questions.length === 0) {
-            return;
-        }
-
-        if (!Array.isArray(answers) || answers.length === 0) {
-            return;
-        }
-
-        if (isRestoringAutosaveRef.current) {
-            return;
-        }
-
-        const jawabanEntries = {};
-
-        questions.forEach((question, index) => {
-            const questionId = question?.id;
-            if (!questionId) {
-                return;
-            }
-
-            const answerValue = answers[index];
-            const serializedAnswer = serializeAnswerForAutosave(question, answerValue);
-            if (serializedAnswer === null || serializedAnswer === undefined) {
-                return;
-            }
-
-            if (
-                typeof serializedAnswer === "string" &&
-                serializedAnswer.trim() === ""
-            ) {
-                return;
-            }
-
-            jawabanEntries[questionId] = serializedAnswer;
-        });
-
-        if (Object.keys(jawabanEntries).length === 0) {
-            return;
-        }
-
-        const debouncedSaver = getAutosaveHandler(autosaveType);
-        if (!debouncedSaver) {
-            return;
-        }
-
-        debouncedSaver({
-            praktikan_id: praktikanId,
-            modul_id: activeModulId,
-            tipe_soal: autosaveType,
-            jawaban: jawabanEntries,
-        });
-    }, [answers, questions, activeTask, praktikanId, activeModulId, getAutosaveHandler]);
-
-    const handlePraktikumStateChange = useCallback(
-        (praktikumState) => {
-            const timestamp = new Date().toISOString();
-            if (!praktikumState) {
-                setActiveModulId(null);
-                setModuleMeta(null);
-                resetActiveTaskState();
-                setActiveComponent("NoPraktikumSection");
-                setFeedbackReminder({ isPending: false, modulId: null, asistenId: null });
-
-                return;
-            }
-
-            const pending = Boolean(praktikumState.feedback_pending ?? praktikumState.feedbackPending);
-            const pendingModulId = praktikumState.feedback_modul_id ?? praktikumState.modul_id ?? null;
-            const pendingAsistenId = praktikumState.feedback_asisten_id ?? praktikumState.pj_id ?? null;
-
-            setFeedbackReminder({
-                isPending: pending,
-                modulId: pendingModulId,
-                asistenId: pendingAsistenId,
-            });
-
-            setActiveModulId(praktikumState.modul_id ?? pendingModulId ?? null);
-            setModuleMeta(praktikumState);
-
-            if (praktikumState.status === "exited" || praktikumState.status === "paused") {
-                resetActiveTaskState();
-                setActiveComponent("NoPraktikumSection");
-            }
-
-        },
-        [resetActiveTaskState]
-    );
-
-    const handleSaveProgress = useCallback(async () => {
-        const autosaveType = AUTOSAVE_TYPE_MAP[activeTask];
-        if (!autosaveType || !praktikanId || !activeModulId) {
-            toast.error("Tidak ada sesi aktif untuk disimpan.");
-            return;
-        }
-
-        if (!Array.isArray(questions) || questions.length === 0) {
-            toast.error("Belum ada soal yang dimuat.");
-            return;
-        }
-
-        const jawabanEntries = {};
-        questions.forEach((question, index) => {
-            const questionId = question?.id;
-            if (!questionId) return;
-            const answerValue = answers[index];
-            const serializedAnswer = serializeAnswerForAutosave(question, answerValue);
-            if (serializedAnswer === null || serializedAnswer === undefined) return;
-            if (typeof serializedAnswer === "string" && serializedAnswer.trim() === "") return;
-            jawabanEntries[questionId] = serializedAnswer;
-        });
-
-        if (Object.keys(jawabanEntries).length === 0) {
-            toast("Belum ada jawaban untuk disimpan.", { icon: "\u26A0\uFE0F" });
-            return;
-        }
-
-        setIsSavingProgress(true);
-        try {
-            await api.post("/api-v1/praktikan/autosave", {
-                praktikan_id: praktikanId,
-                modul_id: activeModulId,
-                tipe_soal: autosaveType,
-                jawaban: jawabanEntries,
-            });
-            toast.success("Progress berhasil disimpan.");
-        } catch (error) {
-            console.error("[SaveProgress] Failed:", error);
-            toast.error(error?.response?.data?.message ?? "Gagal menyimpan progress.");
-        } finally {
-            setIsSavingProgress(false);
-        }
-    }, [activeTask, praktikanId, activeModulId, questions, answers]);
-
-    const handleRefreshStatus = useCallback(async () => {
-        setIsRefreshingStatus(true);
-        try {
-            const { data } = await api.get("/api-v1/praktikum/check-praktikum");
-
-            if (data?.dk_required) {
-                toast("DK belum dipilih. Silakan pilih DK terlebih dahulu.", { icon: "\u26A0\uFE0F" });
-                setIsRefreshingStatus(false);
-                return;
-            }
-
-            const hasActiveTask = activeTask && AUTOSAVE_TYPE_MAP[activeTask];
-
-            if (data?.status === "success") {
-                const praktikumPayload = data?.data ?? null;
-                const feedbackPending = Boolean(data?.feedback_pending ?? praktikumPayload?.feedback_pending ?? false);
-                const mergedPayload = praktikumPayload ? { ...praktikumPayload } : {};
-
-                const payloadToApply = feedbackPending || praktikumPayload
-                    ? {
-                        ...mergedPayload,
-                        feedback_pending: feedbackPending,
-                        feedback_modul_id: data?.feedback_modul_id ?? mergedPayload.feedback_modul_id ?? mergedPayload.modul_id ?? null,
-                        feedback_asisten_id: data?.feedback_asisten_id ?? mergedPayload.feedback_asisten_id ?? mergedPayload.pj_id ?? null,
-                    }
-                    : null;
-
-                const newPhase = payloadToApply?.current_phase ?? null;
-                const newStatus = payloadToApply?.status ?? null;
-                const currentPhase = moduleMeta?.current_phase ?? null;
-
-                const applyFeedbackReminder = (payload) => {
-                    if (!payload) return;
-                    setFeedbackReminder({
-                        isPending: Boolean(payload.feedback_pending),
-                        modulId: payload.feedback_modul_id ?? null,
-                        asistenId: payload.feedback_asisten_id ?? null,
-                    });
-                };
-
-                if (newStatus === "paused" || newStatus === "exited" || !payloadToApply) {
-                    if (hasActiveTask) {
-                        await handleSaveProgress();
-                    }
-                    resetActiveTaskState();
-                    setActiveComponent("NoPraktikumSection");
-                    if (payloadToApply) {
-                        setModuleMeta(payloadToApply);
-                        setActiveModulId(payloadToApply.modul_id ?? null);
-                        applyFeedbackReminder(payloadToApply);
-                    }
-                    toast.success("Status praktikum diperbarui.");
-                    return;
-                }
-
-                if (newPhase && newPhase === currentPhase) {
-                    setModuleMeta(payloadToApply);
-                    setActiveModulId(payloadToApply.modul_id ?? null);
-                    applyFeedbackReminder(payloadToApply);
-                    toast.success("Status praktikum berhasil diperbarui.");
-                } else {
-                    if (hasActiveTask) {
-                        await handleSaveProgress();
-                    }
-                    setModuleMeta(payloadToApply);
-                    setActiveModulId(payloadToApply.modul_id ?? null);
-                    applyFeedbackReminder(payloadToApply);
-                    toast.success("Status praktikum diperbarui \u2014 fase berubah.");
-                }
-            } else {
-                if (hasActiveTask) {
-                    await handleSaveProgress();
-                }
-                resetActiveTaskState();
-                setActiveComponent("NoPraktikumSection");
-                setModuleMeta(null);
-                setActiveModulId(null);
-                setFeedbackReminder({ isPending: false, modulId: null, asistenId: null });
-                toast("Tidak ada sesi praktikum aktif.", { icon: "\u2139\uFE0F" });
-            }
-        } catch (error) {
-            console.error("[RefreshStatus] Failed:", error);
-            toast.error(error?.response?.data?.message ?? "Gagal memperbarui status praktikum.");
-        } finally {
-            setIsRefreshingStatus(false);
-        }
-    }, [moduleMeta, activeTask, handleSaveProgress, resetActiveTaskState]);
-
-    const handleNavigate = useCallback(
-        (componentName) => {
-            const nextComponent = ALLOWED_COMPONENTS.has(componentName)
-                ? componentName
-                : "NoPraktikumSection";
-
-            setActiveComponent(nextComponent);
-
-            if (TASK_NAMES.includes(nextComponent)) {
-                setActiveTask(nextComponent);
-                if (activeModulId) {
-                    fetchTaskData(nextComponent, activeModulId);
-                } else {
-                    clearTaskProgress();
-                }
-            } else {
-                setActiveTask(null);
-            }
-        },
-        [activeModulId, fetchTaskData, clearTaskProgress]
-    );
-
-    const persistAnswersToLocalStorage = useCallback((taskName, taskAnswers, modulId) => {
-        if (!modulId) {
-            return;
-        }
-
-        try {
-            const key = `praktikum:answers:${taskName}:${modulId}`;
-            localStorage.setItem(key, JSON.stringify(taskAnswers));
-        } catch (error) {
-            console.warn("Failed to persist answers", error);
-        }
-    }, []);
-
-    const handleTaskSubmit = useCallback(
-        async (taskName, taskAnswers = answers, silent = false) => {
-            if (!taskName || !TASK_NAMES.includes(taskName)) {
-                return;
-            }
-
-            if (!activeModulId || !praktikanId) {
-                if (!silent) {
-                    setSubmissionError("Modul aktif atau data praktikan tidak ditemukan.");
-                }
-
-                return;
-            }
-
-            const config = TASK_CONFIG[taskName];
-            if (!config) {
-                return;
-            }
-
-            const normalizedAnswers = questions.map((question, index) => ({
-                question,
-                answer: taskAnswers[index],
-            }));
-
-            let multipleChoiceSelections = [];
-
-            if (config.variant === "multiple-choice") {
-                multipleChoiceSelections = normalizedAnswers.filter(
-                    (entry) => entry.answer !== null && entry.answer !== undefined
-                );
-            }
-
-            setIsSubmittingTask(true);
-            setSubmissionError(null);
-
-            try {
-                if (taskName === "Jurnal" && config.fitb) {
-                    const fitbPayload = normalizedAnswers
-                        .filter((entry) => entry.question.questionType === "fitb")
-                        .map((entry) => ({
-                            praktikan_id: praktikanId,
-                            modul_id: activeModulId,
-                            soal_id: entry.question.id,
-                            jawaban: serialiseAnswerForSubmission(entry.answer),
-                        }));
-
-                    const jurnalPayload = normalizedAnswers
-                        .filter((entry) => entry.question.questionType !== "fitb")
-                        .map((entry) => ({
-                            praktikan_id: praktikanId,
-                            modul_id: activeModulId,
-                            soal_id: entry.question.id,
-                            jawaban: serialiseAnswerForSubmission(entry.answer),
-                        }));
-
-                    if (fitbPayload.length) {
-                        await api.post(config.fitb.submitEndpoint, fitbPayload);
-                    }
-
-                    if (jurnalPayload.length) {
-                        await api.post(config.submitEndpoint, jurnalPayload);
-                    }
-                } else if (config.variant === "multiple-choice") {
-                    const payload = {
-                        praktikan_id: praktikanId,
-                        modul_id: activeModulId,
-                        answers: multipleChoiceSelections.map((entry) => ({
-                            soal_id: entry.question.id,
-                            opsi_id: entry.answer,
-                        })),
-                    };
-
-                    await api.post(config.submitEndpoint, payload);
-                } else {
-                    const payload = normalizedAnswers.map((entry) => ({
-                        praktikan_id: praktikanId,
-                        modul_id: activeModulId,
-                        soal_id: entry.question.id,
-                        jawaban: serialiseAnswerForSubmission(entry.answer),
-                    }));
-
-                    await api.post(config.submitEndpoint, payload);
-                }
-
-                const autosaveType = AUTOSAVE_TYPE_MAP[taskName];
-                if (autosaveType) {
-                    try {
-                        await api.delete("/api-v1/praktikan/autosave", {
-                            data: {
-                                praktikan_id: praktikanId,
-                                modul_id: activeModulId,
-                                tipe_soal: autosaveType,
-                            },
-                        });
-                    } catch (error) {
-                        console.warn(`[Autosave] Failed to clear ${autosaveType} snapshot`, error);
-                    }
-                }
-
-                persistAnswersToLocalStorage(taskName, taskAnswers, activeModulId);
-                setCompletedCategories((prev) => ({ ...prev, [taskName]: true }));
-                clearTaskProgress();
-
-                const zeroScorePhase = SCORE_PHASE_BY_TASK[taskName];
-                if (!silent && zeroScorePhase && multipleChoiceSelections.length === 0) {
-                    setScoreModalState({
-                        isOpen: true,
-                        phaseType: zeroScorePhase,
-                        correctAnswers: 0,
-                        totalQuestions: questions.length,
-                        percentage: 0,
-                    });
-                }
-
-                if (!silent) {
-                    setActiveComponent("NoPraktikumSection");
-                }
-            } catch (error) {
-                console.error("Failed to submit answers", error);
-                const message = error?.response?.data?.message ?? error.message ?? "Terjadi kesalahan saat menyimpan jawaban.";
-                setSubmissionError(message);
-            } finally {
-                setIsSubmittingTask(false);
-            }
-        },
-        [activeModulId, answers, clearTaskProgress, persistAnswersToLocalStorage, praktikanId, questions, setScoreModalState]
-    );
-
-    const handleReviewTask = useCallback(
-        (taskKey) => {
-            if (!taskKey || !TASK_NAMES.includes(taskKey)) {
-                return;
-            }
-
-            handleNavigate(taskKey);
-        },
-        [handleNavigate]
-    );
-
-    const previousPhaseRef = useRef();
-
-    useEffect(() => {
-        previousPhaseRef.current = undefined;
-    }, [activeModulId]);
-
-    useEffect(() => {
-        scoreFetchLocksRef.current = new Set();
-        setScoreModalState({
-            isOpen: false,
-            phaseType: null,
-            correctAnswers: 0,
-            totalQuestions: 0,
-            percentage: 0,
-            hasError: false,
-            isRetrying: false,
-        });
-    }, [activeModulId]);
-
-    useEffect(() => {
-        if (!activeModulId) {
-            return;
-        }
-
-        const currentPhase = moduleMeta?.current_phase;
-        if (currentPhase && ["ta", "tk"].includes(currentPhase)) {
-            const key = `${currentPhase}:${activeModulId}`;
-            scoreFetchLocksRef.current.delete(key);
-        }
-    }, [moduleMeta?.current_phase, activeModulId]);
-
-    const ActiveTaskComponent = TASK_COMPONENTS[activeComponent] ?? null;
-    const activeTaskConfig = TASK_CONFIG[activeComponent] ?? null;
-    const activeCommentType = activeTaskConfig?.commentType ?? null;
-    const reminderModuleLabel = useMemo(() => {
-        const moduleEntry = moduleMeta?.modul ?? null;
-
-        if (moduleEntry) {
-            if (typeof moduleEntry === "string") {
-                return moduleEntry;
-            }
-
-            if (moduleEntry?.judul) {
-                return moduleEntry.judul;
-            }
-        }
-
-        if (moduleMeta?.modul_name) {
-            return moduleMeta.modul_name;
-        }
-
-        if (moduleMeta?.modul_id) {
-            const resolved = resolveModuleTitle(moduleMeta.modul_id);
-            if (resolved) {
-                return resolved;
-            }
-        }
-
-        if (feedbackReminder.modulId) {
-            const resolved = resolveModuleTitle(feedbackReminder.modulId);
-            if (resolved) {
-                return resolved;
-            }
-
-            return `Modul #${feedbackReminder.modulId}`;
-        }
-
-        return null;
-    }, [feedbackReminder.modulId, moduleMeta?.modul, moduleMeta?.modul_id, moduleMeta?.modul_name, resolveModuleTitle]);
-    const feedbackModuleLabel = useMemo(() => {
-        if (!feedbackContext.modulId) {
-            return null;
-        }
-
-        const activeModuleId = moduleMeta?.modul_id ? String(moduleMeta.modul_id) : null;
-        if (activeModuleId && activeModuleId === String(feedbackContext.modulId)) {
-            if (moduleMeta?.modul?.judul) {
-                return moduleMeta.modul.judul;
-            }
-
-            if (moduleMeta?.modul_name) {
-                return moduleMeta.modul_name;
-            }
-        }
-
-        const resolved = resolveModuleTitle(feedbackContext.modulId);
-        if (resolved) {
-            return resolved;
-        }
-
-        return null;
-    }, [feedbackContext.modulId, moduleMeta?.modul, moduleMeta?.modul_id, moduleMeta?.modul_name, resolveModuleTitle]);
-    const showFeedbackReminderBanner =
-        feedbackReminder.isPending &&
-        moduleMeta?.status !== "running" &&
-        activeComponent !== "FeedbackPhase";
-    const isFeedbackPhaseActive = activeComponent === "FeedbackPhase";
-
-    const buildFeedbackContext = useCallback(
-        (options = {}) => {
-            const {
-                modulId = null,
-                assistantId = null,
-                fallbackModulToReminder = true,
-                fallbackAssistantToReminder = true,
-                fallbackToModuleAssistant = true,
-            } = options;
-
-            let primaryModulId = modulId ?? activeModulId ?? null;
-            if (primaryModulId === null && fallbackModulToReminder) {
-                primaryModulId = feedbackReminder.modulId ?? null;
-            }
-
-            if (!primaryModulId) {
-                return null;
-            }
-
-            let resolvedAssistantId = assistantId ?? null;
-            if (resolvedAssistantId === null && fallbackAssistantToReminder) {
-                resolvedAssistantId = feedbackReminder.asistenId ?? null;
-            }
-            if (resolvedAssistantId === null && fallbackToModuleAssistant) {
-                resolvedAssistantId = moduleMeta?.pj_id ?? null;
-            }
-
-            return {
-                modulId: primaryModulId,
-                assistantId: resolvedAssistantId,
-            };
-        },
-        [activeModulId, feedbackReminder.asistenId, feedbackReminder.modulId, moduleMeta?.pj_id]
-    );
-
-    const openFeedbackPhase = useCallback((context) => {
-        if (!context?.modulId) {
-            toast.error("Modul feedback tidak ditemukan.");
-            return;
-        }
-
-        setFeedbackContext({
-            modulId: context.modulId,
-            assistantId: context.assistantId ?? null,
-        });
-        setActiveComponent("FeedbackPhase");
-    }, []);
-
-    const scheduleFeedbackPhase = useCallback(
-        (context) => {
-            if (!context?.modulId) {
-                toast.error("Modul feedback tidak ditemukan.");
-                return;
-            }
-
-            if (scoreAckRequiredRef.current || scoreModalState.isOpen) {
-                pendingFeedbackNavigationRef.current = context;
-                return;
-            }
-
-            pendingFeedbackNavigationRef.current = null;
-            openFeedbackPhase(context);
-        },
-        [openFeedbackPhase, scoreModalState.isOpen]
-    );
-
-    const navigateToFeedback = useCallback(
-        (options = {}) => {
-            const context = buildFeedbackContext(options);
-            if (!context) {
-                toast.error("Modul feedback tidak ditemukan.");
-                return;
-            }
-
-            scheduleFeedbackPhase(context);
-        },
-        [buildFeedbackContext, scheduleFeedbackPhase]
-    );
-
-    const handleFeedbackSubmitted = useCallback(() => {
-        setFeedbackReminder({
-            isPending: false,
-            modulId: null,
-            asistenId: null,
-        });
-        setFeedbackContext({
-            modulId: null,
-            assistantId: null,
-        });
-        setActiveComponent("NoPraktikumSection");
-    }, []);
-
-    const handleFeedbackClose = useCallback(() => {
-        setFeedbackContext({
-            modulId: null,
-            assistantId: null,
-        });
-        setActiveComponent("NoPraktikumSection");
-    }, []);
-
-    const closeScoreModal = useCallback(() => {
-        setScoreModalState((previous) => ({
-            ...previous,
-            isOpen: false,
-        }));
-        scoreAckRequiredRef.current = false;
-
-        if (pendingFeedbackNavigationRef.current) {
-            const context = pendingFeedbackNavigationRef.current;
-            pendingFeedbackNavigationRef.current = null;
-            openFeedbackPhase(context);
-        }
-    }, [openFeedbackPhase]);
-
-    const retryFetchScore = useCallback(() => {
-        const phase = scoreModalState.phaseType;
-        if (phase && ["ta", "tk"].includes(phase)) {
-            fetchPhaseScore(phase);
-        }
-    }, [scoreModalState.phaseType, fetchPhaseScore]);
-
-    const handlePhaseChange = useCallback(
-        (currentPhase) => {
-            if (currentPhase === "feedback") {
-                const context =
-                    buildFeedbackContext({
-                        modulId: moduleMeta?.modul_id ?? activeModulId ?? feedbackReminder.modulId ?? null,
-                        assistantId: feedbackReminder.asistenId ?? moduleMeta?.pj_id ?? null,
-                        fallbackModulToReminder: true,
-                        fallbackAssistantToReminder: true,
-                        fallbackToModuleAssistant: true,
-                    }) ?? null;
-
-                if (!context) {
-                    toast.error("Modul feedback tidak ditemukan.");
-                    return;
-                }
-
-                scheduleFeedbackPhase(context);
-
-                return;
-            }
-
-            const targetComponent = PHASE_TO_COMPONENT[currentPhase];
-            if (targetComponent) {
-                handleNavigate(targetComponent);
-            }
-        },
-        [
-            activeModulId,
-            buildFeedbackContext,
-            handleNavigate,
-            moduleMeta?.modul_id,
-            moduleMeta?.pj_id,
-            scheduleFeedbackPhase,
-        ]
-    );
-
-    // Combined phase change handler with auto-submit
-    useEffect(() => {
-        if (!moduleMeta?.current_phase || !activeModulId) {
-            previousPhaseRef.current = undefined;
-
-            return;
-        }
-
-        const newPhase = moduleMeta.current_phase;
-        const previousPhase = previousPhaseRef.current;
-
-        if (previousPhase === newPhase) {
-            return;
-        }
-
-        previousPhaseRef.current = newPhase;
-
-        const shouldAutoSubmit =
-            Boolean(previousPhase) &&
-            previousPhase !== newPhase &&
-            activeComponent !== "NoPraktikumSection" &&
-            answers.length > 0 &&
-            !isSubmittingTask &&
-            Boolean(activeTask);
-
-        const shouldShowScore = ["ta", "tk"].includes(previousPhase ?? "");
-
-        if (shouldAutoSubmit) {
-            (async () => {
-                try {
-                    await handleTaskSubmit(activeTask, answers, true);
-                    if (shouldShowScore) {
-                        await fetchPhaseScore(previousPhase);
-                    }
-                } catch (error) {
-                    console.error("Auto-submit failed:", error);
-                } finally {
-                    handlePhaseChange(newPhase);
-                }
-            })();
-
-            return;
-        }
-
-        if (shouldShowScore) {
-            fetchPhaseScore(previousPhase);
-        }
-
-        handlePhaseChange(newPhase);
-    }, [moduleMeta?.current_phase, activeModulId, answers, activeComponent, activeTask, isSubmittingTask, handleTaskSubmit, handlePhaseChange, fetchPhaseScore]);
-
-    // Join presence channel for online status tracking
-    useEffect(() => {
-        if (!window.Echo || !kelasId || !praktikanId) {
-            return undefined;
-        }
-
-        const presenceChannelName = `presence-kelas.${kelasId}`;
-        const presenceChannel = window.Echo.join(presenceChannelName);
-
-        presenceChannel
-            .error((error) => {
-                console.error('Presence channel error:', error);
-            });
-
-        return () => {
-            window.Echo.leave(presenceChannelName);
-        };
-    }, [kelasId, praktikanId]);
+    const [view, setView] = useState("NoPraktikumSection");
+    const praktikan = auth?.praktikan ?? auth?.user ?? null;
+    const praktikanId = praktikan?.id ?? null;
+    const kelasId = praktikan?.kelas_id ?? praktikan?.kelas?.id ?? null;
+    const kelasName = String(praktikan?.kelas?.kelas ?? "");
+    const isTot = Boolean(praktikan?.kelas?.is_tot) || kelasName.trim().toUpperCase().startsWith("TOT");
+
+    const task = usePraktikumTask(praktikanId);
+    const session = usePraktikumSession({ praktikan, task, view, setView });
+    const { data: modules = [] } = useModulesQuery();
+
+    const moduleTitle = useCallback((id) => title(modules.find((m) => String(m?.id ?? m?.idM ?? m?.modul_id) === String(id))), [modules]);
+
+    const reminderLabel = useMemo(() =>
+        title(session.meta?.modul) ??
+        session.meta?.modul_name ??
+        moduleTitle(session.meta?.modul_id) ??
+        moduleTitle(session.feedbackReminder.modulId) ??
+        (session.feedbackReminder.modulId ? `Modul #${session.feedbackReminder.modulId}` : null),
+    [session.meta, session.feedbackReminder.modulId, moduleTitle]);
+
+    const feedbackLabel = useMemo(() =>
+        session.feedbackContext.modulId ? moduleTitle(session.feedbackContext.modulId) ?? reminderLabel : reminderLabel,
+    [session.feedbackContext.modulId, moduleTitle, reminderLabel]);
+
+    const ActiveTask = COMPONENTS[view] ?? null;
+    const openTask = task.open;
+    const currentModulId = session.modulId;
+
+    const openView = useCallback(async (name) => {
+        setView(name);
+        if (COMPONENTS[name] && currentModulId) await openTask(name, currentModulId);
+    }, [openTask, currentModulId]);
+
+    const showReminder =
+        session.feedbackReminder.isPending &&
+        session.meta?.status !== "running" &&
+        view !== "FeedbackPhase";
 
     return (
         <>
-            <PraktikanAuthenticated
-                user={praktikanData}
-                praktikan={praktikanData}
-                customWidth="w-full"
-                header={
-                    <h2 className="font-semibold text-xl text-gray-800 leading-tight">
-                        Dashboard
-                    </h2>
-                }
-            >
+            <PraktikanAuthenticated user={praktikan} praktikan={praktikan} customWidth="w-full" header={<h2 className="text-xl font-semibold leading-tight text-gray-800">Dashboard</h2>}>
                 <Head title="Praktikum Praktikan" />
-                <div className="relative items-center flex flex-col ">
-                    <div className="w-full transition-all duration-300 ">
-                        {showFeedbackReminderBanner && (
-                            <div className="mb-4 rounded-depth-lg border border-amber-200 bg-amber-50/80 p-4 text-sm text-amber-900 shadow-depth-sm">
-                                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                                    <div>
-                                        <p className="font-semibold">Feedback praktikum belum terkirim</p>
-                                        <p className="text-xs text-amber-800/80">
-                                            Segera lengkapi feedback untuk {reminderModuleLabel ?? "modul terkait"} sebelum meninggalkan halaman.
-                                        </p>
-                                    </div>
-                                    <button
-                                        type="button"
-                                        onClick={() => navigateToFeedback()}
-                                        className="inline-flex items-center justify-center rounded-depth-md bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-depth-sm transition hover:-translate-y-0.5 hover:shadow-depth-md"
-                                    >
-                                        Buka Form Feedback
-                                    </button>
-                                </div>
+
+                {showReminder && (
+                    <div className="mb-4 rounded-depth-lg border border-amber-200 bg-amber-50/80 p-4 text-sm text-amber-900 shadow-depth-sm">
+                        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                            <div>
+                                <p className="font-semibold">Feedback praktikum belum terkirim</p>
+                                <p className="text-xs">Segera lengkapi feedback untuk {reminderLabel ?? "modul terkait"}.</p>
                             </div>
-                        )}
-                        <Suspense fallback={<div className="mt-6 text-sm text-depth-secondary">Memuat status praktikum...</div>}>
-                            <NoPraktikumSection
-                                isVisible={activeComponent === "NoPraktikumSection"}
-                                onNavigate={handleNavigate}
-                                completedCategories={completedCategories}
-                                setCompletedCategories={setCompletedCategories}
-                                onReviewTask={handleReviewTask}
-                                kelasId={kelasId}
-                                dk={moduleMeta?.dk}
-                                onPraktikumStateChange={handlePraktikumStateChange}
-                                moduleMeta={moduleMeta}
-                            />
-                        </Suspense>
-                        {activeComponent !== "NoPraktikumSection" && (
-                            <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-2">
-                                {ActiveTaskComponent && (
-                                    <button
-                                        type="button"
-                                        onClick={handleSaveProgress}
-                                        disabled={isSavingProgress}
-                                        className={`inline-flex items-center gap-1.5 rounded-depth-md border border-depth px-3 py-1.5 text-xs font-semibold shadow-depth-sm transition-all ${isSavingProgress
-                                            ? "cursor-not-allowed opacity-50"
-                                            : "bg-depth-card text-depth-primary hover:bg-depth-interactive hover:shadow-depth-md"
-                                            }`}
-                                        title="Simpan progress jawaban secara manual"
-                                    >
-                                        <svg className={`h-4 w-4 ${isSavingProgress ? "animate-spin" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            {isSavingProgress ? (
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                                            ) : (
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-                                            )}
-                                        </svg>
-                                        {isSavingProgress ? "Menyimpan..." : "Save Progress"}
-                                    </button>
-                                )}
+                            <button type="button" onClick={() => session.scheduleFeedback()} className="rounded-depth-md bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-depth-sm">Buka Feedback</button>
+                        </div>
+                    </div>
+                )}
+
+                <Suspense fallback={<p className="p-6 text-center text-depth-secondary">Memuat...</p>}>
+                    <NoPraktikumSection
+                        isVisible={view === "NoPraktikumSection"}
+                        onNavigate={openView}
+                        onReviewTask={openView}
+                        completedCategories={task.completed}
+                        setCompletedCategories={task.setCompleted}
+                        kelasId={kelasId}
+                        dk={session.dk}
+                        moduleMeta={session.meta}
+                        onPraktikumStateChange={session.apply}
+                    />
+                </Suspense>
+
+                {view !== "NoPraktikumSection" && (
+                    <>
+                        <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-2">
+                            {ActiveTask && (
                                 <button
                                     type="button"
-                                    onClick={handleRefreshStatus}
-                                    disabled={isRefreshingStatus}
-                                    className={`inline-flex items-center gap-1.5 rounded-depth-md border border-depth px-3 py-1.5 text-xs font-semibold shadow-depth-sm transition-all ${isRefreshingStatus
-                                        ? "cursor-not-allowed opacity-50"
-                                        : "bg-depth-card text-depth-primary hover:bg-depth-interactive hover:shadow-depth-md"
-                                        }`}
-                                    title="Refresh status praktikum secara manual"
+                                    onClick={() => task.save(true)}
+                                    disabled={task.saving || task.submitting}
+                                    className="rounded-depth-md border border-depth bg-depth-card px-3 py-2 text-xs font-semibold shadow-depth-sm disabled:cursor-not-allowed disabled:opacity-50"
                                 >
-                                    <svg className={`h-4 w-4 ${isRefreshingStatus ? "animate-spin" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                                    </svg>
-                                    {isRefreshingStatus ? "Memuat..." : "Refresh Status"}
+                                    {task.saving ? "Menyimpan..." : "Save Progress"}
                                 </button>
-                            </div>
-                        )}
-                        {activeComponent !== "NoPraktikumSection" && (
-                            <Suspense fallback={<div className="mt-6 text-sm text-depth-secondary">Memuat konten...</div>}>
-                                {ActiveTaskComponent ? (
-                                    <ActiveTaskComponent
-                                        isLoading={isLoadingTask}
-                                        errorMessage={taskError}
-                                        setAnswers={setAnswers}
-                                        answers={answers}
-                                        questions={questions}
-                                        setQuestionsCount={setQuestionsCount}
-                                        onSubmitTask={handleTaskSubmit}
-                                        tipeSoal={activeCommentType}
-                                        praktikanId={praktikanId}
-                                        isCommentEnabled={isTotClass && Boolean(activeCommentType)}
-                                    />
-                                ) : isFeedbackPhaseActive ? (
-                                    <FeedbackPhase
-                                        praktikan={praktikanData}
-                                        modulId={feedbackContext.modulId ?? activeModulId}
-                                        assistantId={feedbackContext.assistantId}
-                                        moduleLabel={feedbackModuleLabel ?? reminderModuleLabel}
-                                        onClose={handleFeedbackClose}
-                                        onSubmitted={handleFeedbackSubmitted}
-                                    />
-                                ) : null}
-                            </Suspense>
-                        )}
-                    </div>
-                </div>
+                            )}
+                            <button
+                                type="button"
+                                onClick={session.refresh}
+                                disabled={session.refreshing || task.saving || task.submitting}
+                                className="rounded-depth-md border border-depth bg-depth-card px-3 py-2 text-xs font-semibold shadow-depth-sm disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                                {session.refreshing ? "Memuat..." : "Refresh Status"}
+                            </button>
+                        </div>
+
+                        {task.submissionError && <div className="mb-4 rounded-depth-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-400">{task.submissionError}</div>}
+
+                        <Suspense fallback={<p className="p-6 text-center text-depth-secondary">Memuat konten...</p>}>
+                            {ActiveTask ? (
+                                <ActiveTask
+                                    questions={task.questions}
+                                    answers={task.answers}
+                                    setAnswers={task.setAnswers}
+                                    isLoading={task.loading}
+                                    errorMessage={task.error}
+                                    tipeSoal={TASKS[view]?.phase}
+                                    praktikanId={praktikanId}
+                                    isCommentEnabled={isTot}
+                                />
+                            ) : view === "FeedbackPhase" ? (
+                                <FeedbackPhase
+                                    praktikan={praktikan}
+                                    modulId={session.feedbackContext.modulId ?? session.modulId}
+                                    assistantId={session.feedbackContext.assistantId}
+                                    moduleLabel={feedbackLabel}
+                                    onClose={session.closeFeedback}
+                                    onSubmitted={session.feedbackSubmitted}
+                                />
+                            ) : null}
+                        </Suspense>
+                    </>
+                )}
             </PraktikanAuthenticated>
-            <Suspense fallback={null}>
-                <PraktikanUtilities />
-            </Suspense>
+
+            <Suspense fallback={null}><PraktikanUtilities /></Suspense>
             <Suspense fallback={null}>
                 <ScoreDisplayModal
-                    isOpen={scoreModalState.isOpen}
-                    onClose={closeScoreModal}
-                    phaseType={scoreModalState.phaseType}
-                    correctAnswers={scoreModalState.correctAnswers}
-                    totalQuestions={scoreModalState.totalQuestions}
-                    percentage={scoreModalState.percentage}
-                    isTotClass={isTotClass}
-                    hasError={scoreModalState.hasError}
-                    onRetry={retryFetchScore}
-                    isRetrying={scoreModalState.isRetrying}
+                    {...session.score}
+                    onClose={session.closeScore}
+                    onRetry={session.retryScore}
+                    isTotClass={isTot}
                 />
             </Suspense>
         </>
diff --git a/resources/js/config/praktikum.js b/resources/js/config/praktikum.js
new file mode 100644
index 0000000..0371d84
--- /dev/null
+++ b/resources/js/config/praktikum.js
@@ -0,0 +1,63 @@
+export const TASKS = {
+    TesAwal: {
+        phase: "ta",
+        variant: "pg",
+        q: (id) => `/api-v1/soal-ta/${id}`,
+        submit: "/api-v1/jawaban-ta",
+        sticky: true,
+        score: true,
+    },
+    Jurnal: {
+        phase: "jurnal",
+        variant: "jurnal",
+        q: (id) => `/api-v1/soal-jurnal/${id}`,
+        submit: "/api-v1/jawaban-jurnal",
+        fitb: {
+            q: (id) => `/api-v1/soal-fitb/${id}`,
+            submit: "/api-v1/jawaban-fitb",
+        },
+    },
+    Mandiri: {
+        phase: "mandiri",
+        variant: "essay",
+        q: (id) => `/api-v1/soal-tm/${id}`,
+        submit: "/api-v1/jawaban-tm",
+        sticky: true,
+    },
+    TesKeterampilan: {
+        phase: "tk",
+        variant: "pg",
+        q: (id) => `/api-v1/soal-tk/${id}`,
+        submit: "/api-v1/jawaban-tk",
+        sticky: true,
+        score: true,
+    },
+};
+
+export const PHASE_VIEW = {
+    ta: "TesAwal",
+    fitb_jurnal: "Jurnal",
+    mandiri: "Mandiri",
+    tk: "TesKeterampilan",
+};
+
+export const TASK_NAMES = Object.keys(TASKS);
+export const DONE_INITIAL = Object.fromEntries(
+    TASK_NAMES.map((x) => [x, false]),
+);
+
+export const SCORE_INITIAL = {
+    isOpen: false,
+    phaseType: null,
+    correctAnswers: 0,
+    totalQuestions: 0,
+    percentage: 0,
+    hasError: false,
+    isRetrying: false,
+};
+
+export const FEEDBACK_INITIAL = {
+    isPending: false,
+    modulId: null,
+    asistenId: null,
+};
diff --git a/resources/js/hooks/praktikum/usePraktikumSession.js b/resources/js/hooks/praktikum/usePraktikumSession.js
new file mode 100644
index 0000000..0604bb0
--- /dev/null
+++ b/resources/js/hooks/praktikum/usePraktikumSession.js
@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { api } from "@/lib/api";
+import { FEEDBACK_INITIAL, PHASE_VIEW, SCORE_INITIAL } from "@/config/praktikum";
+
+const SCORE_PHASES = new Set(["ta", "tk"]);
+
+export default function usePraktikumSession({ praktikan, task, view, setView }) {
+    const [meta, setMeta] = useState(null);
+    const [modulId, setModulId] = useState(null);
+    const [feedbackReminder, setFeedbackReminder] = useState(FEEDBACK_INITIAL);
+    const [feedbackContext, setFeedbackContext] = useState({ modulId: null, assistantId: null });
+    const [score, setScore] = useState(SCORE_INITIAL);
+    const [refreshing, setRefreshing] = useState(false);
+
+    const previousPhase = useRef(null);
+    const scoreLocks = useRef(new Set());
+    const scoreAck = useRef(false);
+    const pendingFeedback = useRef(null);
+
+    const praktikanId = praktikan?.id ?? null;
+    const kelasId = praktikan?.kelas_id ?? praktikan?.kelas?.id ?? null;
+    const dk = praktikan?.dk ?? meta?.dk ?? null;
+
+    /*
+     * IMPORTANT:
+     * Extract members. Do not depend on the entire `task` object.
+     */
+    const {
+        reset: resetTask,
+        setModulId: setTaskModulId,
+        save: saveTask,
+        open: openTask,
+        submit: submitTask,
+        activeTask,
+        answers,
+        submitting,
+    } = task;
+
+    const apply = useCallback((state) => {
+        if (!state) {
+            setMeta(null);
+            setModulId(null);
+            setFeedbackReminder({ ...FEEDBACK_INITIAL });
+            resetTask();
+            setView("NoPraktikumSection");
+            return;
+        }
+
+        const pending = Boolean(state.feedback_pending ?? state.feedbackPending);
+        const module = state.modul_id ?? state.feedback_modul_id ?? null;
+
+        setFeedbackReminder({
+            isPending: pending,
+            modulId: state.feedback_modul_id ?? module,
+            asistenId: state.feedback_asisten_id ?? state.pj_id ?? null,
+        });
+
+        setModulId(module);
+        setTaskModulId(module);
+        setMeta(state);
+
+        if (["paused", "exited"].includes(state.status)) {
+            resetTask();
+            setView("NoPraktikumSection");
+        }
+    }, [resetTask, setTaskModulId, setView]);
+
+    const normalize = useCallback((data, fallback = null) => {
+        const raw = data?.data ?? fallback ?? null;
+        const pending = Boolean(data?.feedback_pending ?? raw?.feedback_pending ?? false);
+
+        if (!raw && !pending) return null;
+
+        return {
+            ...(raw ?? {}),
+            feedback_pending: pending,
+            feedback_modul_id: data?.feedback_modul_id ?? raw?.feedback_modul_id ?? raw?.modul_id ?? null,
+            feedback_asisten_id: data?.feedback_asisten_id ?? raw?.feedback_asisten_id ?? raw?.pj_id ?? null,
+        };
+    }, []);
+
+    const sync = useCallback(async ({ notify = false, fallback = null } = {}) => {
+        try {
+            const { data } = await api.get("/api-v1/praktikum/check-praktikum");
+
+            if (data?.dk_required) {
+                if (notify) toast("DK belum dipilih.", { icon: "⚠️" });
+                return;
+            }
+
+            apply(data?.status === "success" ? normalize(data, fallback) : null);
+            if (notify) toast.success("Status praktikum diperbarui.");
+        } catch (e) {
+            console.error("[Status Sync]", e);
+            if (notify) toast.error(e?.response?.data?.message ?? "Gagal memperbarui status.");
+        }
+    }, [apply, normalize]);
+
+    const refresh = useCallback(async () => {
+        setRefreshing(true);
+        try {
+            await saveTask(false);
+            await sync({ notify: true });
+        } finally {
+            setRefreshing(false);
+        }
+    }, [saveTask, sync]);
+
+    const fetchScore = useCallback(async (phase, module = modulId) => {
+        if (!praktikanId || !module || !SCORE_PHASES.has(phase)) return false;
+
+        const key = `${phase}:${module}`;
+        if (scoreLocks.current.has(key)) return true;
+
+        scoreLocks.current.add(key);
+        scoreAck.current = true;
+        setScore((x) => ({ ...x, phaseType: phase, hasError: false, isRetrying: true }));
+
+        try {
+            const { data } = await api.get(`/api-v1/nilai-${phase}/${praktikanId}/${module}`);
+            const total = data?.total_questions ?? data?.totalQuestions ?? 0;
+            const percentage = typeof data?.score === "number" ? data.score : null;
+            const rawCorrect = data?.correct_answers ?? data?.correctAnswers;
+            const correct = typeof rawCorrect === "number"
+                ? rawCorrect
+                : total && percentage != null
+                  ? Math.round((percentage / 100) * total)
+                  : 0;
+
+            setScore({
+                isOpen: true,
+                phaseType: phase,
+                correctAnswers: correct,
+                totalQuestions: total,
+                percentage: percentage ?? (total ? (correct / total) * 100 : 0),
+                hasError: false,
+                isRetrying: false,
+            });
+
+            return true;
+        } catch (e) {
+            console.error(`[Score:${phase}]`, e);
+            scoreLocks.current.delete(key);
+            setScore((x) => ({ ...x, isOpen: true, phaseType: phase, hasError: true, isRetrying: false }));
+            return false;
+        }
+    }, [praktikanId, modulId]);
+
+    const getFeedbackContext = useCallback(() => {
+        const module = modulId ?? feedbackReminder.modulId;
+        if (!module) return null;
+
+        return {
+            modulId: module,
+            assistantId: feedbackReminder.asistenId ?? meta?.pj_id ?? null,
+        };
+    }, [modulId, feedbackReminder.modulId, feedbackReminder.asistenId, meta?.pj_id]);
+
+    const openFeedback = useCallback((context) => {
+        const next = context ?? getFeedbackContext();
+        if (!next?.modulId) return;
+
+        setFeedbackContext(next);
+        setView("FeedbackPhase");
+    }, [getFeedbackContext, setView]);
+
+    const scheduleFeedback = useCallback((context) => {
+        const next = context ?? getFeedbackContext();
+        if (!next?.modulId) return;
+
+        if (scoreAck.current || score.isOpen) {
+            pendingFeedback.current = next;
+            return;
+        }
+
+        pendingFeedback.current = null;
+        openFeedback(next);
+    }, [getFeedbackContext, openFeedback, score.isOpen]);
+
+    const closeScore = useCallback(() => {
+        setScore((x) => ({ ...x, isOpen: false }));
+        scoreAck.current = false;
+
+        const pending = pendingFeedback.current;
+        if (!pending) return;
+
+        pendingFeedback.current = null;
+        openFeedback(pending);
+    }, [openFeedback]);
+
+    const retryScore = useCallback(() => {
+        const phase = score.phaseType;
+        if (!SCORE_PHASES.has(phase) || !modulId) return;
+
+        scoreLocks.current.delete(`${phase}:${modulId}`);
+        void fetchScore(phase, modulId);
+    }, [score.phaseType, modulId, fetchScore]);
+
+    const goPhase = useCallback(async (phase) => {
+        if (phase === "feedback") {
+            scheduleFeedback();
+            return;
+        }
+
+        const next = PHASE_VIEW[phase];
+        if (!next || !modulId) return;
+
+        setView(next);
+        await openTask(next, modulId);
+    }, [modulId, openTask, scheduleFeedback, setView]);
+
+    useEffect(() => {
+        const next = meta?.current_phase;
+
+        if (!next || !modulId) {
+            previousPhase.current = null;
+            return;
+        }
+
+        const previous = previousPhase.current;
+        if (previous === next) return;
+
+        previousPhase.current = next;
+
+        if (!previous) {
+            void goPhase(next);
+            return;
+        }
+
+        void (async () => {
+            try {
+                if (activeTask && view !== "NoPraktikumSection" && answers.length && !submitting)
+                    await submitTask(activeTask, answers, true);
+
+                if (SCORE_PHASES.has(previous))
+                    await fetchScore(previous, modulId);
+            } catch (e) {
+                console.error("[Phase Transition]", e);
+            } finally {
+                await goPhase(next);
+            }
+        })();
+    }, [
+        meta?.current_phase,
+        modulId,
+        activeTask,
+        view,
+        answers,
+        submitting,
+        submitTask,
+        fetchScore,
+        goPhase,
+    ]);
+
+    useEffect(() => {
+        const phase = meta?.current_phase;
+        if (modulId && SCORE_PHASES.has(phase))
+            scoreLocks.current.delete(`${phase}:${modulId}`);
+    }, [meta?.current_phase, modulId]);
+
+    useEffect(() => {
+        if (!window.Echo || !kelasId || !praktikanId) return;
+
+        const name = `presence-kelas.${kelasId}`;
+        window.Echo.join(name).error((e) => console.error("[Presence]", e));
+
+        return () => window.Echo.leave(name);
+    }, [kelasId, praktikanId]);
+
+    useEffect(() => {
+        if (!window.Echo || !kelasId || !dk) return;
+
+        const name = `praktikum.class.${kelasId}.dk.${dk}`;
+        const channel = window.Echo.channel(name).listen(".PraktikumStatusUpdated", (event) => {
+            void sync({ fallback: event?.praktikum ?? null });
+        });
+
+        return () => {
+            channel.stopListening(".PraktikumStatusUpdated");
+            window.Echo.leave(name);
+        };
+    }, [kelasId, dk, sync]);
+
+    const closeFeedback = useCallback(() => {
+        setFeedbackContext({ modulId: null, assistantId: null });
+        setView("NoPraktikumSection");
+    }, [setView]);
+
+    const feedbackSubmitted = useCallback(() => {
+        setFeedbackReminder({ ...FEEDBACK_INITIAL });
+        setFeedbackContext({ modulId: null, assistantId: null });
+        setView("NoPraktikumSection");
+    }, [setView]);
+
+    return {
+        meta,
+        modulId,
+        dk,
+        refreshing,
+        score,
+        feedbackReminder,
+        feedbackContext,
+        apply,
+        refresh,
+        sync,
+        openFeedback,
+        scheduleFeedback,
+        closeScore,
+        retryScore,
+        closeFeedback,
+        feedbackSubmitted,
+    };
+}
diff --git a/resources/js/hooks/praktikum/usePraktikumTask.js b/resources/js/hooks/praktikum/usePraktikumTask.js
new file mode 100644
index 0000000..82b183a
--- /dev/null
+++ b/resources/js/hooks/praktikum/usePraktikumTask.js
@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import debounce from "lodash/debounce";
+import toast from "react-hot-toast";
+import { api } from "@/lib/api";
+import { DONE_INITIAL, TASKS } from "@/config/praktikum";
+
+const int = (v) => {
+    const n = Number(v);
+    return Number.isInteger(n) && n > 0 ? n : null;
+};
+
+const arr = (res) => {
+    const d = res?.data ?? res;
+    return Array.isArray(d) ? d : Array.isArray(d?.data) ? d.data : Array.isArray(d?.questions) ? d.questions : [];
+};
+
+const essay = (items, type = "essay") => (items ?? [])
+    .filter((x) => x && (x.soal || x.pertanyaan))
+    .map((x) => ({
+        id: x.id,
+        key: `${type}:${x.id}`,
+        text: x.soal ?? x.pertanyaan ?? "",
+        questionType: type,
+        enable_file_upload: Boolean(x.enable_file_upload),
+    }));
+
+const pg = (items) => (items ?? [])
+    .filter((x) => x?.pertanyaan)
+    .map((x) => ({
+        id: x.id,
+        key: `pg:${x.id}`,
+        text: x.pertanyaan,
+        questionType: "multiple-choice",
+        options: (x.options ?? []).filter((o) => o?.id != null).map((o) => ({ id: o.id, text: o.text ?? "" })),
+    }))
+    .filter((x) => x.options.length);
+
+const optionId = (q, value) => {
+    if (value == null || value === "") return null;
+    const option = q?.options?.find((o) => String(o.id) === String(value));
+    return option ? int(option.id) : null;
+};
+
+const reorder = (questions, ids = []) => {
+    if (!ids.length) return questions;
+    const map = new Map(questions.map((q) => [String(q.id), q])), used = new Set();
+    return [
+        ...ids.map((id) => map.get(String(id))).filter((q) => {
+            const key = String(q?.id ?? "");
+            if (!q || used.has(key)) return false;
+            used.add(key);
+            return true;
+        }),
+        ...questions.filter((q) => {
+            const key = String(q?.id ?? "");
+            if (!key || used.has(key)) return false;
+            used.add(key);
+            return true;
+        }),
+    ];
+};
+
+const serialize = (value) => {
+    if (value == null) return "";
+    if (typeof value !== "object") return String(value);
+    try { return JSON.stringify(value); } catch { return ""; }
+};
+
+const autosaveValue = (q, value) => {
+    if (q?.questionType === "multiple-choice") return optionId(q, value);
+    if (value == null) return null;
+    if (typeof value === "object") {
+        try { return JSON.stringify(value); } catch { return null; }
+    }
+    const s = String(value);
+    return s.trim() ? s : null;
+};
+
+const hydrate = (q, value) => {
+    if (q?.questionType === "multiple-choice") return optionId(q, value);
+    if (value == null) return "";
+    if (typeof value === "object") return value;
+    if (typeof value !== "string") return String(value);
+    const s = value.trim();
+    if (!s) return "";
+    if ((s.startsWith("{") && s.endsWith("}")) || (s.startsWith("[") && s.endsWith("]"))) {
+        try { return JSON.parse(s); } catch {}
+    }
+    return value;
+};
+
+const errorText = (e, fallback) =>
+    Object.values(e?.response?.data?.errors ?? {}).flat()[0] ??
+    e?.response?.data?.message ??
+    e?.response?.data?.error ??
+    e?.message ??
+    fallback;
+
+const getCollection = async (url, config) => {
+    try { return await api.get(url, config); }
+    catch (e) {
+        if (e?.response?.status === 404) return { data: { data: [] } };
+        throw e;
+    }
+};
+
+export default function usePraktikumTask(praktikanId) {
+    const [activeTask, setActiveTask] = useState(null);
+    const [modulId, setModulId] = useState(null);
+    const [questions, setQuestions] = useState([]);
+    const [answers, setAnswers] = useState([]);
+    const [completed, setCompleted] = useState(DONE_INITIAL);
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [submissionError, setSubmissionError] = useState(null);
+    const debouncers = useRef({});
+    const restoring = useRef(false);
+
+    const clear = useCallback(() => {
+        setQuestions([]);
+        setAnswers([]);
+    }, []);
+
+    const reset = useCallback(() => {
+        clear();
+        setActiveTask(null);
+    }, [clear]);
+
+    useEffect(() => {
+        if (!modulId) {
+            setCompleted({ ...DONE_INITIAL });
+            return;
+        }
+        try {
+            setCompleted({ ...DONE_INITIAL, ...JSON.parse(localStorage.getItem(`praktikum:completed:${modulId}`) || "{}") });
+        } catch {
+            setCompleted({ ...DONE_INITIAL });
+        }
+    }, [modulId]);
+
+    useEffect(() => {
+        if (modulId) localStorage.setItem(`praktikum:completed:${modulId}`, JSON.stringify(completed));
+    }, [completed, modulId]);
+
+    const debouncer = useCallback((type) => {
+        if (!debouncers.current[type]) {
+            debouncers.current[type] = debounce(async (payload) => {
+                try { await api.post("/api-v1/praktikan/autosave", payload); }
+                catch (e) { console.warn(`[Autosave:${type}]`, e); }
+            }, 600);
+        }
+        return debouncers.current[type];
+    }, []);
+
+    useEffect(() => () => Object.values(debouncers.current).forEach((d) => d?.cancel?.()), []);
+
+    const buildAutosave = useCallback((values = answers) =>
+        Object.fromEntries(questions.flatMap((q, i) => {
+            const value = autosaveValue(q, values[i]);
+            return value == null || (typeof value === "string" && !value.trim()) ? [] : [[q.key ?? q.id, value]];
+        })), [questions, answers]);
+
+    const getStoredIds = useCallback(async (type, moduleId) => {
+        try {
+            const { data } = await api.get("/api-v1/praktikan/autosave/questions", {
+                params: { praktikan_id: praktikanId, modul_id: moduleId, tipe_soal: type },
+            });
+            return {
+                ids: Array.isArray(data?.question_ids) ? data.question_ids.map(int).filter(Boolean) : [],
+                exists: Boolean(data?.has_stored_questions),
+            };
+        } catch {
+            return { ids: [], exists: false };
+        }
+    }, [praktikanId]);
+
+    const saveStoredIds = useCallback(async (type, moduleId, ids) => {
+        if (!ids.length) return;
+        try {
+            await api.post("/api-v1/praktikan/autosave/questions", {
+                praktikan_id: praktikanId,
+                modul_id: moduleId,
+                tipe_soal: type,
+                question_ids: ids,
+            });
+        } catch (e) {
+            console.warn("[Question snapshot]", e);
+        }
+    }, [praktikanId]);
+
+    const restore = useCallback(async (config, moduleId, qs) => {
+        const empty = qs.map((q) => q.questionType === "multiple-choice" ? null : "");
+        try {
+            const { data } = await api.get("/api-v1/praktikan/autosave", {
+                params: { praktikan_id: praktikanId, modul_id: moduleId, tipe_soal: config.phase },
+            });
+            const snapshot = (Array.isArray(data?.data) ? data.data : []).find((x) => x?.tipe_soal === config.phase);
+            if (!snapshot?.jawaban || typeof snapshot.jawaban !== "object") return empty;
+
+            return qs.map((q, i) => {
+                const value =
+                    snapshot.jawaban[q.key] ??
+                    snapshot.jawaban[q.id] ??
+                    snapshot.jawaban[String(q.id)];
+                return value == null ? empty[i] : hydrate(q, value);
+            });
+        } catch {
+            return empty;
+        }
+    }, [praktikanId]);
+
+    const open = useCallback(async (taskName, moduleId) => {
+        const config = TASKS[taskName];
+        if (!config || !moduleId) return;
+
+        setActiveTask(taskName);
+        setModulId(moduleId);
+        setLoading(true);
+        setError(null);
+        setSubmissionError(null);
+
+        try {
+            const stored = config.sticky ? await getStoredIds(config.phase, moduleId) : { ids: [], exists: false };
+            let qs;
+
+            if (config.variant === "jurnal") {
+                const [fitbRes, jurnalRes] = await Promise.all([
+                    getCollection(config.fitb.q(moduleId)),
+                    getCollection(config.q(moduleId)),
+                ]);
+                qs = [
+                    ...essay(arr(fitbRes), "fitb"),
+                    ...essay(arr(jurnalRes), "jurnal"),
+                ];
+            } else {
+                const response = await getCollection(
+                    config.q(moduleId),
+                    stored.ids.length ? { params: { question_ids: stored.ids } } : undefined,
+                );
+                qs = config.variant === "pg" ? pg(arr(response)) : essay(arr(response), config.phase);
+            }
+
+            if (config.sticky) {
+                qs = reorder(qs, stored.ids);
+                const ids = qs.map((q) => int(q.id)).filter(Boolean);
+                const changed = ids.length !== stored.ids.length || ids.some((id, i) => id !== stored.ids[i]);
+                if (!stored.exists || changed) await saveStoredIds(config.phase, moduleId, ids);
+            }
+
+            const restored = await restore(config, moduleId, qs);
+            setQuestions(qs);
+            restoring.current = true;
+            setAnswers(restored);
+            queueMicrotask(() => { restoring.current = false; });
+        } catch (e) {
+            clear();
+            setError(errorText(e, "Gagal memuat soal."));
+        } finally {
+            setLoading(false);
+        }
+    }, [clear, getStoredIds, saveStoredIds, restore]);
+
+    useEffect(() => {
+        const config = TASKS[activeTask];
+        if (!config || !praktikanId || !modulId || !questions.length || !answers.length || restoring.current) return;
+        const jawaban = buildAutosave();
+        if (!Object.keys(jawaban).length) return;
+
+        debouncer(config.phase)({
+            praktikan_id: praktikanId,
+            modul_id: modulId,
+            tipe_soal: config.phase,
+            jawaban,
+        });
+    }, [answers, questions, activeTask, praktikanId, modulId, buildAutosave, debouncer]);
+
+    const commit = useCallback(async (taskName, values = answers) => {
+        const config = TASKS[taskName];
+        if (!config || !praktikanId || !modulId) throw new Error("Sesi praktikum tidak valid.");
+
+        if (config.variant === "pg") {
+            const selections = questions.flatMap((q, i) => {
+                const raw = values[i];
+                if (raw == null || raw === "") return [];
+                const soal_id = int(q.id), opsi_id = optionId(q, raw);
+                if (!soal_id || !opsi_id) throw new Error(`Jawaban soal ${i + 1} tidak valid.`);
+                return [{ soal_id, opsi_id }];
+            });
+
+            await api.post(config.submit, {
+                praktikan_id: int(praktikanId),
+                modul_id: int(modulId),
+                answers: selections,
+            });
+            return;
+        }
+
+        if (config.variant === "jurnal") {
+            const rows = questions.map((q, i) => ({ q, answer: values[i] }));
+            const make = (type) => rows
+                .filter(({ q }) => type === "fitb" ? q.questionType === "fitb" : q.questionType !== "fitb")
+                .map(({ q, answer }) => ({
+                    praktikan_id: praktikanId,
+                    modul_id: modulId,
+                    soal_id: q.id,
+                    jawaban: serialize(answer),
+                }));
+
+            const fitb = make("fitb"), jurnal = make("jurnal");
+            if (fitb.length) await api.post(config.fitb.submit, fitb);
+            if (jurnal.length) await api.post(config.submit, jurnal);
+            return;
+        }
+
+        await api.post(config.submit, questions.map((q, i) => ({
+            praktikan_id: praktikanId,
+            modul_id: modulId,
+            soal_id: q.id,
+            jawaban: serialize(values[i]),
+        })));
+    }, [answers, questions, praktikanId, modulId]);
+
+    const save = useCallback(async (notify = true) => {
+        const config = TASKS[activeTask];
+
+        if (!config || !praktikanId || !modulId || !questions.length) {
+            if (notify) toast.error("Tidak ada progress yang dapat disimpan.");
+            return false;
+        }
+
+        setSaving(true);
+        debouncers.current[config.phase]?.cancel?.();
+
+        try {
+            const jawaban = buildAutosave();
+
+            if (Object.keys(jawaban).length) {
+                await api.post("/api-v1/praktikan/autosave", {
+                    praktikan_id: praktikanId,
+                    modul_id: modulId,
+                    tipe_soal: config.phase,
+                    jawaban,
+                });
+            }
+
+            await commit(activeTask, answers);
+            if (notify) toast.success("Progress berhasil disimpan.");
+            return true;
+        } catch (e) {
+            console.error("[Save Progress]", e);
+            if (notify) toast.error(errorText(e, "Gagal menyimpan progress."));
+            return false;
+        } finally {
+            setSaving(false);
+        }
+    }, [activeTask, praktikanId, modulId, questions.length, answers, buildAutosave, commit]);
+
+    const submit = useCallback(async (taskName = activeTask, values = answers, silent = false) => {
+        const config = TASKS[taskName];
+
+        if (!config || !praktikanId || !modulId) {
+            const msg = "Modul aktif atau praktikan tidak ditemukan.";
+            if (silent) throw new Error(msg);
+            toast.error(msg);
+            return false;
+        }
+
+        setSubmitting(true);
+        setSubmissionError(null);
+        debouncers.current[config.phase]?.cancel?.();
+
+        try {
+            await commit(taskName, values);
+
+            try {
+                await api.delete("/api-v1/praktikan/autosave", {
+                    data: { praktikan_id: praktikanId, modul_id: modulId, tipe_soal: config.phase },
+                });
+            } catch (e) {
+                console.warn("[Autosave clear]", e);
+            }
+
+            setCompleted((x) => ({ ...x, [taskName]: true }));
+            localStorage.setItem(`praktikum:answers:${taskName}:${modulId}`, JSON.stringify(values));
+            clear();
+
+            if (!silent) toast.success("Jawaban berhasil disimpan.");
+            return true;
+        } catch (e) {
+            const msg = errorText(e, "Gagal menyimpan jawaban.");
+            setSubmissionError(msg);
+            if (silent) throw e;
+            toast.error(msg);
+            return false;
+        } finally {
+            setSubmitting(false);
+        }
+    }, [activeTask, answers, praktikanId, modulId, commit, clear]);
+
+    return {
+        activeTask, modulId, questions, answers, completed, loading, saving, submitting, error, submissionError,
+        setAnswers, setCompleted, setModulId, open, clear, reset, save, submit,
+    };
+}
diff --git a/resources/js/hooks/praktikum/useQuestionNavigation.js b/resources/js/hooks/praktikum/useQuestionNavigation.js
new file mode 100644
index 0000000..eb4d6e8
--- /dev/null
+++ b/resources/js/hooks/praktikum/useQuestionNavigation.js
@@ -0,0 +1,62 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+export default function useQuestionNavigation(
+    questions = [],
+) {
+    const panelRef = useRef(null);
+    const [active, setActive] = useState(0);
+
+    useEffect(() => {
+        setActive((i) =>
+            questions.length
+                ? Math.min(i, questions.length - 1)
+                : 0,
+        );
+    }, [questions.length]);
+
+    const goTo = useCallback(
+        (index) => {
+            if (
+                index < 0 ||
+                index >= questions.length
+            )
+                return;
+
+            setActive(index);
+
+            requestAnimationFrame(() => {
+                const panel = panelRef.current;
+                const target =
+                    panel?.querySelector(
+                        `[data-question-index="${index}"]`,
+                    );
+
+                if (!panel || !target) return;
+
+                panel.scrollTo({
+                    top:
+                        panel.scrollTop +
+                        target.getBoundingClientRect()
+                            .top -
+                        panel.getBoundingClientRect()
+                            .top -
+                        58,
+                    behavior: "smooth",
+                });
+            });
+        },
+        [questions.length],
+    );
+
+    return {
+        panelRef,
+        active,
+        setActive,
+        goTo,
+    };
+}
diff --git a/resources/js/hooks/useQuestionNavigator.js b/resources/js/hooks/useQuestionNavigator.js
new file mode 100644
index 0000000..eb4d6e8
--- /dev/null
+++ b/resources/js/hooks/useQuestionNavigator.js
@@ -0,0 +1,62 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+export default function useQuestionNavigation(
+    questions = [],
+) {
+    const panelRef = useRef(null);
+    const [active, setActive] = useState(0);
+
+    useEffect(() => {
+        setActive((i) =>
+            questions.length
+                ? Math.min(i, questions.length - 1)
+                : 0,
+        );
+    }, [questions.length]);
+
+    const goTo = useCallback(
+        (index) => {
+            if (
+                index < 0 ||
+                index >= questions.length
+            )
+                return;
+
+            setActive(index);
+
+            requestAnimationFrame(() => {
+                const panel = panelRef.current;
+                const target =
+                    panel?.querySelector(
+                        `[data-question-index="${index}"]`,
+                    );
+
+                if (!panel || !target) return;
+
+                panel.scrollTo({
+                    top:
+                        panel.scrollTop +
+                        target.getBoundingClientRect()
+                            .top -
+                        panel.getBoundingClientRect()
+                            .top -
+                        58,
+                    behavior: "smooth",
+                });
+            });
+        },
+        [questions.length],
+    );
+
+    return {
+        panelRef,
+        active,
+        setActive,
+        goTo,
+    };
+}