diff --git a/app/Http/Controllers/CourseAssessmentController.php b/app/Http/Controllers/CourseAssessmentController.php
new file mode 100644
index 0000000..fff6f01
--- /dev/null
+++ b/app/Http/Controllers/CourseAssessmentController.php
@@ -0,0 +1,186 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Models\Course;
+use App\Models\Question;
+use App\Models\Quiz;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Redirect;
+use Inertia\Inertia;
+use Inertia\Response;
+
+final class CourseAssessmentController extends Controller
+{
+    /**
+     * Display the pre-course assessment quiz.
+     */
+    public function show(Course $course): Response|RedirectResponse
+    {
+        // Ensure the course has an assessment quiz linked
+        if (! $course->assessment_quiz_id) {
+            Log::warning('Attempted assessment for course without one.', ['course_id' => $course->id]);
+
+            return Redirect::route('courses.show', $course)->with('info', 'This course does not have a placement assessment.');
+        }
+
+        $quiz = Quiz::with(['questions' => function ($query): void {
+            $query->select(['id', 'quiz_id', 'lesson_id', 'type', 'text', 'options', 'order'])
+                ->orderBy('order');
+        }])
+            ->find($course->assessment_quiz_id);
+
+        if (! $quiz || $quiz->type !== 'assessment') {
+            Log::error('Assessment quiz not found or invalid type for course.', ['course_id' => $course->id, 'quiz_id' => $course->assessment_quiz_id]);
+
+            return Redirect::route('courses.show', $course)->with('error', 'Assessment quiz not found.');
+        }
+
+        $processedQuestions = $quiz->questions->map(function ($question): array {
+            $optionsArray = [];
+            if (! empty($question->options)) {
+                $optionsArray = is_array($question->options)
+                    ? $question->options
+                    : (json_decode($question->options, true) ?? []);
+            }
+
+            return [
+                'id' => $question->id,
+                'quiz_id' => $question->quiz_id,
+                'lesson_id' => $question->lesson_id,
+                'type' => $question->type,
+                'text' => $question->text,
+                'options' => $optionsArray,
+                'order' => $question->order,
+            ];
+        });
+
+        $quizDataForView = $quiz->only('id', 'title', 'description');
+        $quizDataForView['questions'] = $processedQuestions;
+
+        return Inertia::render('courses/assessment/Show', [
+            'course' => $course->only('id', 'title', 'slug'),
+            'quiz' => $quizDataForView,
+        ]);
+    }
+
+    /**
+     * Process the assessment submission and provide recommendation.
+     */
+    public function submit(Request $request, Course $course): Response|RedirectResponse
+    {
+        Auth::user();
+        $submittedAnswers = $request->input('answers', []);
+
+        $request->validate([
+            'answers' => 'required|array',
+            'answers.*' => 'required',
+        ]);
+
+        if (! $course->assessment_quiz_id) {
+            return Redirect::route('courses.show', $course)->with('error', 'Assessment configuration missing.');
+        }
+        $assessmentQuiz = Quiz::find($course->assessment_quiz_id);
+        if (! $assessmentQuiz) {
+            return Redirect::route('courses.show', $course)->with('error', 'Assessment quiz not found for grading.');
+        }
+        $submittedQuestionIds = array_keys($submittedAnswers);
+        $questions = Question::where('quiz_id', $assessmentQuiz->id)
+            ->whereIn('id', $submittedQuestionIds)
+            ->select(['id', 'lesson_id', 'options', 'correct_answer', 'type'])
+            ->get()
+            ->keyBy('id');
+
+        $correctCount = 0;
+        $totalQuestionsGraded = 0;
+        $resultsByLesson = [];
+
+        foreach ($submittedAnswers as $questionId => $userAnswer) {
+            if (! $questions->has($questionId)) {
+                continue;
+            }
+
+            $question = $questions->get($questionId);
+            $isCorrect = false;
+            $correctAnswer = $question->correct_answer;
+
+            switch ($question->type) {
+                case 'multiple_choice':
+                case 'fill_blank':
+                case 'true_false':
+                    if (is_string($userAnswer) && is_string($correctAnswer)) {
+                        $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($correctAnswer));
+                    }
+                    break;
+            }
+
+            if ($isCorrect) {
+                $correctCount++;
+            }
+
+            if ($question->lesson_id) {
+                if (! isset($resultsByLesson[$question->lesson_id])) {
+                    $resultsByLesson[$question->lesson_id] = ['correct' => 0, 'total' => 0];
+                }
+                $resultsByLesson[$question->lesson_id]['total']++;
+                if ($isCorrect) {
+                    $resultsByLesson[$question->lesson_id]['correct']++;
+                }
+            }
+            $totalQuestionsGraded++;
+        }
+
+        $score = ($totalQuestionsGraded > 0) ? round(($correctCount / $totalQuestionsGraded) * 100) : 0;
+        $recommendedLessonSlug = null;
+        $passThreshold = 80;
+
+        $courseLessons = $course->load(['modules.lessons' => function ($q): void {
+            $q->orderBy('order');
+        }, 'modules' => function ($q): void {
+            $q->orderBy('order');
+        }])
+            ->modules->pluck('lessons')->flatten()->sortBy('id');
+
+        $firstLessonSlug = $courseLessons->first()?->slug;
+
+        foreach ($courseLessons as $lesson) {
+            if (isset($resultsByLesson[$lesson->id])) {
+                $lessonData = $resultsByLesson[$lesson->id];
+                $lessonScore = ($lessonData['total'] > 0) ? ($lessonData['correct'] / $lessonData['total'] * 100) : 100; // Assume pass if no questions asked
+
+                if ($lessonScore < $passThreshold) {
+                    $recommendedLessonSlug = $lesson->slug;
+                    break;
+                }
+            } else {
+                $recommendedLessonSlug = $lesson->slug;
+                Log::info("Assessment Recommendation: Recommending lesson {$lesson->id} as it had no assessment questions.");
+                break;
+            }
+        }
+
+        if ($recommendedLessonSlug === null && $totalQuestionsGraded > 0) {
+            $recommendationMessage = 'Great job! You seem to have a strong grasp of the topics covered in this assessment. Feel free to review any topic or jump right into the later modules.';
+            $recommendedLessonSlug = $firstLessonSlug;
+        } elseif ($recommendedLessonSlug && $recommendedLessonSlug !== $firstLessonSlug) {
+            $recommendedLesson = $courseLessons->firstWhere('slug', $recommendedLessonSlug);
+            $recommendationMessage = "Based on your results, we recommend starting with the lesson '{$recommendedLesson?->title}'. However, you're welcome to start from the beginning for a full review.";
+        } else {
+            $recommendationMessage = 'Assessment complete. You can start with the first lesson.';
+            $recommendedLessonSlug = $firstLessonSlug;
+        }
+
+        return Inertia::render('courses/assessment/Result', [
+            'course' => $course->only('id', 'title', 'slug'),
+            'score' => $score,
+            'recommendationMessage' => $recommendationMessage,
+            'recommendedLessonSlug' => $recommendedLessonSlug,
+            'firstLessonSlug' => $firstLessonSlug,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/CourseController.php b/app/Http/Controllers/CourseController.php
index 521a672..5553457 100644
--- a/app/Http/Controllers/CourseController.php
+++ b/app/Http/Controllers/CourseController.php
@@ -29,7 +29,6 @@ public function index(): Response
      */
     public function show(Course $course): Response
     {
-        // Ensure only published courses are shown
         if (! $course->is_published) {
             abort(404);
         }
@@ -41,7 +40,7 @@ public function show(Course $course): Response
                 $query->select('id', 'module_id', 'title', 'description', 'order')
                     ->orderBy('order');
             },
-            'modules' => function($query): void{
+            'modules' => function ($query): void {
                 $query->select('id', 'course_id', 'title', 'order');
             }]);
 
diff --git a/app/Http/Controllers/CourseReviewController.php b/app/Http/Controllers/CourseReviewController.php
new file mode 100644
index 0000000..5843858
--- /dev/null
+++ b/app/Http/Controllers/CourseReviewController.php
@@ -0,0 +1,241 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Models\Course;
+use App\Models\Lesson;
+use App\Models\Question;
+use App\Models\Quiz;
+use App\Models\QuizAnswer;
+use App\Models\QuizAttempt;
+use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Redirect;
+use Inertia\Inertia;
+use Inertia\Response;
+
+final class CourseReviewController extends Controller
+{
+    public const REVIEW_QUIZ_WRONG_QUESTIONS_TARGET = 5; // Target number of previously wrong questions
+
+    public const REVIEW_QUIZ_NEW_QUESTIONS_TARGET = 5;  // Target number of new/random questions
+
+    /**
+     * Generate and display the final review quiz for a course.
+     */
+    public function generate(Course $course): Response|RedirectResponse
+    {
+        $user = Auth::user();
+
+        $placeholderQuiz = $course->finalReviewQuiz;
+        if (! $placeholderQuiz) {
+            Log::warning("CourseReview: Course {$course->id} has no final_review_quiz_id linked.");
+            $quizTitle = "{$course->title} - Final Review";
+            $quizDescription = "A comprehensive review of topics from {$course->title}.";
+        } else {
+            $quizTitle = $placeholderQuiz->title;
+            $quizDescription = $placeholderQuiz->description;
+        }
+
+        $moduleIds = $course->modules()->pluck('id');
+        $courseQuizIds = Quiz::whereIn('module_id', $moduleIds)->where('type', 'module')->pluck('id');
+
+        $incorrectQuestionIds = QuizAnswer::join('quiz_attempts', 'quiz_answers.quiz_attempt_id', '=', 'quiz_attempts.id')
+            ->where('quiz_attempts.user_id', $user->id)
+            ->whereIn('quiz_attempts.quiz_id', $courseQuizIds)
+            ->where('quiz_answers.is_correct', false)
+            ->distinct()
+            ->pluck('quiz_answers.question_id');
+
+        $wrongQuestions = Question::whereIn('id', $incorrectQuestionIds)
+            ->inRandomOrder()
+            ->take(self::REVIEW_QUIZ_WRONG_QUESTIONS_TARGET)
+            ->get();
+
+        $allLessonIdsInCourse = $course->modules->pluck('lessons')->flatten()->pluck('id');
+        $remainingQuestionsTarget = self::REVIEW_QUIZ_NEW_QUESTIONS_TARGET + (self::REVIEW_QUIZ_WRONG_QUESTIONS_TARGET - $wrongQuestions->count());
+
+        $newQuestions = collect();
+        if ($remainingQuestionsTarget > 0 && $allLessonIdsInCourse->isNotEmpty()) {
+            $newQuestions = Question::whereIn('lesson_id', $allLessonIdsInCourse)
+                ->whereNotIn('id', $wrongQuestions->pluck('id'))
+                ->inRandomOrder()
+                ->take($remainingQuestionsTarget)
+                ->get();
+        }
+
+        $finalQuestions = $wrongQuestions->concat($newQuestions)->shuffle();
+
+        if ($finalQuestions->isEmpty()) {
+            return Inertia::render('Courses/Review/Show', [
+                'course' => $course->only('id', 'title', 'slug'),
+                'quizData' => null,
+                'message' => 'Not enough questions available for a review quiz for this course yet. Try completing more module quizzes.',
+            ]);
+        }
+
+        $displayQuestions = $finalQuestions->map(function ($q): array {
+            $optionsArray = is_array($q->options) ? $q->options : (json_decode($q->options, true) ?? []);
+
+            return [
+                'id' => $q->id,
+                'lesson_id' => $q->lesson_id,
+                'type' => $q->type,
+                'text' => $q->text,
+                'options' => $optionsArray,
+            ];
+        });
+
+        $quizDataForView = [
+            'id' => 'final_review_'.$course->id.'_'.uniqid(),
+            'title' => $quizTitle,
+            'description' => $quizDescription,
+            'questions' => $displayQuestions,
+        ];
+
+        session(['_courseReviewQuestions_'.$course->id => $finalQuestions->keyBy('id')->toArray()]);
+
+        return Inertia::render('courses/review/Show', [
+            'course' => $course->only('id', 'title', 'slug'),
+            'quizData' => $quizDataForView,
+            'message' => null,
+        ]);
+    }
+
+    /**
+     * Process and grade the submitted final review quiz.
+     */
+    public function submit(Request $request, Course $course): Response|RedirectResponse
+    {
+        $user = Auth::user();
+        $submittedAnswers = $request->input('answers', []);
+        $request->input('quizId');
+
+        $request->validate(['answers' => 'required|array', 'quizId' => 'required|string']);
+
+        $correctQuestionsData = session('_courseReviewQuestions_'.$course->id);
+        session()->forget('_courseReviewQuestions_'.$course->id);
+
+        if (! $correctQuestionsData) {
+            return Redirect::route('course.review.generate', $course)
+                ->with('error', 'Review quiz session expired. Please try again.');
+        }
+        $correctQuestions = collect($correctQuestionsData);
+
+        $attempt = null;
+        $resultsData = [];
+        $correctCount = 0;
+        $processedAnswersCount = 0;
+
+        try {
+            DB::transaction(function () use (
+                $user, $course, $submittedAnswers, $correctQuestions,
+                &$attempt, &$correctCount, &$processedAnswersCount, &$resultsData
+            ): void {
+                $attempt = QuizAttempt::create([
+                    'user_id' => $user->id,
+                    'quiz_id' => $course->final_review_quiz_id,
+                    'type' => QuizAttempt::TYPE_FINAL_REVIEW,
+                    'started_at' => now(),
+                    'completed_at' => now(),
+                ]);
+
+                foreach ($submittedAnswers as $questionId => $userAnswer) {
+                    if (! $correctQuestions->has($questionId)) {
+                        continue;
+                    }
+
+                    $questionData = $correctQuestions->get($questionId);
+                    $question = is_array($questionData) ? (object) $questionData : $questionData;
+
+                    $optionsArray = (isset($question->options) && is_string($question->options))
+                        ? (json_decode($question->options, true) ?? [])
+                        : ($question->options ?? []);
+
+                    $isCorrect = false;
+                    $correctAnswer = $question->correct_answer ?? null;
+
+                    // TODO: Refactor the grading logic to Service/Trait later
+                    switch ($question->type ?? 'multiple_choice') {
+                        case 'multiple_choice':
+                        case 'fill_blank':
+                        case 'true_false':
+                            if (is_string($userAnswer) && is_string($correctAnswer)) {
+                                $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($correctAnswer));
+                            }
+                            break;
+                    }
+
+                    if ($isCorrect) {
+                        $correctCount++;
+                    }
+                    $processedAnswersCount++;
+
+                    QuizAnswer::create([
+                        'quiz_attempt_id' => $attempt->id,
+                        'question_id' => $question->id,
+                        'user_answer' => $userAnswer,
+                        'is_correct' => $isCorrect,
+                    ]);
+
+                    $resultsData[] = [
+                        'question_id' => $question->id,
+                        'question_type' => $question->type ?? 'multiple_choice',
+                        'question_text' => $question->text ?? 'N/A',
+                        'options' => $optionsArray,
+                        'user_answer' => $userAnswer,
+                        'correct_answer' => $correctAnswer ?? 'N/A',
+                        'is_correct' => $isCorrect,
+                        'explanation' => $question->explanation ?? '',
+                        'lesson_id' => $question->lesson_id ?? null,
+                    ];
+                }
+
+                $score = ($processedAnswersCount > 0) ? round(($correctCount / $processedAnswersCount) * 100) : 0;
+                $attempt->score = $score;
+                $attempt->save();
+            });
+        } catch (Exception $e) {
+            Log::error('CourseReviewSubmit: Failed to save attempt.', ['error' => $e->getMessage()]);
+
+            return Redirect::route('course.review.generate', $course)
+                ->with('error', 'An error occurred saving your review attempt.');
+        }
+
+        $lessonsToReviewDeeply = [];
+        foreach ($resultsData as $result) {
+            if ($result['is_correct']) {
+                continue;
+            }
+            if (! $result['lesson_id']) {
+                continue;
+            }
+            if (isset($lessonsToReviewDeeply[$result['lesson_id']])) {
+                continue;
+            }
+            $lessonModel = Lesson::with('externalResources')->find($result['lesson_id']);
+            if ($lessonModel) {
+                $lessonsToReviewDeeply[$result['lesson_id']] = [
+                    'id' => $lessonModel->id,
+                    'title' => $lessonModel->title,
+                    'url' => route('lessons.show', ['course' => $course->slug, 'lesson' => $lessonModel->slug]),
+                    'external_resources' => $lessonModel->externalResources->map(fn ($res) => $res->only('title', 'url', 'type', 'description'))->toArray(),
+                ];
+            }
+        }
+
+        return Inertia::render('quizzes/Result', [
+            'quiz' => ['id' => $attempt->quiz_id, 'title' => $course->finalReviewQuiz?->title ?? "{$course->title} - Final Review"],
+            'attempt' => $attempt,
+            'results' => $resultsData,
+            'reviewSuggestions' => [], // TODO: Legacy, not used here
+            'deepReviewSuggestions' => array_values($lessonsToReviewDeeply),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 88be480..3f7f02c 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -4,6 +4,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\LearningPath;
+use Exception;
 use Illuminate\Support\Facades\Auth;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -18,14 +20,41 @@ public function index(): Response
             return Inertia::render('Dashboard', ['quizAttempts' => []]);
         }
 
-        $quizAttempts = $user->quizAttempts()
-            ->with('quiz:id,title')
-            ->latest('completed_at')
-            ->take(10)
-            ->get(['id', 'quiz_id', 'score', 'completed_at']);
+        $learningPaths = LearningPath::where('is_active', true)
+            ->orderBy('name')
+            ->get(['id', 'name', 'description']);
+
+        $nextSuggestedCourse = null;
+        if ($user->learning_path_id && $user->learningPath) {
+            $pathCourses = $user->learningPath->courses;
+
+            foreach ($pathCourses as $pathCourse) {
+                $allLessonsInCourse = $pathCourse->modules->pluck('lessons')->flatten();
+                $completedLessonsInCourse = $user->progress()
+                    ->whereIn('lesson_id', $allLessonsInCourse->pluck('id'))
+                    ->count();
+
+                if ($completedLessonsInCourse < $allLessonsInCourse->count() || $allLessonsInCourse->isEmpty()) {
+                    $nextSuggestedCourse = $pathCourse;
+                    break;
+                }
+            }
+        }
+
+        try {
+            $quizAttempts = $user->quizAttempts()
+                ->with('quiz:id,title')
+                ->latest('completed_at')
+                ->take(10)
+                ->get(['id', 'quiz_id', 'score', 'completed_at']);
+        } catch (Exception) {
+            $quizAttempts = collect();
+        }
 
         return Inertia::render('Dashboard', [
             'quizAttempts' => $quizAttempts,
+            'learningPaths' => $learningPaths,
+            'nextSuggestedCourse' => $nextSuggestedCourse ? $nextSuggestedCourse->only('id', 'title', 'slug', 'description') : null,
         ]);
     }
 }
diff --git a/app/Http/Controllers/LessonController.php b/app/Http/Controllers/LessonController.php
index 531596f..8a4f970 100644
--- a/app/Http/Controllers/LessonController.php
+++ b/app/Http/Controllers/LessonController.php
@@ -16,11 +16,15 @@ final class LessonController extends Controller
      */
     public function show(Course $course, Lesson $lesson): Response
     {
+
+        if ($lesson->module->course_id !== $course->id) {
+            abort(404);
+        }
+
         if ($lesson->module->course_id !== $course->id) {
             abort(404);
         }
 
-        // Ensure the parent course is published
         if (! $course->is_published) {
             abort(404);
         }
diff --git a/app/Http/Controllers/QuizController.php b/app/Http/Controllers/QuizController.php
index 600e4e0..6aeef75 100644
--- a/app/Http/Controllers/QuizController.php
+++ b/app/Http/Controllers/QuizController.php
@@ -61,7 +61,6 @@ public function show(Quiz $quiz): Response
     public function submit(Request $request, Quiz $quiz): Response
     {
         $user = Auth::user();
-        // Expecting answers in format: { 'question_id': 'selected_option_id', ... }
         $submittedAnswers = $request->input('answers', []);
 
         $request->validate([
@@ -93,10 +92,30 @@ public function submit(Request $request, Quiz $quiz): Response
                 }
 
                 $question = $questions->get($questionId);
-                if (is_string($userAnswer) && is_string($question->correct_answer)) {
-                    $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($question->correct_answer));
-                } else {
-                    $isCorrect = $userAnswer === $question->correct_answer;
+                $isCorrect = false;
+                $correctAnswer = $question->correct_answer;
+
+                switch ($question->type) {
+                    case 'multiple_choice':
+                        if (is_string($userAnswer) && is_string($correctAnswer)) {
+                            $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($correctAnswer));
+                        } else {
+                            $isCorrect = $userAnswer === $correctAnswer;
+                        }
+                        break;
+                    case 'true_false':
+                        if (is_string($userAnswer) && is_string($correctAnswer)) {
+                            $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower($correctAnswer);
+                        }
+                        break;
+                    case 'fill_blank':
+                        if (is_string($userAnswer) && is_string($correctAnswer)) {
+                            $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($correctAnswer));
+                        }
+                        break;
+                    default:
+                        Log::warning("Grading logic not implemented for question type: {$question->type}");
+                        break;
                 }
 
                 QuizAnswer::create([
@@ -114,6 +133,7 @@ public function submit(Request $request, Quiz $quiz): Response
 
                 $resultsData[] = [
                     'question_id' => $question->id,
+                    'question_type' => $question->type,
                     'question_text' => $question->text,
                     'options' => $question->options,
                     'user_answer' => $userAnswer,
diff --git a/app/Http/Controllers/RandomQuizController.php b/app/Http/Controllers/RandomQuizController.php
new file mode 100644
index 0000000..748dd0a
--- /dev/null
+++ b/app/Http/Controllers/RandomQuizController.php
@@ -0,0 +1,218 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Models\Lesson;
+use App\Models\Question;
+use App\Models\QuizAnswer;
+use App\Models\QuizAttempt;
+use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Redirect;
+use Inertia\Inertia;
+use Inertia\Response;
+
+final class RandomQuizController extends Controller
+{
+    public const int DEFAULT_QUESTION_COUNT = 10;
+
+    /**
+     * Generate and display the random quiz page.
+     */
+    public function generate(Request $request): Response|RedirectResponse
+    {
+        $user = Auth::user();
+        $questionCount = $request->input('count', self::DEFAULT_QUESTION_COUNT);
+
+        $completedLessonIds = $user->progress()->pluck('lesson_id')->unique();
+
+        if ($completedLessonIds->isEmpty()) {
+            return Inertia::render('RandomQuiz/Show', [
+                'quizData' => null,
+                'message' => 'You need to complete some lessons before taking a review quiz!',
+            ]);
+        }
+
+        $questions = Question::whereIn('lesson_id', $completedLessonIds)
+            ->select(['id', 'quiz_id', 'lesson_id', 'type', 'text', 'options', 'correct_answer', 'explanation', 'order'])
+            ->inRandomOrder()
+            ->take($questionCount)
+            ->get();
+
+        if ($questions->isEmpty()) {
+            return Inertia::render('RandomQuiz/Show', [
+                'quizData' => null,
+                'message' => 'No review questions available for the lessons you\'ve completed yet.',
+            ]);
+        }
+
+        $displayQuestions = $questions->map(function ($question): array {
+            $optionsArray = [];
+            if (! empty($question->options)) {
+                $optionsArray = is_array($question->options)
+                    ? $question->options
+                    : (json_decode($question->options, true) ?? []);
+            }
+
+            return [
+                'id' => $question->id,
+                'lesson_id' => $question->lesson_id,
+                'type' => $question->type,
+                'text' => $question->text,
+                'options' => $optionsArray,
+            ];
+        });
+
+        $quizData = [
+            'id' => 'random_'.uniqid(),
+            'title' => 'Random Review Quiz',
+            'description' => 'Test your knowledge on lessons you\'ve completed.',
+            'questions' => $displayQuestions,
+            'allQuestionsData' => $questions->keyBy('id')->toArray(),
+        ];
+
+        session(['_randomQuizQuestions' => $quizData['allQuestionsData']]);
+
+        return Inertia::render('RandomQuiz/Show', [
+            'quizData' => $quizData,
+            'message' => null,
+        ]);
+    }
+
+    public function submit(Request $request): Response|RedirectResponse
+    {
+        $user = Auth::user();
+        $submittedAnswers = $request->input('answers', []);
+
+        $request->validate([
+            'answers' => 'required|array',
+            'answers.*' => 'required',
+        ]);
+
+        $submittedQuestionIds = array_keys($submittedAnswers);
+
+        if ($submittedQuestionIds === []) {
+            return Redirect::route('random-quiz.generate')
+                ->with('error', 'No answers were submitted.');
+        }
+
+        $questions = Question::whereIn('id', $submittedQuestionIds)
+            ->select(['id', 'lesson_id', 'options', 'correct_answer', 'explanation', 'text'])
+            ->get()
+            ->keyBy('id');
+
+        $attempt = null;
+        $resultsData = [];
+        $correctCount = 0;
+        $totalQuestions = $questions->count();
+
+        try {
+            DB::transaction(function () use (
+                $user, $submittedAnswers, $questions, &$attempt,
+                &$correctCount, &$totalQuestions, &$resultsData
+            ): void {
+                $attempt = QuizAttempt::create([
+                    'user_id' => $user->id,
+                    'quiz_id' => null,
+                    'type' => QuizAttempt::TYPE_RANDOM,
+                    'started_at' => now(),
+                    'completed_at' => now(),
+                ]);
+
+                foreach ($submittedAnswers as $questionId => $userAnswer) {
+                    if (! $questions->has($questionId)) {
+                        Log::warning('RandomQuizSubmit: Grading skipped for unknown/missing question ID.', ['qId' => $questionId]);
+
+                        continue;
+                    }
+
+                    $question = $questions->get($questionId); // Get the Eloquent model
+
+                    $optionsArray = $question->options ?? []; // Rely on model cast
+
+                    $isCorrect = false;
+                    $correctAnswer = $question->correct_answer;
+
+                    if (is_string($userAnswer) && is_string($correctAnswer)) {
+                        $isCorrect = mb_strtolower(mb_trim($userAnswer)) === mb_strtolower(mb_trim($correctAnswer));
+                    } elseif (! is_null($correctAnswer)) {
+                        $isCorrect = $userAnswer === $correctAnswer;
+                    }
+
+                    if ($isCorrect) {
+                        $correctCount++;
+                    }
+
+                    QuizAnswer::create([
+                        'quiz_attempt_id' => $attempt->id,
+                        'question_id' => $question->id,
+                        'user_answer' => $userAnswer,
+                        'is_correct' => $isCorrect,
+                    ]);
+
+                    $resultsData[] = [
+                        'question_id' => $question->id,
+                        'question_text' => $question->text ?? 'N/A',
+                        'options' => $optionsArray,
+                        'user_answer' => $userAnswer,
+                        'correct_answer' => $correctAnswer ?? 'N/A',
+                        'is_correct' => $isCorrect,
+                        'explanation' => $question->explanation ?? '',
+                        'lesson_id' => $question->lesson_id,
+                    ];
+                }
+
+                $processedAnswersCount = count($resultsData);
+                $score = ($processedAnswersCount > 0) ? round(($correctCount / $processedAnswersCount) * 100) : 0;
+                $attempt->score = $score;
+                $attempt->save();
+
+            });
+
+        } catch (Exception $e) {
+            Log::error('RandomQuizSubmit: Failed to save attempt.', ['error' => $e->getMessage(), 'trace' => $e->getTraceAsString()]);
+
+            return Redirect::route('random-quiz.generate')
+                ->with('error', 'An error occurred while saving your quiz attempt. Please try again.');
+        }
+
+        if (! $attempt) {
+            Log::error('RandomQuizSubmit: Attempt object null after transaction.');
+
+            return Redirect::route('random-quiz.generate')
+                ->with('error', 'Failed to create quiz attempt record.');
+        }
+
+        $lessonIdsToReview = collect($resultsData)->where('is_correct', false)->pluck('lesson_id')->filter()->unique();
+        $reviewLessons = Lesson::whereIn('id', $lessonIdsToReview)
+            ->with(['module.course'])
+            ->select('id', 'title', 'slug', 'module_id')
+            ->get();
+
+        $reviewSuggestions = $reviewLessons->map(function ($lesson): ?array {
+            $courseSlug = $lesson->module?->course?->slug;
+            if (! $courseSlug) {
+                return null;
+            }
+
+            return [
+                'id' => $lesson->id,
+                'title' => $lesson->title,
+                'url' => route('lessons.show', ['course' => $courseSlug, 'lesson' => $lesson->slug]),
+            ];
+        })->filter()->values();
+
+        return Inertia::render('quizzes/Result', [
+            'quiz' => ['id' => null, 'title' => 'Random Review Quiz'],
+            'attempt' => $attempt->loadMissing('answers.question'),
+            'results' => $resultsData,
+            'reviewSuggestions' => $reviewSuggestions,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/UserPreferenceController.php b/app/Http/Controllers/UserPreferenceController.php
new file mode 100644
index 0000000..08d0736
--- /dev/null
+++ b/app/Http/Controllers/UserPreferenceController.php
@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Validation\Rule;
+
+final class UserPreferenceController extends Controller
+{
+    /**
+     * Update the authenticated user's learning preferences.
+     */
+    public function update(Request $request): RedirectResponse
+    {
+        $user = Auth::user();
+
+        $validated = $request->validate([
+            'preferred_learning_style' => [
+                'nullable',
+                'string',
+                Rule::in(['reading', 'visual']),
+            ],
+            'learning_path_id' => [
+                'nullable',
+                'integer',
+                Rule::exists('learning_paths', 'id')->where(function ($query) {
+                    return $query->where('is_active', true);
+                }),
+            ],
+        ]);
+
+        $user->fill($validated);
+        $user->save();
+
+        return Redirect::route('dashboard')->with('success', 'Preferences updated successfully!');
+    }
+}
diff --git a/app/Http/Controllers/UserStatsController.php b/app/Http/Controllers/UserStatsController.php
new file mode 100644
index 0000000..77abfc1
--- /dev/null
+++ b/app/Http/Controllers/UserStatsController.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+use Inertia\Response;
+
+final class UserStatsController extends Controller
+{
+    public function show(Request $request): Response|RedirectResponse
+    {
+        $user = Auth::user();
+
+        if (! $user) {
+            // This is handled by auth middleware, but as a fallback check
+            return redirect()->route('login');
+        }
+
+        $totalQuizzesAttempted = $user->getTotalQuizzesAttempted();
+        $learningStreak = $user->getLearningStreak();
+        $quizScoreDistribution = $user->getQuizScoreDistribution();
+        $lessonContributionData = $user->getLessonContributionData();
+
+        return Inertia::render('stats/Show', [
+            'totalQuizzesAttempted' => $totalQuizzesAttempted,
+            'learningStreak' => $learningStreak,
+            'quizScoreDistribution' => $quizScoreDistribution,
+            'lessonContributionData' => $lessonContributionData,
+        ]);
+    }
+}
diff --git a/app/Models/Course.php b/app/Models/Course.php
index 876998c..6830f8c 100644
--- a/app/Models/Course.php
+++ b/app/Models/Course.php
@@ -7,6 +7,7 @@
 use Database\Factories\CourseFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
 final class Course extends Model
@@ -19,6 +20,8 @@ final class Course extends Model
         'slug',
         'description',
         'is_published',
+        'assessment_quiz_id',
+        'final_review_quiz_id',
     ];
 
     protected $casts = [
@@ -27,7 +30,6 @@ final class Course extends Model
 
     /**
      * Use the 'slug' column for route model binding instead of the 'id'.
-     * Example: Route::get('/courses/{course}', ...) will find by the slug.
      */
     public function getRouteKeyName(): string
     {
@@ -36,10 +38,14 @@ public function getRouteKeyName(): string
 
     /**
      * A Course has many Modules.
-     * Orders modules by the 'order' column.
      */
     public function modules(): HasMany
     {
         return $this->hasMany(Module::class)->orderBy('order');
     }
+
+    public function finalReviewQuiz(): BelongsTo
+    {
+        return $this->belongsTo(Quiz::class, 'final_review_quiz_id');
+    }
 }
diff --git a/app/Models/ExternalResource.php b/app/Models/ExternalResource.php
new file mode 100644
index 0000000..518e5ac
--- /dev/null
+++ b/app/Models/ExternalResource.php
@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+final class ExternalResource extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'lesson_id',
+        'title',
+        'url',
+        'type',
+        'description',
+    ];
+
+    public function lesson(): BelongsTo
+    {
+        return $this->belongsTo(Lesson::class);
+    }
+}
diff --git a/app/Models/LearningPath.php b/app/Models/LearningPath.php
new file mode 100644
index 0000000..bbbd216
--- /dev/null
+++ b/app/Models/LearningPath.php
@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+final class LearningPath extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'name',
+        'slug',
+        'description',
+        'is_active',
+    ];
+
+    protected $casts = [
+        'is_active' => 'boolean',
+    ];
+
+    // A learning path can have many users
+    public function users(): HasMany
+    {
+        return $this->hasMany(User::class);
+    }
+
+    // A learning path has many courses
+    public function courses(): BelongsToMany
+    {
+        return $this->belongsToMany(Course::class, 'learning_path_course')
+            ->withPivot('order')
+            ->orderBy('pivot_order', 'asc');
+    }
+}
diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 872a07e..4b8f7a4 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -21,6 +21,10 @@ final class Lesson extends Model
         'title',
         'slug',
         'content',
+        'video_embed_html',
+        'assignment',
+        'initial_code',
+        'expected_output',
         'order',
     ];
 
@@ -52,4 +56,10 @@ public function userProgress(): HasMany
     {
         return $this->hasMany(UserProgress::class);
     }
+
+    // A Lesson has many external resources.
+    public function externalResources(): HasMany
+    {
+        return $this->hasMany(ExternalResource::class);
+    }
 }
diff --git a/app/Models/Module.php b/app/Models/Module.php
index a1a54ac..314e9ef 100644
--- a/app/Models/Module.php
+++ b/app/Models/Module.php
@@ -21,18 +21,13 @@ final class Module extends Model
         'order',
     ];
 
-    /**
-     * Define the relationship: A Module belongs to one Course.
-     */
+    // A Module belongs to one Course.
     public function course(): BelongsTo
     {
         return $this->belongsTo(Course::class);
     }
 
-    /**
-     * Define the relationship: A Module has many Lessons.
-     * Orders lessons by the 'order' column.
-     */
+    // A Module has many Lessons.
     public function lessons(): HasMany
     {
         return $this->hasMany(Lesson::class)->orderBy('order');
diff --git a/app/Models/Question.php b/app/Models/Question.php
index 6fc2650..df96c10 100644
--- a/app/Models/Question.php
+++ b/app/Models/Question.php
@@ -35,7 +35,7 @@ public function quiz(): BelongsTo
         return $this->belongsTo(Quiz::class);
     }
 
-    // Question tests knowledge from one Lesson (nullable)
+    // Question tests knowledge from one Lesson
     public function lesson(): BelongsTo
     {
         return $this->belongsTo(Lesson::class);
diff --git a/app/Models/Quiz.php b/app/Models/Quiz.php
index 5764afd..3720650 100644
--- a/app/Models/Quiz.php
+++ b/app/Models/Quiz.php
@@ -19,6 +19,7 @@ final class Quiz extends Model
     protected $fillable = [
         'module_id',
         'course_id',
+        'type',
         'title',
         'description',
         'order',
diff --git a/app/Models/QuizAttempt.php b/app/Models/QuizAttempt.php
index d5674b2..6f8d079 100644
--- a/app/Models/QuizAttempt.php
+++ b/app/Models/QuizAttempt.php
@@ -15,9 +15,16 @@ final class QuizAttempt extends Model
     /** @use HasFactory<QuizAttemptFactory> */
     use HasFactory;
 
+    public const string TYPE_STANDARD = 'standard';
+
+    public const string TYPE_RANDOM = 'random';
+
+    public const string TYPE_FINAL_REVIEW = 'final_review';
+
     protected $fillable = [
         'user_id',
         'quiz_id',
+        'type',
         'score',
         'started_at',
         'completed_at',
diff --git a/app/Models/User.php b/app/Models/User.php
index 2377ab1..22cb5be 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -4,9 +4,10 @@
 
 namespace App\Models;
 
-// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Carbon\Carbon;
 use Database\Factories\UserFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
@@ -25,6 +26,8 @@ final class User extends Authenticatable
         'name',
         'email',
         'password',
+        'preferred_learning_style',
+        'learning_path_id',
     ];
 
     /**
@@ -49,6 +52,120 @@ public function progress(): HasMany
         return $this->hasMany(UserProgress::class);
     }
 
+    public function learningPath(): BelongsTo
+    {
+        return $this->belongsTo(LearningPath::class);
+    }
+
+    /**
+     * Get the total number of quizzes this user has attempted.
+     */
+    public function getTotalQuizzesAttempted(): int
+    {
+        return $this->quizAttempts()->count();
+    }
+
+    /**
+     * Calculate the user's current learning streak.
+     */
+    public function getLearningStreak(): int
+    {
+        $completionDates = $this->progress()
+            ->selectRaw('DISTINCT DATE(completed_at) as completion_date')
+            ->orderBy('completion_date', 'desc')
+            ->pluck('completion_date')
+            ->map(fn ($date): Carbon => Carbon::parse($date));
+
+        if ($completionDates->isEmpty()) {
+            return 0;
+        }
+
+        $today = Carbon::today();
+        $yesterday = Carbon::yesterday();
+
+        if ($completionDates->first()->isSameDay($today)) {
+            $streak = 1;
+        } elseif ($completionDates->first()->isSameDay($yesterday)) {
+            $streak = 1;
+        } else {
+            return 0;
+        }
+
+        $currentExpectedDate = $completionDates->first()->isSameDay($today) ? $yesterday : $yesterday->copy()->subDay();
+
+        for ($i = 1; $i < $completionDates->count(); $i++) {
+            $completedDate = $completionDates[$i];
+            if ($completedDate->isSameDay($currentExpectedDate)) {
+                $streak++;
+                $currentExpectedDate->subDay();
+            } else {
+                break;
+            }
+        }
+
+        return $streak;
+    }
+
+    public function getQuizScoreDistribution(): array
+    {
+        $scores = $this->quizAttempts()->pluck('score')->filter(fn ($score): bool => ! is_null($score));
+
+        $distribution = [
+            'green' => 0,
+            'yellow' => 0,
+            'red' => 0,
+        ];
+
+        $greenThreshold = 80;
+        $yellowThreshold = 50;
+
+        foreach ($scores as $score) {
+            if ($score >= $greenThreshold) {
+                $distribution['green']++;
+            } elseif ($score >= $yellowThreshold) {
+                $distribution['yellow']++;
+            } else {
+                $distribution['red']++;
+            }
+        }
+
+        return $distribution;
+    }
+
+    /**
+     * Get lesson completion data for a contribution graph.
+     * Returns data for the last year by default.
+     * Format: [['YYYY-MM-DD', count], ['YYYY-MM-DD', count], ...]
+     */
+    public function getLessonContributionData(int $days = 365): array
+    {
+        $startDate = Carbon::today()->subDays($days - 1); // Go back $days-1 to include today
+        $endDate = Carbon::today();
+
+        $completionsByDate = $this->progress()
+            ->selectRaw('DATE(completed_at) as completion_date, COUNT(*) as count')
+            ->where('completed_at', '>=', $startDate->copy()->startOfDay())
+            ->where('completed_at', '<=', $endDate->copy()->endOfDay())
+            ->groupBy('completion_date')
+            ->orderBy('completion_date', 'asc')
+            ->get()
+            ->keyBy(fn ($item): string => Carbon::parse($item->completion_date)->toDateString());
+
+        $completionData = [];
+        $currentDate = $startDate->copy();
+
+        while ($currentDate->lte($endDate)) {
+            $dateString = $currentDate->toDateString();
+            $completionData[] = [
+                'date' => $dateString,
+                'count' => $completionsByDate->get($dateString)?->count ?? 0,
+            ];
+            $currentDate->addDay();
+        }
+
+        return $completionData;
+    }
+
     /**
      * Get the attributes that should be cast.
      *
@@ -59,6 +176,7 @@ protected function casts(): array
         return [
             'email_verified_at' => 'datetime',
             'password' => 'hashed',
+            'preferred_learning_style' => 'string',
         ];
     }
 }
diff --git a/database/migrations/0001_01_01_000000_create_users_table.php b/database/migrations/0001_01_01_000000_create_users_table.php
index 5ef79e4..18fb540 100644
--- a/database/migrations/0001_01_01_000000_create_users_table.php
+++ b/database/migrations/0001_01_01_000000_create_users_table.php
@@ -14,12 +14,13 @@
     public function up(): void
     {
         Schema::create('users', function (Blueprint $table) {
-            $table->id();
             $table->string('name');
             $table->string('email')->unique();
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->rememberToken();
+            $table->enum('preferred_learning_style', ['reading', 'visual'])->default('reading')->nullable()->after('password');
+            $table->foreignId('learning_path_id')->nullable()->after('preferred_learning_style')->constrained('learning_paths')->onDelete('set null');
             $table->timestamps();
         });
 
diff --git a/database/migrations/2025_04_27_192057_create_courses_table.php b/database/migrations/2025_04_27_192057_create_courses_table.php
index fb2c2ad..7f6e0f8 100644
--- a/database/migrations/2025_04_27_192057_create_courses_table.php
+++ b/database/migrations/2025_04_27_192057_create_courses_table.php
@@ -19,6 +19,8 @@ public function up(): void
             $table->string('slug')->unique();
             $table->text('description')->nullable();
             $table->boolean('is_published')->default(false);
+            $table->foreignId('assessment_quiz_id')->nullable()->after('is_published')->constrained('quizzes')->onDelete('set null');
+            $table->foreignId('final_review_quiz_id')->nullable()->after('assessment_quiz_id')->constrained('quizzes')->onDelete('set null');
             $table->timestamps();
         });
     }
diff --git a/database/migrations/2025_04_27_192057_create_lessons_table.php b/database/migrations/2025_04_27_192057_create_lessons_table.php
index b6d0e71..5571829 100644
--- a/database/migrations/2025_04_27_192057_create_lessons_table.php
+++ b/database/migrations/2025_04_27_192057_create_lessons_table.php
@@ -19,6 +19,10 @@ public function up(): void
             $table->string('title');
             $table->string('slug')->unique();
             $table->longText('content')->comment('Lesson text, Markdown or HTML');
+            $table->text('video_embed_html')->nullable()->after('content');
+            $table->text('assignment')->nullable()->comment('Assignment description');
+            $table->text('initial_code')->nullable()->comment('Starting code for editor');
+            $table->text('expected_output')->nullable();
             $table->unsignedSmallInteger('order')->default(0);
             $table->timestamps();
 
diff --git a/database/migrations/2025_04_28_131921_create_quizzes_table.php b/database/migrations/2025_04_28_131921_create_quizzes_table.php
index 557d58b..938143b 100644
--- a/database/migrations/2025_04_28_131921_create_quizzes_table.php
+++ b/database/migrations/2025_04_28_131921_create_quizzes_table.php
@@ -17,6 +17,7 @@ public function up(): void
             $table->id();
             $table->foreignId('module_id')->nullable()->constrained()->onDelete('cascade');
             $table->foreignId('course_id')->nullable()->constrained()->onDelete('cascade');
+            $table->enum('type', ['assessment', 'module', 'final_review'])->default('module')->after('id');
             $table->string('title');
             $table->text('description')->nullable();
             $table->unsignedSmallInteger('order')->default(0)->comment('Order within module/course');
diff --git a/database/migrations/2025_04_28_131922_create_quiz_answers_table.php b/database/migrations/2025_04_28_131922_create_quiz_answers_table.php
index a2df5ad..b749613 100644
--- a/database/migrations/2025_04_28_131922_create_quiz_answers_table.php
+++ b/database/migrations/2025_04_28_131922_create_quiz_answers_table.php
@@ -18,7 +18,7 @@ public function up(): void
             $table->foreignId('quiz_attempt_id')->constrained()->onDelete('cascade');
             $table->foreignId('question_id')->constrained()->onDelete('cascade');
             $table->string('user_answer')->nullable();
-            $table->boolean('is_correct')->nullable()->comment('Graded result');
+            $table->boolean('is_correct')->nullable();
             $table->timestamps();
 
             // User can answer each question once per attempt
diff --git a/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php b/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php
index 57cbe07..6683832 100644
--- a/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php
+++ b/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php
@@ -16,7 +16,8 @@ public function up(): void
         Schema::create('quiz_attempts', function (Blueprint $table) {
             $table->id();
             $table->foreignId('user_id')->constrained()->onDelete('cascade');
-            $table->foreignId('quiz_id')->constrained()->onDelete('cascade');
+            $table->foreignId('quiz_id')->nullable()->constrained()->onDelete('cascade');
+            $table->string('type')->default('standard')->after('quiz_id');
             $table->unsignedTinyInteger('score')->nullable();
             $table->timestamp('started_at')->useCurrent();
             $table->timestamp('completed_at')->nullable();
diff --git a/database/migrations/2025_05_22_184048_create_learning_paths_table.php b/database/migrations/2025_05_22_184048_create_learning_paths_table.php
new file mode 100644
index 0000000..dff2db5
--- /dev/null
+++ b/database/migrations/2025_05_22_184048_create_learning_paths_table.php
@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('learning_paths', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('slug')->unique();
+            $table->text('description')->nullable();
+            $table->boolean('is_active')->default(true);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('learning_paths');
+    }
+};
diff --git a/database/migrations/2025_05_22_184102_create_learning_path_course_table.php b/database/migrations/2025_05_22_184102_create_learning_path_course_table.php
new file mode 100644
index 0000000..b9a5376
--- /dev/null
+++ b/database/migrations/2025_05_22_184102_create_learning_path_course_table.php
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('learning_path_course', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('learning_path_id')->constrained()->onDelete('cascade');
+            $table->foreignId('course_id')->constrained()->onDelete('cascade');
+            $table->unsignedSmallInteger('order')->default(0);
+            $table->timestamps();
+
+            $table->unique(['learning_path_id', 'course_id']);
+            $table->index(['learning_path_id', 'order']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('learning_path_course');
+    }
+};
diff --git a/database/migrations/2025_05_22_184123_create_external_resources_table.php b/database/migrations/2025_05_22_184123_create_external_resources_table.php
new file mode 100644
index 0000000..a59449a
--- /dev/null
+++ b/database/migrations/2025_05_22_184123_create_external_resources_table.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('external_resources', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('lesson_id')->constrained()->onDelete('cascade');
+            $table->string('title');
+            $table->text('url');
+            $table->enum('type', ['video', 'article', 'documentation', 'book_chapter', 'interactive_tool'])->default('article');
+            $table->text('description')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('external_resources');
+    }
+};
diff --git a/database/seeders/CourseSeeder.php b/database/seeders/CourseSeeder.php
index 9eae7e3..f958e93 100644
--- a/database/seeders/CourseSeeder.php
+++ b/database/seeders/CourseSeeder.php
@@ -5,6 +5,7 @@
 namespace Database\Seeders;
 
 use App\Models\Course;
+use App\Models\Quiz;
 use Illuminate\Database\Seeder;
 
 final class CourseSeeder extends Seeder
@@ -14,18 +15,58 @@ final class CourseSeeder extends Seeder
      */
     public function run(): void
     {
+        Quiz::create([
+            'module_id' => null,
+            'type' => 'assessment',
+            'title' => 'JS Basics Placement Assessment',
+            'description' => 'Check your existing JavaScript knowledge to find the best starting point.',
+            'order' => 0,
+        ]);
+
+        Quiz::create([
+            'module_id' => null,
+            'type' => 'final_review',
+            'title' => 'JS Fundamentals - Final Review',
+            'description' => 'Comprehensive review of all JavaScript Fundamentals topics.',
+            'order' => 99,
+        ]);
+
+        Quiz::create([
+            'module_id' => null,
+            'type' => 'final_review',
+            'title' => 'Intermediate Web Dev - Final Review',
+            'description' => 'Comprehensive review of Intermediate Web Development topics.',
+            'order' => 99,
+        ]);
+
+        $assessmentQuiz = Quiz::where('type', 'assessment')->where('title', 'JS Basics Placement Assessment')->first();
+        $fundFinalReviewQuiz = Quiz::where('type', 'final_review')->where('title', 'JS Fundamentals - Final Review')->first();
+        $intFinalReviewQuiz = Quiz::where('type', 'final_review')->where('title', 'Intermediate Web Dev - Final Review')->first();
+
+        Course::create([
+            'title' => 'JavaScript Fundamentals',
+            'slug' => 'javascript-fundamentals',
+            'description' => 'Master the absolute basics of JavaScript, from variables to basic DOM interaction.',
+            'is_published' => true,
+            'assessment_quiz_id' => $assessmentQuiz?->id,
+            'final_review_quiz_id' => $fundFinalReviewQuiz?->id,
+        ]);
+
         Course::create([
-            'title' => 'JavaScript Basics',
-            'slug' => 'javascript-basics',
-            'description' => 'Learn the fundamentals of JavaScript.',
+            'title' => 'Intermediate Web Development with JS',
+            'slug' => 'intermediate-web-dev-js',
+            'description' => 'Dive deeper into browser APIs, asynchronous JavaScript, and interacting with web pages.',
             'is_published' => true,
+            'assessment_quiz_id' => null,
+            'final_review_quiz_id' => $intFinalReviewQuiz?->id,
         ]);
 
         Course::create([
-            'title' => 'Advanced JavaScript Concepts',
-            'slug' => 'advanced-javascript',
-            'description' => 'Dive deeper into JavaScript topics.',
-            'is_published' => false,
+            'title' => 'Advanced JavaScript & Node.js',
+            'slug' => 'advanced-js-nodejs',
+            'description' => 'Explore modern JS features, server-side concepts with Node.js, and common patterns.',
+            'is_published' => true,
+            'assessment_quiz_id' => null,
         ]);
     }
 }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 77fcf29..70a0460 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -16,6 +16,10 @@ public function run(): void
     {
         // User::factory(10)->create();
 
+        $this->call([
+            LearningPathSeeder::class,
+        ]);
+
         User::factory()->create([
             'name' => 'Test User',
             'email' => 'test@example.com',
@@ -23,8 +27,10 @@ public function run(): void
 
         $this->call([
             CourseSeeder::class,
+            LearningPathCourseSeeder::class,
             ModuleSeeder::class,
             LessonSeeder::class,
+            ExternalResourceSeeder::class,
             QuizSeeder::class,
             QuestionSeeder::class,
         ]);
diff --git a/database/seeders/LessonSeeder.php b/database/seeders/LessonSeeder.php
index 13d9ccc..aab7693 100644
--- a/database/seeders/LessonSeeder.php
+++ b/database/seeders/LessonSeeder.php
@@ -15,41 +15,56 @@ final class LessonSeeder extends Seeder
      */
     public function run(): void
     {
-        $introModule = Module::where('title', 'Introduction')->first();
-        $varsModule = Module::where('title', 'Variables and Data Types')->first();
-
-        if ($introModule) {
-            Lesson::create([
-                'module_id' => $introModule->id,
-                'title' => 'What is JavaScript?',
-                'slug' => 'what-is-javascript',
-                'content' => '<p>JavaScript is a scripting language used to create and control dynamic website content...</p>',
-                'order' => 1,
-            ]);
-            Lesson::create([
-                'module_id' => $introModule->id,
-                'title' => 'Setting up Your Environment',
-                'slug' => 'setting-up-environment',
-                'content' => '<p>You can run JavaScript directly in your browser\'s console...</p>',
-                'order' => 2,
-            ]);
+        function createLesson($module, $order, $title, $slug, $content, $video_embed_html = null, $assignment = null, $initial_code = null, $expected_output = null)
+        {
+            if ($module) {
+                Lesson::create([
+                    'module_id' => $module->id,
+                    'title' => $order.'. '.$title,
+                    'slug' => $slug,
+                    'content' => "<p>{$content}</p>",
+                    'video_embed_html' => $video_embed_html,
+                    'assignment' => $assignment,
+                    'initial_code' => $initial_code,
+                    'expected_output' => $expected_output,
+                    'order' => $order,
+                ]);
+            }
         }
 
-        if ($varsModule) {
-            Lesson::create([
-                'module_id' => $varsModule->id,
-                'title' => 'Declaring Variables (var, let, const)',
-                'slug' => 'declaring-variables',
-                'content' => '<p>Variables are containers for storing data values. Use <code>let</code> and <code>const</code>...</p>',
-                'order' => 1,
-            ]);
-            Lesson::create([
-                'module_id' => $varsModule->id,
-                'title' => 'Primitive Data Types',
-                'slug' => 'primitive-data-types',
-                'content' => '<p>JavaScript has several primitive types: String, Number, Boolean, Null, Undefined, Symbol, BigInt...</p>',
-                'order' => 2,
-            ]);
-        }
+        // --- Fundamentals Lessons ---
+        $modFund1 = Module::where('title', '1. Introduction')->first();
+        createLesson($modFund1, 1, 'What is JavaScript?', 'what-is-javascript', 'JavaScript (JS) is a versatile scripting language used primarily for creating dynamic and interactive web content.', '<iframe width="560" height="315" src="https://www.youtube.com/embed/W6NZfCO5sik" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>', 'Use `console.log` to print the message "Hello, World!" to the console.', 'console.log("Your message here");', "Hello, World!\n");
+        createLesson($modFund1, 2, 'Setting Up Your Environment', 'setting-up-environment', 'You can run JavaScript directly in your browser\'s developer console (usually F12). For larger projects, you\'ll use a code editor and Node.js.');
+        createLesson($modFund1, 3, 'Your First Code: console.log', 'first-code-console-log', 'The `console.log()` function is essential for displaying output and debugging your code.', '<iframe width="560" height="315" src="https://www.youtube.com/embed/hdI2bqOjy3c?start=18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>', 'Use `console.log` to print the message "Hello, World!" to the console.', 'console.log("Your message here");', "Hello, World!\n");
+
+        $modFund2 = Module::where('title', '2. Variables & Data Types')->first();
+        createLesson($modFund2, 1, 'Declaring Variables (var, let, const)', 'declaring-variables', 'Learn how `var`, `let`, and `const` are used to store data. Modern JS prefers `let` and `const`.', null, "Declare a variable `city` using `let` with the value 'Paris'. Log it.", "let city = \nconsole.log(city);", "Paris\n");
+        createLesson($modFund2, 2, 'Primitive Data Types', 'primitive-data-types', 'Explore String, Number, Boolean, Null, Undefined, Symbol, and BigInt.', null, 'Declare constants `age` (number 30) and `isStudent` (boolean false). Log their types.', "const age = \nconst isStudent = \nconsole.log(typeof age);\nconsole.log(typeof isStudent);", "number\nboolean\n");
+        createLesson($modFund2, 3, 'Type Coercion', 'type-coercion', 'Understand how JavaScript sometimes automatically converts data types, which can lead to unexpected results.', null, 'Log the result of `5 + "5"` to the console. What is the type?', 'console.log(5 + "5");\nconsole.log(typeof (5 + "5"));', "55\nstring\n");
+
+        // ... Add lessons for Fundamentals Modules 3, 4, 5, 6, 7 with placeholders ...
+        $modFund3 = Module::where('title', '3. Operators')->first();
+        createLesson($modFund3, 1, 'Arithmetic Operators', 'arithmetic-operators', 'Placeholder: +, -, *, /, %, ++, --');
+        createLesson($modFund3, 2, 'Comparison Operators', 'comparison-operators', 'Placeholder: ==, ===, !=, !==, >, <, >=, <=');
+        createLesson($modFund3, 3, 'Logical Operators', 'logical-operators', 'Placeholder: &&, ||, !');
+
+        $modFund4 = Module::where('title', '4. Control Flow (If/Loops)')->first();
+        createLesson($modFund4, 1, 'If / Else Statements', 'if-else', 'Placeholder: Conditional execution.');
+        createLesson($modFund4, 2, 'Switch Statements', 'switch', 'Placeholder: Multi-way branching.');
+        createLesson($modFund4, 3, 'For Loops', 'for-loops', 'Placeholder: Iterating a set number of times.');
+        createLesson($modFund4, 4, 'While Loops', 'while-loops', 'Placeholder: Iterating based on a condition.');
+
+        // --- Intermediate Lessons ---
+        $modInt1 = Module::where('title', '1. DOM Deep Dive')->first();
+        createLesson($modInt1, 1, 'Selecting Elements (Advanced)', 'dom-selecting-advanced', 'Placeholder: querySelectorAll, getElementsByClassName, etc.');
+        createLesson($modInt1, 2, 'Traversing the DOM', 'dom-traversing', 'Placeholder: parentNode, children, nextElementSibling.');
+        createLesson($modInt1, 3, 'Creating & Appending Elements', 'dom-creating-appending', 'Placeholder: createElement, appendChild, insertBefore.');
+
+        // --- Advanced Lessons ---
+        $modAdv1 = Module::where('title', '1. Async/Await')->first();
+        createLesson($modAdv1, 1, 'Async/Await Syntax', 'async-await-syntax', 'Placeholder: Cleaner way to handle Promises.');
+        createLesson($modAdv1, 2, 'Error Handling with Async/Await', 'async-await-errors', 'Placeholder: Using try...catch blocks.');
+
     }
 }
diff --git a/database/seeders/ModuleSeeder.php b/database/seeders/ModuleSeeder.php
index b86cf6f..e9d514d 100644
--- a/database/seeders/ModuleSeeder.php
+++ b/database/seeders/ModuleSeeder.php
@@ -15,24 +15,39 @@ final class ModuleSeeder extends Seeder
      */
     public function run(): void
     {
-        $jsBasics = Course::where('slug', 'javascript-basics')->first();
+        // --- Fundamentals Course Modules ---
+        $fundCourse = Course::where('slug', 'javascript-fundamentals')->first();
+        if ($fundCourse) {
+            Module::create(['course_id' => $fundCourse->id, 'title' => '1. Introduction', 'order' => 1]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '2. Variables & Data Types', 'order' => 2]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '3. Operators', 'order' => 3]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '4. Control Flow (If/Loops)', 'order' => 4]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '5. Functions', 'order' => 5]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '6. Arrays & Objects Intro', 'order' => 6]);
+            Module::create(['course_id' => $fundCourse->id, 'title' => '7. Basic DOM Manipulation', 'order' => 7]);
+        }
+
+        // --- Intermediate Course Modules ---
+        $intCourse = Course::where('slug', 'intermediate-web-dev-js')->first();
+        if ($intCourse) {
+            Module::create(['course_id' => $intCourse->id, 'title' => '1. DOM Deep Dive', 'order' => 1]);
+            Module::create(['course_id' => $intCourse->id, 'title' => '2. Events In-Depth', 'order' => 2]);
+            Module::create(['course_id' => $intCourse->id, 'title' => '3. Working with Forms', 'order' => 3]);
+            Module::create(['course_id' => $intCourse->id, 'title' => '4. Asynchronous JavaScript & Promises', 'order' => 4]);
+            Module::create(['course_id' => $intCourse->id, 'title' => '5. Fetch API & AJAX', 'order' => 5]);
+            Module::create(['course_id' => $intCourse->id, 'title' => '6. Browser Storage', 'order' => 6]);
+        }
 
-        if ($jsBasics) {
-            Module::create([
-                'course_id' => $jsBasics->id,
-                'title' => 'Introduction',
-                'order' => 1,
-            ]);
-            Module::create([
-                'course_id' => $jsBasics->id,
-                'title' => 'Variables and Data Types',
-                'order' => 2,
-            ]);
-            Module::create([
-                'course_id' => $jsBasics->id,
-                'title' => 'Operators',
-                'order' => 3,
-            ]);
+        // --- Advanced Course Modules ---
+        $advCourse = Course::where('slug', 'advanced-js-nodejs')->first();
+        if ($advCourse) {
+            Module::create(['course_id' => $advCourse->id, 'title' => '1. Async/Await', 'order' => 1]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '2. JavaScript Modules (ESM/CJS)', 'order' => 2]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '3. OOP in JavaScript (Classes)', 'order' => 3]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '4. Functional Programming Patterns', 'order' => 4]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '5. Advanced Error Handling', 'order' => 5]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '6. Introduction to Node.js', 'order' => 6]);
+            Module::create(['course_id' => $advCourse->id, 'title' => '7. Building a Simple API with Node', 'order' => 7]);
         }
     }
 }
