diff --git a/app/Http/Controllers/Admin/ChallengeController.php b/app/Http/Controllers/Admin/ChallengeController.php
index b93ad44..e710d5c 100644
--- a/app/Http/Controllers/Admin/ChallengeController.php
+++ b/app/Http/Controllers/Admin/ChallengeController.php
@@ -3,99 +3,185 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
 use App\Models\Challenge;
-use App\Models\Kelas;
 use App\Models\SoalChallenge;
+use App\Models\Kelas;
+use App\Models\Badge;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 
-
 class ChallengeController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
-        $challenges = Challenge::latest()->get();
-        $kelass = Kelas::all();   
-    return view('admin.challenge.index', compact('challenges', 'kelass'));
-    }
+        $query = Challenge::with(['kelas', 'soal'])
+            ->withCount('soal');
 
-    public function create()
-    {
-        return view('admin.challenge.create');
-    }
-
-public function store(Request $request)
-{
-    $request->validate([
-        'judul_challenge' => 'required',
-        'exp' => 'required|integer|min:1',
-        'tenggat_waktu' => 'required|date',
-        'kelas' => 'required|array',
-        'pertanyaan' => 'required|array|min:1'
-    ]);
-
-    DB::transaction(function () use ($request) {
-
-        $challenge = Challenge::create([
-            'id_admin' => auth('admin')->id(),
-            'judul_challenge' => $request->judul_challenge,
-            'deskripsi' => $request->deskripsi,
-            'exp' => $request->exp,
-            'tenggat_waktu' => $request->tenggat_waktu,
-        ]);
-
-        $challenge->kelas()->attach($request->kelas);
-
-        $jumlahSoal = count($request->pertanyaan);
-        $expPerSoal = floor($request->exp / $jumlahSoal);
-
-        foreach ($request->pertanyaan as $i => $pertanyaan) {
-            SoalChallenge::create([
-                'id_challenge' => $challenge->id_challenge,
-                'pertanyaan' => $pertanyaan,
-                'opsi_a' => $request->opsi_a[$i],
-                'opsi_b' => $request->opsi_b[$i],
-                'opsi_c' => $request->opsi_c[$i],
-                'opsi_d' => $request->opsi_d[$i],
-                'jawaban_benar' => $request->jawaban_benar[$i],
-                'exp_per_soal' => $expPerSoal,
-            ]);
+        if ($request->filled('search')) {
+            $query->where('judul_challenge', 'like', '%' . $request->search . '%');
         }
 
-    });
+        $challenges = $query->orderBy('created_at', 'desc')
+            ->paginate(10)
+            ->appends($request->all());
 
-    return redirect()->route('admin.challenge.index')
-        ->with('success', 'Challenge & soal berhasil dibuat!');
-}
+        $kelas  = Kelas::orderBy('tingkat')->orderBy('nama_kelas')->get();
+        $badges = Badge::all();
+
+        return view('admin.challenge.index', compact('challenges', 'kelas', 'badges'));
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'judul_challenge' => 'required|string|max:200',
+            'deskripsi'       => 'nullable|string',
+            'exp'             => 'required|integer|min:0',
+            'id_badge'        => 'nullable|exists:badges,id_badge',
+            'tenggat_waktu'   => 'required|date|after:now',
+            'id_kelas'        => 'required|array|min:1',
+            'id_kelas.*'      => 'exists:kelas,id_kelas',
+            // Soal
+            'pertanyaan'      => 'required|array|min:1',
+            'pertanyaan.*'    => 'required|string',
+            'opsi_a.*'        => 'required|string',
+            'opsi_b.*'        => 'required|string',
+            'opsi_c.*'        => 'required|string',
+            'opsi_d.*'        => 'required|string',
+            'jawaban_benar.*' => 'required|in:A,B,C,D',
+            'exp_per_soal.*'  => 'required|integer|min:0',
+        ], [
+            'tenggat_waktu.after'  => 'Tenggat waktu harus lebih dari sekarang.',
+            'pertanyaan.required'  => 'Minimal harus ada 1 soal.',
+            'id_kelas.required'    => 'Pilih minimal 1 kelas.',
+        ]);
+
+        DB::transaction(function () use ($request) {
+            $admin = Auth::guard('admin')->user();
+
+            $challenge = Challenge::create([
+                'id_admin'        => $admin->id_admin,
+                'judul_challenge' => $request->judul_challenge,
+                'deskripsi'       => $request->deskripsi,
+                'exp'             => $request->exp,
+                'id_badge'        => $request->id_badge,
+                'tenggat_waktu'   => $request->tenggat_waktu,
+            ]);
+
+            // Attach ke kelas
+            $challenge->kelas()->sync($request->id_kelas);
+
+            // Simpan soal
+            foreach ($request->pertanyaan as $i => $pertanyaan) {
+                SoalChallenge::create([
+                    'id_challenge'  => $challenge->id_challenge,
+                    'pertanyaan'    => $pertanyaan,
+                    'opsi_a'        => $request->opsi_a[$i],
+                    'opsi_b'        => $request->opsi_b[$i],
+                    'opsi_c'        => $request->opsi_c[$i],
+                    'opsi_d'        => $request->opsi_d[$i],
+                    'jawaban_benar' => $request->jawaban_benar[$i],
+                    'exp_per_soal'  => $request->exp_per_soal[$i],
+                ]);
+            }
+        });
+
+        return redirect()->route('admin.challenge.index')
+            ->with('success', 'Challenge berhasil dibuat!');
+    }
+
+    public function show($id)
+    {
+        $challenge = Challenge::with(['kelas', 'soal'])->findOrFail($id);
+        return view('admin.challenge.show', compact('challenge'));
+    }
 
     public function edit($id)
     {
-        $challenge = Challenge::findOrFail($id);
-        return view('admin.challenge.edit', compact('challenge'));
+        $challenge = Challenge::with(['kelas', 'soal'])->findOrFail($id);
+        $kelas     = Kelas::orderBy('tingkat')->orderBy('nama_kelas')->get();
+        $badges    = Badge::all();
+        return view('admin.challenge.edit', compact('challenge', 'kelas', 'badges'));
     }
 
     public function update(Request $request, $id)
     {
         $challenge = Challenge::findOrFail($id);
 
-        $challenge->update([
-            'judul_challenge' => $request->judul_challenge,
-            'deskripsi' => $request->deskripsi,
-            'exp' => $request->exp,
-            'tenggat_waktu' => $request->tenggat_waktu,
+        $request->validate([
+            'judul_challenge' => 'required|string|max:200',
+            'deskripsi'       => 'nullable|string',
+            'exp'             => 'required|integer|min:0',
+            'id_badge'        => 'nullable|exists:badges,id_badge',
+            'tenggat_waktu'   => 'required|date',
+            'id_kelas'        => 'required|array|min:1',
+            'id_kelas.*'      => 'exists:kelas,id_kelas',
+            'pertanyaan'      => 'required|array|min:1',
+            'pertanyaan.*'    => 'required|string',
+            'opsi_a.*'        => 'required|string',
+            'opsi_b.*'        => 'required|string',
+            'opsi_c.*'        => 'required|string',
+            'opsi_d.*'        => 'required|string',
+            'jawaban_benar.*' => 'required|in:A,B,C,D',
+            'exp_per_soal.*'  => 'required|integer|min:0',
         ]);
 
+        DB::transaction(function () use ($request, $challenge) {
+            $challenge->update([
+                'judul_challenge' => $request->judul_challenge,
+                'deskripsi'       => $request->deskripsi,
+                'exp'             => $request->exp,
+                'id_badge'        => $request->id_badge,
+                'tenggat_waktu'   => $request->tenggat_waktu,
+            ]);
+
+            $challenge->kelas()->sync($request->id_kelas);
+
+            // Hapus soal lama, insert ulang
+            SoalChallenge::where('id_challenge', $challenge->id_challenge)->delete();
+
+            foreach ($request->pertanyaan as $i => $pertanyaan) {
+                SoalChallenge::create([
+                    'id_challenge'  => $challenge->id_challenge,
+                    'pertanyaan'    => $pertanyaan,
+                    'opsi_a'        => $request->opsi_a[$i],
+                    'opsi_b'        => $request->opsi_b[$i],
+                    'opsi_c'        => $request->opsi_c[$i],
+                    'opsi_d'        => $request->opsi_d[$i],
+                    'jawaban_benar' => $request->jawaban_benar[$i],
+                    'exp_per_soal'  => $request->exp_per_soal[$i],
+                ]);
+            }
+        });
+
         return redirect()->route('admin.challenge.index')
             ->with('success', 'Challenge berhasil diupdate!');
     }
 
     public function destroy($id)
     {
-        $challenge = Challenge::findOrFail($id);
-        $challenge->delete();
+        Challenge::findOrFail($id)->delete();
 
         return redirect()->route('admin.challenge.index')
-            ->with('success', 'Challenge berhasil dihapus!');
+            ->with('success', 'Challenge berhasil dihapus.');
     }
-}
+
+    /**
+     * AJAX — return data challenge untuk modal edit
+     */
+    public function editData($id)
+    {
+        $challenge = Challenge::with(['kelas', 'soal'])->findOrFail($id);
+
+        return response()->json([
+            'judul_challenge' => $challenge->judul_challenge,
+            'deskripsi'       => $challenge->deskripsi,
+            'exp'             => $challenge->exp,
+            'id_badge'        => $challenge->id_badge,
+            'tenggat_waktu'   => $challenge->tenggat_waktu,
+            'kelas'           => $challenge->kelas->pluck('id_kelas'),
+            'soal'            => $challenge->soal,
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Siswa/ChallengeController.php b/app/Http/Controllers/Siswa/ChallengeController.php
new file mode 100644
index 0000000..20f14ef
--- /dev/null
+++ b/app/Http/Controllers/Siswa/ChallengeController.php
@@ -0,0 +1,172 @@
+<?php
+
+namespace App\Http\Controllers\Siswa;
+
+use App\Http\Controllers\Controller;
+use App\Models\Challenge;
+use App\Models\PesertaChallenge;
+use App\Models\Leaderboard;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\DB;
+
+class ChallengeController extends Controller
+{
+    public function index()
+    {
+        $siswa = Auth::guard('siswa')->user();
+
+        $challenges = Challenge::whereHas('kelas', function ($q) use ($siswa) {
+                $q->where('challenge_kelas.id_kelas', $siswa->id_kelas);
+            })
+            ->with(['soal'])
+            ->withCount('soal')
+            ->orderBy('tenggat_waktu', 'asc')
+            ->get();
+
+        $sudahDikerjakan = PesertaChallenge::where('id_siswa', $siswa->id_siswa)
+            ->where('status', 'selesai')
+            ->pluck('id_challenge')
+            ->toArray();
+
+        return view('siswa.challenge.index', compact('challenges', 'sudahDikerjakan'));
+    }
+
+    public function kerjakan($id_challenge)
+    {
+        $siswa = Auth::guard('siswa')->user();
+
+        $challenge = Challenge::whereHas('kelas', function ($q) use ($siswa) {
+                $q->where('challenge_kelas.id_kelas', $siswa->id_kelas);
+            })
+            ->with('soal')
+            ->findOrFail($id_challenge);
+
+        $sudah = PesertaChallenge::where('id_siswa', $siswa->id_siswa)
+            ->where('id_challenge', $id_challenge)
+            ->where('status', 'selesai')
+            ->exists();
+
+        if ($sudah) {
+            return redirect()->route('siswa.challenge.hasil', $id_challenge);
+        }
+
+        if (Carbon::parse($challenge->tenggat_waktu)->isPast()) {
+            return redirect()->route('siswa.challenge.index')
+                ->with('error', 'Challenge ini sudah melewati tenggat waktu.');
+        }
+
+        if ($challenge->soal->isEmpty()) {
+            return redirect()->route('siswa.challenge.index')
+                ->with('error', 'Challenge ini belum memiliki soal.');
+        }
+
+        return view('siswa.challenge.kerjakan', compact('challenge'));
+    }
+
+    public function submit(Request $request, $id_challenge)
+    {
+        $siswa = Auth::guard('siswa')->user();
+
+        $challenge = Challenge::whereHas('kelas', function ($q) use ($siswa) {
+                $q->where('challenge_kelas.id_kelas', $siswa->id_kelas);
+            })
+            ->with('soal')
+            ->findOrFail($id_challenge);
+
+        $sudah = PesertaChallenge::where('id_siswa', $siswa->id_siswa)
+            ->where('id_challenge', $id_challenge)
+            ->where('status', 'selesai')
+            ->exists();
+
+        if ($sudah) {
+            return redirect()->route('siswa.challenge.hasil', $id_challenge);
+        }
+
+        if (Carbon::parse($challenge->tenggat_waktu)->isPast()) {
+            return redirect()->route('siswa.challenge.index')
+                ->with('error', 'Challenge sudah melewati tenggat waktu.');
+        }
+
+        $jawaban     = $request->input('jawaban', []);
+        $totalExp    = 0;
+        $jawabanJson = [];
+
+        foreach ($challenge->soal as $soal) {
+            $jwb = $jawaban[$soal->id_soal] ?? null;
+            $jawabanJson[$soal->id_soal] = $jwb;
+            if ($jwb && strtoupper($jwb) === strtoupper($soal->jawaban_benar)) {
+                $totalExp += $soal->exp_per_soal;
+            }
+        }
+
+        // Semester & tahun ajaran otomatis
+        $now         = Carbon::now();
+        $semester    = $now->month >= 7 ? '1' : '2';
+        $tahunAjaran = $now->month >= 7
+            ? $now->year . '/' . ($now->year + 1)
+            : ($now->year - 1) . '/' . $now->year;
+
+        DB::transaction(function () use ($siswa, $challenge, $jawabanJson, $totalExp, $semester, $tahunAjaran) {
+            PesertaChallenge::create([
+                'id_challenge' => $challenge->id_challenge,
+                'id_siswa'     => $siswa->id_siswa,
+                'jawaban'      => json_encode($jawabanJson),
+                'waktu_submit' => Carbon::now(),
+                'exp'          => $totalExp,
+                'status'       => 'selesai',
+            ]);
+
+            // firstOrCreate dengan semester & tahun_ajaran sebagai key
+            $lb = Leaderboard::firstOrCreate(
+                [
+                    'id_siswa'     => $siswa->id_siswa,
+                    'id_kelas'     => $siswa->id_kelas,
+                    'semester'     => $semester,
+                    'tahun_ajaran' => $tahunAjaran,
+                ],
+                ['total_exp' => 0, 'ranking' => 0]
+            );
+
+            $lb->increment('total_exp', $totalExp);
+
+            // Recalculate ranking per kelas + semester + tahun ajaran
+            Leaderboard::where('id_kelas', $siswa->id_kelas)
+                ->where('semester', $semester)
+                ->where('tahun_ajaran', $tahunAjaran)
+                ->orderBy('total_exp', 'desc')
+                ->get()
+                ->each(fn($row, $i) => $row->update(['ranking' => $i + 1]));
+        });
+
+        return redirect()->route('siswa.challenge.hasil', $id_challenge);
+    }
+
+    public function hasil($id_challenge)
+    {
+        $siswa = Auth::guard('siswa')->user();
+
+        $challenge = Challenge::with('soal')->findOrFail($id_challenge);
+
+        $peserta = PesertaChallenge::where('id_siswa', $siswa->id_siswa)
+            ->where('id_challenge', $id_challenge)
+            ->firstOrFail();
+
+        $jawabanSiswa = json_decode($peserta->jawaban, true) ?? [];
+
+        $benar = 0; $salah = 0;
+        foreach ($challenge->soal as $soal) {
+            $jwb = $jawabanSiswa[$soal->id_soal] ?? null;
+            strtoupper((string)$jwb) === strtoupper($soal->jawaban_benar) ? $benar++ : $salah++;
+        }
+
+        $totalSoal  = $challenge->soal->count();
+        $persentase = $totalSoal > 0 ? round(($benar / $totalSoal) * 100) : 0;
+
+        return view('siswa.challenge.hasil', compact(
+            'challenge', 'peserta', 'jawabanSiswa',
+            'benar', 'salah', 'totalSoal', 'persentase'
+        ));
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Siswa/LeaderboardController.php b/app/Http/Controllers/Siswa/LeaderboardController.php
new file mode 100644
index 0000000..8f437dd
--- /dev/null
+++ b/app/Http/Controllers/Siswa/LeaderboardController.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Controllers\Siswa;
+
+use App\Http\Controllers\Controller;
+use App\Models\Leaderboard;
+use Illuminate\Support\Facades\Auth;
+use Carbon\Carbon;
+
+class LeaderboardController extends Controller
+{
+    public function index()
+    {
+        $siswa = Auth::guard('siswa')->user();
+
+        $now         = Carbon::now();
+        $semester    = $now->month >= 7 ? '1' : '2';
+        $tahunAjaran = $now->month >= 7
+            ? $now->year . '/' . ($now->year + 1)
+            : ($now->year - 1) . '/' . $now->year;
+
+        // Top leaderboard kelas siswa ini
+        $leaderboard = Leaderboard::with('siswa')
+            ->where('id_kelas', $siswa->id_kelas)
+            ->where('semester', $semester)
+            ->where('tahun_ajaran', $tahunAjaran)
+            ->orderBy('total_exp', 'desc')
+            ->get()
+            ->map(function ($item, $i) {
+                return [
+                    'ranking' => $i + 1,
+                    'nama'    => optional($item->siswa)->nama ?? '-',
+                    'nisn'    => optional($item->siswa)->nisn ?? '-',
+                    'exp'     => $item->total_exp,
+                    'id_siswa'=> $item->id_siswa,
+                ];
+            });
+
+        // Posisi siswa yang login
+        $myRank = $leaderboard->firstWhere('id_siswa', $siswa->id_siswa);
+
+        return view('siswa.leaderboard.index', compact(
+            'leaderboard', 'myRank', 'semester', 'tahunAjaran'
+        ));
+    }
+}
\ No newline at end of file
diff --git a/database/migrations/2026_03_11_091158_fix_leaderboards.php b/database/migrations/2026_03_11_091158_fix_leaderboards.php
new file mode 100644
index 0000000..9a94971
--- /dev/null
+++ b/database/migrations/2026_03_11_091158_fix_leaderboards.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('leaderboards', function (Blueprint $table) {
+            $table->integer('ranking')->default(0)->change();
+            $table->string('semester', 50)->default('1')->change();
+            $table->string('tahun_ajaran', 20)->default('2024/2025')->change();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('leaderboards', function (Blueprint $table) {
+            $table->integer('ranking')->default(null)->change();
+            $table->string('semester', 50)->default(null)->change();
+            $table->string('tahun_ajaran', 20)->default(null)->change();
+        });
+    }
+};
\ No newline at end of file
diff --git a/resources/views/admin/challenge/create.blade.php b/resources/views/admin/challenge/create.blade.php
deleted file mode 100644
index 05b11f4..0000000
--- a/resources/views/admin/challenge/create.blade.php
+++ /dev/null
@@ -1,23 +0,0 @@
-@extends('admin.layouts.app')
-
-@section('content')
-<h2>Tambah Challenge</h2>
-
-<form action="{{ route('admin.challenge.store') }}" method="POST">
-    @csrf
-
-    <label>Judul</label><br>
-    <input type="text" name="judul_challenge"><br><br>
-
-    <label>Deskripsi</label><br>
-    <textarea name="deskripsi"></textarea><br><br>
-
-    <label>EXP</label><br>
-    <input type="number" name="exp"><br><br>
-
-    <label>Tenggat Waktu</label><br>
-    <input type="datetime-local" name="tenggat_waktu"><br><br>
-
-    <button type="submit">Simpan</button>
-</form>
-@endsection
diff --git a/resources/views/admin/challenge/edit.blade.php b/resources/views/admin/challenge/edit.blade.php
deleted file mode 100644
index 6ca60c6..0000000
--- a/resources/views/admin/challenge/edit.blade.php
+++ /dev/null
@@ -1,26 +0,0 @@
-@extends('admin.layouts.app')
-
-@section('content')
-<h2>Edit Challenge</h2>
-
-<form action="{{ route('admin.challenge.update', $challenge->id_challenge) }}" method="POST">
-    @csrf
-    @method('PUT')
-
-    <label>Judul</label><br>
-    <input type="text" name="judul_challenge" value="{{ $challenge->judul_challenge }}"><br><br>
-
-    <label>Deskripsi</label><br>
-    <textarea name="deskripsi">{{ $challenge->deskripsi }}</textarea><br><br>
-
-    <label>EXP</label><br>
-    <input type="number" name="exp" value="{{ $challenge->exp }}"><br><br>
-
-    <label>Tenggat Waktu</label><br>
-    <input type="datetime-local" 
-        name="tenggat_waktu"
-        value="{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('Y-m-d\TH:i') }}"><br><br>
-
-    <button type="submit">Update</button>
-</form>
-@endsection
diff --git a/resources/views/admin/challenge/index.blade.php b/resources/views/admin/challenge/index.blade.php
index 0d67eb6..78ea3af 100644
--- a/resources/views/admin/challenge/index.blade.php
+++ b/resources/views/admin/challenge/index.blade.php
@@ -5,135 +5,299 @@
 @section('content')
 
 <style>
-    .page-title {
-        font-size: 30px;
-        font-weight: 800;
-        margin-bottom: 10px;
-        margin-top: -20px;
-    }
+.page-title {
+    font-size: 30px;
+    font-weight: 800;
+    margin-bottom: 10px;
+    margin-top: -20px;
+}
 
-    .custom-card {
-        background: white;
-        border-radius: 20px;
-        border: 2px solid #e5e5e5;
-        padding: 25px;
-    }
+.custom-card {
+    background: white;
+    border-radius: 20px;
+    border: 2px solid #e5e5e5;
+    padding: 25px;
+}
 
-    .btn-primary-custom {
-        background: #2b8ef3;
-        color: white;
-        border-radius: 10px;
-        padding: 8px 18px;
-        border: none;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        text-decoration: none;
-    }
+.btn-primary-custom {
+    background: #2b8ef3;
+    color: white;
+    border-radius: 10px;
+    padding: 8px 18px;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    text-decoration: none;
+    cursor: pointer;
+    font-family: 'Poppins', sans-serif;
+}
 
-    .table-header {
-        background: #a5e6ba;
-    }
+.table-header { background: #a5e6ba; }
 
-    .search-box {
-        background: #a5e6ba;
-        border-radius: 30px;
-        padding: 6px 15px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
+.search-box {
+    background: #a5e6ba;
+    border-radius: 30px;
+    padding: 6px 15px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
 
-    .search-box input {
-        border: none;
-        outline: none;
-        background: transparent;
-        width: 150px;
-    }
+.search-box input {
+    border: none;
+    outline: none;
+    background: transparent;
+    width: 160px;
+}
 
-    .action-icon {
-        width: 20px;
-        cursor: pointer;
-        margin: 0 5px;
-    }
+.action-icon { width: 20px; cursor: pointer; margin: 0 4px; }
 
-    .modal-header-pastel {
-        background: #FFD97D !important;
-        color: black !important;
-        border-bottom: none;
-        padding: 15px 20px;
-        border-top-left-radius: 20px;
-        border-top-right-radius: 20px;
-    }
+.deadline-badge {
+    font-size: 11px;
+    font-weight: 700;
+    padding: 3px 8px;
+    border-radius: 99px;
+    display: inline-block;
+}
+
+.deadline-aktif { background: #dcfce7; color: #16a34a; }
+.deadline-lewat { background: #fee2e2; color: #ef4444; }
+
+.kelas-chip {
+    display: inline-block;
+    background: #e6f0ff;
+    color: #1d4ed8;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 99px;
+    margin: 1px;
+}
+
+.soal-count {
+    background: #f0fdf4;
+    color: #16a34a;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 99px;
+}
+
+.alert-success-custom {
+    background: #dcfce7;
+    color: #166534;
+    border-radius: 10px;
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+/* MODAL */
+.modal-header-challenge {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border-bottom: none;
+    border-radius: 16px 16px 0 0;
+}
+
+.modal-header-challenge .btn-close { filter: brightness(0) invert(1); }
+
+.modal-content {
+    border-radius: 16px;
+    border: none;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+}
+
+.modal-body label { font-weight: 600; font-size: 13px; }
+
+/* SOAL CARD */
+.soal-card {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 14px;
+    padding: 16px 18px;
+    margin-bottom: 12px;
+    position: relative;
+}
+
+.soal-card .soal-number {
+    position: absolute;
+    top: -10px;
+    left: 16px;
+    background: #667eea;
+    color: white;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 2px 10px;
+    border-radius: 99px;
+}
+
+.soal-card .btn-hapus-soal {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    background: #fee2e2;
+    color: #ef4444;
+    border: none;
+    border-radius: 8px;
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.soal-card .btn-hapus-soal:hover { background: #fca5a5; }
+
+.opsi-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.opsi-item { display: flex; flex-direction: column; gap: 4px; }
+.opsi-item label { font-size: 12px; color: #64748b; font-weight: 600; }
+.opsi-item input { border-radius: 8px; border: 1px solid #cbd5e1; padding: 6px 10px; font-size: 13px; }
+
+.jawaban-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-top: 10px;
+    background: #fff;
+    border-radius: 8px;
+    padding: 8px 12px;
+    border: 1px solid #e2e8f0;
+}
+
+.jawaban-row label { font-size: 12px; color: #64748b; font-weight: 600; min-width: 90px; }
+
+.btn-tambah-soal {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 9px 18px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    width: 100%;
+    margin-top: 4px;
+    font-family: 'Poppins', sans-serif;
+}
+
+.kelas-checkbox-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+}
+
+.kelas-check-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 8px 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.kelas-check-item:hover { background: #e6f0ff; border-color: #2b8ef3; }
+.kelas-check-item input[type="checkbox"] { cursor: pointer; }
+
+.section-divider {
+    font-size: 13px;
+    font-weight: 700;
+    color: #667eea;
+    border-bottom: 2px solid #e6f0ff;
+    padding-bottom: 6px;
+    margin: 16px 0 12px;
+}
 </style>
 
 <h3 class="page-title">DAFTAR CHALLENGE</h3>
 
+@if(session('success'))
+    <div class="alert-success-custom">✅ {{ session('success') }}</div>
+@endif
+
 <div class="custom-card">
 
     <div class="d-flex justify-content-between align-items-center mb-3">
-
-        <button class="btn-primary-custom" data-bs-toggle="modal" data-bs-target="#modalTambah">
-            <img src="{{ asset('images/icon/main/add.png') }}" width="18">
-            Tambah Data
+        <button class="btn-primary-custom" onclick="openTambahModal()">
+            <img src="{{ asset('images/icon/main/add.png') }}" width="18"> Tambah Challenge
         </button>
 
         <form method="GET">
             <div class="search-box">
-                <input type="text" name="search" placeholder="Cari"
+                <input type="text" name="search" placeholder="Cari challenge..."
                        value="{{ request('search') }}">
-                <button style="border:none;background:none">
+                <button style="border:none;background:none" type="submit">
                     <img src="{{ asset('images/icon/main/search.png') }}" width="18">
                 </button>
             </div>
         </form>
-
     </div>
 
-    {{-- Alert --}}
-    @if(session('success'))
-        <div class="alert alert-success alert-dismissible fade show">
-            {{ session('success') }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-        </div>
-    @endif
-
     <table class="table text-center align-middle">
         <thead class="table-header">
             <tr>
                 <th>No</th>
                 <th>Judul Challenge</th>
-                <th>EXP</th>
+                <th>Kelas</th>
+                <th>Soal</th>
+                <th>Total EXP</th>
                 <th>Tenggat</th>
                 <th>Aksi</th>
             </tr>
         </thead>
-
         <tbody>
-            @forelse($challenges as $index => $challenge)
+            @forelse($challenges as $i => $ch)
+            @php $isLewat = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast(); @endphp
             <tr>
-                <td>{{ $loop->iteration }}</td>
-                <td>{{ $challenge->judul_challenge }}</td>
-                <td>{{ $challenge->exp }}</td>
-                <td>{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y H:i') }}</td>
-
+                <td>{{ $challenges->firstItem() + $i }}</td>
+                <td style="text-align:left">
+                    <div style="font-weight:700;color:#1e293b">{{ $ch->judul_challenge }}</div>
+                    @if($ch->deskripsi)
+                        <div style="font-size:12px;color:#94a3b8">{{ Str::limit($ch->deskripsi, 50) }}</div>
+                    @endif
+                </td>
                 <td>
-                    <button onclick="openEditModal(
-                        '{{ $challenge->id_challenge }}',
-                        '{{ $challenge->judul_challenge }}',
-                        '{{ $challenge->deskripsi }}',
-                        '{{ $challenge->exp }}',
-                        '{{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('Y-m-d\TH:i') }}'
-                    )" style="border:none;background:none">
+                    @foreach($ch->kelas as $k)
+                        <span class="kelas-chip">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
+                    @endforeach
+                </td>
+                <td><span class="soal-count">{{ $ch->soal_count }} soal</span></td>
+                <td style="font-weight:700;color:#667eea">{{ $ch->exp }} EXP</td>
+                <td>
+                    <span class="deadline-badge {{ $isLewat ? 'deadline-lewat' : 'deadline-aktif' }}">
+                        {{ $isLewat ? '⏰ Lewat' : '✅ Aktif' }}
+                    </span>
+                    <div style="font-size:11px;color:#64748b;margin-top:3px">
+                        {{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}
+                    </div>
+                </td>
+                <td>
+                    <button onclick="openEditModal({{ $ch->id_challenge }})"
+                            style="border:none;background:none">
                         <img src="{{ asset('images/icon/main/edit.png') }}" class="action-icon">
                     </button>
-
-                    <form action="{{ route('admin.challenge.destroy', $challenge->id_challenge) }}"
+                    <a href="{{ route('admin.challenge.show', $ch->id_challenge) }}"
+                       style="border:none;background:none;display:inline">
+                        <img src="{{ asset('images/icon/main/search.png') }}" class="action-icon">
+                    </a>
+                    <form action="{{ route('admin.challenge.destroy', $ch->id_challenge) }}"
                           method="POST" class="d-inline"
-                          onsubmit="return confirm('Yakin ingin menghapus challenge ini?')">
-                        @csrf
-                        @method('DELETE')
+                          onsubmit="return confirm('Yakin hapus challenge ini?')">
+                        @csrf @method('DELETE')
                         <button type="submit" style="border:none;background:none">
                             <img src="{{ asset('images/icon/main/del.png') }}" class="action-icon">
                         </button>
@@ -142,234 +306,296 @@
             </tr>
             @empty
             <tr>
-                <td colspan="5">Belum ada challenge</td>
+                <td colspan="7" class="text-muted py-4">Belum ada challenge.</td>
             </tr>
             @endforelse
         </tbody>
     </table>
 
+    <div class="d-flex justify-content-end">{{ $challenges->links() }}</div>
 </div>
 
-{{-- MODAL TAMBAH --}}
-<div class="modal fade" id="modalTambah">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
 
-            <form action="{{ route('admin.challenge.store') }}" method="POST">
-                @csrf
-
-                <div class="modal-header modal-header-pastel">
-                    <h5 class="modal-title w-100 text-center">Tambah Challenge</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                </div>
-
-                {{-- STEP 1 --}}
-                <div class="modal-body" id="tambahStep1">
-
-                    <div class="mb-3">
-                        <label>Judul *</label>
-                        <input type="text" name="judul_challenge" class="form-control" required>
-                    </div>
-
-                    <div class="mb-3">
-                        <label>Deskripsi</label>
-                        <textarea name="deskripsi" class="form-control"></textarea>
-                    </div>
-
-                    <div class="mb-3">
-                        <label>Total EXP *</label>
-                        <input type="number" name="exp" class="form-control" required>
-                    </div>
-
-                    <div class="mb-3">
-                        <label>Tenggat *</label>
-                        <input type="datetime-local" name="tenggat_waktu" class="form-control" required>
-                    </div>
-
-                    <div class="mb-3">
-                        <label>Pilih Kelas *</label>
-                        @foreach($kelass as $kelas)
-                            <div class="form-check">
-                                <input class="form-check-input"
-                                       type="checkbox"
-                                       name="kelas[]"
-                                       value="{{ $kelas->id_kelas }}">
-                                <label class="form-check-label">
-                                    {{ $kelas->tingkat }} - {{ $kelas->nama_kelas }}
-                                </label>
-                            </div>
-                        @endforeach
-                    </div>
-
-                </div>
-
-                {{-- STEP 2 --}}
-                <div class="modal-body d-none" id="tambahStep2">
-
-                    <h5 class="mb-3">Tambah Soal</h5>
-
-                    <div id="soalContainer"></div>
-
-                    <button type="button"
-                            class="btn btn-primary"
-                            onclick="addSoal()">
-                        + Tambah Soal
-                    </button>
-
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button"
-                            class="btn btn-secondary"
-                            data-bs-dismiss="modal">
-                        Cancel
-                    </button>
-
-                    <button type="button"
-                            class="btn btn-warning d-none"
-                            id="tambahBackBtn"
-                            onclick="backTambahStep()">
-                        Back
-                    </button>
-
-                    <button type="button"
-                            class="btn btn-primary"
-                            id="tambahNextBtn"
-                            onclick="nextTambahStep()">
-                        Next
-                    </button>
-
-                    <button type="submit"
-                            class="btn btn-success d-none"
-                            id="tambahSubmitBtn">
-                        Simpan Semua
-                    </button>
-                </div>
-
-            </form>
-
-        </div>
-    </div>
-</div>
-
-{{-- MODAL EDIT --}}
-<div class="modal fade" id="modalEdit">
-  <div class="modal-dialog modal-dialog-centered">
+{{-- ============================================================ --}}
+{{-- MODAL TAMBAH                                                  --}}
+{{-- ============================================================ --}}
+<div class="modal fade" id="modalTambah" tabindex="-1">
+  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-
-      <div class="modal-header modal-header-pastel">
-        <h5 class="modal-title w-100 text-center">Edit Challenge</h5>
+      <div class="modal-header modal-header-challenge">
+        <h5 class="modal-title">🏆 Tambah Challenge Baru</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
 
-      <form id="formEdit" method="POST">
+      <form action="{{ route('admin.challenge.store') }}" method="POST" id="formTambah">
         @csrf
-        @method('PUT')
-
         <div class="modal-body">
 
-          <div class="mb-3">
-            <label>Judul Challenge *</label>
-            <input type="text" id="editJudul" name="judul_challenge" class="form-control" required>
+          {{-- INFO CHALLENGE --}}
+          <div class="section-divider">📋 Informasi Challenge</div>
+
+          <div class="row g-3 mb-2">
+            <div class="col-8">
+              <label>Judul Challenge <span class="text-danger">*</span></label>
+              <input type="text" name="judul_challenge" class="form-control"
+                     placeholder="Contoh: Challenge Matematika Minggu Ini" required>
+            </div>
+            <div class="col-4">
+              <label>Total EXP <span class="text-danger">*</span></label>
+              <input type="number" name="exp" class="form-control" value="100" min="0" required>
+            </div>
           </div>
 
           <div class="mb-3">
             <label>Deskripsi</label>
-            <textarea id="editDeskripsi" name="deskripsi" class="form-control"></textarea>
+            <textarea name="deskripsi" class="form-control" rows="2"
+                      placeholder="Deskripsi singkat challenge (opsional)"></textarea>
           </div>
 
-          <div class="mb-3">
-            <label>EXP *</label>
-            <input type="number" id="editExp" name="exp" class="form-control" required>
+          <div class="row g-3 mb-3">
+            <div class="col-6">
+              <label>Tenggat Waktu <span class="text-danger">*</span></label>
+              <input type="datetime-local" name="tenggat_waktu" class="form-control" required
+                     min="{{ now()->format('Y-m-d\TH:i') }}">
+            </div>
+            <div class="col-6">
+              <label>Badge Reward</label>
+              <select name="id_badge" class="form-control">
+                <option value="">-- Tanpa Badge --</option>
+                @foreach($badges as $badge)
+                  <option value="{{ $badge->id_badge }}">{{ $badge->nama_badge }}</option>
+                @endforeach
+              </select>
+            </div>
           </div>
 
-          <div class="mb-3">
-            <label>Tenggat Waktu *</label>
-            <input type="datetime-local" id="editTenggat" name="tenggat_waktu" class="form-control" required>
+          {{-- PILIH KELAS --}}
+          <div class="section-divider">🏫 Target Kelas</div>
+          <div class="kelas-checkbox-grid mb-3">
+            @foreach($kelas as $k)
+            <label class="kelas-check-item">
+              <input type="checkbox" name="id_kelas[]" value="{{ $k->id_kelas }}">
+              <span style="font-size:13px;font-weight:600">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
+            </label>
+            @endforeach
           </div>
 
+          {{-- SOAL --}}
+          <div class="section-divider">📝 Daftar Soal</div>
+          <div id="soalContainer"></div>
+          <button type="button" class="btn-tambah-soal" onclick="tambahSoal('soalContainer')">
+            + Tambah Soal
+          </button>
+
         </div>
-
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
-          <button type="submit" class="btn btn-success">Update</button>
+          <button type="submit" class="btn btn-success">💾 Simpan Challenge</button>
         </div>
-
       </form>
+    </div>
+  </div>
+</div>
 
+
+{{-- ============================================================ --}}
+{{-- MODAL EDIT                                                    --}}
+{{-- ============================================================ --}}
+<div class="modal fade" id="modalEdit" tabindex="-1">
+  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header modal-header-challenge">
+        <h5 class="modal-title">✏️ Edit Challenge</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+
+      <form id="formEdit" method="POST">
+        @csrf @method('PUT')
+        <div class="modal-body">
+
+          <div class="section-divider">📋 Informasi Challenge</div>
+          <div class="row g-3 mb-2">
+            <div class="col-8">
+              <label>Judul Challenge <span class="text-danger">*</span></label>
+              <input type="text" name="judul_challenge" id="editJudul" class="form-control" required>
+            </div>
+            <div class="col-4">
+              <label>Total EXP <span class="text-danger">*</span></label>
+              <input type="number" name="exp" id="editExp" class="form-control" min="0" required>
+            </div>
+          </div>
+
+          <div class="mb-3">
+            <label>Deskripsi</label>
+            <textarea name="deskripsi" id="editDeskripsi" class="form-control" rows="2"></textarea>
+          </div>
+
+          <div class="row g-3 mb-3">
+            <div class="col-6">
+              <label>Tenggat Waktu <span class="text-danger">*</span></label>
+              <input type="datetime-local" name="tenggat_waktu" id="editTenggat" class="form-control" required>
+            </div>
+            <div class="col-6">
+              <label>Badge Reward</label>
+              <select name="id_badge" id="editBadge" class="form-control">
+                <option value="">-- Tanpa Badge --</option>
+                @foreach($badges as $badge)
+                  <option value="{{ $badge->id_badge }}">{{ $badge->nama_badge }}</option>
+                @endforeach
+              </select>
+            </div>
+          </div>
+
+          <div class="section-divider">🏫 Target Kelas</div>
+          <div class="kelas-checkbox-grid mb-3" id="editKelasContainer">
+            @foreach($kelas as $k)
+            <label class="kelas-check-item">
+              <input type="checkbox" name="id_kelas[]"
+                     value="{{ $k->id_kelas }}" class="edit-kelas-check">
+              <span style="font-size:13px;font-weight:600">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
+            </label>
+            @endforeach
+          </div>
+
+          <div class="section-divider">📝 Daftar Soal</div>
+          <div id="editSoalContainer"></div>
+          <button type="button" class="btn-tambah-soal" onclick="tambahSoal('editSoalContainer')">
+            + Tambah Soal
+          </button>
+
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
+          <button type="submit" class="btn btn-warning">💾 Update Challenge</button>
+        </div>
+      </form>
     </div>
   </div>
 </div>
 
 <script>
+let soalCountTambah = 0;
+let soalCountEdit   = 0;
 
-function openEditModal(id, judul, deskripsi, exp, tenggat) {
-    document.getElementById('editJudul').value = judul;
-    document.getElementById('editDeskripsi').value = deskripsi;
-    document.getElementById('editExp').value = exp;
-    document.getElementById('editTenggat').value = tenggat;
-    document.getElementById('formEdit').action = '/admin/challenge/' + id;
+// ===== TAMBAH SOAL BARU =====
+function tambahSoal(containerId, data = null) {
+    const isEdit  = containerId === 'editSoalContainer';
+    const count   = isEdit ? ++soalCountEdit : ++soalCountTambah;
+    const container = document.getElementById(containerId);
 
-    var modal = new bootstrap.Modal(document.getElementById('modalEdit'));
-    modal.show();
-}
+    const card = document.createElement('div');
+    card.className = 'soal-card';
+    card.innerHTML = `
+        <span class="soal-number">Soal ${count}</span>
+        <button type="button" class="btn-hapus-soal" onclick="hapusSoal(this, '${containerId}')">✕</button>
 
-function nextTambahStep(){
-    document.getElementById('tambahStep1').classList.add('d-none');
-    document.getElementById('tambahStep2').classList.remove('d-none');
-
-    document.getElementById('tambahNextBtn').classList.add('d-none');
-    document.getElementById('tambahSubmitBtn').classList.remove('d-none');
-    document.getElementById('tambahBackBtn').classList.remove('d-none');
-}
-
-function backTambahStep(){
-    document.getElementById('tambahStep1').classList.remove('d-none');
-    document.getElementById('tambahStep2').classList.add('d-none');
-
-    document.getElementById('tambahNextBtn').classList.remove('d-none');
-    document.getElementById('tambahSubmitBtn').classList.add('d-none');
-    document.getElementById('tambahBackBtn').classList.add('d-none');
-}
-
-function addSoal(){
-    let html = `
-    <div class="border rounded p-3 mb-3">
-        <div class="mb-2">
-            <label>Pertanyaan</label>
-            <textarea name="pertanyaan[]" class="form-control" required></textarea>
+        <div class="mb-2" style="margin-top:10px">
+            <label>Pertanyaan <span class="text-danger">*</span></label>
+            <textarea name="pertanyaan[]" class="form-control" rows="2"
+                      placeholder="Tuliskan pertanyaan..." required>${data ? data.pertanyaan : ''}</textarea>
         </div>
 
-        <div class="row">
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
+        <div class="opsi-grid">
+            <div class="opsi-item">
+                <label>Opsi A</label>
+                <input type="text" name="opsi_a[]" class="form-control"
+                       placeholder="Opsi A" required value="${data ? data.opsi_a : ''}">
             </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
+            <div class="opsi-item">
+                <label>Opsi B</label>
+                <input type="text" name="opsi_b[]" class="form-control"
+                       placeholder="Opsi B" required value="${data ? data.opsi_b : ''}">
             </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
+            <div class="opsi-item">
+                <label>Opsi C</label>
+                <input type="text" name="opsi_c[]" class="form-control"
+                       placeholder="Opsi C" required value="${data ? data.opsi_c : ''}">
             </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
+            <div class="opsi-item">
+                <label>Opsi D</label>
+                <input type="text" name="opsi_d[]" class="form-control"
+                       placeholder="Opsi D" required value="${data ? data.opsi_d : ''}">
             </div>
         </div>
 
-        <div class="mb-2">
+        <div class="jawaban-row">
             <label>Jawaban Benar</label>
-            <select name="jawaban_benar[]" class="form-control" required>
-                <option value="A">A</option>
-                <option value="B">B</option>
-                <option value="C">C</option>
-                <option value="D">D</option>
+            <select name="jawaban_benar[]" class="form-select" style="width:100px" required>
+                ${['A','B','C','D'].map(o =>
+                    `<option value="${o}" ${data && data.jawaban_benar === o ? 'selected' : ''}>${o}</option>`
+                ).join('')}
             </select>
+            <label style="margin-left:16px">EXP per Soal</label>
+            <input type="number" name="exp_per_soal[]" class="form-control" style="width:90px"
+                   min="0" value="${data ? data.exp_per_soal : 10}" required>
         </div>
-    </div>
     `;
 
-    document.getElementById('soalContainer').insertAdjacentHTML('beforeend', html);
+    container.appendChild(card);
+    renumberSoal(containerId);
 }
 
+// ===== HAPUS SOAL =====
+function hapusSoal(btn, containerId) {
+    const container = document.getElementById(containerId);
+    if (container.querySelectorAll('.soal-card').length <= 1) {
+        alert('Minimal harus ada 1 soal.');
+        return;
+    }
+    btn.closest('.soal-card').remove();
+    renumberSoal(containerId);
+}
+
+// ===== RENUMBER SOAL =====
+function renumberSoal(containerId) {
+    const cards = document.querySelectorAll(`#${containerId} .soal-card`);
+    cards.forEach((card, i) => {
+        const num = card.querySelector('.soal-number');
+        if (num) num.textContent = `Soal ${i + 1}`;
+    });
+}
+
+// ===== BUKA MODAL TAMBAH =====
+function openTambahModal() {
+    soalCountTambah = 0;
+    document.getElementById('soalContainer').innerHTML = '';
+    document.getElementById('formTambah').reset();
+    tambahSoal('soalContainer'); // default 1 soal
+    new bootstrap.Modal(document.getElementById('modalTambah')).show();
+}
+
+// ===== BUKA MODAL EDIT =====
+async function openEditModal(idChallenge) {
+    soalCountEdit = 0;
+    document.getElementById('editSoalContainer').innerHTML = '';
+
+    // Fetch data challenge via AJAX
+    const res  = await fetch(`/admin/challenge/${idChallenge}/edit-data`);
+    const data = await res.json();
+
+    // Isi form
+    document.getElementById('formEdit').action = `/admin/challenge/${idChallenge}`;
+    document.getElementById('editJudul').value     = data.judul_challenge;
+    document.getElementById('editExp').value       = data.exp;
+    document.getElementById('editDeskripsi').value = data.deskripsi ?? '';
+    document.getElementById('editBadge').value     = data.id_badge ?? '';
+
+    // Format datetime-local
+    const dt = new Date(data.tenggat_waktu);
+    const pad = n => String(n).padStart(2,'0');
+    document.getElementById('editTenggat').value =
+        `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())}T${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
+
+    // Centang kelas
+    document.querySelectorAll('.edit-kelas-check').forEach(cb => {
+        cb.checked = data.kelas.includes(parseInt(cb.value));
+    });
+
+    // Isi soal
+    data.soal.forEach(s => tambahSoal('editSoalContainer', s));
+
+    new bootstrap.Modal(document.getElementById('modalEdit')).show();
+}
 </script>
 
 @endsection
\ No newline at end of file
diff --git a/resources/views/admin/challenge/show.blade.php b/resources/views/admin/challenge/show.blade.php
new file mode 100644
index 0000000..6a6917e
--- /dev/null
+++ b/resources/views/admin/challenge/show.blade.php
@@ -0,0 +1,205 @@
+@extends('admin.layouts.app')
+
+@section('title', 'Detail Challenge')
+
+@section('content')
+
+<style>
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: #2b8ef3;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    margin-bottom: 20px;
+}
+.back-link:hover { text-decoration: underline; }
+
+.info-card {
+    background: white;
+    border-radius: 20px;
+    border: 2px solid #e5e5e5;
+    padding: 24px 28px;
+    margin-bottom: 20px;
+    border-left: 5px solid #667eea;
+}
+
+.info-title { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0 0 12px; }
+
+.meta-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: #f1f5f9;
+    color: #475569;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 5px 12px;
+    border-radius: 99px;
+}
+.meta-chip.purple { background: #ede9fe; color: #6d28d9; }
+.meta-chip.green  { background: #dcfce7; color: #16a34a; }
+.meta-chip.red    { background: #fee2e2; color: #dc2626; }
+
+.kelas-chip {
+    display: inline-block;
+    background: #e6f0ff;
+    color: #1d4ed8;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: 99px;
+    margin: 2px;
+}
+
+.soal-card {
+    background: white;
+    border-radius: 16px;
+    border: 2px solid #e5e5e5;
+    padding: 20px;
+    margin-bottom: 14px;
+}
+
+.soal-number-badge {
+    display: inline-block;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 3px 12px;
+    border-radius: 99px;
+    margin-bottom: 10px;
+}
+
+.soal-pertanyaan {
+    font-weight: 600;
+    font-size: 15px;
+    color: #1e293b;
+    margin-bottom: 12px;
+    line-height: 1.6;
+}
+
+.opsi-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+
+.opsi-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #f8fafc;
+    border-radius: 10px;
+    padding: 9px 14px;
+    font-size: 14px;
+    border: 2px solid transparent;
+}
+
+.opsi-item.benar {
+    background: #dcfce7;
+    border-color: #22c55e;
+    font-weight: 700;
+    color: #15803d;
+}
+
+.opsi-label {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 13px;
+    flex-shrink: 0;
+}
+
+.opsi-item.benar .opsi-label {
+    background: #22c55e;
+    color: white;
+}
+
+.exp-badge {
+    background: #fef9c3;
+    color: #b45309;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 99px;
+    margin-top: 10px;
+    display: inline-block;
+}
+
+.custom-card {
+    background: white;
+    border-radius: 20px;
+    border: 2px solid #e5e5e5;
+    padding: 25px;
+    margin-bottom: 20px;
+}
+
+.section-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 14px; }
+</style>
+
+<a href="{{ route('admin.challenge.index') }}" class="back-link">← Kembali ke Daftar Challenge</a>
+
+@php
+    $isLewat = \Carbon\Carbon::parse($challenge->tenggat_waktu)->isPast();
+@endphp
+
+{{-- INFO --}}
+<div class="info-card">
+    <h2 class="info-title">🏆 {{ $challenge->judul_challenge }}</h2>
+
+    <div class="d-flex flex-wrap gap-2 mb-3">
+        <span class="meta-chip purple">⭐ {{ $challenge->exp }} EXP</span>
+        <span class="meta-chip {{ $isLewat ? 'red' : 'green' }}">
+            ⏰ {{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y, H:i') }}
+            — {{ $isLewat ? 'Sudah lewat' : 'Masih aktif' }}
+        </span>
+        <span class="meta-chip">📝 {{ $challenge->soal->count() }} soal</span>
+    </div>
+
+    <div class="mb-2">
+        @foreach($challenge->kelas as $k)
+            <span class="kelas-chip">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
+        @endforeach
+    </div>
+
+    @if($challenge->deskripsi)
+        <div style="background:#f8fafc;border-radius:10px;padding:12px 16px;font-size:14px;color:#475569;margin-top:10px;border:1px solid #e2e8f0">
+            {!! nl2br(e($challenge->deskripsi)) !!}
+        </div>
+    @endif
+</div>
+
+{{-- DAFTAR SOAL --}}
+<div class="custom-card">
+    <p class="section-title">📝 Daftar Soal Challenge</p>
+
+    @forelse($challenge->soal as $i => $soal)
+    <div class="soal-card">
+        <span class="soal-number-badge">Soal {{ $i + 1 }}</span>
+        <p class="soal-pertanyaan">{{ $soal->pertanyaan }}</p>
+
+        <div class="opsi-list">
+            @foreach(['A','B','C','D'] as $opsi)
+            @php $key = 'opsi_' . strtolower($opsi); @endphp
+            <div class="opsi-item {{ $soal->jawaban_benar === $opsi ? 'benar' : '' }}">
+                <span class="opsi-label">{{ $opsi }}</span>
+                <span>{{ $soal->$key }}</span>
+                @if($soal->jawaban_benar === $opsi)
+                    <span style="margin-left:auto;font-size:16px">✅</span>
+                @endif
+            </div>
+            @endforeach
+        </div>
+
+        <span class="exp-badge">⭐ {{ $soal->exp_per_soal }} EXP per soal</span>
+    </div>
+    @empty
+        <p class="text-muted text-center py-3">Belum ada soal.</p>
+    @endforelse
+</div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/admin/challenge/soal.blade.php b/resources/views/admin/challenge/soal.blade.php
deleted file mode 100644
index fc723cd..0000000
--- a/resources/views/admin/challenge/soal.blade.php
+++ /dev/null
@@ -1,174 +0,0 @@
-@extends('admin.layouts.app')
-
-@section('title', 'Tambah Soal Challenge')
-
-@section('content')
-
-<style>
-    .page-title {
-        font-size: 28px;
-        font-weight: 800;
-        margin-top: -20px;
-        margin-bottom: 10px;
-    }
-
-    .custom-card {
-        background: white;
-        border-radius: 20px;
-        border: 2px solid #e5e5e5;
-        padding: 25px;
-    }
-
-    .soal-box {
-        border: 2px solid #e5e5e5;
-        border-radius: 15px;
-        padding: 20px;
-        margin-bottom: 20px;
-        background: #f9fbff;
-    }
-
-    .btn-add {
-        background: #2b8ef3;
-        color: white;
-        border-radius: 10px;
-        padding: 8px 18px;
-        border: none;
-    }
-
-    .btn-remove {
-        background: #ef4444;
-        color: white;
-        border: none;
-        border-radius: 8px;
-        padding: 5px 12px;
-        font-size: 12px;
-    }
-</style>
-
-<h3 class="page-title">
-    TAMBAH SOAL - {{ $challenge->judul_challenge }}
-</h3>
-
-<div class="custom-card">
-
-<form action="{{ route('admin.challenge.soal.store', $challenge->id_challenge) }}" method="POST">
-@csrf
-
-<div id="soalContainer">
-
-    {{-- SOAL PERTAMA (DEFAULT) --}}
-    <div class="soal-box">
-        <h6>Soal 1</h6>
-
-        <div class="mb-3">
-            <label>Pertanyaan *</label>
-            <textarea name="pertanyaan[]" class="form-control" required></textarea>
-        </div>
-
-        <div class="row">
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
-            </div>
-
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
-            </div>
-
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
-            </div>
-
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
-            </div>
-        </div>
-
-        <div class="mb-2">
-            <label>Jawaban Benar *</label>
-            <select name="jawaban_benar[]" class="form-control" required>
-                <option value="">-- Pilih --</option>
-                <option value="A">A</option>
-                <option value="B">B</option>
-                <option value="C">C</option>
-                <option value="D">D</option>
-            </select>
-        </div>
-    </div>
-
-</div>
-
-<button type="button" onclick="tambahSoal()" class="btn-add">
-    + Tambah Soal
-</button>
-
-<hr>
-
-<div class="d-flex justify-content-end">
-    <button type="submit" class="btn btn-success">
-        Simpan Semua Soal
-    </button>
-</div>
-
-</form>
-
-</div>
-
-<script>
-let nomorSoal = 1;
-
-function tambahSoal() {
-    nomorSoal++;
-
-    let container = document.getElementById('soalContainer');
-
-    let html = `
-    <div class="soal-box">
-        <div class="d-flex justify-content-between">
-            <h6>Soal ${nomorSoal}</h6>
-            <button type="button" class="btn-remove" onclick="hapusSoal(this)">
-                Hapus
-            </button>
-        </div>
-
-        <div class="mb-3">
-            <label>Pertanyaan *</label>
-            <textarea name="pertanyaan[]" class="form-control" required></textarea>
-        </div>
-
-        <div class="row">
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_a[]" class="form-control" placeholder="Opsi A" required>
-            </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_b[]" class="form-control" placeholder="Opsi B" required>
-            </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_c[]" class="form-control" placeholder="Opsi C" required>
-            </div>
-            <div class="col-md-6 mb-2">
-                <input type="text" name="opsi_d[]" class="form-control" placeholder="Opsi D" required>
-            </div>
-        </div>
-
-        <div class="mb-2">
-            <label>Jawaban Benar *</label>
-            <select name="jawaban_benar[]" class="form-control" required>
-                <option value="">-- Pilih --</option>
-                <option value="A">A</option>
-                <option value="B">B</option>
-                <option value="C">C</option>
-                <option value="D">D</option>
-            </select>
-        </div>
-    </div>
-    `;
-
-    container.insertAdjacentHTML('beforeend', html);
-}
-
-function hapusSoal(button) {
-    button.closest('.soal-box').remove();
-}
-</script>
-
-@endsection
diff --git a/resources/views/admin/layouts/app.blade.php b/resources/views/admin/layouts/app.blade.php
index e9871d5..8e80979 100644
--- a/resources/views/admin/layouts/app.blade.php
+++ b/resources/views/admin/layouts/app.blade.php
@@ -111,7 +111,7 @@ class="sidebar-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"
                 <span>Dashboard</span>
             </a>
 
-            <div class="sidebar-section">Master Data</div>
+            <div class="sidebar-section">Data Master</div>
 
             <a href="{{ route('admin.guru.index') }}"
                class="sidebar-link {{ request()->routeIs('admin.guru.*') ? 'active' : '' }}">
diff --git a/resources/views/siswa/challenge/hasil.blade.php b/resources/views/siswa/challenge/hasil.blade.php
new file mode 100644
index 0000000..2cfa446
--- /dev/null
+++ b/resources/views/siswa/challenge/hasil.blade.php
@@ -0,0 +1,178 @@
+@extends('siswa.layouts.app')
+
+@section('title', 'Hasil Challenge')
+
+@push('styles')
+<style>
+.hasil-wrapper { max-width: 680px; margin: 0 auto; padding: 0 0 40px; }
+
+.hasil-hero {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 24px;
+    padding: 36px 28px;
+    text-align: center;
+    color: white;
+    margin-bottom: 24px;
+    position: relative;
+    overflow: hidden;
+}
+
+.hasil-hero::before {
+    content: '🏆';
+    position: absolute;
+    font-size: 120px;
+    opacity: 0.08;
+    top: -10px; right: -10px;
+}
+
+.hasil-emoji   { font-size: 52px; margin-bottom: 10px; }
+.hasil-title   { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
+.hasil-subtitle { font-size: 14px; opacity: 0.85; margin-bottom: 20px; }
+.hasil-exp {
+    display: inline-block;
+    background: rgba(255,255,255,0.2);
+    border-radius: 99px;
+    padding: 8px 24px;
+    font-size: 20px;
+    font-weight: 800;
+}
+
+.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
+.stat-box { background: white; border-radius: 16px; border: 2px solid #e5e5e5; padding: 18px 14px; text-align: center; }
+.stat-num  { font-size: 28px; font-weight: 800; margin: 0; }
+.stat-label { font-size: 12px; color: #94a3b8; margin: 4px 0 0; font-weight: 500; }
+
+.custom-card { background: white; border-radius: 20px; border: 2px solid #e5e5e5; padding: 24px; margin-bottom: 16px; }
+.section-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 16px; }
+
+.soal-review { border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; margin-bottom: 12px; }
+.soal-review.benar { border-color: #22c55e; background: #f0fdf4; }
+.soal-review.salah { border-color: #ef4444; background: #fef2f2; }
+
+.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.review-number { font-size: 12px; font-weight: 700; color: #64748b; }
+.review-status { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
+.review-status.benar { background: #dcfce7; color: #16a34a; }
+.review-status.salah { background: #fee2e2; color: #dc2626; }
+.review-pertanyaan { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 12px; line-height: 1.6; }
+
+.opsi-review {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 10px;
+    font-size: 13px;
+    margin-bottom: 6px;
+    background: #f8fafc;
+}
+
+.opsi-review.jawaban-benar { background: #dcfce7; font-weight: 700; color: #15803d; }
+.opsi-review.salah-dipilih  { background: #fee2e2; color: #991b1b; font-weight: 700; }
+
+.opsi-circle {
+    width: 26px; height: 26px;
+    border-radius: 50%;
+    background: #e2e8f0;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 700; flex-shrink: 0;
+}
+
+.opsi-review.jawaban-benar .opsi-circle { background: #22c55e; color: white; }
+.opsi-review.salah-dipilih .opsi-circle  { background: #ef4444; color: white; }
+
+.btn-back {
+    display: block;
+    text-align: center;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border-radius: 12px;
+    padding: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    margin-top: 20px;
+}
+.btn-back:hover { opacity: 0.9; color: white; }
+</style>
+@endpush
+
+@section('content')
+
+@php
+    $emoji = $persentase >= 80 ? '🎉' : ($persentase >= 60 ? '👍' : '💪');
+    $pesan = $persentase >= 80
+        ? 'Luar biasa! Kamu menguasai materi ini!'
+        : ($persentase >= 60 ? 'Bagus! Terus tingkatkan kemampuanmu!' : 'Jangan menyerah! Terus semangat belajar!');
+@endphp
+
+<div class="hasil-wrapper">
+
+    <div class="hasil-hero">
+        <div class="hasil-emoji">{{ $emoji }}</div>
+        <div class="hasil-title">{{ $challenge->judul_challenge }}</div>
+        <div class="hasil-subtitle">{{ $pesan }}</div>
+        <div class="hasil-exp">⭐ +{{ $peserta->exp }} EXP didapat!</div>
+    </div>
+
+    <div class="stat-row">
+        <div class="stat-box">
+            <p class="stat-num" style="color:#22c55e">{{ $benar }}</p>
+            <p class="stat-label">Jawaban Benar</p>
+        </div>
+        <div class="stat-box">
+            <p class="stat-num" style="color:#ef4444">{{ $salah }}</p>
+            <p class="stat-label">Jawaban Salah</p>
+        </div>
+        <div class="stat-box">
+            <p class="stat-num" style="color:#667eea">{{ $persentase }}%</p>
+            <p class="stat-label">Skor</p>
+        </div>
+    </div>
+
+    <div class="custom-card">
+        <p class="section-title">📋 Pembahasan Jawaban</p>
+
+        @foreach($challenge->soal as $i => $soal)
+        @php
+            $jwbSiswa = strtoupper($jawabanSiswa[$soal->id_soal] ?? '');
+            $jwbBenar = strtoupper($soal->jawaban_benar);
+            $isBenar  = $jwbSiswa === $jwbBenar;
+        @endphp
+        <div class="soal-review {{ $isBenar ? 'benar' : 'salah' }}">
+            <div class="review-header">
+                <span class="review-number">Soal {{ $i + 1 }}</span>
+                <span class="review-status {{ $isBenar ? 'benar' : 'salah' }}">
+                    {{ $isBenar ? '✅ Benar' : '❌ Salah' }}
+                </span>
+            </div>
+
+            <p class="review-pertanyaan">{{ $soal->pertanyaan }}</p>
+
+            @foreach(['A','B','C','D'] as $opsi)
+            @php
+                $key        = 'opsi_' . strtolower($opsi);
+                $isDipilih  = $jwbSiswa === $opsi;
+                $isJwbBenar = $jwbBenar === $opsi;
+                $cls = $isJwbBenar ? 'jawaban-benar' : ($isDipilih ? 'salah-dipilih' : '');
+            @endphp
+            <div class="opsi-review {{ $cls }}">
+                <span class="opsi-circle">{{ $opsi }}</span>
+                <span>{{ $soal->$key }}</span>
+                @if($isJwbBenar)
+                    <span style="margin-left:auto;font-size:12px">✅ Jawaban benar</span>
+                @elseif($isDipilih)
+                    <span style="margin-left:auto;font-size:12px">← Jawabanmu</span>
+                @endif
+            </div>
+            @endforeach
+        </div>
+        @endforeach
+    </div>
+
+    <a href="{{ route('siswa.challenge.index') }}" class="btn-back">
+        ← Kembali ke Daftar Challenge
+    </a>
+</div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/siswa/challenge/index.blade.php b/resources/views/siswa/challenge/index.blade.php
index e69de29..4c644aa 100644
--- a/resources/views/siswa/challenge/index.blade.php
+++ b/resources/views/siswa/challenge/index.blade.php
@@ -0,0 +1,174 @@
+@extends('siswa.layouts.app')
+
+@section('title', 'Challenge')
+
+@push('styles')
+<style>
+.page-title { font-size: 28px; font-weight: 800; margin-top: -20px; margin-bottom: 6px; }
+.page-subtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }
+
+.challenge-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.challenge-card {
+    background: white;
+    border-radius: 20px;
+    border: 2px solid #e5e5e5;
+    padding: 22px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    position: relative;
+    overflow: hidden;
+}
+
+.challenge-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
+.challenge-card.sudah { border-color: #a5e6ba; background: linear-gradient(135deg, #f0fdf4, #fff); }
+.challenge-card.lewat { border-color: #fecaca; background: #fffafa; opacity: 0.85; }
+
+.card-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 99px;
+    margin-bottom: 12px;
+}
+
+.badge-aktif { background: #dcfce7; color: #16a34a; }
+.badge-sudah { background: #e0f2fe; color: #0369a1; }
+.badge-lewat { background: #fee2e2; color: #dc2626; }
+
+.card-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 8px; line-height: 1.4; }
+.card-desc  { font-size: 13px; color: #64748b; margin-bottom: 14px; line-height: 1.6; }
+
+.card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
+
+.meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 99px;
+    padding: 4px 10px;
+    font-size: 12px;
+    color: #475569;
+    font-weight: 500;
+}
+
+.meta-item.exp { background: #fef9c3; color: #b45309; border-color: #fde68a; }
+
+.btn-kerjakan {
+    display: block;
+    text-align: center;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border-radius: 12px;
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: opacity 0.2s;
+}
+.btn-kerjakan:hover { opacity: 0.9; color: white; }
+
+.btn-lihat-hasil {
+    display: block;
+    text-align: center;
+    background: #e0f2fe;
+    color: #0369a1;
+    border-radius: 12px;
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+}
+.btn-lihat-hasil:hover { background: #bae6fd; color: #0369a1; }
+
+.btn-disabled {
+    display: block;
+    text-align: center;
+    background: #f1f5f9;
+    color: #94a3b8;
+    border-radius: 12px;
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: not-allowed;
+}
+
+.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
+.alert-error { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-weight: 500; font-size: 14px; }
+
+.challenge-card::before {
+    content: '🏆';
+    position: absolute;
+    top: 16px; right: 16px;
+    font-size: 28px;
+    opacity: 0.12;
+}
+.challenge-card.sudah::before { content: '✅'; opacity: 0.2; }
+.challenge-card.lewat::before { content: '⏰'; opacity: 0.15; }
+</style>
+@endpush
+
+@section('content')
+
+<h3 class="page-title">🏆 Challenge</h3>
+<p class="page-subtitle">Kerjakan challenge untuk mendapatkan EXP dan naik peringkat di leaderboard!</p>
+
+@if(session('error'))
+    <div class="alert-error">❌ {{ session('error') }}</div>
+@endif
+
+@if($challenges->isEmpty())
+    <div class="empty-state">
+        <div style="font-size:56px;margin-bottom:16px">🎯</div>
+        <p style="font-size:16px;font-weight:600;color:#475569">Belum ada challenge untuk kelasmu.</p>
+        <p style="font-size:13px">Tunggu admin membuat challenge baru!</p>
+    </div>
+@else
+    <div class="challenge-grid">
+        @foreach($challenges as $ch)
+        @php
+            $isLewat  = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast();
+            $isSudah  = in_array($ch->id_challenge, $sudahDikerjakan);
+            $cardClass = $isSudah ? 'sudah' : ($isLewat ? 'lewat' : '');
+        @endphp
+        <div class="challenge-card {{ $cardClass }}">
+            @if($isSudah)
+                <span class="card-badge badge-sudah">✅ Sudah Dikerjakan</span>
+            @elseif($isLewat)
+                <span class="card-badge badge-lewat">⏰ Tenggat Lewat</span>
+            @else
+                <span class="card-badge badge-aktif">🔥 Aktif</span>
+            @endif
+
+            <div class="card-title">{{ $ch->judul_challenge }}</div>
+            @if($ch->deskripsi)
+                <div class="card-desc">{{ Str::limit($ch->deskripsi, 80) }}</div>
+            @endif
+
+            <div class="card-meta">
+                <span class="meta-item">📝 {{ $ch->soal_count }} soal</span>
+                <span class="meta-item exp">⭐ {{ $ch->exp }} EXP</span>
+                <span class="meta-item">⏰ {{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}</span>
+            </div>
+
+            @if($isSudah)
+                <a href="{{ route('siswa.challenge.hasil', $ch->id_challenge) }}" class="btn-lihat-hasil">📊 Lihat Hasil</a>
+            @elseif($isLewat)
+                <span class="btn-disabled">Tenggat sudah lewat</span>
+            @else
+                <a href="{{ route('siswa.challenge.kerjakan', $ch->id_challenge) }}" class="btn-kerjakan">🚀 Kerjakan Sekarang</a>
+            @endif
+        </div>
+        @endforeach
+    </div>
+@endif
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/siswa/challenge/kerjakan.blade.php b/resources/views/siswa/challenge/kerjakan.blade.php
new file mode 100644
index 0000000..88436a0
--- /dev/null
+++ b/resources/views/siswa/challenge/kerjakan.blade.php
@@ -0,0 +1,406 @@
+@extends('siswa.layouts.app')
+
+@section('title', 'Kerjakan Challenge')
+
+@push('styles')
+<style>
+/* Sembunyikan sidebar saat kerjakan biar fokus */
+.siswa-wrapper .sidebar { display: none !important; }
+.sidebar-toggle-btn     { display: none !important; }
+
+.quiz-wrapper {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 10px 0 40px;
+}
+
+.quiz-header {
+    text-align: center;
+    margin-bottom: 28px;
+}
+
+.quiz-title {
+    font-size: 20px;
+    font-weight: 800;
+    color: #1e293b;
+    margin-bottom: 6px;
+}
+
+.quiz-meta {
+    font-size: 13px;
+    color: #64748b;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.quiz-meta span {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Progress bar */
+.progress-bar-wrap {
+    background: #e2e8f0;
+    border-radius: 99px;
+    height: 8px;
+    margin-bottom: 28px;
+    overflow: hidden;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea, #764ba2);
+    border-radius: 99px;
+    transition: width 0.4s ease;
+}
+
+.progress-label {
+    text-align: center;
+    font-size: 12px;
+    color: #64748b;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+/* Soal card */
+.soal-card {
+    background: white;
+    border-radius: 20px;
+    border: 2px solid #e5e5e5;
+    padding: 28px;
+    margin-bottom: 20px;
+    display: none; /* sembunyikan semua dulu */
+}
+
+.soal-card.active { display: block; }
+
+.soal-number {
+    display: inline-block;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 3px 12px;
+    border-radius: 99px;
+    margin-bottom: 14px;
+}
+
+.soal-pertanyaan {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 20px;
+    line-height: 1.7;
+}
+
+/* Opsi pilihan */
+.opsi-list { display: flex; flex-direction: column; gap: 10px; }
+
+.opsi-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    background: #f8fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 13px 16px;
+    cursor: pointer;
+    transition: all 0.18s;
+    font-size: 14px;
+    color: #1e293b;
+    user-select: none;
+}
+
+.opsi-item:hover {
+    border-color: #667eea;
+    background: #f0eeff;
+}
+
+.opsi-item.selected {
+    border-color: #667eea;
+    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
+    font-weight: 600;
+    color: #4c1d95;
+}
+
+.opsi-item input[type="radio"] { display: none; }
+
+.opsi-label-circle {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 13px;
+    flex-shrink: 0;
+    transition: all 0.18s;
+}
+
+.opsi-item.selected .opsi-label-circle {
+    background: #667eea;
+    color: white;
+}
+
+/* Navigasi */
+.nav-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.btn-nav {
+    padding: 11px 24px;
+    border-radius: 12px;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: 'Poppins', sans-serif;
+}
+
+.btn-prev {
+    background: #f1f5f9;
+    color: #475569;
+}
+.btn-prev:hover { background: #e2e8f0; }
+.btn-prev:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.btn-next {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    margin-left: auto;
+}
+.btn-next:hover { opacity: 0.9; }
+
+.btn-submit {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+    color: white;
+    margin-left: auto;
+    display: none;
+}
+.btn-submit:hover { opacity: 0.9; }
+
+/* Nomor soal dots */
+.soal-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.soal-dot {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    color: #64748b;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.soal-dot.active   { background: #667eea; color: white; }
+.soal-dot.answered { background: #dcfce7; color: #16a34a; border: 2px solid #22c55e; }
+.soal-dot.active.answered { background: #22c55e; color: white; }
+
+/* Warning belum semua dijawab */
+.warning-box {
+    background: #fff7ed;
+    border: 1px solid #fed7aa;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 13px;
+    color: #c2410c;
+    font-weight: 500;
+    margin-bottom: 16px;
+    display: none;
+}
+</style>
+@endpush
+
+@section('content')
+
+<div class="quiz-wrapper">
+
+    {{-- Header --}}
+    <div class="quiz-header">
+        <div class="quiz-title">🏆 {{ $challenge->judul_challenge }}</div>
+        <div class="quiz-meta">
+            <span>📝 {{ $challenge->soal->count() }} Soal</span>
+            <span>⭐ {{ $challenge->exp }} EXP</span>
+            <span>⏰ Tenggat: {{ \Carbon\Carbon::parse($challenge->tenggat_waktu)->format('d M Y, H:i') }}</span>
+        </div>
+    </div>
+
+    {{-- Dots navigasi soal --}}
+    <div class="soal-dots" id="soalDots">
+        @foreach($challenge->soal as $i => $soal)
+            <div class="soal-dot {{ $i === 0 ? 'active' : '' }}"
+                 id="dot-{{ $i }}"
+                 onclick="goToSoal({{ $i }})">
+                {{ $i + 1 }}
+            </div>
+        @endforeach
+    </div>
+
+    {{-- Progress --}}
+    <div class="progress-label" id="progressLabel">Soal 1 dari {{ $challenge->soal->count() }}</div>
+    <div class="progress-bar-wrap">
+        <div class="progress-bar-fill" id="progressBar"
+             style="width: {{ round(1 / $challenge->soal->count() * 100) }}%"></div>
+    </div>
+
+    {{-- Form --}}
+    <form action="{{ route('siswa.challenge.submit', $challenge->id_challenge) }}"
+          method="POST" id="quizForm">
+        @csrf
+
+        {{-- Soal --}}
+        @foreach($challenge->soal as $i => $soal)
+        <div class="soal-card {{ $i === 0 ? 'active' : '' }}" id="soal-{{ $i }}">
+            <span class="soal-number">Soal {{ $i + 1 }}</span>
+            <p class="soal-pertanyaan">{{ $soal->pertanyaan }}</p>
+
+            <div class="opsi-list">
+                @foreach(['A','B','C','D'] as $opsi)
+                @php $key = 'opsi_' . strtolower($opsi); @endphp
+                <label class="opsi-item" id="label-{{ $i }}-{{ $opsi }}"
+                       onclick="pilihJawaban({{ $i }}, '{{ $opsi }}', {{ $soal->id_soal }})">
+                    <input type="radio" name="jawaban[{{ $soal->id_soal }}]"
+                           value="{{ $opsi }}" id="radio-{{ $i }}-{{ $opsi }}">
+                    <span class="opsi-label-circle">{{ $opsi }}</span>
+                    <span>{{ $soal->$key }}</span>
+                </label>
+                @endforeach
+            </div>
+        </div>
+        @endforeach
+
+        {{-- Warning --}}
+        <div class="warning-box" id="warningBox">
+            ⚠️ Masih ada <span id="warningCount"></span> soal yang belum dijawab. Yakin ingin submit?
+        </div>
+
+        {{-- Navigasi --}}
+        <div class="nav-buttons">
+            <button type="button" class="btn-nav btn-prev" id="btnPrev"
+                    onclick="prevSoal()" disabled>← Sebelumnya</button>
+
+            <button type="button" class="btn-nav btn-next" id="btnNext"
+                    onclick="nextSoal()">Selanjutnya →</button>
+
+            <button type="submit" class="btn-nav btn-submit" id="btnSubmit"
+                    onclick="return konfirmasiSubmit()">
+                🎯 Selesai & Submit
+            </button>
+        </div>
+    </form>
+</div>
+
+@endsection
+
+@push('scripts')
+<script>
+const totalSoal  = {{ $challenge->soal->count() }};
+let currentSoal  = 0;
+let jawaban      = {}; // { index: 'A'/'B'/'C'/'D' }
+
+function goToSoal(index) {
+    // Sembunyikan soal sekarang
+    document.getElementById(`soal-${currentSoal}`).classList.remove('active');
+    document.getElementById(`dot-${currentSoal}`).classList.remove('active');
+
+    // Tampilkan soal target
+    currentSoal = index;
+    document.getElementById(`soal-${currentSoal}`).classList.add('active');
+
+    const dot = document.getElementById(`dot-${currentSoal}`);
+    dot.classList.add('active');
+
+    updateNav();
+    updateProgress();
+}
+
+function nextSoal() {
+    if (currentSoal < totalSoal - 1) goToSoal(currentSoal + 1);
+}
+
+function prevSoal() {
+    if (currentSoal > 0) goToSoal(currentSoal - 1);
+}
+
+function pilihJawaban(soalIndex, opsi, idSoal) {
+    jawaban[soalIndex] = opsi;
+
+    // Hapus selected dari semua opsi soal ini
+    ['A','B','C','D'].forEach(o => {
+        document.getElementById(`label-${soalIndex}-${o}`)?.classList.remove('selected');
+    });
+
+    // Tandai yang dipilih
+    document.getElementById(`label-${soalIndex}-${opsi}`)?.classList.add('selected');
+    document.getElementById(`radio-${soalIndex}-${opsi}`).checked = true;
+
+    // Update dot
+    const dot = document.getElementById(`dot-${soalIndex}`);
+    dot.classList.add('answered');
+
+    updateProgress();
+}
+
+function updateNav() {
+    const btnPrev   = document.getElementById('btnPrev');
+    const btnNext   = document.getElementById('btnNext');
+    const btnSubmit = document.getElementById('btnSubmit');
+
+    btnPrev.disabled = currentSoal === 0;
+
+    if (currentSoal === totalSoal - 1) {
+        btnNext.style.display   = 'none';
+        btnSubmit.style.display = 'block';
+    } else {
+        btnNext.style.display   = 'block';
+        btnSubmit.style.display = 'none';
+    }
+}
+
+function updateProgress() {
+    const answered = Object.keys(jawaban).length;
+    const pct      = Math.round(((currentSoal + 1) / totalSoal) * 100);
+
+    document.getElementById('progressBar').style.width  = pct + '%';
+    document.getElementById('progressLabel').textContent =
+        `Soal ${currentSoal + 1} dari ${totalSoal} · ${answered} terjawab`;
+}
+
+function konfirmasiSubmit() {
+    const belum      = totalSoal - Object.keys(jawaban).length;
+    const warningBox = document.getElementById('warningBox');
+
+    if (belum > 0) {
+        document.getElementById('warningCount').textContent = belum + ' soal';
+        warningBox.style.display = 'block';
+        return confirm(`Masih ada ${belum} soal yang belum dijawab. Yakin ingin submit?`);
+    }
+
+    return confirm('Yakin ingin submit jawaban? Jawaban tidak bisa diubah setelah submit.');
+}
+
+// Init
+updateNav();
+updateProgress();
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/siswa/layouts/app.blade.php b/resources/views/siswa/layouts/app.blade.php
index 476c32e..4866b81 100644
--- a/resources/views/siswa/layouts/app.blade.php
+++ b/resources/views/siswa/layouts/app.blade.php
@@ -228,13 +228,13 @@ class="sidebar-link {{ request()->routeIs('siswa.tugas*') ? 'active' : '' }}">
                 <span>Tugas</span>
             </a>
 
-            <a href="#"
+            <a href="{{ route('siswa.challenge.index') }}"
                class="sidebar-link {{ request()->routeIs('siswa.challenge*') ? 'active' : '' }}">
                 <img src="{{ asset('images/icon/sidebar/challenge.png') }}" class="sidebar-icon" alt="">
                 <span>Challenge</span>
             </a>
 
-            <a href="#"
+            <a href="{{ route('siswa.leaderboard.index') }}"
                class="sidebar-link {{ request()->routeIs('siswa.leaderboard*') ? 'active' : '' }}">
                 <img src="{{ asset('images/icon/sidebar/lb.png') }}" class="sidebar-icon" alt="">
                 <span>Leaderboard</span>
diff --git a/resources/views/siswa/leaderboard/index.blade.php b/resources/views/siswa/leaderboard/index.blade.php
index e69de29..eada5fd 100644
--- a/resources/views/siswa/leaderboard/index.blade.php
+++ b/resources/views/siswa/leaderboard/index.blade.php
@@ -0,0 +1,254 @@
+@extends('siswa.layouts.app')
+
+@section('title', 'Leaderboard')
+
+@push('styles')
+<style>
+.page-title   { font-size: 28px; font-weight: 800; margin-top: -20px; margin-bottom: 6px; }
+.page-subtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }
+
+/* Podium top 3 */
+.podium-wrap {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 32px;
+}
+
+.podium-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.podium-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    font-weight: 800;
+    color: white;
+    position: relative;
+}
+
+.podium-crown {
+    position: absolute;
+    top: -16px;
+    font-size: 18px;
+}
+
+.rank-1 .podium-avatar { background: linear-gradient(135deg, #f59e0b, #d97706); width: 68px; height: 68px; font-size: 26px; }
+.rank-2 .podium-avatar { background: linear-gradient(135deg, #94a3b8, #64748b); }
+.rank-3 .podium-avatar { background: linear-gradient(135deg, #f97316, #ea580c); }
+
+.podium-name { font-size: 13px; font-weight: 700; color: #1e293b; text-align: center; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.podium-exp  { font-size: 12px; color: #64748b; }
+
+.podium-bar {
+    border-radius: 12px 12px 0 0;
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 800;
+    color: white;
+}
+
+.rank-1 .podium-bar { height: 80px; background: linear-gradient(135deg, #f59e0b, #d97706); }
+.rank-2 .podium-bar { height: 60px; background: linear-gradient(135deg, #94a3b8, #64748b); }
+.rank-3 .podium-bar { height: 44px; background: linear-gradient(135deg, #f97316, #ea580c); }
+
+/* My rank banner */
+.my-rank-banner {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 16px;
+    padding: 16px 20px;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.my-rank-num {
+    font-size: 36px;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.my-rank-info { flex: 1; }
+.my-rank-label { font-size: 12px; opacity: 0.8; margin-bottom: 2px; }
+.my-rank-nama  { font-size: 16px; font-weight: 700; }
+.my-rank-exp   { font-size: 13px; opacity: 0.9; }
+
+/* Tabel */
+.custom-card { background: white; border-radius: 20px; border: 2px solid #e5e5e5; padding: 22px; }
+.section-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 16px; }
+
+.lb-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    margin-bottom: 8px;
+    transition: background 0.15s;
+}
+
+.lb-row:hover { background: #f8fafc; }
+.lb-row.highlight { background: #f0eeff; border: 2px solid #c4b5fd; }
+
+.lb-rank {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #e2e8f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    color: #64748b;
+    flex-shrink: 0;
+}
+
+.lb-rank.gold   { background: #fef3c7; color: #d97706; }
+.lb-rank.silver { background: #f1f5f9; color: #64748b; }
+.lb-rank.bronze { background: #ffedd5; color: #ea580c; }
+
+.lb-nama { flex: 1; font-size: 14px; font-weight: 600; color: #1e293b; }
+.lb-nisn { font-size: 12px; color: #94a3b8; }
+.lb-exp  { font-size: 14px; font-weight: 700; color: #667eea; }
+
+.semester-badge {
+    display: inline-block;
+    background: #f0eeff;
+    color: #667eea;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 4px 12px;
+    border-radius: 99px;
+    margin-bottom: 20px;
+}
+
+.empty-state { text-align: center; padding: 40px 20px; color: #94a3b8; }
+</style>
+@endpush
+
+@section('content')
+
+@php $siswaLogin = Auth::guard('siswa')->user(); @endphp
+
+<h3 class="page-title">🏅 Leaderboard</h3>
+<p class="page-subtitle">Peringkat siswa berdasarkan total EXP yang dikumpulkan.</p>
+
+<span class="semester-badge">
+    Semester {{ $semester }} · {{ $tahunAjaran }}
+</span>
+
+@if($leaderboard->isEmpty())
+    <div class="empty-state">
+        <div style="font-size:52px;margin-bottom:12px">📊</div>
+        <p style="font-size:15px;font-weight:600;color:#475569">Belum ada data leaderboard.</p>
+        <p style="font-size:13px">Kerjakan challenge untuk masuk leaderboard!</p>
+    </div>
+@else
+
+    {{-- Podium Top 3 --}}
+    @php
+        $top3 = $leaderboard->take(3);
+        $first  = $top3->firstWhere('ranking', 1);
+        $second = $top3->firstWhere('ranking', 2);
+        $third  = $top3->firstWhere('ranking', 3);
+    @endphp
+
+    @if($first)
+    <div class="podium-wrap">
+
+        {{-- Rank 2 --}}
+        @if($second)
+        <div class="podium-item rank-2">
+            <div class="podium-avatar">{{ strtoupper(substr($second['nama'], 0, 1)) }}</div>
+            <div class="podium-name">{{ $second['nama'] }}</div>
+            <div class="podium-exp">⭐ {{ number_format($second['exp']) }}</div>
+            <div class="podium-bar">2</div>
+        </div>
+        @endif
+
+        {{-- Rank 1 --}}
+        <div class="podium-item rank-1">
+            <div class="podium-avatar">
+                <span class="podium-crown">👑</span>
+                {{ strtoupper(substr($first['nama'], 0, 1)) }}
+            </div>
+            <div class="podium-name">{{ $first['nama'] }}</div>
+            <div class="podium-exp">⭐ {{ number_format($first['exp']) }}</div>
+            <div class="podium-bar">1</div>
+        </div>
+
+        {{-- Rank 3 --}}
+        @if($third)
+        <div class="podium-item rank-3">
+            <div class="podium-avatar">{{ strtoupper(substr($third['nama'], 0, 1)) }}</div>
+            <div class="podium-name">{{ $third['nama'] }}</div>
+            <div class="podium-exp">⭐ {{ number_format($third['exp']) }}</div>
+            <div class="podium-bar">3</div>
+        </div>
+        @endif
+
+    </div>
+    @endif
+
+    {{-- My Rank Banner --}}
+    @if($myRank)
+    <div class="my-rank-banner">
+        <div class="my-rank-num">#{{ $myRank['ranking'] }}</div>
+        <div class="my-rank-info">
+            <div class="my-rank-label">Posisimu saat ini</div>
+            <div class="my-rank-nama">{{ $myRank['nama'] }}</div>
+            <div class="my-rank-exp">⭐ {{ number_format($myRank['exp']) }} EXP</div>
+        </div>
+        <div style="font-size:32px">🎯</div>
+    </div>
+    @endif
+
+    {{-- Tabel semua --}}
+    <div class="custom-card">
+        <p class="section-title">📋 Semua Peringkat</p>
+
+        @foreach($leaderboard as $item)
+        @php
+            $isMe      = $item['id_siswa'] === $siswaLogin->id_siswa;
+            $rankClass = match($item['ranking']) {
+                1 => 'gold', 2 => 'silver', 3 => 'bronze', default => ''
+            };
+        @endphp
+        <div class="lb-row {{ $isMe ? 'highlight' : '' }}">
+            <div class="lb-rank {{ $rankClass }}">
+                @if($item['ranking'] === 1) 🥇
+                @elseif($item['ranking'] === 2) 🥈
+                @elseif($item['ranking'] === 3) 🥉
+                @else {{ $item['ranking'] }}
+                @endif
+            </div>
+            <div style="flex:1">
+                <div class="lb-nama">
+                    {{ $item['nama'] }}
+                    @if($isMe) <span style="background:#c4b5fd;color:#4c1d95;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700;margin-left:4px">Kamu</span> @endif
+                </div>
+                <div class="lb-nisn">{{ $item['nisn'] }}</div>
+            </div>
+            <div class="lb-exp">⭐ {{ number_format($item['exp']) }}</div>
+        </div>
+        @endforeach
+    </div>
+
+@endif
+
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index ae14cc1..bb3aa00 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -76,7 +76,6 @@
 Route::post('/siswa/login', [SiswaLoginController::class, 'login'])
     ->name('siswa.login.submit');
 
-
 // =======================================================
 // ADMIN AREA (HARUS LOGIN ADMIN)
 // =======================================================
@@ -90,35 +89,40 @@
 
     Route::get('/profil', function () {
         return view('admin.profil');
-    })->name('profil');    
+    })->name('profil');
 
-    // CRUD AREA
+    // ── GURU ──────────────────────────────────────────────
     Route::get('/guru/kelas-by-mapel', [AdminGuruController::class, 'getKelasByMapel'])
-    ->name('guru.kelasByMapel');
-
-    // History Materi
-    Route::get('/materi/history', [AdminMateriTugasController::class, 'historyMateri'])->name('materi.history');
-    Route::delete('/materi/{id}', [AdminMateriTugasController::class, 'destroyMateri'])->name('materi.destroy');
-
-    // History Tugas
-    Route::get('/tugas/history', [AdminMateriTugasController::class, 'historyTugas'])->name('tugas.history');
-    Route::get('/tugas/{id}/detail', [AdminMateriTugasController::class, 'detailTugas'])->name('tugas.detail');
-    Route::delete('/tugas/{id}', [AdminMateriTugasController::class, 'destroyTugas'])->name('tugas.destroy');
-
+        ->name('guru.kelasByMapel');
     Route::resource('guru', AdminGuruController::class);
+
+    // ── SISWA / KELAS / MAPEL ─────────────────────────────
     Route::resource('siswa', AdminSiswaController::class);
     Route::resource('kelas', AdminKelasController::class);
     Route::resource('mapel', AdminMapelController::class);
-    Route::resource('leaderboard', AdminLeaderboardController::class)
-      ->only(['index']);
+
+    // ── HISTORY MATERI ────────────────────────────────────
+    Route::get('/materi/history', [AdminMateriTugasController::class, 'historyMateri'])->name('materi.history');
+    Route::delete('/materi/{id}', [AdminMateriTugasController::class, 'destroyMateri'])->name('materi.destroy');
+
+    // ── HISTORY TUGAS ─────────────────────────────────────
+    Route::get('/tugas/history',       [AdminMateriTugasController::class, 'historyTugas'])->name('tugas.history');
+    Route::get('/tugas/{id}/detail',   [AdminMateriTugasController::class, 'detailTugas'])->name('tugas.detail');
+    Route::delete('/tugas/{id}',       [AdminMateriTugasController::class, 'destroyTugas'])->name('tugas.destroy');
+
+    // ── CHALLENGE ─────────────────────────────────────────
+    // WAJIB di atas Route::resource agar tidak konflik dengan {challenge} wildcard
+    Route::get('/challenge/{id}/edit-data', [AdminChallengeController::class, 'editData'])
+        ->name('challenge.editData');
     Route::resource('challenge', AdminChallengeController::class);
-    
 
-    // LOGOUT ADMIN
-    Route::post('/logout', [LoginController::class, 'logout'])
-        ->name('logout');
-    });
+    // ── LEADERBOARD ───────────────────────────────────────
+    Route::resource('leaderboard', AdminLeaderboardController::class)->only(['index']);
 
+    // ── LOGOUT ────────────────────────────────────────────
+    Route::post('/logout', [LoginController::class, 'logout'])->name('logout');
+
+});
 
 // =======================================================
 // GURU AREA (HARUS LOGIN GURU)
@@ -176,6 +180,15 @@
     Route::get('/tugas/{id_tugas}', [SiswaTugasController::class, 'show'])->name('tugas.show');
     Route::post('/tugas/{id_tugas}/submit', [SiswaTugasController::class, 'submit'])->name('tugas.submit');
 
+    // CHALLENGE SISWA
+    Route::get('/challenge',                    [SiswaChallengeController::class, 'index'])->name('challenge.index');
+    Route::get('/challenge/{id}/kerjakan',      [SiswaChallengeController::class, 'kerjakan'])->name('challenge.kerjakan');
+    Route::post('/challenge/{id}/submit',       [SiswaChallengeController::class, 'submit'])->name('challenge.submit');
+    Route::get('/challenge/{id}/hasil',         [SiswaChallengeController::class, 'hasil'])->name('challenge.hasil');
+
+    //LEADERBOARD SISWA
+    Route::get('/leaderboard', [SiswaLeaderboardController::class, 'index'])->name('leaderboard.index');
+    
     // LOGOUT SISWA
     Route::post('/logout', [SiswaLoginController::class, 'logout'])->name('logout');