diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 4b8f7a4..b8e1031 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -10,6 +10,7 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Support\Facades\Auth;
 
 final class Lesson extends Model
 {
@@ -57,6 +58,21 @@ public function userProgress(): HasMany
         return $this->hasMany(UserProgress::class);
     }
 
+    /**
+     * Accessor: Dynamically check if the *currently authenticated* user
+     * has completed this lesson.
+     */
+    public function getIsCompletedAttribute(): bool
+    {
+        // If no user is logged in, it's not completed by them
+        if (! Auth::check()) {
+            return false;
+        }
+
+        // Check if a progress record exists for the logged-in user and this lesson
+        return $this->userProgress()->where('user_id', Auth::id())->exists();
+    }
+
     // A Lesson has many external resources.
     public function externalResources(): HasMany
     {
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 18fb540..af7e70d 100644
--- a/database/migrations/0001_01_01_000000_create_users_table.php
+++ b/database/migrations/0001_01_01_000000_create_users_table.php
@@ -14,13 +14,22 @@
     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->enum('preferred_learning_style', ['reading', 'visual', 'balanced'])
+                ->default('balanced')
+                ->nullable() // Allow null if user hasn't set it
+                ->after('password'); // Place it after password
+
+            $table->foreignId('learning_path_id') // New column name
+                ->nullable()
+                ->after('preferred_learning_style')
+                ->constrained('learning_paths') // Foreign key to learning_paths table
+                ->onDelete('set null');
             $table->timestamps();
         });
 
diff --git a/database/migrations/2025_04_27_192057_create_lessons_table.php b/database/migrations/2025_04_17_141934_create_lessons_table.php
similarity index 84%
rename from database/migrations/2025_04_27_192057_create_lessons_table.php
rename to database/migrations/2025_04_17_141934_create_lessons_table.php
index 5571829..350c883 100644
--- a/database/migrations/2025_04_27_192057_create_lessons_table.php
+++ b/database/migrations/2025_04_17_141934_create_lessons_table.php
@@ -22,7 +22,8 @@ public function up(): void
             $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->text('solution')->nullable()->comment('Optional solution code/explanation');
+            $table->text('expected_output')->nullable()->comment('For simple stdout checks'); // Example addition
             $table->unsignedSmallInteger('order')->default(0);
             $table->timestamps();
 
diff --git a/database/migrations/2025_04_27_192057_create_modules_table.php b/database/migrations/2025_04_17_141934_create_modules_table.php
similarity index 100%
rename from database/migrations/2025_04_27_192057_create_modules_table.php
rename to database/migrations/2025_04_17_141934_create_modules_table.php
diff --git a/database/migrations/2025_04_27_192057_create_courses_table.php b/database/migrations/2025_04_17_142012_create_courses_table.php
similarity index 89%
rename from database/migrations/2025_04_27_192057_create_courses_table.php
rename to database/migrations/2025_04_17_142012_create_courses_table.php
index 7f6e0f8..edc1ec2 100644
--- a/database/migrations/2025_04_27_192057_create_courses_table.php
+++ b/database/migrations/2025_04_17_142012_create_courses_table.php
@@ -19,6 +19,7 @@ public function up(): void
             $table->string('slug')->unique();
             $table->text('description')->nullable();
             $table->boolean('is_published')->default(false);
+            // Set null on delete: if the quiz is deleted, the course doesn't break, just loses its assessment link.
             $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_28_131921_create_quizzes_table.php b/database/migrations/2025_04_22_192107_create_quizzes_table.php
similarity index 100%
rename from database/migrations/2025_04_28_131921_create_quizzes_table.php
rename to database/migrations/2025_04_22_192107_create_quizzes_table.php
diff --git a/database/migrations/2025_04_28_131922_create_questions_table.php b/database/migrations/2025_04_22_192108_create_questions_table.php
similarity index 85%
rename from database/migrations/2025_04_28_131922_create_questions_table.php
rename to database/migrations/2025_04_22_192108_create_questions_table.php
index 87f3be1..caa6325 100644
--- a/database/migrations/2025_04_28_131922_create_questions_table.php
+++ b/database/migrations/2025_04_22_192108_create_questions_table.php
@@ -16,7 +16,10 @@ public function up(): void
         Schema::create('questions', function (Blueprint $table) {
             $table->id();
             $table->foreignId('quiz_id')->constrained()->onDelete('cascade');
+            // Crucial link for suggesting review topics!
+            // Can be null if a question is general, or set null if lesson deleted.
             $table->foreignId('lesson_id')->nullable()->constrained()->onDelete('set null');
+            // Start with multiple choice, add more later if needed
             $table->enum('type', ['multiple_choice', 'true_false', 'fill_blank'])->default('multiple_choice');
             $table->text('text')->comment('The question text');
             $table->json('options')->nullable();
diff --git a/database/migrations/2025_04_28_131922_create_quiz_answers_table.php b/database/migrations/2025_04_22_192108_create_quiz_answers_table.php
similarity index 79%
rename from database/migrations/2025_04_28_131922_create_quiz_answers_table.php
rename to database/migrations/2025_04_22_192108_create_quiz_answers_table.php
index b749613..439336f 100644
--- a/database/migrations/2025_04_28_131922_create_quiz_answers_table.php
+++ b/database/migrations/2025_04_22_192108_create_quiz_answers_table.php
@@ -17,11 +17,12 @@ public function up(): void
             $table->id();
             $table->foreignId('quiz_attempt_id')->constrained()->onDelete('cascade');
             $table->foreignId('question_id')->constrained()->onDelete('cascade');
+            // Store the user's selected option ID (e.g., "a", "b")
             $table->string('user_answer')->nullable();
-            $table->boolean('is_correct')->nullable();
+            $table->boolean('is_correct')->nullable()->comment('Graded result');
             $table->timestamps();
 
-            // User can answer each question once per attempt
+            // User should only answer each question once per attempt
             $table->unique(['quiz_attempt_id', 'question_id']);
         });
     }