diff --git a/database/seeders/QuestionSeeder.php b/database/seeders/QuestionSeeder.php
index 570d3f0..12a5701 100644
--- a/database/seeders/QuestionSeeder.php
+++ b/database/seeders/QuestionSeeder.php
@@ -18,6 +18,7 @@ public function run(): void
     {
         $introQuiz = Quiz::where('title', 'Quiz: Introduction Concepts')->first();
         $varsQuiz = Quiz::where('title', 'Quiz: Variables')->first();
+        $assessmentQuiz = Quiz::where('type', 'assessment')->where('title', 'JS Basics Placement Assessment')->first();
 
         $lessonWhatIsJs = Lesson::where('slug', 'what-is-javascript')->first();
         $lessonSetup = Lesson::where('slug', 'setting-up-environment')->first();
@@ -57,6 +58,16 @@ public function run(): void
                 'order' => 2,
             ]);
 
+            Question::create([
+                'quiz_id' => $introQuiz->id,
+                'lesson_id' => $lessonWhatIsJs?->id,
+                'type' => 'true_false',
+                'text' => 'JavaScript can only be used on the frontend (in the browser).',
+                'options' => null,
+                'correct_answer' => 'false',
+                'explanation' => 'JavaScript can also be used on the backend with Node.js.',
+                'order' => 3,
+            ]);
         }
 
         if ($varsQuiz) {
@@ -90,6 +101,73 @@ public function run(): void
                 'explanation' => 'Arrays are objects in JavaScript, not primitive types.',
                 'order' => 2,
             ]);
+
+            Question::create([
+                'quiz_id' => $varsQuiz->id,
+                'lesson_id' => $lessonDeclare?->id,
+                'type' => 'fill_blank',
+                'text' => 'The keyword ____ declares a variable that cannot be reassigned.',
+                'options' => null,
+                'correct_answer' => 'const',
+                'explanation' => '`const` ensures the variable binding cannot be reassigned.',
+                'order' => 3,
+            ]);
+            Question::create([
+                'quiz_id' => $varsQuiz->id,
+                'lesson_id' => $lessonTypes?->id,
+                'type' => 'true_false',
+                'text' => '`null` and `undefined` represent the same absence of value in JavaScript.',
+                'options' => null,
+                'correct_answer' => 'false',
+                'explanation' => 'They both represent absence, but `null` is an assigned "no value", while `undefined` means a variable hasn\'t been assigned a value.',
+                'order' => 4,
+            ]);
+        }
+
+        if ($assessmentQuiz && $lessonWhatIsJs && $lessonDeclare && $lessonTypes) {
+            Question::create([
+                'quiz_id' => $assessmentQuiz->id,
+                'lesson_id' => $lessonWhatIsJs?->id,
+                'type' => 'multiple_choice',
+                'text' => 'What is JavaScript primarily used for?',
+                'options' => json_encode([
+                    ['id' => 'a', 'text' => 'Styling web pages'],
+                    ['id' => 'b', 'text' => 'Creating dynamic web content'],
+                    ['id' => 'c', 'text' => 'Managing databases'],
+                    ['id' => 'd', 'text' => 'Server-side logic only'],
+                ]),
+                'correct_answer' => 'b',
+                'explanation' => 'JavaScript runs in the browser to make web pages interactive.',
+                'order' => 1,
+            ]);
+            Question::create([
+                'quiz_id' => $assessmentQuiz->id,
+                'lesson_id' => $lessonDeclare->id,
+                'type' => 'multiple_choice',
+                'text' => 'Which keyword prevents a variable from being reassigned?',
+                'options' => json_encode([['id' => 'a', 'text' => 'let'], ['id' => 'b', 'text' => 'var'], ['id' => 'c', 'text' => 'const']]),
+                'correct_answer' => 'c',
+                'order' => 1,
+            ]);
+            Question::create([
+                'quiz_id' => $assessmentQuiz->id,
+                'lesson_id' => $lessonTypes->id,
+                'type' => 'true_false',
+                'text' => 'Is `null` considered an object type by the `typeof` operator in JavaScript?',
+                'options' => null,
+                'correct_answer' => 'true',
+                'explanation' => 'Due to a historical bug, `typeof null` returns "object".',
+                'order' => 2,
+            ]);
+            Question::create([
+                'quiz_id' => $assessmentQuiz->id,
+                'lesson_id' => $lessonTypes->id,
+                'type' => 'fill_blank',
+                'text' => 'The data type for textual data is called a _____.',
+                'options' => null,
+                'correct_answer' => 'string',
+                'order' => 3,
+            ]);
         }
     }
 }