diff --git a/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php b/database/migrations/2025_04_22_192108_create_quiz_attempts_table.php
similarity index 85%
rename from database/migrations/2025_04_28_131922_create_quiz_attempts_table.php
rename to database/migrations/2025_04_22_192108_create_quiz_attempts_table.php
index 6683832..7c0f5c5 100644
--- a/database/migrations/2025_04_28_131922_create_quiz_attempts_table.php
+++ b/database/migrations/2025_04_22_192108_create_quiz_attempts_table.php
@@ -18,9 +18,10 @@ public function up(): void
             $table->foreignId('user_id')->constrained()->onDelete('cascade');
             $table->foreignId('quiz_id')->nullable()->constrained()->onDelete('cascade');
             $table->string('type')->default('standard')->after('quiz_id');
+            // Score as percentage (0-100), calculated after submission
             $table->unsignedTinyInteger('score')->nullable();
             $table->timestamp('started_at')->useCurrent();
-            $table->timestamp('completed_at')->nullable();
+            $table->timestamp('completed_at')->nullable(); // Set when submitted
             $table->timestamps();
         });
     }
diff --git a/database/migrations/2025_04_28_131923_create_lesson_quiz_table.php b/database/migrations/2025_04_22_192603_create_lesson_quiz_table.php
similarity index 91%
rename from database/migrations/2025_04_28_131923_create_lesson_quiz_table.php
rename to database/migrations/2025_04_22_192603_create_lesson_quiz_table.php
index a251c24..2152708 100644
--- a/database/migrations/2025_04_28_131923_create_lesson_quiz_table.php
+++ b/database/migrations/2025_04_22_192603_create_lesson_quiz_table.php
@@ -17,7 +17,7 @@ public function up(): void
             $table->id();
             $table->foreignId('lesson_id')->constrained()->onDelete('cascade');
             $table->foreignId('quiz_id')->constrained()->onDelete('cascade');
-            $table->timestamps();
+            $table->timestamps(); // Optional, but good practice
 
             $table->unique(['lesson_id', 'quiz_id']);
         });
diff --git a/database/migrations/2025_05_21_181615_create_user_progress_table.php b/database/migrations/2025_04_24_114041_create_user_progress_table.php
similarity index 78%
rename from database/migrations/2025_05_21_181615_create_user_progress_table.php
rename to database/migrations/2025_04_24_114041_create_user_progress_table.php
index ade2eda..d3182a9 100644
--- a/database/migrations/2025_05_21_181615_create_user_progress_table.php
+++ b/database/migrations/2025_04_24_114041_create_user_progress_table.php
@@ -15,12 +15,13 @@ public function up(): void
     {
         Schema::create('user_progress', function (Blueprint $table) {
             $table->id();
+            // Foreign keys linking to users and lessons
             $table->foreignId('user_id')->constrained()->onDelete('cascade');
             $table->foreignId('lesson_id')->constrained()->onDelete('cascade');
-            $table->timestamp('completed_at')->useCurrent();
+            $table->timestamp('completed_at')->useCurrent(); // Record when completed
             $table->timestamps();
 
-            // A user can complete a specific lesson only once.
+            // IMPORTANT: A user can complete a specific lesson only once
             $table->unique(['user_id', 'lesson_id']);
         });
     }
diff --git a/database/migrations/2025_05_22_184048_create_learning_paths_table.php b/database/migrations/2025_05_17_165334_create_learning_paths_table.php
similarity index 100%
rename from database/migrations/2025_05_22_184048_create_learning_paths_table.php
rename to database/migrations/2025_05_17_165334_create_learning_paths_table.php
diff --git a/database/migrations/2025_05_22_184102_create_learning_path_course_table.php b/database/migrations/2025_05_17_170453_create_learning_path_course_table.php
similarity index 72%
rename from database/migrations/2025_05_22_184102_create_learning_path_course_table.php
rename to database/migrations/2025_05_17_170453_create_learning_path_course_table.php
index b9a5376..6206d5d 100644
--- a/database/migrations/2025_05_22_184102_create_learning_path_course_table.php
+++ b/database/migrations/2025_05_17_170453_create_learning_path_course_table.php
@@ -17,10 +17,10 @@ public function up(): void
             $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->unsignedSmallInteger('order')->default(0); // Order of the course in the path
+            $table->timestamps(); // Usually not needed for simple pivot unless tracking when added
 
-            $table->unique(['learning_path_id', 'course_id']);
+            $table->unique(['learning_path_id', 'course_id']); // A course appears once per path
             $table->index(['learning_path_id', 'order']);
         });
     }