diff --git a/database/seeders/QuizSeeder.php b/database/seeders/QuizSeeder.php
index f7c6463..eccde34 100644
--- a/database/seeders/QuizSeeder.php
+++ b/database/seeders/QuizSeeder.php
@@ -16,8 +16,8 @@ final class QuizSeeder extends Seeder
      */
     public function run(): void
     {
-        $introModule = Module::where('title', 'Introduction')->first();
-        $varsModule = Module::where('title', 'Variables and Data Types')->first();
+        $introModule = Module::where('title', '1. Introduction')->first();
+        $varsModule = Module::where('title', '2. Variables & Data Types')->first();
 
         if ($introModule) {
             $introQuiz = Quiz::create([
diff --git a/package-lock.json b/package-lock.json
index a7f186c..513eb78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@inertiajs/vue3": "^2.0.0-beta.3",
+                "@monaco-editor/loader": "^1.5.0",
                 "@tailwindcss/vite": "^4.1.1",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vueuse/core": "^12.8.2",
@@ -15,6 +16,7 @@
                 "laravel-vite-plugin": "^1.0",
                 "lucide": "^0.468.0",
                 "lucide-vue-next": "^0.468.0",
+                "monaco-editor": "^0.52.2",
                 "reka-ui": "^2.2.0",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
@@ -22,6 +24,7 @@
                 "typescript": "^5.2.2",
                 "vite": "^6.2.0",
                 "vue": "^3.5.13",
+                "vue-chartjs": "^5.3.2",
                 "ziggy-js": "^2.4.2"
             },
             "devDependencies": {
@@ -829,6 +832,22 @@
             "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
             "license": "MIT"
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/@monaco-editor/loader": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+            "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+            "license": "MIT",
+            "dependencies": {
+                "state-local": "^1.0.6"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2043,6 +2062,19 @@
                 "node": ">=8"
             }
         },
+        "node_modules/chart.js": {
+            "version": "4.4.9",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
+            "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
         "node_modules/class-variance-authority": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3579,6 +3611,12 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/monaco-editor": {
+            "version": "0.52.2",
+            "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+            "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+            "license": "MIT"
+        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4237,6 +4275,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/state-local": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+            "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+            "license": "MIT"
+        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4535,6 +4579,16 @@
                 }
             }
         },
+        "node_modules/vue-chartjs": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+            "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "chart.js": "^4.1.1",
+                "vue": "^3.0.0-0 || ^2.7.0"
+            }
+        },
         "node_modules/vue-eslint-parser": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/package.json b/package.json
index 362fdc9..fcf6f61 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0-beta.3",
+        "@monaco-editor/loader": "^1.5.0",
         "@tailwindcss/vite": "^4.1.1",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^12.8.2",
@@ -33,6 +34,7 @@
         "laravel-vite-plugin": "^1.0",
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
+        "monaco-editor": "^0.52.2",
         "reka-ui": "^2.2.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
@@ -40,6 +42,7 @@
         "typescript": "^5.2.2",
         "vite": "^6.2.0",
         "vue": "^3.5.13",
+        "vue-chartjs": "^5.3.2",
         "ziggy-js": "^2.4.2"
     },
     "optionalDependencies": {
diff --git a/resources/css/app.css b/resources/css/app.css
index 0e71966..5a3e3a7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
@@ -8,56 +8,54 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-sans:
-    Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
 
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
 
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
 
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
 
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
 
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
 
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
 
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
 
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
 
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
 
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
 
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar: var(--sidebar-background);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
 }
 
 /*
@@ -69,98 +67,94 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
 }
 
 @layer utilities {
-  body,
-  html {
-    --font-sans:
-      'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-      'Noto Color Emoji';
-  }
+    body,
+    html {
+        --font-sans:
+            'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    }
 }
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
-  --primary: hsl(0 0% 9%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 92.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 92.8%);
-  --input: hsl(0 0% 89.8%);
-  --ring: hsl(0 0% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-  --radius: 0.5rem;
-  --sidebar-background: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(0 0% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(0 0% 94%);
-  --sidebar-accent-foreground: hsl(0 0% 30%);
-  --sidebar-border: hsl(0 0% 91%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-  --sidebar:
-    hsl(0 0% 98%);
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(0 0% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(0 0% 3.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(0 0% 3.9%);
+    --primary: hsl(0 0% 9%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(0 0% 92.1%);
+    --secondary-foreground: hsl(0 0% 9%);
+    --muted: hsl(0 0% 96.1%);
+    --muted-foreground: hsl(0 0% 45.1%);
+    --accent: hsl(0 0% 96.1%);
+    --accent-foreground: hsl(0 0% 9%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(0 0% 92.8%);
+    --input: hsl(0 0% 89.8%);
+    --ring: hsl(0 0% 3.9%);
+    --chart-1: hsl(12 76% 61%);
+    --chart-2: hsl(173 58% 39%);
+    --chart-3: hsl(197 37% 24%);
+    --chart-4: hsl(43 74% 66%);
+    --chart-5: hsl(27 87% 67%);
+    --radius: 0.5rem;
+    --sidebar-background: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(0 0% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(0 0% 94%);
+    --sidebar-accent-foreground: hsl(0 0% 30%);
+    --sidebar-border: hsl(0 0% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --sidebar: hsl(0 0% 98%);
 }
 
 .dark {
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(0 0% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 3.9%);
-  --popover-foreground: 0 0% 98%;
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 16.08%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 84% 60%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 14.9%);
-  --input: hsl(0 0% 14.9%);
-  --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-  --sidebar-background: hsl(0 0% 7%);
-  --sidebar-foreground: hsl(0 0% 95.9%);
-  --sidebar-primary: hsl(360, 100%, 100%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(0 0% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(0 0% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-  --sidebar:
-    hsl(240 5.9% 10%);
+    --background: hsl(0 0% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --card: hsl(0 0% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --popover: hsl(0 0% 3.9%);
+    --popover-foreground: 0 0% 98%;
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(0 0% 9%);
+    --secondary: hsl(0 0% 14.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --muted: hsl(0 0% 16.08%);
+    --muted-foreground: hsl(0 0% 63.9%);
+    --accent: hsl(0 0% 14.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 84% 60%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(0 0% 14.9%);
+    --input: hsl(0 0% 14.9%);
+    --ring: hsl(0 0% 83.1%);
+    --chart-1: hsl(220 70% 50%);
+    --chart-2: hsl(160 60% 45%);
+    --chart-3: hsl(30 80% 55%);
+    --chart-4: hsl(280 65% 60%);
+    --chart-5: hsl(340 75% 55%);
+    --sidebar-background: hsl(0 0% 7%);
+    --sidebar-foreground: hsl(0 0% 95.9%);
+    --sidebar-primary: hsl(360, 100%, 100%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(0 0% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(0 0% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --sidebar: hsl(240 5.9% 10%);
 }
 
 @layer base {
@@ -178,10 +172,10 @@
 */
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
 }
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 84902b2..161dfc7 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -62,7 +62,7 @@ const rightNavItems: NavItem[] = [
 
 <template>
     <div>
-        <div class="border-b border-sidebar-border/80">
+        <div class="border-sidebar-border/80 border-b">
             <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
                 <!-- Mobile Menu -->
                 <div class="lg:hidden">
@@ -83,7 +83,7 @@ const rightNavItems: NavItem[] = [
                                         v-for="item in mainNavItems"
                                         :key="item.title"
                                         :href="item.href"
-                                        class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
+                                        class="hover:bg-accent flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium"
                                         :class="activeItemStyles(item.href)"
                                     >
                                         <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
@@ -166,7 +166,7 @@ const rightNavItems: NavItem[] = [
                             <Button
                                 variant="ghost"
                                 size="icon"
-                                class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
+                                class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
                             >
                                 <Avatar class="size-8 overflow-hidden rounded-full">
                                     <AvatarImage v-if="auth.user.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
@@ -184,7 +184,7 @@ const rightNavItems: NavItem[] = [
             </div>
         </div>
 
-        <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
+        <div v-if="props.breadcrumbs.length > 1" class="border-sidebar-border/70 flex w-full border-b">
             <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </div>
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index 3ee328b..642c1bc 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -3,10 +3,10 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
 </script>
 
 <template>
-    <div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+    <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
         <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
     </div>
     <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate font-semibold leading-none">Laravel Starter Kit</span>
+        <span class="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>
     </div>
 </template>
diff --git a/resources/js/components/AppShell.vue b/resources/js/components/AppShell.vue
index 2022061..f222923 100644
--- a/resources/js/components/AppShell.vue
+++ b/resources/js/components/AppShell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SidebarProvider } from '@/components/ui/sidebar';
-import { usePage } from '@inertiajs/vue3';
 import { SharedData } from '@/types';
+import { usePage } from '@inertiajs/vue3';
 
 interface Props {
     variant?: 'header' | 'sidebar';
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 3ac4104..4a05f95 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -5,7 +5,7 @@ import NavUser from '@/components/NavUser.vue';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { BookOpen, LayoutGrid } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 
 const mainNavItems: NavItem[] = [
@@ -14,20 +14,24 @@ const mainNavItems: NavItem[] = [
         href: '/dashboard',
         icon: LayoutGrid,
     },
-];
-
-const footerNavItems: NavItem[] = [
     {
-        title: 'Github Repo',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
+        title: 'Courses',
+        href: '/courses',
+        icon: BookOpen,
     },
     {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits',
-        icon: BookOpen,
+        title: 'Random Quiz',
+        href: '/random-quiz',
+        icon: LayoutGrid,
+    },
+    {
+        title: 'My Stats',
+        href: '/my-stats',
+        icon: LayoutGrid,
     },
 ];
+
+const footerNavItems: NavItem[] = [];
 </script>
 
 <template>
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
index 741261c..f4e6a7a 100644
--- a/resources/js/components/AppSidebarHeader.vue
+++ b/resources/js/components/AppSidebarHeader.vue
@@ -3,16 +3,19 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItemType } from '@/types';
 
-withDefaults(defineProps<{
-    breadcrumbs?: BreadcrumbItemType[];
-}>(),{
-    breadcrumbs:()=>[]
-});
+withDefaults(
+    defineProps<{
+        breadcrumbs?: BreadcrumbItemType[];
+    }>(),
+    {
+        breadcrumbs: () => [],
+    },
+);
 </script>
 
 <template>
     <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
+        class="border-sidebar-border/70 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
     >
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
diff --git a/resources/js/components/Heading.vue b/resources/js/components/Heading.vue
index f50187a..b5e2d90 100644
--- a/resources/js/components/Heading.vue
+++ b/resources/js/components/Heading.vue
@@ -10,7 +10,7 @@ defineProps<Props>();
 <template>
     <div class="mb-8 space-y-0.5">
         <h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
-        <p v-if="description" class="text-sm text-muted-foreground">
+        <p v-if="description" class="text-muted-foreground text-sm">
             {{ description }}
         </p>
     </div>
diff --git a/resources/js/components/HeadingSmall.vue b/resources/js/components/HeadingSmall.vue
index d1602ba..667e64d 100644
--- a/resources/js/components/HeadingSmall.vue
+++ b/resources/js/components/HeadingSmall.vue
@@ -10,7 +10,7 @@ defineProps<Props>();
 <template>
     <header>
         <h3 class="mb-0.5 text-base font-medium">{{ title }}</h3>
-        <p v-if="description" class="text-sm text-muted-foreground">
+        <p v-if="description" class="text-muted-foreground text-sm">
             {{ description }}
         </p>
     </header>
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index 8aa7d24..7b9020e 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -15,10 +15,7 @@ const page = usePage<SharedData>();
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton 
-                    as-child :is-active="item.href === page.url"
-                    :tooltip="item.title"
-                >
+                <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
                     <Link :href="item.href">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index cd6d567..b8e8a07 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -22,10 +22,10 @@ const { isMobile, state } = useSidebar();
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent 
+                <DropdownMenuContent
                     class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
-                    align="end" 
+                    align="end"
                     :side-offset="4"
                 >
                     <UserMenuContent :user="user" />
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index 077c395..b11f74d 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -29,6 +29,6 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 
     <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>
-        <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+        <span v-if="showEmail" class="text-muted-foreground truncate text-xs">{{ user.email }}</span>
     </div>
 </template>
diff --git a/resources/js/layouts/auth/AuthCardLayout.vue b/resources/js/layouts/auth/AuthCardLayout.vue
index 9866818..9ca5976 100644
--- a/resources/js/layouts/auth/AuthCardLayout.vue
+++ b/resources/js/layouts/auth/AuthCardLayout.vue
@@ -10,7 +10,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+    <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
         <div class="flex w-full max-w-md flex-col gap-6">
             <Link :href="route('home')" class="flex items-center gap-2 self-center font-medium">
                 <div class="flex h-9 w-9 items-center justify-center">
@@ -20,7 +20,7 @@ defineProps<{
 
             <div class="flex flex-col gap-6">
                 <Card class="rounded-xl">
-                    <CardHeader class="px-10 pb-0 pt-8 text-center">
+                    <CardHeader class="px-10 pt-8 pb-0 text-center">
                         <CardTitle class="text-xl">{{ title }}</CardTitle>
                         <CardDescription>
                             {{ description }}
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
index a208182..9d53208 100644
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+    <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
         <div class="w-full max-w-sm">
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
@@ -21,7 +21,7 @@ defineProps<{
                     </Link>
                     <div class="space-y-2 text-center">
                         <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
+                        <p class="text-muted-foreground text-center text-sm">{{ description }}</p>
                     </div>
                 </div>
                 <slot />
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index 8bd6d78..de4e09d 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -14,7 +14,7 @@ defineProps<{
 
 <template>
     <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
-        <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+        <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
             <div class="absolute inset-0 bg-zinc-900" />
             <Link :href="route('home')" class="relative z-20 flex items-center text-lg font-medium">
                 <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
@@ -31,7 +31,7 @@ defineProps<{
             <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
                 <div class="flex flex-col space-y-2 text-center">
                     <h1 class="text-xl font-medium tracking-tight" v-if="title">{{ title }}</h1>
-                    <p class="text-sm text-muted-foreground" v-if="description">{{ description }}</p>
+                    <p class="text-muted-foreground text-sm" v-if="description">{{ description }}</p>
                 </div>
                 <slot />
             </div>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 0b321e9..0f74bb7 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -29,9 +29,9 @@ const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.locati
     <div class="px-4 py-6">
         <Heading title="Settings" description="Manage your profile and account settings" />
 
-        <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-y-0 lg:space-x-12">
             <aside class="w-full max-w-xl lg:w-48">
-                <nav class="flex flex-col space-x-0 space-y-1">
+                <nav class="flex flex-col space-y-1 space-x-0">
                     <Button
                         v-for="item in sidebarNavItems"
                         :key="item.href"
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 6eb13af..78af1b4 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -17,8 +17,7 @@ defineProps({
 const formatDate = (dateString) => {
     if (!dateString) return 'N/A';
     return new Date(dateString).toLocaleString();
-}
-
+};
 </script>
 
 <template>
@@ -26,32 +25,32 @@ const formatDate = (dateString) => {
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
                     <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
                 </div>
 
                 <!-- Quiz History -->
-                <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="mt-8 overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
                     <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <h3 class="text-xl font-semibold mb-4">Recent Quiz Attempts</h3>
+                        <h3 class="mb-4 text-xl font-semibold">Recent Quiz Attempts</h3>
                         <div v-if="quizAttempts && quizAttempts.length > 0">
                             <ul class="space-y-3">
-                                <li v-for="attempt in quizAttempts" :key="attempt.id" class="flex justify-between items-center border-b pb-2">
+                                <li v-for="attempt in quizAttempts" :key="attempt.id" class="flex items-center justify-between border-b pb-2">
                                     <div>
                                         <span class="font-medium">{{ attempt.quiz?.title ?? 'Quiz Deleted' }}</span>
-                                        <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">
-                                        on {{ formatDate(attempt.completed_at) }}
-                                    </span>
+                                        <span class="ml-2 text-sm text-gray-500 dark:text-gray-400"> on {{ formatDate(attempt.completed_at) }} </span>
                                     </div>
-                                    <span class="text-lg font-semibold"
-                                          :class="{
-                                        'text-green-600 dark:text-green-400': attempt.score >= 80,
-                                        'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
-                                        'text-red-600 dark:text-red-400': attempt.score < 50
-                                      }">
-                                    {{ attempt.score ?? 'N/A' }}%
-                                </span>
+                                    <span
+                                        class="text-lg font-semibold"
+                                        :class="{
+                                            'text-green-600 dark:text-green-400': attempt.score >= 80,
+                                            'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
+                                            'text-red-600 dark:text-red-400': attempt.score < 50,
+                                        }"
+                                    >
+                                        {{ attempt.score ?? 'N/A' }}%
+                                    </span>
                                 </li>
                             </ul>
                         </div>
@@ -60,7 +59,6 @@ const formatDate = (dateString) => {
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
     </AppLayout>
diff --git a/resources/js/pages/RandomQuiz/Show.vue b/resources/js/pages/RandomQuiz/Show.vue
new file mode 100644
index 0000000..1632a6e
--- /dev/null
+++ b/resources/js/pages/RandomQuiz/Show.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    quizData: Object,
+    message: String,
+});
+
+console.log(props.quizData);
+const form = useForm({
+    answers: {},
+    quizId: props.quizData?.id || null,
+});
+
+if (props.quizData) {
+    props.quizData.questions.forEach((q) => {
+        form.answers[q.id] = null;
+    });
+}
+
+const submitQuiz = () => {
+    if (!props.quizData) return;
+
+    form.post(route('random-quiz.submit'), {
+        preserveScroll: true,
+        onError: (errors) => {
+            console.error('Submission errors:', errors);
+            alert('Error submitting quiz. Check console or try again.');
+            form.processing = false;
+        },
+    });
+};
+
+const allAnswered = computed(() => {
+    if (!props.quizData?.questions || props.quizData.questions.length === 0) return true;
+    return props.quizData.questions.every((q) => form.answers[q.id] !== null);
+});
+</script>
+
+<template>
+    <AppLayout>
+        <Head title="Random Review Quiz" />
+
+        <div class="py-12">
+            <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                        <h2 class="mb-2 text-2xl font-semibold md:text-3xl">Random Review Quiz</h2>
+
+                        <!-- Display message if quiz couldn't generate -->
+                        <div
+                            v-if="message"
+                            class="mb-4 rounded-lg bg-yellow-100 p-4 text-sm text-yellow-700 dark:bg-yellow-200 dark:text-yellow-800"
+                            role="alert"
+                        >
+                            {{ message }}
+                            <div v-if="!quizData" class="mt-4">
+                                <Link :href="route('dashboard')" class="font-medium text-blue-600 hover:underline"> Go to Dashboard </Link>
+                            </div>
+                        </div>
+
+                        <!-- Display Quiz Form if generated -->
+                        <div v-if="quizData">
+                            <p v-if="quizData.description" class="mb-6 text-gray-600 dark:text-gray-400">{{ quizData.description }}</p>
+
+                            <form @submit.prevent="submitQuiz">
+                                <div v-if="quizData.questions.length > 0" class="space-y-6">
+                                    <!-- Question Loop -->
+                                    <div v-for="(question, index) in quizData.questions" :key="question.id" class="border-t pt-6">
+                                        <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
+                                        <div v-if="question.type === 'multiple_choice'" class="ml-4 space-y-2">
+                                            <label
+                                                v-for="option in question.options"
+                                                :key="option.id"
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === option.id,
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    :value="option.id"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>{{ option.text }}</span>
+                                            </label>
+                                        </div>
+
+                                        <!-- True/False -->
+                                        <div v-else-if="question.type === 'true_false'" class="ml-4 space-y-2">
+                                            <label
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === 'true',
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    value="true"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>True</span>
+                                            </label>
+                                            <label
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === 'false',
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    value="false"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>False</span>
+                                            </label>
+                                        </div>
+
+                                        <!-- Fill in the Blank -->
+                                        <div v-else-if="question.type === 'fill_blank'" class="mt-2 ml-4">
+                                            <input
+                                                type="text"
+                                                v-model="form.answers[question.id]"
+                                                :name="`question_${question.id}`"
+                                                placeholder="Type your answer here"
+                                                class="focus:ring-opacity-50 mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 md:w-1/2 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400"
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <!-- Submission Button -->
+                                    <div class="mt-8 border-t pt-6">
+                                        <button
+                                            type="submit"
+                                            :disabled="form.processing || !allAnswered"
+                                            class="inline-flex w-full items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:w-auto"
+                                        >
+                                            <svg
+                                                v-if="form.processing"
+                                                class="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                                <path
+                                                    class="opacity-75"
+                                                    fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                ></path>
+                                            </svg>
+                                            <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
+                                        </button>
+                                        <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
+                                    </div>
+                                </div>
+                                <div v-else>
+                                    <p>Could not load questions for this quiz.</p>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index 3560aa5..ba9f930 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -7,8 +7,8 @@ import { Head, Link } from '@inertiajs/vue3';
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     </Head>
-    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
-        <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
+    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
+        <header class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
                 <Link
                     v-if="$page.props.auth.user"
@@ -33,10 +33,10 @@ import { Head, Link } from '@inertiajs/vue3';
                 </template>
             </nav>
         </header>
-        <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
+        <div class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
             <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
                 <div
-                    class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
+                    class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                 >
                     <h1 class="mb-1 font-medium">Let's get started</h1>
                     <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
@@ -44,7 +44,7 @@ import { Head, Link } from '@inertiajs/vue3';
                     </p>
                     <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-0 before:left-[0.4rem] before:top-1/2 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -75,7 +75,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             </span>
                         </li>
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-1/2 before:left-[0.4rem] before:top-0 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -119,10 +119,10 @@ import { Head, Link } from '@inertiajs/vue3';
                     </ul>
                 </div>
                 <div
-                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
+                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]"
                 >
                     <svg
-                        class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
+                        class="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:translate-y-6 starting:opacity-0"
                         viewBox="0 0 438 104"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -148,12 +148,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         />
                     </svg>
                     <svg
-                        class="relative -ml-8 -mt-[4.9rem] w-[448px] max-w-none dark:hidden lg:-mt-[6.6rem] lg:ml-0"
+                        class="relative -mt-[4.9rem] -ml-8 w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:hidden"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -193,7 +193,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -216,7 +216,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'plus-darker' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z"
@@ -237,7 +237,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -439,7 +439,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -454,7 +454,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -468,12 +468,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <svg
-                        class="relative -ml-8 -mt-[4.9rem] hidden w-[448px] max-w-none dark:block lg:-mt-[6.6rem] lg:ml-0"
+                        class="relative -mt-[4.9rem] -ml-8 hidden w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:block"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -512,7 +512,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -534,7 +534,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -546,7 +546,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
@@ -747,7 +747,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -762,7 +762,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -777,11 +777,11 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:overflow-hidden lg:rounded-r-lg lg:rounded-t-none"
+                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:overflow-hidden lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                     />
                 </div>
             </main>
         </div>
-        <div class="h-14.5 hidden lg:block"></div>
+        <div class="hidden h-14.5 lg:block"></div>
     </div>
 </template>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index e992a14..e70fbad 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -45,7 +45,7 @@ const submit = () => {
                 </div>
             </form>
 
-            <div class="space-x-1 text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground space-x-1 text-center text-sm">
                 <span>Or, return to</span>
                 <TextLink :href="route('login')">log in</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 02aff22..f11f406 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -84,7 +84,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground text-center text-sm">
                 Don't have an account?
                 <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index c0a757d..3ad9e38 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -74,7 +74,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground text-center text-sm">
                 Already have an account?
                 <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
             </div>
diff --git a/resources/js/pages/courses/Index.vue b/resources/js/pages/courses/Index.vue
index 64b20e3..ca8064b 100644
--- a/resources/js/pages/courses/Index.vue
+++ b/resources/js/pages/courses/Index.vue
@@ -1,36 +1,42 @@
 <script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 
 defineProps({
     courses: Array,
 });
-
 </script>
 
 <template>
-    <Head title="Courses" />
+    <AppLayout>
+        <Head title="Courses" />
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    <h2 class="text-2xl font-semibold mb-6">Available Courses</h2>
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <h2 class="mb-6 text-2xl font-semibold">Available Courses</h2>
 
-                    <div v-if="courses.length > 0" class="space-y-4">
-                        <div v-for="course in courses" :key="course.id" class="border p-4 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition">
-                            <h3 class="text-xl font-medium mb-2">
-                                <Link :href="route('courses.show', { course: course.slug })" class="hover:underline">
-                                    {{ course.title }}
-                                </Link>
-                            </h3>
-                            <p class="text-gray-600 dark:text-gray-400">{{ course.description }}</p>
+                        <div v-if="courses.length > 0" class="space-y-4">
+                            <div
+                                v-for="course in courses"
+                                :key="course.id"
+                                class="rounded-md border p-4 transition hover:bg-gray-100 dark:hover:bg-gray-700"
+                            >
+                                <h3 class="mb-2 text-xl font-medium">
+                                    <Link :href="route('courses.show', { course: course.slug })" class="hover:underline">
+                                        {{ course.title }}
+                                    </Link>
+                                </h3>
+                                <p class="text-gray-600 dark:text-gray-400">{{ course.description }}</p>
+                            </div>
+                        </div>
+                        <div v-else>
+                            <p>No courses available at the moment.</p>
                         </div>
-                    </div>
-                    <div v-else>
-                        <p>No courses available at the moment.</p>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
diff --git a/resources/js/pages/courses/Show.vue b/resources/js/pages/courses/Show.vue
index cf1cee5..c770f4e 100644
--- a/resources/js/pages/courses/Show.vue
+++ b/resources/js/pages/courses/Show.vue
@@ -1,70 +1,97 @@
 <script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 
 defineProps({
     course: Object,
 });
-
 </script>
 
 <template>
-    <Head :title="course.title" />
+    <AppLayout>
+        <Head :title="course.title" />
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    <div class="mb-4">
-                        <Link :href="route('courses.index')" class="text-blue-600 hover:underline dark:text-blue-400">
-                            « Back to Courses
-                        </Link>
-                    </div>
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <div class="mb-4">
+                            <Link :href="route('courses.index')" class="text-blue-600 hover:underline dark:text-blue-400"> « Back to Courses </Link>
+                        </div>
 
-                    <h2 class="text-3xl font-semibold mb-2">{{ course.title }}</h2>
-                    <p class="text-gray-600 dark:text-gray-400 mb-6">{{ course.description }}</p>
+                        <h2 class="mb-2 text-3xl font-semibold">{{ course.title }}</h2>
+                        <p class="mb-6 text-gray-600 dark:text-gray-400">{{ course.description }}</p>
 
-                    <div v-if="course.modules.length > 0" class="space-y-6">
-                        <div v-for="module in course.modules" :key="module.id" class="border-t pt-4">
-                            <h3 class="text-xl font-semibold mb-3">{{ module.title }}</h3>
-                            <ul v-if="module.lessons.length > 0" class="list-disc list-inside space-y-2 ml-4">
-                                <li v-for="lesson in module.lessons" :key="lesson.id">
-                                    <Link
-                                        :href="route('lessons.show', { course: course.slug, lesson: lesson.slug })"
-                                        class="text-blue-600 hover:underline dark:text-blue-400"
-                                        :class="{ 'font-semibold text-gray-800 dark:text-gray-200': lesson.is_completed }"
-                                    >
-                                        <!-- Add a checkmark if completed -->
-                                        <span v-if="lesson.is_completed" class="text-green-500 mr-1">✓</span>
-                                        {{ lesson.title }}
-                                    </Link>
-                                </li>
-                            </ul>
-                            <p v-else class="text-sm text-gray-500 italic ml-4">No lessons in this module yet.</p>
+                        <!-- Assessment Link -->
+                        <div
+                            v-if="course.assessment_quiz_id"
+                            class="mb-6 rounded-lg border border-indigo-200 bg-indigo-50 p-4 text-center dark:border-indigo-800 dark:bg-indigo-900/30"
+                        >
+                            <p class="mb-2 font-semibold text-indigo-800 dark:text-indigo-300">Know this already?</p>
+                            <Link
+                                :href="route('course.assessment.show', { course: course.slug })"
+                                class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase ring-indigo-300 transition duration-150 ease-in-out hover:bg-indigo-700 focus:border-indigo-900 focus:ring focus:outline-none active:bg-indigo-800"
+                            >
+                                Take Placement Assessment
+                            </Link>
                         </div>
-                    </div>
 
-                    <!-- Quizzes -->
-                    <div v-if="module.quizzes && module.quizzes.length > 0">
-                        <h4 class="text-sm uppercase text-gray-500 dark:text-gray-400 mb-2 mt-4">Quizzes</h4>
-                        <ul class="list-disc list-inside space-y-2 ml-4">
-                            <li v-for="quiz in module.quizzes" :key="quiz.id">
-                                <Link
-                                    :href="route('quizzes.show', { quiz: quiz.id })"
-                                    class="text-purple-600 hover:underline dark:text-purple-400"
-                                >
-                                    {{ quiz.title }}
-                                    <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400"> - {{ quiz.description }}</span>
-                                </Link>
-                            </li>
-                        </ul>
-                    </div>
+                        <div v-if="course.modules.length > 0" class="space-y-8">
+                            <div v-for="module in course.modules" :key="module.id" class="border-t pt-6">
+                                <h3 class="mb-3 text-xl font-semibold">{{ module.title }}</h3>
 
-                    <div v-else>
-                        <p>This course doesn't have any modules yet.</p>
+                                <!-- Lesson List -->
+                                <div class="mb-4">
+                                    <h4 class="mb-2 text-sm text-gray-500 uppercase dark:text-gray-400">Lessons</h4>
+                                    <ul v-if="module.lessons.length > 0" class="ml-4 list-inside list-disc space-y-2">
+                                        <li v-for="lesson in module.lessons" :key="lesson.id">
+                                            <Link
+                                                :href="route('lessons.show', { course: course.slug, lesson: lesson.slug })"
+                                                class="text-blue-600 hover:underline dark:text-blue-400"
+                                                :class="{ 'font-semibold text-gray-800 dark:text-gray-200': lesson.is_completed }"
+                                            >
+                                                <span v-if="lesson.is_completed" class="mr-1 text-green-500">✓</span>
+                                                {{ lesson.title }}
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                    <p v-else class="ml-4 text-sm text-gray-500 italic">No lessons in this module yet.</p>
+                                </div>
+
+                                <!-- Quiz List -->
+                                <div v-if="module.quizzes && module.quizzes.length > 0">
+                                    <h4 class="mt-4 mb-2 text-sm text-gray-500 uppercase dark:text-gray-400">Quizzes</h4>
+                                    <ul class="ml-4 list-inside list-disc space-y-2">
+                                        <li v-for="quiz in module.quizzes" :key="quiz.id">
+                                            <Link
+                                                :href="route('quizzes.show', { quiz: quiz.id })"
+                                                class="text-purple-600 hover:underline dark:text-purple-400"
+                                            >
+                                                {{ quiz.title }}
+                                                <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400">
+                                                    - {{ quiz.description }}</span
+                                                >
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="course.final_review_quiz_id" class="mt-10 border-t pt-6 text-center dark:border-gray-700">
+                            <h3 class="mb-3 text-xl font-semibold">Ready for a Final Challenge?</h3>
+                            <Link
+                                :href="route('course.review.generate', { course: course.slug })"
+                                class="inline-flex items-center rounded-md border border-transparent bg-green-600 px-6 py-3 text-sm font-semibold tracking-widest text-white uppercase ring-green-300 transition duration-150 ease-in-out hover:bg-green-700 focus:border-green-900 focus:ring focus:outline-none active:bg-green-800"
+                            >
+                                Take Final Review Quiz
+                            </Link>
+                        </div>
+                        <div v-else>
+                            <p>This course doesn't have any modules yet.</p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
-
diff --git a/resources/js/pages/lessons/Show.vue b/resources/js/pages/lessons/Show.vue
index 02a79b7..8b99489 100644
--- a/resources/js/pages/lessons/Show.vue
+++ b/resources/js/pages/lessons/Show.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { Head, Link, usePage } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import { Head, Link, router, usePage } from '@inertiajs/vue3';
+import loader from '@monaco-editor/loader';
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 
-defineProps({
+const props = defineProps({
     lesson: Object,
     course: Object,
 });
@@ -10,75 +12,209 @@ defineProps({
 const page = usePage();
 const successMessage = computed(() => page.props.flash?.success);
 
+// --- Monaco Editor Setup ---
+const editorContainer = ref(null);
+const editorInstance = shallowRef(null);
+const editorCode = ref(props.lesson.initial_code || '');
+
+onMounted(() => {
+    loader
+        .init()
+        .then((monaco) => {
+            if (editorContainer.value) {
+                const editor = monaco.editor.create(editorContainer.value, {
+                    value: editorCode.value,
+                    language: 'javascript',
+                    theme: 'vs-dark',
+                    automaticLayout: true,
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    tabSize: 2,
+                });
+
+                editor.onDidChangeModelContent(() => {
+                    editorCode.value = editor.getValue();
+                });
+
+                editorInstance.value = editor;
+            }
+        })
+        .catch((error) => console.error('Monaco Editor loading failed:', error));
+});
+
+onBeforeUnmount(() => {
+    editorInstance.value?.dispose();
+});
+
+const terminalOutput = ref('');
+const terminalError = ref('');
+const isExecuting = ref(false);
+const checkResult = ref(null);
+
+const runCode = () => {
+    if (isExecuting.value) return;
+
+    isExecuting.value = true;
+    terminalOutput.value = '';
+    terminalError.value = '';
+    checkResult.value = null;
+    const codeToRun = editorCode.value;
+
+    const originalConsoleLog = console.log;
+    let capturedOutput = '';
+
+    console.log = (...args) => {
+        capturedOutput +=
+            args
+                .map((arg) => {
+                    if (typeof arg === 'object' && arg !== null) {
+                        try {
+                            return JSON.stringify(arg);
+                        } catch (e) {
+                            console.log(e);
+                            return 'Unserializable Object';
+                        }
+                    }
+                    return String(arg);
+                })
+                .join(' ') + '\n';
+    };
+
+    try {
+        new Function(codeToRun)();
+
+        terminalOutput.value = capturedOutput.trim();
+
+        if (props.lesson.expected_output !== null && props.lesson.expected_output !== undefined) {
+            if (terminalOutput.value.trim() === props.lesson.expected_output.trim()) {
+                checkResult.value = 'correct';
+                if (!props.lesson.is_completed) {
+                    console.log('Code correct, marking lesson complete...');
+                    router.post(
+                        route('lessons.complete', { lesson: props.lesson.id }),
+                        {},
+                        {
+                            preserveScroll: true,
+                            onSuccess: () => {
+                                console.log('Lesson marked complete successfully via Inertia POST.');
+                            },
+                            onError: (errors) => {
+                                console.error('Error marking lesson complete:', errors);
+                                alert('Could not mark lesson as complete. Please try running the code again or contact support.');
+                            },
+                        },
+                    );
+                }
+            } else {
+                checkResult.value = 'incorrect';
+            }
+        }
+    } catch (error) {
+        console.error('Execution Error:', error);
+        terminalError.value = error.toString();
+        checkResult.value = 'error';
+    } finally {
+        console.log = originalConsoleLog;
+        isExecuting.value = false;
+    }
+};
+
+const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'balanced');
 </script>
 
 <template>
-    <Head :title="lesson.title" />
-
-    <div v-if="successMessage" class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
-        {{ successMessage }}
-    </div>
-
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                    <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <div class="mb-4">
-                            <Link :href="route('courses.show', { course: course.slug })" class="text-blue-600 hover:underline dark:text-blue-400">
-                                « Back to {{ course.title }}
-                            </Link>
-                        </div>
+    <AppLayout>
+        <Head :title="lesson.title" />
+
+        <div v-if="successMessage" class="fixed top-4 right-4 z-50 mb-4 rounded border border-green-400 bg-green-100 p-4 text-green-700 shadow-lg">
+            {{ successMessage }}
+        </div>
 
-                        <h2 class="text-3xl font-semibold mb-4">{{ lesson.title }}</h2>
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                    <!-- Left Pane: Lesson Content & Assignment -->
+                    <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                        <div class="flex h-full flex-col p-6 text-gray-900 dark:text-gray-100">
+                            <div class="mb-4">
+                                <Link :href="route('courses.show', { course: course.slug })" class="text-blue-600 hover:underline dark:text-blue-400">
+                                    « Back to {{ course.title }}
+                                </Link>
+                            </div>
 
-                        <div class="prose dark:prose-invert max-w-none" v-html="lesson.content"></div>
+                            <h2 class="mb-4 text-3xl font-semibold">{{ lesson.title }}</h2>
 
-                        <div class="mt-8 border-t pt-6">
-                            <!-- Show completed message -->
-                            <div v-if="lesson.is_completed" class="flex items-center p-3 bg-green-100 dark:bg-green-900/30 border border-green-300 dark:border-green-700 rounded-md text-green-700 dark:text-green-300 font-semibold">
-                                <svg class="w-6 h-6 mr-2 fill-current" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path></svg>
-                                <span>Lesson Completed!</span>
+                            <!-- Lesson Content -->
+                            <!-- Video Content (if preferred visual AND video exists) -->
+                            <div v-if="userStyle === 'visual' && lesson.video_embed_html" class="mb-6">
+                                <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Video Explanation:</h3>
+                                <div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-md shadow-lg" v-html="lesson.video_embed_html"></div>
+                            </div>
+
+                            <!-- Text Content (always show, but position varies) -->
+                            <div class="prose dark:prose-invert mb-6 max-w-none" v-html="lesson.content"></div>
+
+                            <!-- Video Content (if style is NOT visual-first AND video exists) -->
+                            <div v-if="userStyle !== 'visual' && lesson.video_embed_html" class="mt-6 border-t pt-6 dark:border-gray-700">
+                                <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Video Explanation (Optional):</h3>
+                                <div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-md shadow-lg" v-html="lesson.video_embed_html"></div>
+                            </div>
+
+                            <!-- Assignment Section -->
+                            <div v-if="lesson.assignment" class="mt-auto border-t pt-6">
+                                <h3 class="mb-3 text-xl font-semibold">Assignment</h3>
+                                <div class="prose dark:prose-invert max-w-none text-sm" v-html="lesson.assignment"></div>
                             </div>
-                            <!-- Show button if not completed -->
-                            <Link v-else
-                                  :href="route('lessons.complete', { lesson: lesson.id })"
-                                  method="post"
-                                  as="button"
-                                  type="button"
-                                  preserve-scroll
-                                  class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150"
-                            >
-                                Mark as Complete
-                            </Link>
                         </div>
                     </div>
-                </div>
 
-                        <div class="mt-8 border-t pt-4">
-                            <button disabled class="bg-gray-400 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
-                                Mark as Complete (Coming Soon)
-                            </button>
+                    <!-- Right Pane: Editor, Terminal, Actions -->
+                    <div class="flex flex-col overflow-hidden bg-gray-900 text-gray-100 shadow-sm sm:rounded-lg" style="height: 75vh">
+                        <!-- Editor Area -->
+                        <div ref="editorContainer" class="h-1/2 flex-grow">
+                            <!-- Monaco Editor will be mounted here -->
                         </div>
-                    </div>
-                </div>
 
-                <!-- Right Pane: Placeholder for Code Editor/Terminal -->
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                    <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <h3 class="text-xl font-semibold mb-4">Code Area</h3>
-                        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded h-64 flex items-center justify-center">
-                            <p class="text-gray-500">Code Editor & Terminal will appear here.</p>
+                        <!-- Action Bar -->
+                        <div class="flex flex-shrink-0 items-center justify-between border-t border-gray-700 px-4 py-2">
+                            <button
+                                @click="runCode"
+                                :disabled="isExecuting"
+                                class="rounded bg-blue-600 px-4 py-1 text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+                            >
+                                <span v-if="isExecuting">Running...</span>
+                                <span v-else>Run Code</span>
+                            </button>
+                            <div
+                                v-if="lesson.is_completed"
+                                class="flex items-center rounded-md border border-green-700 bg-green-900/30 p-1 text-xs font-semibold text-green-300"
+                            >
+                                <svg class="mr-1 h-4 w-4 fill-current" viewBox="0 0 20 20">
+                                    <path
+                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                    ></path>
+                                </svg>
+                                <span>Completed</span>
+                            </div>
                         </div>
-                        <!-- Placeholder for Assignment Text -->
-                        <div class="mt-4">
-                            <h4 class="font-semibold">Assignment:</h4>
-                            <p class="text-gray-600 dark:text-gray-400 italic">Assignment details will appear here.</p>
+
+                        <!-- Terminal Output Area -->
+                        <div class="h-1/3 flex-shrink-0 overflow-auto border-t border-gray-700 bg-black p-3 font-mono text-sm">
+                            <div v-if="checkResult === 'correct'" class="mb-2 text-green-400">✓ Output matches expected result.</div>
+                            <div v-if="checkResult === 'incorrect'" class="mb-2 text-yellow-400">! Output does not match expected result.</div>
+                            <div v-if="checkResult === 'error'" class="mb-2 text-red-400">! Code execution failed.</div>
+
+                            <pre v-if="terminalOutput" class="whitespace-pre-wrap text-gray-200">{{ terminalOutput }}</pre>
+                            <pre v-if="terminalError" class="whitespace-pre-wrap text-red-400">{{ terminalError }}</pre>
+                            <span v-if="!terminalOutput && !terminalError && !isExecuting && checkResult === null" class="text-gray-500"
+                                >Output will appear here...</span
+                            >
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
+    </AppLayout>
 </template>
 
 <style scoped>
@@ -96,4 +232,9 @@ const successMessage = computed(() => page.props.flash?.success);
 .prose p {
     margin-bottom: 1em;
 }
+
+[ref='editorContainer'] {
+    min-height: 200px;
+    height: 100%;
+}
 </style>
diff --git a/resources/js/pages/quizzes/Result.vue b/resources/js/pages/quizzes/Result.vue
index decaf26..474a5d3 100644
--- a/resources/js/pages/quizzes/Result.vue
+++ b/resources/js/pages/quizzes/Result.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
@@ -7,54 +8,133 @@ const props = defineProps({
     attempt: Object,
     results: Array,
     reviewSuggestions: Array,
+    deepReviewSuggestions: {
+        type: Array,
+        default: () => [],
+    },
 });
 
+console.log(props.quiz);
+console.log(props.attempt);
+console.log(props.results);
+console.log(props.reviewSuggestions);
+
 const scoreColorClass = computed(() => {
     if (props.attempt.score >= 80) return 'text-green-600 dark:text-green-400';
     if (props.attempt.score >= 50) return 'text-yellow-600 dark:text-yellow-400';
     return 'text-red-600 dark:text-red-400';
 });
-
 </script>
 
 <template>
-    <Head :title="`Quiz Results: ${quiz.title}`" />
+    <AppLayout>
+        <Head :title="`Quiz Results: ${quiz.title}`" />
 
-    <div class="py-12">
-        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+        <div class="py-12">
+            <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                        <h2 class="mb-4 text-2xl font-semibold md:text-3xl">Results for: {{ quiz.title }}</h2>
 
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-4">Results for: {{ quiz.title }}</h2>
+                        <div class="mb-8 rounded-lg bg-gray-50 p-4 text-center dark:bg-gray-700/50">
+                            <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
+                            <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>
+                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}
+                            </p>
+                            <p v-if="attempt.type === 'random'" class="mt-1 text-xs text-gray-400 dark:text-gray-500">(Random Review)</p>
+                        </div>
 
-                    <!-- Score Display -->
-                    <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
-                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
-                        <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>
-                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}</p>
-                    </div>
+                        <div
+                            v-if="deepReviewSuggestions.length > 0"
+                            class="mb-8 rounded-lg border border-orange-300 bg-orange-50 p-4 dark:border-orange-700 dark:bg-orange-900/30"
+                        >
+                            <h3 class="mb-2 text-lg font-semibold text-orange-800 dark:text-orange-300">Areas for Deeper Review</h3>
+                            <p class="mb-3 text-sm text-orange-700 dark:text-orange-400">
+                                You might want to revisit these topics and explore the additional resources:
+                            </p>
+                            <div
+                                v-for="suggestion in deepReviewSuggestions"
+                                :key="suggestion.id"
+                                class="mb-4 border-b pb-3 last:border-b-0 dark:border-gray-700"
+                            >
+                                <h4 class="font-medium">
+                                    <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400">
+                                        Lesson: {{ suggestion.title }}
+                                    </Link>
+                                </h4>
+                                <div v-if="suggestion.external_resources.length > 0" class="mt-2 ml-4">
+                                    <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400">Additional Resources:</p>
+                                    <ul class="list-inside list-disc space-y-1">
+                                        <li v-for="resource in suggestion.external_resources" :key="resource.url" class="text-xs">
+                                            <a
+                                                :href="resource.url"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="text-purple-600 hover:underline dark:text-purple-400"
+                                            >
+                                                {{ resource.title }} ({{ resource.type }})
+                                            </a>
+                                            <p v-if="resource.description" class="ml-4 text-gray-500 dark:text-gray-500">
+                                                {{ resource.description }}
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <p v-else class="ml-4 text-xs text-gray-500 italic dark:text-gray-400">
+                                    No additional resources currently linked for this lesson.
+                                </p>
+                            </div>
+                        </div>
 
-                    <!-- Review Suggestions -->
-                    <div v-if="reviewSuggestions.length > 0" class="mb-8 p-4 border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg">
-                        <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-2">Lessons to Review</h3>
-                        <p class="text-sm text-yellow-700 dark:text-yellow-400 mb-3">Based on your answers, you might want to review the following topics:</p>
-                        <ul class="list-disc list-inside space-y-1">
-                            <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
-                                <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400 font-medium">
-                                    {{ suggestion.title }}
-                                </Link>
-                            </li>
-                        </ul>
-                    </div>
+                        <!-- Review Suggestions -->
+                        <div
+                            v-if="reviewSuggestions.length > 0 && deepReviewSuggestions.length === 0"
+                            class="mb-8 rounded-lg border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900/30"
+                        >
+                            <h3 class="mb-2 text-lg font-semibold text-yellow-800 dark:text-yellow-300">Lessons to Review</h3>
+                            <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-400">
+                                Based on your answers, you might want to review the following topics:
+                            </p>
+                            <ul class="list-inside list-disc space-y-1">
+                                <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
+                                    <Link :href="suggestion.url" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
+                                        {{ suggestion.title }}
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
 
-                    <!-- Back/Next Links -->
-                    <div class="mt-8 border-t pt-6 flex justify-between">
-                        <Link v-if="false" href="#" class="text-blue-600 hover:underline dark:text-blue-400">« Back to Module</Link>
-                        <Link :href="route('dashboard')" class="text-blue-600 hover:underline dark:text-blue-400">Go to Dashboard »</Link>
+                        <!-- Detailed Results Breakdown
+                    <h3 class="text-xl font-semibold mb-4 border-t pt-6">Detailed Results</h3>
+                    <div class="space-y-6">
+                        <div v-for="(result, index) in results" :key="result.question_id" class="border p-4 rounded-md" :class="{ 'border-green-300 dark:border-green-700 bg-green-50/50 dark:bg-green-900/10': result.is_correct, 'border-red-300 dark:border-red-700 bg-red-50/50 dark:bg-red-900/10': !result.is_correct }">
+                            <p class="font-semibold mb-2">{{ index + 1 }}. {{ result.question_text }}</p>
+                            <div class="text-sm space-y-1">
+                                <p>Your answer: <span class="font-medium" :class="{ 'text-green-700 dark:text-green-300': result.is_correct, 'text-red-700 dark:text-red-300': !result.is_correct }">
+                                        {{ getOptionText(result.options, result.user_answer) }}
+                                     <span v-if="result.is_correct"> (Correct)</span>
+                                     <span v-else> (Incorrect)</span>
+                                 </span></p>
+                                <p v-if="!result.is_correct">Correct answer: <span class="font-medium text-green-700 dark:text-green-300">{{ getOptionText(result.options, result.correct_answer) }}</span></p>
+                                <p v-if="result.explanation" class="mt-2 pt-2 border-t border-dashed text-gray-600 dark:text-gray-400">
+                                    <span class="font-medium">Explanation:</span> {{ result.explanation }}
+                                </p>
+                            </div>
+                        </div>
+                        <p v-if="result.explanation" class="mt-2 pt-2 border-t border-dashed text-gray-600 dark:text-gray-400">
+             <span class="font-medium">Explanation:</span> {{ result.explanation }}
+         </p>
+                    </div>-->
+                        <div class="mt-8 flex justify-between border-t pt-6">
+                            <!-- Link back to course/module? Need data for this -->
+                            <Link v-if="false" href="#" class="text-blue-600 hover:underline dark:text-blue-400">« Back to Module</Link>
+                            <!-- Link to next module/course overview? -->
+                            <Link :href="route('dashboard')" class="text-blue-600 hover:underline dark:text-blue-400">Go to Dashboard »</Link>
+                        </div>
                     </div>
-
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
diff --git a/resources/js/pages/quizzes/Show.vue b/resources/js/pages/quizzes/Show.vue
index 1b0204a..8bd3a3e 100644
--- a/resources/js/pages/quizzes/Show.vue
+++ b/resources/js/pages/quizzes/Show.vue
@@ -10,15 +10,15 @@ const form = useForm({
     answers: {},
 });
 
-props.quiz.questions.forEach(q => {
+props.quiz.questions.forEach((q) => {
     form.answers[q.id] = null;
 });
 
-console.log(props.quiz.questions)
+console.log(props.quiz.questions);
 
 const submitQuiz = () => {
     // Ensure all questions are answered
-    const unanswered = props.quiz.questions.some(q => form.answers[q.id] === null);
+    const unanswered = props.quiz.questions.some((q) => form.answers[q.id] === null);
     if (unanswered && !confirm('You have unanswered questions. Submit anyway?')) {
         return;
     }
@@ -34,40 +34,42 @@ const submitQuiz = () => {
 
 const allAnswered = computed(() => {
     if (!props.quiz.questions || props.quiz.questions.length === 0) return true;
-    return props.quiz.questions.every(q => form.answers[q.id] !== null);
+    return props.quiz.questions.every((q) => form.answers[q.id] !== null);
 });
-
 </script>
 
 <template>
     <Head :title="`Quiz: ${quiz.title}`" />
 
     <div class="py-12">
-        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quiz.title }}</h2>
-                    <p v-if="quiz.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quiz.description }}</p>
+        <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">
+            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                    <h2 class="mb-2 text-2xl font-semibold md:text-3xl">{{ quiz.title }}</h2>
+                    <p v-if="quiz.description" class="mb-6 text-gray-600 dark:text-gray-400">{{ quiz.description }}</p>
 
                     <form @submit.prevent="submitQuiz">
                         <div v-if="quiz.questions.length > 0" class="space-y-6">
                             <div v-for="(question, index) in quiz.questions" :key="question.id" class="border-t pt-6">
-                                <p class="font-semibold mb-3">
-                                    {{ index + 1 }}. {{ question.text }}
-                                </p>
+                                <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
 
                                 <!-- Multiple Choice Options -->
-                                <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
-                                    <label v-for="option in question.options" :key="option.id"
-                                           class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                                <div v-if="question.type === 'multiple_choice'" class="ml-4 space-y-2">
+                                    <label
+                                        v-for="option in question.options"
+                                        :key="option.id"
+                                        class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                        :class="{
+                                            'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                form.answers[question.id] === option.id,
+                                        }"
+                                    >
                                         <input
                                             type="radio"
                                             :name="`question_${question.id}`"
                                             :value="option.id"
                                             v-model="form.answers[question.id]"
-                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
                                         />
                                         <span>{{ option.text }}</span>
                                     </label>
@@ -75,27 +77,35 @@ const allAnswered = computed(() => {
                             </div>
 
                             <!-- Submission Button -->
-                            <div class="mt-8 pt-6 border-t">
+                            <div class="mt-8 border-t pt-6">
                                 <button
                                     type="submit"
                                     :disabled="form.processing || !allAnswered"
-                                    class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    class="inline-flex w-full items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:w-auto"
                                 >
-                                    <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <svg
+                                        v-if="form.processing"
+                                        class="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                    >
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        <path
+                                            class="opacity-75"
+                                            fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        ></path>
                                     </svg>
                                     <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
                                 </button>
-                                <p v-if="!allAnswered && !form.processing" class="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                                <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
                             </div>
-
                         </div>
                         <div v-else>
                             <p>This quiz doesn't have any questions yet.</p>
                         </div>
                     </form>
-
                 </div>
             </div>
         </div>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index a1028f6..f8f8f37 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -70,7 +70,7 @@ const submit = () => {
                     </div>
 
                     <div v-if="mustVerifyEmail && !user.email_verified_at">
-                        <p class="-mt-4 text-sm text-muted-foreground">
+                        <p class="text-muted-foreground -mt-4 text-sm">
                             Your email address is unverified.
                             <Link
                                 :href="route('verification.send')"
diff --git a/routes/web.php b/routes/web.php
index 4f3c74e..7f68f0e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,11 +2,16 @@
 
 declare(strict_types=1);
 
+use App\Http\Controllers\CourseAssessmentController;
 use App\Http\Controllers\CourseController;
+use App\Http\Controllers\CourseReviewController;
 use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\LessonController;
 use App\Http\Controllers\QuizController;
+use App\Http\Controllers\RandomQuizController;
+use App\Http\Controllers\UserPreferenceController;
 use App\Http\Controllers\UserProgressController;
+use App\Http\Controllers\UserStatsController;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
@@ -22,10 +27,20 @@
 
     Route::post('/lessons/{lesson:id}/complete', [UserProgressController::class, 'store'])->name('lessons.complete');
 
+    Route::get('/random-quiz', [RandomQuizController::class, 'generate'])->name('random-quiz.generate');
+    Route::post('/random-quiz/submit', [RandomQuizController::class, 'submit'])->name('random-quiz.submit');
+
+    Route::get('/courses/{course}/assessment', [CourseAssessmentController::class, 'show'])->name('course.assessment.show');
+    Route::post('/courses/{course}/assessment/submit', [CourseAssessmentController::class, 'submit'])->name('course.assessment.submit');
+    Route::get('/courses/{course}/review', [CourseReviewController::class, 'generate'])->name('course.review.generate');
+    Route::post('/courses/{course}/review/submit', [CourseReviewController::class, 'submit'])->name('course.review.submit');
+
+    Route::patch('/user/preferences', [UserPreferenceController::class, 'update'])->name('user.preferences.update');
+
+    Route::get('/my-stats', [UserStatsController::class, 'show'])->name('my-stats.show');
 });
 
 Route::get('/courses', [CourseController::class, 'index'])->name('courses.index');
-
 Route::get('/courses/{course}', [CourseController::class, 'show'])->name('courses.show');
 
 Route::get('/courses/{course}/lessons/{lesson}', [LessonController::class, 'show'])->name('lessons.show');