diff --git a/database/migrations/2025_05_22_184123_create_external_resources_table.php b/database/migrations/2025_05_20_115956_create_external_resources_table.php
similarity index 100%
rename from database/migrations/2025_05_22_184123_create_external_resources_table.php
rename to database/migrations/2025_05_20_115956_create_external_resources_table.php
diff --git a/database/seeders/ExternalResourceSeeder.php b/database/seeders/ExternalResourceSeeder.php
new file mode 100644
index 0000000..08e9d06
--- /dev/null
+++ b/database/seeders/ExternalResourceSeeder.php
@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\ExternalResource;
+use App\Models\Lesson;
+use Illuminate\Database\Seeder;
+
+final class ExternalResourceSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        ExternalResource::truncate();
+
+        $lessonDeclare = Lesson::where('slug', 'declaring-variables')->first();
+        if ($lessonDeclare) {
+            ExternalResource::create([
+                'lesson_id' => $lessonDeclare->id,
+                'title' => 'MDN: let keyword',
+                'url' => 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let',
+                'type' => 'documentation',
+                'description' => 'Detailed documentation on the `let` keyword from Mozilla Developer Network.',
+            ]);
+            ExternalResource::create([
+                'lesson_id' => $lessonDeclare->id,
+                'title' => 'Understanding var, let, and const in JavaScript (Video)',
+                'url' => 'https://www.youtube.com/watch?v=s-hLgT_t3uA', // Example video
+                'type' => 'video',
+                'description' => 'A video explaining the differences and use cases for variable declarations.',
+            ]);
+        }
+
+        $lessonTypes = Lesson::where('slug', 'primitive-data-types')->first();
+        if ($lessonTypes) {
+            ExternalResource::create([
+                'lesson_id' => $lessonTypes->id,
+                'title' => 'MDN: JavaScript data types and data structures',
+                'url' => 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures',
+                'type' => 'documentation',
+            ]);
+        }
+        // Add more resources for other lessons...
+    }
+}
diff --git a/database/seeders/LearningPathCourseSeeder.php b/database/seeders/LearningPathCourseSeeder.php
new file mode 100644
index 0000000..5fe8586
--- /dev/null
+++ b/database/seeders/LearningPathCourseSeeder.php
@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\Course;
+use App\Models\LearningPath;
+use Illuminate\Database\Seeder;
+
+final class LearningPathCourseSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        // DB::table('learning_path_course')->truncate();
+
+        $pathFrontend = LearningPath::where('slug', 'frontend-developer-path')->first();
+        $pathBackend = LearningPath::where('slug', 'backend-javascript-developer-path')->first();
+        $pathFullstack = LearningPath::where('slug', 'full-stack-javascript-path')->first();
+
+        $courseFundamentals = Course::where('slug', 'javascript-fundamentals')->first();
+        $courseIntermediate = Course::where('slug', 'intermediate-web-dev-js')->first();
+        $courseAdvanced = Course::where('slug', 'advanced-js-nodejs')->first();
+
+        if ($pathFrontend && $courseFundamentals) {
+            $pathFrontend->courses()->attach($courseFundamentals->id, ['order' => 1]);
+        }
+        if ($pathFrontend && $courseIntermediate) {
+            $pathFrontend->courses()->attach($courseIntermediate->id, ['order' => 2]);
+        }
+
+        if ($pathBackend && $courseFundamentals) {
+            $pathBackend->courses()->attach($courseFundamentals->id, ['order' => 1]);
+        }
+        if ($pathBackend && $courseAdvanced) {
+            $pathBackend->courses()->attach($courseAdvanced->id, ['order' => 2]);
+        }
+
+        if ($pathFullstack && $courseFundamentals) {
+            $pathFullstack->courses()->attach($courseFundamentals->id, ['order' => 1]);
+        }
+        if ($pathFullstack && $courseIntermediate) {
+            $pathFullstack->courses()->attach($courseIntermediate->id, ['order' => 2]);
+        }
+        if ($pathFullstack && $courseAdvanced) {
+            $pathFullstack->courses()->attach($courseAdvanced->id, ['order' => 3]);
+        }
+    }
+}
diff --git a/database/seeders/LearningPathSeeder.php b/database/seeders/LearningPathSeeder.php
new file mode 100644
index 0000000..6187b85
--- /dev/null
+++ b/database/seeders/LearningPathSeeder.php
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Seeders;
+
+use App\Models\LearningPath;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Str;
+
+final class LearningPathSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        LearningPath::truncate();
+
+        LearningPath::create([
+            'name' => 'Frontend Developer Path',
+            'slug' => Str::slug('Frontend Developer Path'),
+            'description' => 'Learn the essentials of frontend web development, focusing on JavaScript, HTML, CSS, and modern frameworks.',
+            'is_active' => true,
+        ]);
+
+        LearningPath::create([
+            'name' => 'Backend JavaScript Developer Path',
+            'slug' => Str::slug('Backend JavaScript Developer Path'),
+            'description' => 'Master server-side JavaScript with Node.js, Express, and databases to build robust APIs and web applications.',
+            'is_active' => true,
+        ]);
+
+        LearningPath::create([
+            'name' => 'Full-Stack JavaScript Path',
+            'slug' => Str::slug('Full-Stack JavaScript Path'),
+            'description' => 'Become proficient in both frontend and backend JavaScript technologies for a comprehensive skill set.',
+            'is_active' => true,
+        ]);
+    }
+}
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 78af1b4..ca14801 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
 import { type BreadcrumbItem } from '@/types';
-import { Head } from '@inertiajs/vue3';
+import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -10,19 +11,62 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-defineProps({
+const props = defineProps({
     quizAttempts: Array,
+    learningPaths: Array,
+    nextSuggestedCourse: Object,
 });
 
+const page = usePage();
+
+const preferencesForm = useForm({
+    preferred_learning_style: page.props.auth.user?.preferred_learning_style || 'reading',
+    learning_path_id: page.props.auth.user?.learning_path_id || null,
+});
+
+const successMessage = computed(() => page.props.flash?.success);
+const errorMessage = computed(() => page.props.flash?.error);
+const submitPreferences = () => {
+    preferencesForm.patch(route('user.preferences.update'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            // TODO: Maybe show a success notification
+            // OR preferencesForm.reset(); // if want to clear form after successful save
+        },
+        onError: (errors) => {
+            console.error('Preference update errors:', errors);
+        },
+    });
+};
 const formatDate = (dateString) => {
     if (!dateString) return 'N/A';
     return new Date(dateString).toLocaleString();
 };
+
+const learningStyleOptions = [
+    { value: 'reading', label: 'Reading Preferred' },
+    { value: 'visual', label: 'Visuals Preferred (e.g., Videos)' },
+];
+
+const currentLearningPathName = computed(() => {
+    if (page.props.auth.user?.learning_path_id && props.learningPaths) {
+        const path = props.learningPaths.find((p) => p.id === page.props.auth.user.learning_path_id);
+        return path ? path.name : 'Not Set';
+    }
+    return 'Not Set';
+});
 </script>
 
 <template>
     <Head title="Dashboard" />
 
+    <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>
+    <div v-if="errorMessage" class="fixed top-4 right-4 z-50 mb-4 rounded border border-red-400 bg-red-100 p-4 text-red-700 shadow-lg">
+        {{ errorMessage }}
+    </div>
+
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="py-12">
             <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
@@ -30,15 +74,119 @@ const formatDate = (dateString) => {
                     <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
                 </div>
 
-                <!-- Quiz History -->
+                <!-- Learning Preferences Section -->
+                <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">
+                        <h3 class="mb-4 border-b pb-2 text-xl font-semibold">My Learning Preferences</h3>
+                        <form @submit.prevent="submitPreferences" class="space-y-6">
+                            <!-- Learning Path Selection -->
+                            <div>
+                                <label for="learning_path_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    My Learning Path:
+                                </label>
+                                <select
+                                    id="learning_path_id"
+                                    v-model="preferencesForm.learning_path_id"
+                                    class="mt-1 block w-full rounded-md border-gray-300 py-2 pr-10 pl-3 text-base focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                >
+                                    <option :value="null">-- Select a Path --</option>
+                                    <option v-for="path in learningPaths" :key="path.id" :value="path.id">
+                                        {{ path.name }}
+                                    </option>
+                                </select>
+                                <p v-if="preferencesForm.errors.learning_path_id" class="mt-2 text-sm text-red-600">
+                                    {{ preferencesForm.errors.learning_path_id }}
+                                </p>
+                                <p
+                                    v-if="
+                                        preferencesForm.learning_path_id &&
+                                        learningPaths.find((p) => p.id === preferencesForm.learning_path_id)?.description
+                                    "
+                                    class="mt-2 text-xs text-gray-500 dark:text-gray-400"
+                                >
+                                    {{ learningPaths.find((p) => p.id === preferencesForm.learning_path_id).description }}
+                                </p>
+                            </div>
+
+                            <!-- Learning Style Selection -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300"> Preferred Learning Style: </label>
+                                <fieldset class="mt-2">
+                                    <legend class="sr-only">Learning Style</legend>
+                                    <div class="space-y-2">
+                                        <div v-for="style in learningStyleOptions" :key="style.value" class="flex items-center">
+                                            <input
+                                                :id="`style_${style.value}`"
+                                                type="radio"
+                                                :value="style.value"
+                                                v-model="preferencesForm.preferred_learning_style"
+                                                class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700"
+                                            />
+                                            <label :for="`style_${style.value}`" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
+                                                {{ style.label }}
+                                            </label>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                                <p v-if="preferencesForm.errors.preferred_learning_style" class="mt-2 text-sm text-red-600">
+                                    {{ preferencesForm.errors.preferred_learning_style }}
+                                </p>
+                            </div>
+
+                            <div>
+                                <button
+                                    type="submit"
+                                    :disabled="preferencesForm.processing"
+                                    class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50"
+                                >
+                                    Save Preferences
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Next Suggested Course -->
+                <div v-if="nextSuggestedCourse" 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">
+                        <h3 class="mb-2 text-xl font-semibold">Next in Your Path: {{ currentLearningPathName }}</h3>
+                        <div class="rounded-md border bg-gray-50 p-4 dark:bg-gray-700/50">
+                            <h4 class="text-lg font-medium text-blue-700 dark:text-blue-400">{{ nextSuggestedCourse.title }}</h4>
+                            <p class="mt-1 mb-3 text-sm text-gray-600 dark:text-gray-400">{{ nextSuggestedCourse.description }}</p>
+                            <Link
+                                :href="route('courses.show', { course: nextSuggestedCourse.slug })"
+                                class="inline-flex items-center rounded border border-transparent bg-blue-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
+                            >
+                                Go to Course
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="page.props.auth.user?.learning_path_id" 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">
+                        <h3 class="mb-2 text-xl font-semibold">Your Learning Path: {{ currentLearningPathName }}</h3>
+                        <p class="font-medium text-green-600 dark:text-green-400">
+                            Congratulations! You've completed all available courses in this path.
+                        </p>
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Check back later for new courses or explore other learning paths!</p>
+                    </div>
+                </div>
+
+                <!-- Quiz History Section -->
                 <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="mb-4 text-xl font-semibold">Recent Quiz Attempts</h3>
-                        <div v-if="quizAttempts && quizAttempts.length > 0">
+                        <div v-if="props.quizAttempts && props.quizAttempts.length > 0">
                             <ul class="space-y-3">
                                 <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="font-medium">{{ attempt.quiz?.title ?? 'Random Review Quiz' }}</span>
+                                        <!-- Add type indicator -->
+                                        <span
+                                            v-if="attempt.type === 'random'"
+                                            class="ml-1 rounded bg-indigo-100 px-1.5 py-0.5 text-xs font-semibold text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300"
+                                            >Random</span
+                                        >
                                         <span class="ml-2 text-sm text-gray-500 dark:text-gray-400"> on {{ formatDate(attempt.completed_at) }} </span>
                                     </div>
                                     <span
diff --git a/resources/js/pages/RandomQuiz/Show.vue b/resources/js/pages/RandomQuiz/Show.vue
index 1632a6e..7b94706 100644
--- a/resources/js/pages/RandomQuiz/Show.vue
+++ b/resources/js/pages/RandomQuiz/Show.vue
@@ -67,7 +67,6 @@ const allAnswered = computed(() => {
 
                             <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">
@@ -176,5 +175,3 @@ const allAnswered = computed(() => {
         </div>
     </AppLayout>
 </template>
-
-<style scoped></style>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index f11f406..8234094 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -71,9 +71,9 @@ const submit = () => {
                     <InputError :message="form.errors.password" />
                 </div>
 
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" :tabindex="3">
                     <Label for="remember" class="flex items-center space-x-3">
-                        <Checkbox id="remember" v-model="form.remember" :tabindex="3" />
+                        <Checkbox id="remember" v-model="form.remember" :tabindex="4" />
                         <span>Remember me</span>
                     </Label>
                 </div>
diff --git a/resources/js/pages/courses/Index.vue b/resources/js/pages/courses/Index.vue
index ca8064b..997bae9 100644
--- a/resources/js/pages/courses/Index.vue
+++ b/resources/js/pages/courses/Index.vue
@@ -5,38 +5,40 @@ import { Head, Link } from '@inertiajs/vue3';
 defineProps({
     courses: Array,
 });
+
+defineOptions({ layout: AppLayout });
 </script>
 
 <template>
-    <AppLayout>
-        <Head title="Courses" />
+    <Head title="Courses" />
 
-        <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 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="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 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>
         </div>
-    </AppLayout>
+    </div>
 </template>
+
+<style scoped></style>
diff --git a/resources/js/pages/courses/Show.vue b/resources/js/pages/courses/Show.vue
index c770f4e..42b2464 100644
--- a/resources/js/pages/courses/Show.vue
+++ b/resources/js/pages/courses/Show.vue
@@ -5,93 +5,95 @@ import { Head, Link } from '@inertiajs/vue3';
 defineProps({
     course: Object,
 });
+
+defineOptions({ layout: AppLayout });
 </script>
 
 <template>
-    <AppLayout>
-        <Head :title="course.title" />
+    <Head :title="course.title" />
 
-        <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>
+    <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="mb-2 text-3xl font-semibold">{{ course.title }}</h2>
-                        <p class="mb-6 text-gray-600 dark:text-gray-400">{{ 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>
 
-                        <!-- 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"
+                    <!-- 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"
                         >
-                            <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>
+                            Take Placement Assessment
+                        </Link>
+                    </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-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>
 
-                                <!-- 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>
+                            <!-- 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 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
                                             >
-                                                {{ quiz.title }}
-                                                <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400">
-                                                    - {{ quiz.description }}</span
-                                                >
-                                            </Link>
-                                        </li>
-                                    </ul>
-                                </div>
+                                        </Link>
+                                    </li>
+                                </ul>
                             </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 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>
-    </AppLayout>
+    </div>
 </template>
+
+<style scoped></style>
diff --git a/resources/js/pages/courses/assessment/Result.vue b/resources/js/pages/courses/assessment/Result.vue
new file mode 100644
index 0000000..fc8cfe5
--- /dev/null
+++ b/resources/js/pages/courses/assessment/Result.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    course: Object,
+    score: Number,
+    recommendationMessage: String,
+    recommendedLessonSlug: String,
+    firstLessonSlug: String,
+});
+
+const lessonUrl = (lessonSlug) => {
+    if (!lessonSlug) return '#'; // Fallback
+    return route('lessons.show', { course: props.course.slug, lesson: lessonSlug });
+};
+
+console.log(props.recommendedLessonSlug);
+</script>
+
+<template>
+    <Head :title="`Assessment Results: ${course.title}`" />
+
+    <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-4 text-2xl font-semibold md:text-3xl">Assessment Results: {{ course.title }}</h2>
+
+                    <!-- Score Display -->
+                    <div class="mb-6 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>
+                        <!-- Basic score color, adjust if needed -->
+                        <p
+                            class="text-5xl font-bold"
+                            :class="{
+                                'text-green-600 dark:text-green-400': score >= 80,
+                                'text-yellow-600 dark:text-yellow-400': score >= 50 && score < 80,
+                                'text-red-600 dark:text-red-400': score < 50,
+                            }"
+                        >
+                            {{ score }}%
+                        </p>
+                    </div>
+
+                    <!-- Recommendation -->
+                    <div class="mb-8 rounded-lg border border-blue-300 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/30">
+                        <h3 class="mb-2 text-lg font-semibold text-blue-800 dark:text-blue-300">Recommendation</h3>
+                        <p class="text-blue-700 dark:text-blue-400">{{ recommendationMessage }}</p>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex flex-wrap justify-center gap-4 border-t pt-6">
+                        <Link
+                            v-if="recommendedLessonSlug"
+                            :href="lessonUrl(recommendedLessonSlug)"
+                            class="inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase ring-blue-300 transition duration-150 ease-in-out hover:bg-blue-700 focus:border-blue-900 focus:ring focus:outline-none active:bg-blue-800"
+                        >
+                            Start at Recommended Lesson
+                        </Link>
+                        <Link
+                            v-if="firstLessonSlug && recommendedLessonSlug !== firstLessonSlug"
+                            :href="lessonUrl(firstLessonSlug)"
+                            class="inline-flex items-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase ring-gray-300 transition duration-150 ease-in-out hover:bg-gray-700 focus:border-gray-900 focus:ring focus:outline-none active:bg-gray-800"
+                        >
+                            Start from Beginning
+                        </Link>
+                        <Link
+                            :href="route('courses.show', { course: course.slug })"
+                            class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold tracking-widest text-gray-700 uppercase shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:opacity-25 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800"
+                        >
+                            Back to Course Overview
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/courses/assessment/Show.vue b/resources/js/pages/courses/assessment/Show.vue
new file mode 100644
index 0000000..8613c2c
--- /dev/null
+++ b/resources/js/pages/courses/assessment/Show.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import { Head, useForm } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    course: Object,
+    quiz: Object,
+});
+
+console.log(props.quiz);
+defineOptions({ layout: AppLayout });
+
+const form = useForm({
+    answers: {},
+});
+
+props.quiz.questions.forEach((q) => {
+    form.answers[q.id] = null;
+});
+
+const submitQuiz = () => {
+    const unanswered = props.quiz.questions.some((q) => form.answers[q.id] === null);
+    if (unanswered && !confirm('You have unanswered questions. Submit anyway?')) {
+        return;
+    }
+
+    form.post(route('course.assessment.submit', { course: props.course.slug }), {
+        preserveScroll: true,
+        onError: (errors) => {
+            console.error('Submission errors:', errors);
+            alert('There was an error submitting your answers. Please check the console.');
+        },
+    });
+};
+
+const allAnswered = computed(() => {
+    if (!props.quiz?.questions || props.quiz.questions.length === 0) return true;
+    return props.quiz.questions.every((q) => {
+        const answer = form.answers[q.id];
+        return answer !== null && answer !== undefined && answer !== '';
+    });
+});
+</script>
+
+<template>
+    <Head :title="`Quiz: ${quiz.title}`" />
+
+    <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">{{ 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="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
+
+                                <!-- Render Multiple Choice Options -->
+                                <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>
+
+                                <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>
+                        </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 v-else>
+                                <p>This quiz doesn't have any questions yet.</p>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/courses/review/Show.vue b/resources/js/pages/courses/review/Show.vue
new file mode 100644
index 0000000..8bc1d17
--- /dev/null
+++ b/resources/js/pages/courses/review/Show.vue
@@ -0,0 +1,210 @@
+<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({
+    course: Object,
+    quizData: Object,
+    message: String,
+});
+
+const form = useForm({
+    answers: {},
+    quizId: props.quizData?.id || null,
+});
+
+if (props.quizData && props.quizData.questions) {
+    props.quizData.questions.forEach((q) => {
+        form.answers[q.id] = null;
+    });
+}
+
+const submitQuiz = () => {
+    if (!props.quizData || !props.course) return;
+
+    form.post(route('course.review.submit', { course: props.course.slug }), {
+        preserveScroll: true,
+        onError: (errors) => {
+            console.error('Submission errors:', errors);
+            alert('Error submitting review 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) => {
+        const answer = form.answers[q.id];
+        return answer !== null && answer !== undefined && (typeof answer === 'string' ? answer.trim() !== '' : true);
+    });
+});
+
+const quizPageTitle = computed(() => {
+    return props.quizData?.title || `Review: ${props.course?.title || 'Course'}`;
+});
+const quizMainTitle = computed(() => {
+    return props.quizData?.title || `Final Review: ${props.course?.title || 'Course'}`;
+});
+const quizDescription = computed(() => {
+    return props.quizData?.description || `This quiz will test your knowledge on topics covered in the '${props.course?.title || 'Course'}'.`;
+});
+</script>
+
+<template>
+    <AppLayout>
+        <Head :title="quizPageTitle" />
+
+        <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">
+                        <div class="mb-4">
+                            <Link
+                                :href="route('courses.show', { course: course.slug })"
+                                class="text-sm text-blue-600 hover:underline dark:text-blue-400"
+                            >
+                                « Back to {{ course.title }}
+                            </Link>
+                        </div>
+
+                        <h2 class="mb-2 text-2xl font-semibold md:text-3xl">{{ quizMainTitle }}</h2>
+
+                        <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('courses.show', { course: course.slug })" class="font-medium text-blue-600 hover:underline">
+                                    Return to Course
+                                </Link>
+                            </div>
+                        </div>
+
+                        <!-- Display Quiz Form if generated -->
+                        <div v-if="quizData">
+                            <p class="mb-6 text-gray-600 dark:text-gray-400">{{ quizDescription }}</p>
+
+                            <form @submit.prevent="submitQuiz">
+                                <div v-if="quizData.questions && quizData.questions.length > 0" class="space-y-6">
+                                    <div
+                                        v-for="(question, index) in quizData.questions"
+                                        :key="question.id"
+                                        class="border-t pt-6 dark:border-gray-700"
+                                    >
+                                        <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
+                                        <!-- Multiple Choice -->
+                                        <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:border-gray-700 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 dark:border-gray-600"
+                                                />
+                                                <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:border-gray-700 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 dark:border-gray-600"
+                                                />
+                                                <span>True</span>
+                                            </label>
+                                            <label
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:border-gray-700 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 dark:border-gray-600"
+                                                />
+                                                <span>False</span>
+                                            </label>
+                                        </div>
+
+                                        <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>
+
+                                    <div class="mt-8 border-t pt-6 dark:border-gray-700">
+                                        <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 Review 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 class="mt-6">
+                                    <p class="text-gray-500 italic">No questions available for this review quiz at the moment.</p>
+                                </div>
+                            </form>
+                        </div>
+                        <div v-else-if="!message" class="mt-6">
+                            <p class="text-gray-500 italic">Loading review quiz or no review available...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+/* Add any specific styles if needed */
+</style>
diff --git a/resources/js/pages/lessons/Show.vue b/resources/js/pages/lessons/Show.vue
index 8b99489..115f427 100644
--- a/resources/js/pages/lessons/Show.vue
+++ b/resources/js/pages/lessons/Show.vue
@@ -9,10 +9,11 @@ const props = defineProps({
     course: Object,
 });
 
+defineOptions({ layout: AppLayout });
+
 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 || '');
@@ -71,7 +72,7 @@ const runCode = () => {
                         try {
                             return JSON.stringify(arg);
                         } catch (e) {
-                            console.log(e);
+                            console.error(e);
                             return 'Unserializable Object';
                         }
                     }
@@ -119,122 +120,127 @@ const runCode = () => {
     }
 };
 
-const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'balanced');
+const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'reading');
 </script>
 
 <template>
-    <AppLayout>
-        <Head :title="lesson.title" />
+    <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>
+
+    <div class="py-12">
+        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+            <!-- Changed to full width for better layout potentially -->
+            <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">
+                        <!-- Breadcrumb/Back Link -->
+                        <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 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="mb-4 text-3xl font-semibold">{{ 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>
-
-                            <h2 class="mb-4 text-3xl font-semibold">{{ lesson.title }}</h2>
-
-                            <!-- 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>
+                        <!-- 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>
+                            <!-- This div is for aspect ratio styling. Install @tailwindcss/aspect-ratio if you haven't -->
+                            <div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-md shadow-lg" v-html="lesson.video_embed_html"></div>
                         </div>
-                    </div>
 
-                    <!-- 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 -->
+                        <!-- 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>
 
-                        <!-- 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>
+                        <!-- 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>
+                    </div>
+                </div>
+
+                <!-- 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">
+                    <!-- Fixed height container -->
+                    <!-- Editor Area -->
+                    <div ref="editorContainer" class="h-1/2 flex-grow">
+                        <!-- Monaco Editor will be mounted here -->
+                    </div>
 
-                        <!-- 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
-                            >
+                    <!-- 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>
+
+                    <!-- 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>
-    </AppLayout>
+    </div>
 </template>
 
 <style scoped>
+/* Basic styling for content rendered via v-html, if needed */
+/* Add Tailwind's Typography plugin (@tailwindcss/typography) for better prose styling */
 .prose code {
-    background-color: #f3f4f6;
+    background-color: #f3f4f6; /* Light gray background for inline code */
     padding: 0.2em 0.4em;
     margin: 0;
     font-size: 85%;
     border-radius: 3px;
 }
 .dark .prose code {
-    background-color: #374151;
+    background-color: #374151; /* Darker gray for dark mode */
     color: #e5e7eb;
 }
 .prose p {
     margin-bottom: 1em;
 }
 
+/* Give editor container a minimum height */
 [ref='editorContainer'] {
-    min-height: 200px;
-    height: 100%;
+    min-height: 200px; /* Adjust as needed */
+    height: 100%; /* Allow it to fill flex space */
 }
 </style>
diff --git a/resources/js/pages/quizzes/Result.vue b/resources/js/pages/quizzes/Result.vue
index 474a5d3..22f3640 100644
--- a/resources/js/pages/quizzes/Result.vue
+++ b/resources/js/pages/quizzes/Result.vue
@@ -36,6 +36,7 @@ const scoreColorClass = computed(() => {
                     <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>
 
+                        <!-- Score Display -->
                         <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>
@@ -44,7 +45,6 @@ const scoreColorClass = computed(() => {
                             </p>
                             <p v-if="attempt.type === 'random'" class="mt-1 text-xs text-gray-400 dark:text-gray-500">(Random Review)</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"
@@ -104,32 +104,8 @@ const scoreColorClass = computed(() => {
                                 </li>
                             </ul>
                         </div>
-
-                        <!-- 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>
diff --git a/resources/js/pages/quizzes/Show.vue b/resources/js/pages/quizzes/Show.vue
index 8bd3a3e..b3c0d26 100644
--- a/resources/js/pages/quizzes/Show.vue
+++ b/resources/js/pages/quizzes/Show.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
@@ -6,6 +7,8 @@ const props = defineProps({
     quiz: Object,
 });
 
+console.log(props.quiz);
+
 const form = useForm({
     answers: {},
 });
@@ -14,8 +17,6 @@ props.quiz.questions.forEach((q) => {
     form.answers[q.id] = null;
 });
 
-console.log(props.quiz.questions);
-
 const submitQuiz = () => {
     // Ensure all questions are answered
     const unanswered = props.quiz.questions.some((q) => form.answers[q.id] === null);
@@ -33,46 +34,97 @@ 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);
+    if (!props.quiz?.questions || props.quiz.questions.length === 0) return true;
+    return props.quiz.questions.every((q) => {
+        const answer = form.answers[q.id];
+        return answer !== null && answer !== undefined && answer !== '';
+    });
 });
 </script>
 
 <template>
-    <Head :title="`Quiz: ${quiz.title}`" />
-
-    <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">{{ 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="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
-
-                                <!-- Multiple Choice Options -->
-                                <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,
-                                        }"
-                                    >
+    <AppLayout>
+        <Head :title="`Quiz: ${quiz.title}`" />
+
+        <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">{{ 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="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
+
+                                    <!-- Render Multiple Choice Options -->
+                                    <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>
+
+                                    <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="radio"
-                                            :name="`question_${question.id}`"
-                                            :value="option.id"
+                                            type="text"
                                             v-model="form.answers[question.id]"
-                                            class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                            :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"
                                         />
-                                        <span>{{ option.text }}</span>
-                                    </label>
+                                    </div>
                                 </div>
                             </div>
 
@@ -100,14 +152,17 @@ const allAnswered = computed(() => {
                                     <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 v-else>
+                                    <p>This quiz doesn't have any questions yet.</p>
+                                </div>
                             </div>
-                        </div>
-                        <div v-else>
-                            <p>This quiz doesn't have any questions yet.</p>
-                        </div>
-                    </form>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
+
+<style scoped></style>
diff --git a/resources/js/pages/stats/Show.vue b/resources/js/pages/stats/Show.vue
new file mode 100644
index 0000000..d4f5c34
--- /dev/null
+++ b/resources/js/pages/stats/Show.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import { Head } from '@inertiajs/vue3';
+import { ArcElement, BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
+import { Bar, Pie } from 'vue-chartjs';
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, BarElement);
+
+const props = defineProps({
+    totalQuizzesAttempted: Number,
+    learningStreak: Number,
+    quizScoreDistribution: Object,
+    lessonContributionData: Array,
+});
+
+// --- Pie Chart Data & Options ---
+const pieChartData = {
+    labels: ['Excellent (80-100%)', 'Good (50-79%)', 'Needs Improvement (<50%)'],
+    datasets: [
+        {
+            backgroundColor: ['#4CAF50', '#FFC107', '#F44336'], // Green, Yellow, Red
+            data: [props.quizScoreDistribution.green || 0, props.quizScoreDistribution.yellow || 0, props.quizScoreDistribution.red || 0],
+        },
+    ],
+};
+
+const pieChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            position: 'top',
+        },
+        title: {
+            display: true,
+            text: 'Quiz Score Distribution',
+        },
+    },
+};
+
+// --- Contribution Graph Data & Options (Bar Chart for now) ---
+const processContributionDataForBarChart = () => {
+    const monthlyCompletions = {};
+    props.lessonContributionData?.forEach((item) => {
+        const monthYear = item.date.substring(0, 7); // YYYY-MM
+        if (!monthlyCompletions[monthYear]) {
+            monthlyCompletions[monthYear] = 0;
+        }
+        monthlyCompletions[monthYear] += item.count;
+    });
+
+    const labels = Object.keys(monthlyCompletions).sort();
+    const data = labels.map((label) => monthlyCompletions[label]);
+
+    return {
+        labels: labels.map((label) => new Date(label + '-01').toLocaleString('default', { month: 'short', year: 'numeric' })), // Format for display
+        datasets: [
+            {
+                label: 'Lessons Completed',
+                backgroundColor: '#3B82F6',
+                data: data,
+            },
+        ],
+    };
+};
+
+const contributionBarChartData = processContributionDataForBarChart();
+
+const contributionBarChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false,
+        },
+        title: {
+            display: true,
+            text: 'Monthly Lesson Completions (Last Year)',
+        },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            ticks: {
+                precision: 0,
+            },
+        },
+    },
+};
+</script>
+
+<template>
+    <Head title="My Statistics" />
+    <AppLayout>
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl space-y-8 sm:px-6 lg:px-8">
+                <!-- Header -->
+                <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="text-2xl font-semibold">My Learning Statistics</h2>
+                    </div>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+                    <div class="overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800">
+                        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Learning Streak</h3>
+                        <p class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+                            {{ learningStreak }} {{ learningStreak === 1 ? 'Day' : 'Days' }}
+                        </p>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Consecutive days with lesson completions.</p>
+                    </div>
+                    <div class="overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800">
+                        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Quizzes Attempted</h3>
+                        <p class="mt-1 text-3xl font-semibold text-indigo-600 dark:text-indigo-400">
+                            {{ totalQuizzesAttempted }}
+                        </p>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Total number of quizzes you've started.</p>
+                    </div>
+                </div>
+
+                <!-- Charts Section -->
+                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                    <!-- Pie Chart -->
+                    <div class="overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800">
+                        <div class="h-80 md:h-96">
+                            <!-- Set a fixed height for the chart container -->
+                            <Pie
+                                v-if="quizScoreDistribution.green || quizScoreDistribution.yellow || quizScoreDistribution.red"
+                                :data="pieChartData"
+                                :options="pieChartOptions"
+                            />
+                            <div v-else class="flex h-full items-center justify-center text-gray-500 dark:text-gray-400">
+                                No quiz data yet to display distribution.
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Contribution Bar Chart -->
+                    <div class="overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800">
+                        <div class="h-80 md:h-96">
+                            <!-- Set a fixed height for the chart container -->
+                            <Bar v-if="lessonContributionData.length > 0" :data="contributionBarChartData" :options="contributionBarChartOptions" />
+                            <div v-else class="flex h-full items-center justify-center text-gray-500 dark:text-gray-400">
+                                No lesson completion data yet.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>