From fb79697fded2157ceefe49f00b1d670eefd1f682 Mon Sep 17 00:00:00 2001
From: DimGiagias <dim71gia@gmail.com>
Date: Sun, 25 May 2025 00:55:41 +0300
Subject: [PATCH 1/5] fix: fixed seeding issue

---
 .../0001_01_01_000000_create_users_table.php  | 13 ++++-
 ...025_04_17_141934_create_lessons_table.php} |  3 +-
 ...025_04_17_141934_create_modules_table.php} |  0
 ...025_04_17_142012_create_courses_table.php} |  1 +
 ...025_04_22_192107_create_quizzes_table.php} |  0
 ...5_04_22_192108_create_questions_table.php} |  3 ++
 ...4_22_192108_create_quiz_answers_table.php} |  5 +-
 ..._22_192108_create_quiz_attempts_table.php} |  3 +-
 ...04_22_192603_create_lesson_quiz_table.php} |  2 +-
 ..._24_114041_create_user_progress_table.php} |  5 +-
 ...17_165334_create_learning_paths_table.php} |  0
 ...453_create_learning_path_course_table.php} |  6 +--
 ...15956_create_external_resources_table.php} |  0
 database/seeders/ExternalResourceSeeder.php   | 49 +++++++++++++++++
 database/seeders/LearningPathCourseSeeder.php | 52 +++++++++++++++++++
 database/seeders/LearningPathSeeder.php       | 41 +++++++++++++++
 16 files changed, 171 insertions(+), 12 deletions(-)
 rename database/migrations/{2025_04_27_192057_create_lessons_table.php => 2025_04_17_141934_create_lessons_table.php} (84%)
 rename database/migrations/{2025_04_27_192057_create_modules_table.php => 2025_04_17_141934_create_modules_table.php} (100%)
 rename database/migrations/{2025_04_27_192057_create_courses_table.php => 2025_04_17_142012_create_courses_table.php} (89%)
 rename database/migrations/{2025_04_28_131921_create_quizzes_table.php => 2025_04_22_192107_create_quizzes_table.php} (100%)
 rename database/migrations/{2025_04_28_131922_create_questions_table.php => 2025_04_22_192108_create_questions_table.php} (85%)
 rename database/migrations/{2025_04_28_131922_create_quiz_answers_table.php => 2025_04_22_192108_create_quiz_answers_table.php} (79%)
 rename database/migrations/{2025_04_28_131922_create_quiz_attempts_table.php => 2025_04_22_192108_create_quiz_attempts_table.php} (85%)
 rename database/migrations/{2025_04_28_131923_create_lesson_quiz_table.php => 2025_04_22_192603_create_lesson_quiz_table.php} (91%)
 rename database/migrations/{2025_05_21_181615_create_user_progress_table.php => 2025_04_24_114041_create_user_progress_table.php} (78%)
 rename database/migrations/{2025_05_22_184048_create_learning_paths_table.php => 2025_05_17_165334_create_learning_paths_table.php} (100%)
 rename database/migrations/{2025_05_22_184102_create_learning_path_course_table.php => 2025_05_17_170453_create_learning_path_course_table.php} (72%)
 rename database/migrations/{2025_05_22_184123_create_external_resources_table.php => 2025_05_20_115956_create_external_resources_table.php} (100%)
 create mode 100644 database/seeders/ExternalResourceSeeder.php
 create mode 100644 database/seeders/LearningPathCourseSeeder.php
 create mode 100644 database/seeders/LearningPathSeeder.php

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,
+        ]);
+    }
+}

From 933b422b0c0038e1622ee837cd919b05346a9fcf Mon Sep 17 00:00:00 2001
From: DimGiagias <dim71gia@gmail.com>
Date: Sun, 25 May 2025 00:58:46 +0300
Subject: [PATCH 2/5] fix: fix lesson completion tracking issue

---
 app/Models/Lesson.php | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 4b8f7a4..1d531db 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
     {

From 8a82ffd0e216d6ec30348bd9d19a2f42e9b97920 Mon Sep 17 00:00:00 2001
From: DimGiagias <dim71gia@gmail.com>
Date: Sun, 25 May 2025 01:12:19 +0300
Subject: [PATCH 3/5] feat: finalized mvp ui for all teh features

---
 resources/js/pages/Dashboard.vue              | 175 ++++++++--
 resources/js/pages/RandomQuiz/Show.vue        | 252 +++++++--------
 resources/js/pages/Welcome.vue                |  48 +--
 resources/js/pages/auth/ForgotPassword.vue    |   2 +-
 resources/js/pages/auth/Login.vue             |   6 +-
 resources/js/pages/auth/Register.vue          |   2 +-
 resources/js/pages/courses/Index.vue          |  54 ++--
 resources/js/pages/courses/Show.vue           | 153 ++++-----
 .../js/pages/courses/assessment/Result.vue    |  61 ++++
 .../js/pages/courses/assessment/Show.vue      | 173 ++++++++++
 resources/js/pages/courses/review/Show.vue    | 162 ++++++++++
 resources/js/pages/lessons/Show.vue           | 298 +++++++++---------
 resources/js/pages/quizzes/Result.vue         | 181 ++++++-----
 resources/js/pages/quizzes/Show.vue           | 159 +++++++---
 resources/js/pages/settings/Profile.vue       |   2 +-
 resources/js/pages/stats/Show.vue             | 175 ++++++++++
 16 files changed, 1337 insertions(+), 566 deletions(-)
 create mode 100644 resources/js/pages/courses/assessment/Result.vue
 create mode 100644 resources/js/pages/courses/assessment/Show.vue
 create mode 100644 resources/js/pages/courses/review/Show.vue
 create mode 100644 resources/js/pages/stats/Show.vue

diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 78af1b4..720b342 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,45 +11,177 @@ 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 p-4 bg-green-100 border border-green-400 text-green-700 rounded shadow-lg">
+        {{ successMessage }}
+    </div>
+    <div v-if="errorMessage" class="fixed top-4 right-4 z-50 mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded shadow-lg">
+        {{ errorMessage }}
+    </div>
+
     <AppLayout :breadcrumbs="breadcrumbs">
         <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="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                     <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
                 </div>
 
-                <!-- Quiz History -->
-                <div class="mt-8 overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                <!-- Learning Preferences Section -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <h3 class="text-xl font-semibold mb-4 border-b pb-2">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 pl-3 pr-10 py-2 text-base border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                                >
+                                    <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="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-700 dark:border-gray-600"
+                                            />
+                                            <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 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
+                                    Save Preferences
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+
+                <!-- Next Suggested Course -->
+                <div v-if="nextSuggestedCourse" class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <h3 class="text-xl font-semibold mb-2">Next in Your Path: {{ currentLearningPathName }}</h3>
+                        <div class="border p-4 rounded-md bg-gray-50 dark:bg-gray-700/50">
+                            <h4 class="text-lg font-medium text-blue-700 dark:text-blue-400">{{ nextSuggestedCourse.title }}</h4>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">{{ nextSuggestedCourse.description }}</p>
+                            <Link :href="route('courses.show', { course: nextSuggestedCourse.slug })"
+                                  class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                Go to Course
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="page.props.auth.user?.learning_path_id" class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                     <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <h3 class="mb-4 text-xl font-semibold">Recent Quiz Attempts</h3>
-                        <div v-if="quizAttempts && quizAttempts.length > 0">
+                        <h3 class="text-xl font-semibold mb-2">Your Learning Path: {{ currentLearningPathName }}</h3>
+                        <p class="text-green-600 dark:text-green-400 font-medium">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 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900 dark:text-gray-100">
+                        <h3 class="text-xl font-semibold mb-4">Recent Quiz Attempts</h3>
+                        <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">
+                                <li v-for="attempt in quizAttempts" :key="attempt.id" class="flex justify-between items-center border-b pb-2">
                                     <div>
-                                        <span class="font-medium">{{ attempt.quiz?.title ?? 'Quiz Deleted' }}</span>
-                                        <span class="ml-2 text-sm text-gray-500 dark:text-gray-400"> on {{ formatDate(attempt.completed_at) }} </span>
+                                        <span class="font-medium">{{ attempt.quiz?.title ?? 'Random Review Quiz' }}</span>
+                                        <!-- Add type indicator -->
+                                        <span v-if="attempt.type === 'random'" class="ml-1 text-xs font-semibold bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300 px-1.5 py-0.5 rounded">Random</span>
+                                        <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">
+                                            on {{ formatDate(attempt.completed_at) }}
+                                        </span>
                                     </div>
-                                    <span
-                                        class="text-lg font-semibold"
-                                        :class="{
-                                            'text-green-600 dark:text-green-400': attempt.score >= 80,
-                                            'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
-                                            'text-red-600 dark:text-red-400': attempt.score < 50,
-                                        }"
-                                    >
+                                    <span class="text-lg font-semibold"
+                                          :class="{
+                                        'text-green-600 dark:text-green-400': attempt.score >= 80,
+                                        'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
+                                        'text-red-600 dark:text-red-400': attempt.score < 50
+                                      }">
                                         {{ attempt.score ?? 'N/A' }}%
                                     </span>
                                 </li>
@@ -59,7 +192,9 @@ const formatDate = (dateString) => {
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
     </AppLayout>
 </template>
+
diff --git a/resources/js/pages/RandomQuiz/Show.vue b/resources/js/pages/RandomQuiz/Show.vue
index 1632a6e..ba481b3 100644
--- a/resources/js/pages/RandomQuiz/Show.vue
+++ b/resources/js/pages/RandomQuiz/Show.vue
@@ -1,180 +1,170 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quizData: Object,
-    message: String,
+    quizData: Object, // { id, title, description, questions: [...] } or null
+    message: String, // Optional message (e.g., no lessons completed)
 });
 
-console.log(props.quizData);
+//defineOptions({ layout: AppLayout });
+
+console.log(props.quizData)
+// Initialize form only if quizData exists
 const form = useForm({
     answers: {},
-    quizId: props.quizData?.id || null,
+    quizId: props.quizData?.id || null, // Include the temporary quiz ID
 });
 
 if (props.quizData) {
-    props.quizData.questions.forEach((q) => {
+    props.quizData.questions.forEach(q => {
         form.answers[q.id] = null;
     });
 }
 
 const submitQuiz = () => {
-    if (!props.quizData) return;
+    // Optional: Add confirmation for unanswered questions
+    if (!props.quizData) return; // Should not happen if button is disabled
 
-    form.post(route('random-quiz.submit'), {
+    form.post(route('random-quiz.submit'), { // Post to the correct route
         preserveScroll: true,
         onError: (errors) => {
             console.error('Submission errors:', errors);
+            // Consider showing user-friendly errors
             alert('Error submitting quiz. Check console or try again.');
-            form.processing = false;
+            // Reset processing state if needed
+            form.processing = false; // Manual reset might be needed on error
         },
+        onFinish: () => {
+            // Optional: Reset processing state if needed
+            // form.processing = false; // Might reset too early depending on Inertia flow
+        }
     });
 };
 
 const allAnswered = computed(() => {
     if (!props.quizData?.questions || props.quizData.questions.length === 0) return true;
-    return props.quizData.questions.every((q) => form.answers[q.id] !== null);
+    return props.quizData.questions.every(q => form.answers[q.id] !== null);
 });
 </script>
 
 <template>
-    <AppLayout>
-        <Head title="Random Review Quiz" />
-
-        <div class="py-12">
-            <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">
-                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
-                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
-                        <h2 class="mb-2 text-2xl font-semibold md:text-3xl">Random Review Quiz</h2>
-
-                        <!-- Display message if quiz couldn't generate -->
-                        <div
-                            v-if="message"
-                            class="mb-4 rounded-lg bg-yellow-100 p-4 text-sm text-yellow-700 dark:bg-yellow-200 dark:text-yellow-800"
-                            role="alert"
-                        >
-                            {{ message }}
-                            <div v-if="!quizData" class="mt-4">
-                                <Link :href="route('dashboard')" class="font-medium text-blue-600 hover:underline"> Go to Dashboard </Link>
-                            </div>
+
+    <Head title="Random Review Quiz" />
+
+    <div class="py-12">
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">Random Review Quiz</h2>
+
+                    <!-- Display message if quiz couldn't generate -->
+                    <div v-if="message" class="p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-lg dark:bg-yellow-200 dark:text-yellow-800" role="alert">
+                        {{ message }}
+                        <div v-if="!quizData" class="mt-4">
+                            <Link :href="route('dashboard')" class="font-medium text-blue-600 hover:underline">
+                                Go to Dashboard
+                            </Link>
                         </div>
+                    </div>
+
+                    <!-- Display Quiz Form if generated -->
+                    <div v-if="quizData">
+                        <p v-if="quizData.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quizData.description }}</p>
+
+                        <form @submit.prevent="submitQuiz">
+                            <div v-if="quizData.questions.length > 0" class="space-y-6">
+                                <!-- Question Loop (copy from Quizzes/Show.vue) -->
+                                <div v-for="(question, index) in quizData.questions" :key="question.id" class="border-t pt-6">
+                                    <p class="font-semibold mb-3">
+                                        {{ index + 1 }}. {{ question.text }}
+                                    </p>
+                                    <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
+                                        <label v-for="option in question.options" :key="option.id"
+                                               class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                                            <input
+                                                type="radio"
+                                                :name="`question_${question.id}`"
+                                                :value="option.id"
+                                                v-model="form.answers[question.id]"
+                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            />
+                                            <span>{{ option.text }}</span>
+                                        </label>
+                                    </div>
 
-                        <!-- Display Quiz Form if generated -->
-                        <div v-if="quizData">
-                            <p v-if="quizData.description" class="mb-6 text-gray-600 dark:text-gray-400">{{ quizData.description }}</p>
-
-                            <form @submit.prevent="submitQuiz">
-                                <div v-if="quizData.questions.length > 0" class="space-y-6">
-                                    <!-- Question Loop -->
-                                    <div v-for="(question, index) in quizData.questions" :key="question.id" class="border-t pt-6">
-                                        <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
-                                        <div v-if="question.type === 'multiple_choice'" class="ml-4 space-y-2">
-                                            <label
-                                                v-for="option in question.options"
-                                                :key="option.id"
-                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
-                                                :class="{
-                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
-                                                        form.answers[question.id] === option.id,
-                                                }"
-                                            >
-                                                <input
-                                                    type="radio"
-                                                    :name="`question_${question.id}`"
-                                                    :value="option.id"
-                                                    v-model="form.answers[question.id]"
-                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
-                                                />
-                                                <span>{{ option.text }}</span>
-                                            </label>
-                                        </div>
-
-                                        <!-- True/False -->
-                                        <div v-else-if="question.type === 'true_false'" class="ml-4 space-y-2">
-                                            <label
-                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
-                                                :class="{
-                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
-                                                        form.answers[question.id] === 'true',
-                                                }"
-                                            >
-                                                <input
-                                                    type="radio"
-                                                    :name="`question_${question.id}`"
-                                                    value="true"
-                                                    v-model="form.answers[question.id]"
-                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
-                                                />
-                                                <span>True</span>
-                                            </label>
-                                            <label
-                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
-                                                :class="{
-                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
-                                                        form.answers[question.id] === 'false',
-                                                }"
-                                            >
-                                                <input
-                                                    type="radio"
-                                                    :name="`question_${question.id}`"
-                                                    value="false"
-                                                    v-model="form.answers[question.id]"
-                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
-                                                />
-                                                <span>False</span>
-                                            </label>
-                                        </div>
-
-                                        <!-- Fill in the Blank -->
-                                        <div v-else-if="question.type === 'fill_blank'" class="mt-2 ml-4">
+                                    <!-- True/False -->
+                                    <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
+                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
                                             <input
-                                                type="text"
+                                                type="radio"
+                                                :name="`question_${question.id}`"
+                                                value="true"
                                                 v-model="form.answers[question.id]"
+                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            />
+                                            <span>True</span>
+                                        </label>
+                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
+                                            <input
+                                                type="radio"
                                                 :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"
+                                                value="false"
+                                                v-model="form.answers[question.id]"
+                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
                                             />
-                                        </div>
+                                            <span>False</span>
+                                        </label>
                                     </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>
+                                    <!-- Fill in the Blank -->
+                                    <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
+                                        <!-- Display question text above (already done) -->
+                                        <!-- Provide an input field for the answer -->
+                                        <input
+                                            type="text"
+                                            v-model="form.answers[question.id]"
+                                            :name="`question_${question.id}`"
+                                            placeholder="Type your answer here"
+                                            class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                        />
+                                        <!-- Optional: Add styling or hints -->
                                     </div>
                                 </div>
-                                <div v-else>
-                                    <p>Could not load questions for this quiz.</p>
+
+                                <!-- Submission Button (copy from Quizzes/Show.vue) -->
+                                <div class="mt-8 pt-6 border-t">
+                                    <button
+                                        type="submit"
+                                        :disabled="form.processing || !allAnswered"
+                                        class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    >
+                                        <!-- SVG Spinner -->
+                                        <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><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="text-sm text-red-600 mt-2">Please answer all questions.</p>
                                 </div>
-                            </form>
-                        </div>
+
+                            </div>
+                            <div v-else>
+                                <p>Could not load questions for this quiz.</p>
+                            </div>
+                        </form>
                     </div>
+
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </div>
+
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index ba9f930..3560aa5 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -7,8 +7,8 @@ import { Head, Link } from '@inertiajs/vue3';
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     </Head>
-    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
-        <header class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
+    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
+        <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
                 <Link
                     v-if="$page.props.auth.user"
@@ -33,10 +33,10 @@ import { Head, Link } from '@inertiajs/vue3';
                 </template>
             </nav>
         </header>
-        <div class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
+        <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
             <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
                 <div
-                    class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
+                    class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
                 >
                     <h1 class="mb-1 font-medium">Let's get started</h1>
                     <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
@@ -44,7 +44,7 @@ import { Head, Link } from '@inertiajs/vue3';
                     </p>
                     <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-0 before:left-[0.4rem] before:top-1/2 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -75,7 +75,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             </span>
                         </li>
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-1/2 before:left-[0.4rem] before:top-0 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -119,10 +119,10 @@ import { Head, Link } from '@inertiajs/vue3';
                     </ul>
                 </div>
                 <div
-                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]"
+                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
                 >
                     <svg
-                        class="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:translate-y-6 starting:opacity-0"
+                        class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
                         viewBox="0 0 438 104"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -148,12 +148,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         />
                     </svg>
                     <svg
-                        class="relative -mt-[4.9rem] -ml-8 w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:hidden"
+                        class="relative -ml-8 -mt-[4.9rem] w-[448px] max-w-none dark:hidden lg:-mt-[6.6rem] lg:ml-0"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -193,7 +193,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -216,7 +216,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'plus-darker' }"
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                         >
                             <path
                                 d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z"
@@ -237,7 +237,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -439,7 +439,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -454,7 +454,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -468,12 +468,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <svg
-                        class="relative -mt-[4.9rem] -ml-8 hidden w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:block"
+                        class="relative -ml-8 -mt-[4.9rem] hidden w-[448px] max-w-none dark:block lg:-mt-[6.6rem] lg:ml-0"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -512,7 +512,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -534,7 +534,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -546,7 +546,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
@@ -747,7 +747,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -762,7 +762,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -777,11 +777,11 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:overflow-hidden lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
+                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:overflow-hidden lg:rounded-r-lg lg:rounded-t-none"
                     />
                 </div>
             </main>
         </div>
-        <div class="hidden h-14.5 lg:block"></div>
+        <div class="h-14.5 hidden lg:block"></div>
     </div>
 </template>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index e70fbad..e992a14 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -45,7 +45,7 @@ const submit = () => {
                 </div>
             </form>
 
-            <div class="text-muted-foreground space-x-1 text-center text-sm">
+            <div class="space-x-1 text-center text-sm text-muted-foreground">
                 <span>Or, return to</span>
                 <TextLink :href="route('login')">log in</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index f11f406..166caf9 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>
@@ -84,7 +84,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-muted-foreground text-center text-sm">
+            <div class="text-center text-sm text-muted-foreground">
                 Don't have an account?
                 <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index 3ad9e38..c0a757d 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -74,7 +74,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-muted-foreground text-center text-sm">
+            <div class="text-center text-sm text-muted-foreground">
                 Already have an account?
                 <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
             </div>
diff --git a/resources/js/pages/courses/Index.vue b/resources/js/pages/courses/Index.vue
index ca8064b..04f3417 100644
--- a/resources/js/pages/courses/Index.vue
+++ b/resources/js/pages/courses/Index.vue
@@ -1,42 +1,46 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
 import { Head, Link } from '@inertiajs/vue3';
 
+// The 'courses' data is automatically passed as a prop by Inertia
 defineProps({
     courses: Array,
 });
+
+// Optional: Define layout for this page
+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>
+    <!-- Content within the AuthenticatedLayout slot -->
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    <h2 class="text-2xl font-semibold mb-6">Available Courses</h2>
 
-                        <div 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="border p-4 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition">
+                            <h3 class="text-xl font-medium mb-2">
+                                <!-- Use Inertia's Link component for SPA navigation -->
+                                <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..cd160c8 100644
--- a/resources/js/pages/courses/Show.vue
+++ b/resources/js/pages/courses/Show.vue
@@ -1,97 +1,98 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
 import { Head, Link } from '@inertiajs/vue3';
 
 defineProps({
-    course: Object,
+    course: Object, // Contains 'id', 'title', 'slug', 'description', 'modules' (array)
+                    // Each module contains 'id', 'title', 'order', 'lessons' (array)
+                    // Each lesson contains 'id', 'module_id', 'title', 'slug', 'order'
 });
+
+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="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    <!-- Breadcrumb/Back Link -->
+                    <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="text-3xl font-semibold mb-2">{{ course.title }}</h2>
+                    <p class="text-gray-600 dark:text-gray-400 mb-6">{{ 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"
-                        >
-                            <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>
+                    <!-- Assessment Link -->
+                    <div v-if="course.assessment_quiz_id" class="mb-6 p-4 border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg text-center">
+                        <p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-2">Know this already?</p>
+                        <Link :href="route('course.assessment.show', { course: course.slug })" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-800 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 transition ease-in-out duration-150">
+                            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>
 
-                                <!-- 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>
+                    <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="text-xl font-semibold mb-3">{{ module.title }}</h3>
 
-                                <!-- Quiz List -->
-                                <div v-if="module.quizzes && module.quizzes.length > 0">
-                                    <h4 class="mt-4 mb-2 text-sm text-gray-500 uppercase dark:text-gray-400">Quizzes</h4>
-                                    <ul class="ml-4 list-inside list-disc space-y-2">
-                                        <li v-for="quiz in module.quizzes" :key="quiz.id">
-                                            <Link
-                                                :href="route('quizzes.show', { quiz: quiz.id })"
-                                                class="text-purple-600 hover:underline dark:text-purple-400"
-                                            >
-                                                {{ quiz.title }}
-                                                <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400">
-                                                    - {{ quiz.description }}</span
-                                                >
-                                            </Link>
-                                        </li>
-                                    </ul>
-                                </div>
+                            <!-- Lesson List -->
+                            <div class="mb-4">
+                                <h4 class="text-sm uppercase text-gray-500 dark:text-gray-400 mb-2">Lessons</h4>
+                                <ul v-if="module.lessons.length > 0" class="list-disc list-inside space-y-2 ml-4">
+                                    <li v-for="lesson in module.lessons" :key="lesson.id">
+                                        <Link
+                                            :href="route('lessons.show', { course: course.slug, lesson: lesson.slug })"
+                                            class="text-blue-600 hover:underline dark:text-blue-400"
+                                            :class="{ 'font-semibold text-gray-800 dark:text-gray-200': lesson.is_completed }"
+                                        >
+                                            <span v-if="lesson.is_completed" class="text-green-500 mr-1">✓</span>
+                                            {{ lesson.title }}
+                                        </Link>
+                                    </li>
+                                </ul>
+                                <p v-else class="text-sm text-gray-500 italic ml-4">No lessons in this module yet.</p>
                             </div>
+
+                            <!-- Quiz List -->
+                            <div v-if="module.quizzes && module.quizzes.length > 0">
+                                <h4 class="text-sm uppercase text-gray-500 dark:text-gray-400 mb-2 mt-4">Quizzes</h4>
+                                <ul class="list-disc list-inside space-y-2 ml-4">
+                                    <li v-for="quiz in module.quizzes" :key="quiz.id">
+                                        <Link
+                                            :href="route('quizzes.show', { quiz: quiz.id })"
+                                            class="text-purple-600 hover:underline dark:text-purple-400"
+                                        >
+                                            {{ quiz.title }}
+                                            <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400"> - {{ quiz.description }}</span>
+                                        </Link>
+                                        <!-- We could add quiz completion status later -->
+                                    </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 pt-6 border-t dark:border-gray-700 text-center">
+                        <h3 class="text-xl font-semibold mb-3">Ready for a Final Challenge?</h3>
+                        <Link :href="route('course.review.generate', { course: course.slug })" class="inline-flex items-center px-6 py-3 bg-green-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-green-700 active:bg-green-800 focus:outline-none focus:border-green-900 focus:ring ring-green-300 transition ease-in-out duration-150">
+                            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..100435a
--- /dev/null
+++ b/resources/js/pages/courses/assessment/Result.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    course: Object, // { id, title, slug }
+    score: Number,
+    recommendationMessage: String,
+    recommendedLessonSlug: String, // Slug of the recommended lesson
+    firstLessonSlug: String, // Slug of the very first lesson
+});
+
+// Helper to generate lesson URLs
+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="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-4">Assessment Results: {{ course.title }}</h2>
+
+                    <!-- Score Display -->
+                    <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
+                        <!-- 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 p-4 border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
+                        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-2">Recommendation</h3>
+                        <p class="text-blue-700 dark:text-blue-400">{{ recommendationMessage }}</p>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex flex-wrap gap-4 justify-center border-t pt-6">
+                        <Link v-if="recommendedLessonSlug" :href="lessonUrl(recommendedLessonSlug)" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 transition ease-in-out duration-150">
+                            Start at Recommended Lesson
+                        </Link>
+                        <Link v-if="firstLessonSlug && recommendedLessonSlug !== firstLessonSlug" :href="lessonUrl(firstLessonSlug)" class="inline-flex items-center px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-800 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 transition ease-in-out duration-150">
+                            Start from Beginning
+                        </Link>
+                        <Link :href="route('courses.show', { course: course.slug })" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
+                            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..f065951
--- /dev/null
+++ b/resources/js/pages/courses/assessment/Show.vue
@@ -0,0 +1,173 @@
+<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, // Contains id, title, description, questions (array)
+                  // Question contains id, quiz_id, type, text, options (array), order
+});
+
+console.log(props.quiz)
+//defineOptions({ layout: AppLayout });
+
+// Use Inertia's useForm helper to manage the answers and submission state
+const form = useForm({
+    answers: {}, // Store answers as { question_id: selected_option_id }
+});
+
+// Initialize answers object based on questions
+props.quiz.questions.forEach(q => {
+    form.answers[q.id] = null; // Initialize each answer to null
+});
+
+const submitQuiz = () => {
+    // Ensure all questions are answered (optional, but good practice)
+    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, // Keep scroll position on validation errors
+        onError: (errors) => {
+            // Handle potential validation errors from backend
+            console.error('Submission errors:', errors);
+            alert('There was an error submitting your answers. Please check the console.');
+        },
+        onFinish: () => {
+            // Form processing finished (success or error)
+            // We don't need to do much here as success navigates via Inertia response
+        }
+    });
+};
+
+const allAnswered = computed(() => {
+    if (!props.quiz?.questions || props.quiz.questions.length === 0) return true;
+    // Check for null OR empty string (for fill_blank potentially)
+    return props.quiz.questions.every(q => {
+        const answer = form.answers[q.id];
+        return answer !== null && answer !== undefined && answer !== '';
+    });
+});
+// const allAnswered = computed(() => {
+//     if (!props.quiz.questions || props.quiz.questions.length === 0) return true; // No questions = technically all answered
+//     return props.quiz.questions.every(q => form.answers[q.id] !== null);
+// });
+
+</script>
+
+<template>
+    <Head :title="`Quiz: ${quiz.title}`" />
+
+    <div class="py-12">
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quiz.title }}</h2>
+                    <p v-if="quiz.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quiz.description }}</p>
+
+                    <form @submit.prevent="submitQuiz">
+                        <div v-if="quiz.questions.length > 0" class="space-y-6">
+                            <div v-for="(question, index) in quiz.questions" :key="question.id" class="border-t pt-6">
+                                <p class="font-semibold mb-3">
+                                    {{ index + 1 }}. {{ question.text }}
+                                </p>
+
+                                <!-- Render Multiple Choice Options -->
+                                <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
+                                    <label v-for="option in question.options" :key="option.id"
+                                           class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                                        <input
+                                            type="radio"
+                                            :name="`question_${question.id}`"
+                                            :value="option.id"
+                                            v-model="form.answers[question.id]"
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        >
+                                        <span>{{ option.text }}</span>
+                                    </label>
+                                </div>
+
+                                <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
+                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
+                                        <input
+                                            type="radio"
+                                            :name="`question_${question.id}`"
+                                            value="true"
+                                            v-model="form.answers[question.id]"
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        />
+                                        <span>True</span>
+                                    </label>
+                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
+                                        <input
+                                            type="radio"
+                                            :name="`question_${question.id}`"
+                                            value="false"
+                                            v-model="form.answers[question.id]"
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        />
+                                        <span>False</span>
+                                    </label>
+                                </div>
+
+                                <!-- Fill in the Blank -->
+                                <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
+                                    <!-- Display question text above (already done) -->
+                                    <!-- Provide an input field for the answer -->
+                                    <input
+                                        type="text"
+                                        v-model="form.answers[question.id]"
+                                        :name="`question_${question.id}`"
+                                        placeholder="Type your answer here"
+                                        class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                    />
+                                    <!-- Optional: Add styling or hints -->
+                                </div>
+
+                                <!-- Add other types as needed -->
+
+                            </div>
+
+
+                            <!-- Add rendering for other question types here later -->
+                            <!--<div v-else-if="question.type === 'other_type'"> ... </div>-->
+
+                        </div>
+
+                        <!-- Submission Button -->
+                        <div class="mt-8 pt-6 border-t">
+                            <button
+                                type="submit"
+                                :disabled="form.processing || !allAnswered"
+                                class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <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="text-sm text-red-600 mt-2">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>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/courses/review/Show.vue b/resources/js/pages/courses/review/Show.vue
new file mode 100644
index 0000000..253065c
--- /dev/null
+++ b/resources/js/pages/courses/review/Show.vue
@@ -0,0 +1,162 @@
+<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="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <div class="mb-4">
+                        <Link :href="route('courses.show', { course: course.slug })" class="text-blue-600 hover:underline dark:text-blue-400 text-sm">
+                            « Back to {{ course.title }}
+                        </Link>
+                    </div>
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quizMainTitle }}</h2>
+
+                    <div v-if="message" class="p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-lg 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="text-gray-600 dark:text-gray-400 mb-6">{{ 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="font-semibold mb-3">
+                                        {{ index + 1 }}. {{ question.text }}
+                                    </p>
+                                    <!-- Multiple Choice -->
+                                    <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
+                                        <label v-for="option in question.options" :key="option.id"
+                                               class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                                            <input
+                                                type="radio"
+                                                :name="`question_${question.id}`"
+                                                :value="option.id"
+                                                v-model="form.answers[question.id]"
+                                                class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"
+                                            />
+                                            <span>{{ option.text }}</span>
+                                        </label>
+                                    </div>
+
+                                    <!-- True/False -->
+                                    <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
+                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
+                                            <input type="radio" :name="`question_${question.id}`" value="true" v-model="form.answers[question.id]" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"/>
+                                            <span>True</span>
+                                        </label>
+                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
+                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
+                                            <input type="radio" :name="`question_${question.id}`" value="false" v-model="form.answers[question.id]" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"/>
+                                            <span>False</span>
+                                        </label>
+                                    </div>
+
+                                    <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
+                                        <input
+                                            type="text"
+                                            v-model="form.answers[question.id]"
+                                            :name="`question_${question.id}`"
+                                            placeholder="Type your answer here"
+                                            class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div class="mt-8 pt-6 border-t dark:border-gray-700">
+                                    <button
+                                        type="submit"
+                                        :disabled="form.processing || !allAnswered"
+                                        class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    >
+                                        <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><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="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                                </div>
+                            </div>
+                            <div v-else class="mt-6">
+                                <p class="italic text-gray-500">No questions available for this review quiz at the moment.</p>
+                            </div>
+                        </form>
+                    </div>
+                    <div v-else-if="!message" class="mt-6">
+                        <p class="italic text-gray-500">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..f828d04 100644
--- a/resources/js/pages/lessons/Show.vue
+++ b/resources/js/pages/lessons/Show.vue
@@ -1,55 +1,62 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
 import { Head, Link, router, usePage } from '@inertiajs/vue3';
+import { computed, ref, onMounted, onBeforeUnmount, shallowRef } from 'vue';
 import loader from '@monaco-editor/loader';
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 
 const props = defineProps({
-    lesson: Object,
-    course: Object,
+    lesson: Object, // Contains 'id', 'title', 'slug', 'content', 'is_completed'
+    course: Object, // Contains 'id', 'title', 'slug' (passed from controller)
 });
 
+defineOptions({ layout: AppLayout });
+
+// Access flashed session data using usePage()
 const page = usePage();
-const successMessage = computed(() => page.props.flash?.success);
+const successMessage = computed(() => page.props.flash?.success); // Check for flash.success
 
 // --- Monaco Editor Setup ---
-const editorContainer = ref(null);
-const editorInstance = shallowRef(null);
-const editorCode = ref(props.lesson.initial_code || '');
+const editorContainer = ref(null); // Template ref for the container div
+const editorInstance = shallowRef(null); // Holds the Monaco instance (use shallowRef for non-reactive objects)
+const editorCode = ref(props.lesson.initial_code || ''); // Code model for the editor
 
 onMounted(() => {
-    loader
-        .init()
-        .then((monaco) => {
-            if (editorContainer.value) {
-                const editor = monaco.editor.create(editorContainer.value, {
-                    value: editorCode.value,
-                    language: 'javascript',
-                    theme: 'vs-dark',
-                    automaticLayout: true,
-                    minimap: { enabled: false },
-                    fontSize: 14,
-                    tabSize: 2,
-                });
-
-                editor.onDidChangeModelContent(() => {
-                    editorCode.value = editor.getValue();
-                });
-
-                editorInstance.value = editor;
-            }
-        })
-        .catch((error) => console.error('Monaco Editor loading failed:', error));
+    // Initialize Monaco Editor when component mounts
+    loader.init().then((monaco) => {
+        if (editorContainer.value) {
+            const editor = monaco.editor.create(editorContainer.value, {
+                value: editorCode.value, // Initial value
+                language: 'javascript',
+                theme: 'vs-dark', // Or 'vs-light' etc.
+                automaticLayout: true, // Adjusts editor size on container resize
+                minimap: { enabled: false }, // Optional: disable minimap
+                fontSize: 14,
+                tabSize: 2,
+                // Add other options as needed
+            });
+
+            // Update Vue ref when editor content changes
+            editor.onDidChangeModelContent(() => {
+                editorCode.value = editor.getValue();
+            });
+
+            // Store the instance
+            editorInstance.value = editor;
+        }
+    }).catch(error => console.error('Monaco Editor loading failed:', error));
 });
 
+// Clean up editor instance when component unmounts
 onBeforeUnmount(() => {
     editorInstance.value?.dispose();
 });
+// --- End Monaco Editor Setup ---
 
+// --- Code Execution Setup ---
 const terminalOutput = ref('');
 const terminalError = ref('');
 const isExecuting = ref(false);
-const checkResult = ref(null);
+const checkResult = ref(null); // null, 'correct', 'incorrect'
 
 const runCode = () => {
     if (isExecuting.value) return;
@@ -57,184 +64,189 @@ const runCode = () => {
     isExecuting.value = true;
     terminalOutput.value = '';
     terminalError.value = '';
-    checkResult.value = null;
+    checkResult.value = null; // Reset check result
     const codeToRun = editorCode.value;
 
+    // Store original console.log
     const originalConsoleLog = console.log;
     let capturedOutput = '';
 
+    // Temporarily override console.log to capture output
     console.log = (...args) => {
-        capturedOutput +=
-            args
-                .map((arg) => {
-                    if (typeof arg === 'object' && arg !== null) {
-                        try {
-                            return JSON.stringify(arg);
-                        } catch (e) {
-                            console.log(e);
-                            return 'Unserializable Object';
-                        }
-                    }
-                    return String(arg);
-                })
-                .join(' ') + '\n';
+        // Convert args to string representations and join
+        capturedOutput += args.map(arg => {
+            if (typeof arg === 'object' && arg !== null) {
+                try { return JSON.stringify(arg); } catch (e) { return 'Unserializable Object'; }
+            }
+            return String(arg);
+        }).join(' ') + '\n';
     };
 
     try {
+        // Use Function constructor for safer execution than eval
+        // Wrap in an Immediately Invoked Function Expression (IIFE) if needed,
+        // but direct execution is often fine for simple scripts.
         new Function(codeToRun)();
 
-        terminalOutput.value = capturedOutput.trim();
+        // Execution finished without throwing an error
+        terminalOutput.value = capturedOutput.trim(); // Display captured output
 
+        // --- Simple Output Check (Optional) ---
         if (props.lesson.expected_output !== null && props.lesson.expected_output !== undefined) {
+            // Trim both outputs for comparison
             if (terminalOutput.value.trim() === props.lesson.expected_output.trim()) {
                 checkResult.value = 'correct';
+                // Check if lesson is NOT already completed before sending request
                 if (!props.lesson.is_completed) {
-                    console.log('Code correct, marking lesson complete...');
-                    router.post(
-                        route('lessons.complete', { lesson: props.lesson.id }),
-                        {},
-                        {
-                            preserveScroll: true,
-                            onSuccess: () => {
-                                console.log('Lesson marked complete successfully via Inertia POST.');
-                            },
-                            onError: (errors) => {
-                                console.error('Error marking lesson complete:', errors);
-                                alert('Could not mark lesson as complete. Please try running the code again or contact support.');
-                            },
+                    console.log('Code correct, marking lesson complete...'); // Debug log
+                    // Use Inertia router to POST to the completion route
+                    router.post(route('lessons.complete', { lesson: props.lesson.id }), {}, {
+                        preserveScroll: true, // Keep user's scroll position
+                        // preserveState: false, // Default: allow props to refresh fully
+                        onSuccess: () => {
+                            console.log('Lesson marked complete successfully via Inertia POST.');
+                            // The page reload triggered by Inertia should update the props,
+                            // including lesson.is_completed, automatically.
                         },
-                    );
+                        onError: (errors) => {
+                            console.error('Error marking lesson complete:', errors);
+                            // Optionally show an error message to the user
+                            alert('Could not mark lesson as complete. Please try running the code again or contact support.');
+                        }
+                    });
                 }
             } else {
                 checkResult.value = 'incorrect';
             }
         }
+        // --- End Output Check ---
+
     } catch (error) {
-        console.error('Execution Error:', error);
-        terminalError.value = error.toString();
-        checkResult.value = 'error';
+        console.error("Execution Error:", error); // Log the actual error object
+        terminalError.value = error.toString(); // Display user-friendly error string
+        checkResult.value = 'error'; // Indicate an execution error
     } finally {
+        // Restore original console.log
         console.log = originalConsoleLog;
         isExecuting.value = false;
     }
 };
+// --- End Code Execution Setup ---
 
 const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'balanced');
+
+// Assume lesson might have a video_url property (add to model/seeder later)
+// const hasVideoContent = computed(() => !!props.lesson.video_url);
 </script>
 
 <template>
-    <AppLayout>
-        <Head :title="lesson.title" />
-
-        <div v-if="successMessage" class="fixed top-4 right-4 z-50 mb-4 rounded border border-green-400 bg-green-100 p-4 text-green-700 shadow-lg">
-            {{ successMessage }}
-        </div>
-
-        <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>
+    <Head :title="lesson.title" />
+
+    <!-- Flash Message Display -->
+    <div v-if="successMessage" class="fixed top-4 right-4 z-50 mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded shadow-lg">
+        {{ successMessage }}
+    </div>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <!-- Changed to full width for better layout potentially -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+                <!-- Left Pane: Lesson Content & Assignment -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900 dark:text-gray-100 flex flex-col h-full">
+                        <!-- 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>
 
-                            <h2 class="mb-4 text-3xl font-semibold">{{ lesson.title }}</h2>
+                        <h2 class="text-3xl font-semibold mb-4">{{ 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>
+                        <!-- Lesson Content -->
+                        <!-- Video Content (if preferred visual AND video exists) -->
+                        <div v-if="userStyle === 'visual' && lesson.video_embed_html" class="mb-6">
+                            <h3 class="text-lg font-semibold mb-2 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 rounded-md overflow-hidden 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>
+                        <!-- Text Content (always show, but position varies) -->
+                        <div class="prose dark:prose-invert max-w-none mb-6" 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>
+                        <!-- Video Content (if style is NOT visual-first AND video exists) -->
+                        <div v-if="userStyle !== 'visual' && lesson.video_embed_html" class="mt-6 pt-6 border-t dark:border-gray-700">
+                            <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200">Video Explanation (Optional):</h3>
+                            <div class="aspect-w-16 aspect-h-9 rounded-md overflow-hidden 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>
+                        <!-- Assignment Section -->
+                        <div v-if="lesson.assignment" class="mt-auto border-t pt-6">
+                            <h3 class="text-xl font-semibold mb-3">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">
-                        <!-- Editor Area -->
-                        <div ref="editorContainer" class="h-1/2 flex-grow">
-                            <!-- Monaco Editor will be mounted here -->
-                        </div>
+                <!-- Right Pane: Editor, Terminal, Actions -->
+                <div class="bg-gray-900 text-gray-100 overflow-hidden shadow-sm sm:rounded-lg flex flex-col" style="height: 75vh;"> <!-- Fixed height container -->
+                    <!-- Editor Area -->
+                    <div ref="editorContainer" class="flex-grow h-1/2">
+                        <!-- Monaco Editor will be mounted here -->
+                    </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>
+                    <!-- Action Bar -->
+                    <div class="flex-shrink-0 px-4 py-2 border-t border-gray-700 flex justify-between items-center">
+                        <button @click="runCode" :disabled="isExecuting" class="px-4 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium 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 p-1 bg-green-900/30 border border-green-700 rounded-md text-green-300 text-xs font-semibold">
+                                <svg class="w-4 h-4 mr-1 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>
+                    </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>
+                    <!-- Terminal Output Area -->
+                    <div class="flex-shrink-0 bg-black p-3 text-sm font-mono overflow-auto h-1/3 border-t border-gray-700">
+                        <div v-if="checkResult === 'correct'" class="text-green-400 mb-2">✓ Output matches expected result.</div>
+                        <div v-if="checkResult === 'incorrect'" class="text-yellow-400 mb-2">! Output does not match expected result.</div>
+                        <div v-if="checkResult === 'error'" class="text-red-400 mb-2">! 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;
 }
 
-[ref='editorContainer'] {
-    min-height: 200px;
-    height: 100%;
+/* Give editor container a minimum height */
+[ref="editorContainer"] {
+    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..473a091 100644
--- a/resources/js/pages/quizzes/Result.vue
+++ b/resources/js/pages/quizzes/Result.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quiz: Object,
-    attempt: Object,
-    results: Array,
-    reviewSuggestions: Array,
-    deepReviewSuggestions: {
+    quiz: Object,       // { id, title }
+    attempt: Object,    // { id, score, completed_at }
+    results: Array,     // [{ question_id, question_text, options, user_answer, correct_answer, is_correct, explanation, lesson_id }, ...]
+    reviewSuggestions: Array, // [{ id, title, url }, ...]
+    deepReviewSuggestions: { // New prop for review quiz
         type: Array,
         default: () => [],
     },
 });
 
-console.log(props.quiz);
-console.log(props.attempt);
-console.log(props.results);
-console.log(props.reviewSuggestions);
+//defineOptions({ layout: AppLayout });
+
+console.log(props.quiz)
+console.log(props.attempt)
+console.log(props.results)
+console.log(props.reviewSuggestions)
+// Helper to get option text by ID
+// const getOptionText = (options, optionId) => {
+//     const option = options.find(o => o.id === optionId);
+//     return option ? option.text : 'N/A';
+// };
 
 const scoreColorClass = computed(() => {
     if (props.attempt.score >= 80) return 'text-green-600 dark:text-green-400';
@@ -27,85 +34,71 @@ const scoreColorClass = computed(() => {
 </script>
 
 <template>
-    <AppLayout>
-        <Head :title="`Quiz Results: ${quiz.title}`" />
-
-        <div class="py-12">
-            <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
-                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
-                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
-                        <h2 class="mb-4 text-2xl font-semibold md:text-3xl">Results for: {{ quiz.title }}</h2>
-
-                        <div class="mb-8 rounded-lg bg-gray-50 p-4 text-center dark:bg-gray-700/50">
-                            <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
-                            <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>
-                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                                Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}
-                            </p>
-                            <p v-if="attempt.type === 'random'" class="mt-1 text-xs text-gray-400 dark:text-gray-500">(Random Review)</p>
-                        </div>
+    <Head :title="`Quiz Results: ${quiz.title}`" />
 
-                        <div
-                            v-if="deepReviewSuggestions.length > 0"
-                            class="mb-8 rounded-lg border border-orange-300 bg-orange-50 p-4 dark:border-orange-700 dark:bg-orange-900/30"
-                        >
-                            <h3 class="mb-2 text-lg font-semibold text-orange-800 dark:text-orange-300">Areas for Deeper Review</h3>
-                            <p class="mb-3 text-sm text-orange-700 dark:text-orange-400">
-                                You might want to revisit these topics and explore the additional resources:
-                            </p>
-                            <div
-                                v-for="suggestion in deepReviewSuggestions"
-                                :key="suggestion.id"
-                                class="mb-4 border-b pb-3 last:border-b-0 dark:border-gray-700"
-                            >
-                                <h4 class="font-medium">
-                                    <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400">
-                                        Lesson: {{ suggestion.title }}
-                                    </Link>
-                                </h4>
-                                <div v-if="suggestion.external_resources.length > 0" class="mt-2 ml-4">
-                                    <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400">Additional Resources:</p>
-                                    <ul class="list-inside list-disc space-y-1">
-                                        <li v-for="resource in suggestion.external_resources" :key="resource.url" class="text-xs">
-                                            <a
-                                                :href="resource.url"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="text-purple-600 hover:underline dark:text-purple-400"
-                                            >
-                                                {{ resource.title }} ({{ resource.type }})
-                                            </a>
-                                            <p v-if="resource.description" class="ml-4 text-gray-500 dark:text-gray-500">
-                                                {{ resource.description }}
-                                            </p>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <p v-else class="ml-4 text-xs text-gray-500 italic dark:text-gray-400">
-                                    No additional resources currently linked for this lesson.
-                                </p>
+    <div class="py-12">
+        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-4">Results for: {{ quiz.title }}</h2>
+
+                    <!-- Score Display (uses attempt.score) -->
+                    <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
+                        <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}</p>
+                        <!-- Optional: Display attempt type -->
+                        <p v-if="attempt.type === 'random'" class="text-xs text-gray-400 dark:text-gray-500 mt-1">(Random Review)</p>
+                    </div>
+
+                    <!-- Score Display -->
+<!--                    <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">-->
+<!--                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>-->
+<!--                        <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>-->
+<!--                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}</p>-->
+<!--                    </div>-->
+
+                    <div v-if="deepReviewSuggestions.length > 0" class="mb-8 p-4 border border-orange-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/30 rounded-lg">
+                        <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-300 mb-2">Areas for Deeper Review</h3>
+                        <p class="text-sm text-orange-700 dark:text-orange-400 mb-3">
+                            You might want to revisit these topics and explore the additional resources:
+                        </p>
+                        <div v-for="suggestion in deepReviewSuggestions" :key="suggestion.id" class="mb-4 pb-3 border-b last:border-b-0 dark:border-gray-700">
+                            <h4 class="font-medium">
+                                <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400">
+                                    Lesson: {{ suggestion.title }}
+                                </Link>
+                            </h4>
+                            <div v-if="suggestion.external_resources.length > 0" class="mt-2 ml-4">
+                                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">Additional Resources:</p>
+                                <ul class="list-disc list-inside space-y-1">
+                                    <li v-for="resource in suggestion.external_resources" :key="resource.url" class="text-xs">
+                                        <a :href="resource.url" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:underline dark:text-purple-400">
+                                            {{ resource.title }} ({{ resource.type }})
+                                        </a>
+                                        <p v-if="resource.description" class="text-gray-500 dark:text-gray-500 ml-4">{{ resource.description }}</p>
+                                    </li>
+                                </ul>
                             </div>
+                            <p v-else class="text-xs text-gray-500 dark:text-gray-400 ml-4 italic">No additional resources currently linked for this lesson.</p>
                         </div>
+                    </div>
 
-                        <!-- Review Suggestions -->
-                        <div
-                            v-if="reviewSuggestions.length > 0 && deepReviewSuggestions.length === 0"
-                            class="mb-8 rounded-lg border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900/30"
-                        >
-                            <h3 class="mb-2 text-lg font-semibold text-yellow-800 dark:text-yellow-300">Lessons to Review</h3>
-                            <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-400">
-                                Based on your answers, you might want to review the following topics:
-                            </p>
-                            <ul class="list-inside list-disc space-y-1">
-                                <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
-                                    <Link :href="suggestion.url" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
-                                        {{ suggestion.title }}
-                                    </Link>
-                                </li>
-                            </ul>
-                        </div>
+                    <!-- Review Suggestions -->
+                    <div v-if="reviewSuggestions.length > 0 && deepReviewSuggestions.length === 0" class="mb-8 p-4 border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg">
+                        <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-2">Lessons to Review</h3>
+                        <p class="text-sm text-yellow-700 dark:text-yellow-400 mb-3">Based on your answers, you might want to review the following topics:</p>
+                        <ul class="list-disc list-inside space-y-1">
+                            <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
+                                <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400 font-medium">
+                                    {{ suggestion.title }}
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
 
-                        <!-- Detailed Results Breakdown
+                    <!-- 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 }">
@@ -126,15 +119,21 @@ const scoreColorClass = computed(() => {
              <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>
+
+                    <!-- Back/Next Links -->
+                    <div class="mt-8 border-t pt-6 flex justify-between">
+                        <!-- Link back to course/module? Need data for this -->
+                        <Link v-if="false" href="#" class="text-blue-600 hover:underline dark:text-blue-400">« Back to Module</Link>
+                        <!-- Link to next module/course overview? -->
+                        <Link :href="route('dashboard')" class="text-blue-600 hover:underline dark:text-blue-400">Go to Dashboard »</Link>
                     </div>
+
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </div>
 </template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/quizzes/Show.vue b/resources/js/pages/quizzes/Show.vue
index 8bd3a3e..1e4933e 100644
--- a/resources/js/pages/quizzes/Show.vue
+++ b/resources/js/pages/quizzes/Show.vue
@@ -1,113 +1,172 @@
 <script setup lang="ts">
+//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quiz: Object,
+    quiz: Object, // Contains id, title, description, questions (array)
+       // Array of { id, title, url, external_resources: [{title, url, type, description}, ...] }
 });
 
+console.log(props.quiz)
+//defineOptions({ layout: AppLayout });
+
+// Use Inertia's useForm helper to manage the answers and submission state
 const form = useForm({
-    answers: {},
+    answers: {}, // Store answers as { question_id: selected_option_id }
 });
 
-props.quiz.questions.forEach((q) => {
-    form.answers[q.id] = null;
+// Initialize answers object based on questions
+props.quiz.questions.forEach(q => {
+    form.answers[q.id] = null; // Initialize each answer to 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);
+    // Ensure all questions are answered (optional, but good practice)
+    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('quizzes.submit', { quiz: props.quiz.id }), {
-        preserveScroll: true,
+        preserveScroll: true, // Keep scroll position on validation errors
         onError: (errors) => {
+            // Handle potential validation errors from backend
             console.error('Submission errors:', errors);
             alert('There was an error submitting your answers. Please check the console.');
         },
+        onFinish: () => {
+            // Form processing finished (success or error)
+            // We don't need to do much here as success navigates via Inertia response
+        }
     });
 };
 
 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;
+    // Check for null OR empty string (for fill_blank potentially)
+    return props.quiz.questions.every(q => {
+        const answer = form.answers[q.id];
+        return answer !== null && answer !== undefined && answer !== '';
+    });
 });
+// const allAnswered = computed(() => {
+//     if (!props.quiz.questions || props.quiz.questions.length === 0) return true; // No questions = technically all answered
+//     return props.quiz.questions.every(q => form.answers[q.id] !== null);
+// });
+
 </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>
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
+
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quiz.title }}</h2>
+                    <p v-if="quiz.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quiz.description }}</p>
 
                     <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,
-                                        }"
-                                    >
+                                <p class="font-semibold mb-3">
+                                    {{ index + 1 }}. {{ question.text }}
+                                </p>
+
+                                <!-- Render Multiple Choice Options -->
+                                <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
+                                    <label v-for="option in question.options" :key="option.id"
+                                           class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
                                         <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"
-                                        />
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        >
                                         <span>{{ option.text }}</span>
                                     </label>
                                 </div>
+
+                                <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
+                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
+                                        <input
+                                            type="radio"
+                                            :name="`question_${question.id}`"
+                                            value="true"
+                                            v-model="form.answers[question.id]"
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        />
+                                        <span>True</span>
+                                    </label>
+                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
+                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
+                                        <input
+                                            type="radio"
+                                            :name="`question_${question.id}`"
+                                            value="false"
+                                            v-model="form.answers[question.id]"
+                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                        />
+                                        <span>False</span>
+                                    </label>
+                                </div>
+
+                                <!-- Fill in the Blank -->
+                                <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
+                                    <!-- Display question text above (already done) -->
+                                    <!-- Provide an input field for the answer -->
+                                    <input
+                                        type="text"
+                                        v-model="form.answers[question.id]"
+                                        :name="`question_${question.id}`"
+                                        placeholder="Type your answer here"
+                                        class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                    />
+                                    <!-- Optional: Add styling or hints -->
+                                </div>
+
+                                <!-- Add other types as needed -->
+
+                            </div>
+
+
+                            <!-- Add rendering for other question types here later -->
+                                <!--<div v-else-if="question.type === 'other_type'"> ... </div>-->
+
                             </div>
 
                             <!-- Submission Button -->
-                            <div class="mt-8 border-t pt-6">
+                            <div class="mt-8 pt-6 border-t">
                                 <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"
+                                    class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                                 >
-                                    <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"
-                                    >
+                                    <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path
-                                            class="opacity-75"
-                                            fill="currentColor"
-                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                        ></path>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                     </svg>
                                     <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
                                 </button>
-                                <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
+                                <p v-if="!allAnswered && !form.processing" class="text-sm text-red-600 mt-2">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>
+
                 </div>
             </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index f8f8f37..a1028f6 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -70,7 +70,7 @@ const submit = () => {
                     </div>
 
                     <div v-if="mustVerifyEmail && !user.email_verified_at">
-                        <p class="text-muted-foreground -mt-4 text-sm">
+                        <p class="-mt-4 text-sm text-muted-foreground">
                             Your email address is unverified.
                             <Link
                                 :href="route('verification.send')"
diff --git a/resources/js/pages/stats/Show.vue b/resources/js/pages/stats/Show.vue
new file mode 100644
index 0000000..c8af2e0
--- /dev/null
+++ b/resources/js/pages/stats/Show.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import { Head } from '@inertiajs/vue3';
+import { Pie, Bar } from 'vue-chartjs';
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+} from 'chart.js';
+
+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="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
+
+            <!-- Header -->
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    <h2 class="text-2xl font-semibold">My Learning Statistics</h2>
+                </div>
+            </div>
+
+            <!-- Stats Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                    <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="text-xs text-gray-500 dark:text-gray-400 mt-1">Consecutive days with lesson completions.</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                    <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="text-xs text-gray-500 dark:text-gray-400 mt-1">Total number of quizzes you've started.</p>
+                </div>
+            </div>
+
+            <!-- Charts Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Pie Chart -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                    <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 items-center justify-center h-full text-gray-500 dark:text-gray-400">
+                            No quiz data yet to display distribution.
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Contribution Bar Chart -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                    <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 items-center justify-center h-full text-gray-500 dark:text-gray-400">
+                            No lesson completion data yet.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</AppLayout>
+</template>

From ab011ae6c0369d60c0d680fdd19c3386896488c4 Mon Sep 17 00:00:00 2001
From: DimGiagias <dim71gia@gmail.com>
Date: Sun, 25 May 2025 01:16:31 +0300
Subject: [PATCH 4/5] chore: fix linting

---
 app/Models/Lesson.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 1d531db..b8e1031 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -65,7 +65,7 @@ public function userProgress(): HasMany
     public function getIsCompletedAttribute(): bool
     {
         // If no user is logged in, it's not completed by them
-        if (!Auth::check()) {
+        if (! Auth::check()) {
             return false;
         }
 

From b0d5508315760a06a0b7dcd42e3eafaff6b8c8a8 Mon Sep 17 00:00:00 2001
From: DimGiagias <dim71gia@gmail.com>
Date: Sun, 25 May 2025 01:23:52 +0300
Subject: [PATCH 5/5] feat: finalize mvp ui for all the features

---
 resources/js/pages/Dashboard.vue              | 111 ++++----
 resources/js/pages/RandomQuiz/Show.vue        | 251 +++++++++---------
 resources/js/pages/Welcome.vue                |  48 ++--
 resources/js/pages/auth/ForgotPassword.vue    |   2 +-
 resources/js/pages/auth/Login.vue             |   2 +-
 resources/js/pages/auth/Register.vue          |   2 +-
 resources/js/pages/courses/Index.vue          |  24 +-
 resources/js/pages/courses/Show.vue           |  65 ++---
 .../js/pages/courses/assessment/Result.vue    |  57 ++--
 .../js/pages/courses/assessment/Show.vue      | 132 +++++----
 resources/js/pages/courses/review/Show.vue    | 222 ++++++++++------
 resources/js/pages/lessons/Show.vue           | 218 ++++++++-------
 resources/js/pages/quizzes/Result.vue         | 197 ++++++--------
 resources/js/pages/quizzes/Show.vue           | 216 ++++++++-------
 resources/js/pages/settings/Profile.vue       |   2 +-
 resources/js/pages/stats/Show.vue             | 132 ++++-----
 16 files changed, 851 insertions(+), 830 deletions(-)

diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 720b342..ca14801 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -34,14 +34,14 @@ const submitPreferences = () => {
             // OR preferencesForm.reset(); // if want to clear form after successful save
         },
         onError: (errors) => {
-            console.error("Preference update errors:", 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' },
@@ -50,35 +50,34 @@ const learningStyleOptions = [
 
 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);
+        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 p-4 bg-green-100 border border-green-400 text-green-700 rounded shadow-lg">
+    <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 p-4 bg-red-100 border border-red-400 text-red-700 rounded shadow-lg">
+    <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="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
                     <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
                 </div>
 
                 <!-- Learning Preferences Section -->
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <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="text-xl font-semibold mb-4 border-b pb-2">My Learning Preferences</h3>
+                        <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>
@@ -88,24 +87,30 @@ const currentLearningPathName = computed(() => {
                                 <select
                                     id="learning_path_id"
                                     v-model="preferencesForm.learning_path_id"
-                                    class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                                    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 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>
+                                <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">
@@ -115,7 +120,7 @@ const currentLearningPathName = computed(() => {
                                                 type="radio"
                                                 :value="style.value"
                                                 v-model="preferencesForm.preferred_learning_style"
-                                                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-700 dark:border-gray-600"
+                                                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 }}
@@ -123,13 +128,17 @@ const currentLearningPathName = computed(() => {
                                         </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>
+                                <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 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
+                                <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>
@@ -137,51 +146,57 @@ const currentLearningPathName = computed(() => {
                     </div>
                 </div>
 
-
                 <!-- Next Suggested Course -->
-                <div v-if="nextSuggestedCourse" class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <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="text-xl font-semibold mb-2">Next in Your Path: {{ currentLearningPathName }}</h3>
-                        <div class="border p-4 rounded-md bg-gray-50 dark:bg-gray-700/50">
+                        <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="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">{{ nextSuggestedCourse.description }}</p>
-                            <Link :href="route('courses.show', { course: nextSuggestedCourse.slug })"
-                                  class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                            <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="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <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="text-xl font-semibold mb-2">Your Learning Path: {{ currentLearningPathName }}</h3>
-                        <p class="text-green-600 dark:text-green-400 font-medium">Congratulations! You've completed all available courses in this path.</p>
+                        <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 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="mt-8 overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
                     <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <h3 class="text-xl font-semibold mb-4">Recent Quiz Attempts</h3>
+                        <h3 class="mb-4 text-xl font-semibold">Recent Quiz Attempts</h3>
                         <div v-if="props.quizAttempts && props.quizAttempts.length > 0">
                             <ul class="space-y-3">
-                                <li v-for="attempt in quizAttempts" :key="attempt.id" class="flex justify-between items-center border-b pb-2">
+                                <li v-for="attempt in quizAttempts" :key="attempt.id" class="flex items-center justify-between border-b pb-2">
                                     <div>
                                         <span class="font-medium">{{ attempt.quiz?.title ?? 'Random Review Quiz' }}</span>
                                         <!-- Add type indicator -->
-                                        <span v-if="attempt.type === 'random'" class="ml-1 text-xs font-semibold bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300 px-1.5 py-0.5 rounded">Random</span>
-                                        <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">
-                                            on {{ formatDate(attempt.completed_at) }}
-                                        </span>
+                                        <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 class="text-lg font-semibold"
-                                          :class="{
-                                        'text-green-600 dark:text-green-400': attempt.score >= 80,
-                                        'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
-                                        'text-red-600 dark:text-red-400': attempt.score < 50
-                                      }">
+                                    <span
+                                        class="text-lg font-semibold"
+                                        :class="{
+                                            'text-green-600 dark:text-green-400': attempt.score >= 80,
+                                            'text-yellow-600 dark:text-yellow-400': attempt.score >= 50 && attempt.score < 80,
+                                            'text-red-600 dark:text-red-400': attempt.score < 50,
+                                        }"
+                                    >
                                         {{ attempt.score ?? 'N/A' }}%
                                     </span>
                                 </li>
@@ -192,9 +207,7 @@ const currentLearningPathName = computed(() => {
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
     </AppLayout>
 </template>
-
diff --git a/resources/js/pages/RandomQuiz/Show.vue b/resources/js/pages/RandomQuiz/Show.vue
index ba481b3..7b94706 100644
--- a/resources/js/pages/RandomQuiz/Show.vue
+++ b/resources/js/pages/RandomQuiz/Show.vue
@@ -1,170 +1,177 @@
 <script setup lang="ts">
-//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quizData: Object, // { id, title, description, questions: [...] } or null
-    message: String, // Optional message (e.g., no lessons completed)
+    quizData: Object,
+    message: String,
 });
 
-//defineOptions({ layout: AppLayout });
-
-console.log(props.quizData)
-// Initialize form only if quizData exists
+console.log(props.quizData);
 const form = useForm({
     answers: {},
-    quizId: props.quizData?.id || null, // Include the temporary quiz ID
+    quizId: props.quizData?.id || null,
 });
 
 if (props.quizData) {
-    props.quizData.questions.forEach(q => {
+    props.quizData.questions.forEach((q) => {
         form.answers[q.id] = null;
     });
 }
 
 const submitQuiz = () => {
-    // Optional: Add confirmation for unanswered questions
-    if (!props.quizData) return; // Should not happen if button is disabled
+    if (!props.quizData) return;
 
-    form.post(route('random-quiz.submit'), { // Post to the correct route
+    form.post(route('random-quiz.submit'), {
         preserveScroll: true,
         onError: (errors) => {
             console.error('Submission errors:', errors);
-            // Consider showing user-friendly errors
             alert('Error submitting quiz. Check console or try again.');
-            // Reset processing state if needed
-            form.processing = false; // Manual reset might be needed on error
+            form.processing = false;
         },
-        onFinish: () => {
-            // Optional: Reset processing state if needed
-            // form.processing = false; // Might reset too early depending on Inertia flow
-        }
     });
 };
 
 const allAnswered = computed(() => {
     if (!props.quizData?.questions || props.quizData.questions.length === 0) return true;
-    return props.quizData.questions.every(q => form.answers[q.id] !== null);
+    return props.quizData.questions.every((q) => form.answers[q.id] !== null);
 });
 </script>
 
 <template>
-
-    <Head title="Random Review Quiz" />
-
-    <div class="py-12">
-        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">Random Review Quiz</h2>
-
-                    <!-- Display message if quiz couldn't generate -->
-                    <div v-if="message" class="p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-lg dark:bg-yellow-200 dark:text-yellow-800" role="alert">
-                        {{ message }}
-                        <div v-if="!quizData" class="mt-4">
-                            <Link :href="route('dashboard')" class="font-medium text-blue-600 hover:underline">
-                                Go to Dashboard
-                            </Link>
+    <AppLayout>
+        <Head title="Random Review Quiz" />
+
+        <div class="py-12">
+            <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                        <h2 class="mb-2 text-2xl font-semibold md:text-3xl">Random Review Quiz</h2>
+
+                        <!-- Display message if quiz couldn't generate -->
+                        <div
+                            v-if="message"
+                            class="mb-4 rounded-lg bg-yellow-100 p-4 text-sm text-yellow-700 dark:bg-yellow-200 dark:text-yellow-800"
+                            role="alert"
+                        >
+                            {{ message }}
+                            <div v-if="!quizData" class="mt-4">
+                                <Link :href="route('dashboard')" class="font-medium text-blue-600 hover:underline"> Go to Dashboard </Link>
+                            </div>
                         </div>
-                    </div>
 
-                    <!-- Display Quiz Form if generated -->
-                    <div v-if="quizData">
-                        <p v-if="quizData.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quizData.description }}</p>
-
-                        <form @submit.prevent="submitQuiz">
-                            <div v-if="quizData.questions.length > 0" class="space-y-6">
-                                <!-- Question Loop (copy from Quizzes/Show.vue) -->
-                                <div v-for="(question, index) in quizData.questions" :key="question.id" class="border-t pt-6">
-                                    <p class="font-semibold mb-3">
-                                        {{ index + 1 }}. {{ question.text }}
-                                    </p>
-                                    <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
-                                        <label v-for="option in question.options" :key="option.id"
-                                               class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                        <!-- Display Quiz Form if generated -->
+                        <div v-if="quizData">
+                            <p v-if="quizData.description" class="mb-6 text-gray-600 dark:text-gray-400">{{ quizData.description }}</p>
+
+                            <form @submit.prevent="submitQuiz">
+                                <div v-if="quizData.questions.length > 0" class="space-y-6">
+                                    <div v-for="(question, index) in quizData.questions" :key="question.id" class="border-t pt-6">
+                                        <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
+                                        <div v-if="question.type === 'multiple_choice'" class="ml-4 space-y-2">
+                                            <label
+                                                v-for="option in question.options"
+                                                :key="option.id"
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === option.id,
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    :value="option.id"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>{{ option.text }}</span>
+                                            </label>
+                                        </div>
+
+                                        <!-- True/False -->
+                                        <div v-else-if="question.type === 'true_false'" class="ml-4 space-y-2">
+                                            <label
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === 'true',
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    value="true"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>True</span>
+                                            </label>
+                                            <label
+                                                class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                                :class="{
+                                                    'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                        form.answers[question.id] === 'false',
+                                                }"
+                                            >
+                                                <input
+                                                    type="radio"
+                                                    :name="`question_${question.id}`"
+                                                    value="false"
+                                                    v-model="form.answers[question.id]"
+                                                    class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                                />
+                                                <span>False</span>
+                                            </label>
+                                        </div>
+
+                                        <!-- Fill in the Blank -->
+                                        <div v-else-if="question.type === 'fill_blank'" class="mt-2 ml-4">
                                             <input
-                                                type="radio"
-                                                :name="`question_${question.id}`"
-                                                :value="option.id"
+                                                type="text"
                                                 v-model="form.answers[question.id]"
-                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
-                                            />
-                                            <span>{{ option.text }}</span>
-                                        </label>
-                                    </div>
-
-                                    <!-- True/False -->
-                                    <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
-                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
-                                            <input
-                                                type="radio"
                                                 :name="`question_${question.id}`"
-                                                value="true"
-                                                v-model="form.answers[question.id]"
-                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                                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>True</span>
-                                        </label>
-                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
-                                            <input
-                                                type="radio"
-                                                :name="`question_${question.id}`"
-                                                value="false"
-                                                v-model="form.answers[question.id]"
-                                                class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
-                                            />
-                                            <span>False</span>
-                                        </label>
+                                        </div>
                                     </div>
 
-                                    <!-- Fill in the Blank -->
-                                    <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
-                                        <!-- Display question text above (already done) -->
-                                        <!-- Provide an input field for the answer -->
-                                        <input
-                                            type="text"
-                                            v-model="form.answers[question.id]"
-                                            :name="`question_${question.id}`"
-                                            placeholder="Type your answer here"
-                                            class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
-                                        />
-                                        <!-- Optional: Add styling or hints -->
+                                    <!-- Submission Button -->
+                                    <div class="mt-8 border-t pt-6">
+                                        <button
+                                            type="submit"
+                                            :disabled="form.processing || !allAnswered"
+                                            class="inline-flex w-full items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:w-auto"
+                                        >
+                                            <svg
+                                                v-if="form.processing"
+                                                class="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                                <path
+                                                    class="opacity-75"
+                                                    fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                ></path>
+                                            </svg>
+                                            <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
+                                        </button>
+                                        <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
                                     </div>
                                 </div>
-
-                                <!-- Submission Button (copy from Quizzes/Show.vue) -->
-                                <div class="mt-8 pt-6 border-t">
-                                    <button
-                                        type="submit"
-                                        :disabled="form.processing || !allAnswered"
-                                        class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        <!-- SVG Spinner -->
-                                        <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><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="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                                <div v-else>
+                                    <p>Could not load questions for this quiz.</p>
                                 </div>
-
-                            </div>
-                            <div v-else>
-                                <p>Could not load questions for this quiz.</p>
-                            </div>
-                        </form>
+                            </form>
+                        </div>
                     </div>
-
                 </div>
             </div>
         </div>
-    </div>
-
+    </AppLayout>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index 3560aa5..ba9f930 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -7,8 +7,8 @@ import { Head, Link } from '@inertiajs/vue3';
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     </Head>
-    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
-        <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
+    <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
+        <header class="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
                 <Link
                     v-if="$page.props.auth.user"
@@ -33,10 +33,10 @@ import { Head, Link } from '@inertiajs/vue3';
                 </template>
             </nav>
         </header>
-        <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
+        <div class="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
             <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
                 <div
-                    class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
+                    class="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                 >
                     <h1 class="mb-1 font-medium">Let's get started</h1>
                     <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
@@ -44,7 +44,7 @@ import { Head, Link } from '@inertiajs/vue3';
                     </p>
                     <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-0 before:left-[0.4rem] before:top-1/2 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -75,7 +75,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             </span>
                         </li>
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-1/2 before:left-[0.4rem] before:top-0 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span class="relative bg-white py-1 dark:bg-[#161615]">
                                 <span
@@ -119,10 +119,10 @@ import { Head, Link } from '@inertiajs/vue3';
                     </ul>
                 </div>
                 <div
-                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
+                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]"
                 >
                     <svg
-                        class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
+                        class="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:translate-y-6 starting:opacity-0"
                         viewBox="0 0 438 104"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -148,12 +148,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         />
                     </svg>
                     <svg
-                        class="relative -ml-8 -mt-[4.9rem] w-[448px] max-w-none dark:hidden lg:-mt-[6.6rem] lg:ml-0"
+                        class="relative -mt-[4.9rem] -ml-8 w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:hidden"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -193,7 +193,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -216,7 +216,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'plus-darker' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z"
@@ -237,7 +237,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -439,7 +439,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -454,7 +454,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                         <g
                             :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -468,12 +468,12 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <svg
-                        class="relative -ml-8 -mt-[4.9rem] hidden w-[448px] max-w-none dark:block lg:-mt-[6.6rem] lg:ml-0"
+                        class="relative -mt-[4.9rem] -ml-8 hidden w-[448px] max-w-none lg:-mt-[6.6rem] lg:ml-0 dark:block"
                         viewBox="0 0 440 376"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -512,7 +512,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -534,7 +534,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -546,7 +546,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
@@ -747,7 +747,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -762,7 +762,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                             :style="{ mixBlendMode: 'hard-light' }"
                         >
                             <path
@@ -777,11 +777,11 @@ import { Head, Link } from '@inertiajs/vue3';
                         </g>
                     </svg>
                     <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:overflow-hidden lg:rounded-r-lg lg:rounded-t-none"
+                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:overflow-hidden lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                     />
                 </div>
             </main>
         </div>
-        <div class="h-14.5 hidden lg:block"></div>
+        <div class="hidden h-14.5 lg:block"></div>
     </div>
 </template>
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index e992a14..e70fbad 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -45,7 +45,7 @@ const submit = () => {
                 </div>
             </form>
 
-            <div class="space-x-1 text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground space-x-1 text-center text-sm">
                 <span>Or, return to</span>
                 <TextLink :href="route('login')">log in</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 166caf9..8234094 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -84,7 +84,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground text-center text-sm">
                 Don't have an account?
                 <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
             </div>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index c0a757d..3ad9e38 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -74,7 +74,7 @@ const submit = () => {
                 </Button>
             </div>
 
-            <div class="text-center text-sm text-muted-foreground">
+            <div class="text-muted-foreground text-center text-sm">
                 Already have an account?
                 <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
             </div>
diff --git a/resources/js/pages/courses/Index.vue b/resources/js/pages/courses/Index.vue
index 04f3417..997bae9 100644
--- a/resources/js/pages/courses/Index.vue
+++ b/resources/js/pages/courses/Index.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 
-// The 'courses' data is automatically passed as a prop by Inertia
 defineProps({
     courses: Array,
 });
 
-// Optional: Define layout for this page
 defineOptions({ layout: AppLayout });
 </script>
 
 <template>
     <Head title="Courses" />
 
-    <!-- Content within the AuthenticatedLayout slot -->
     <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
                 <div class="p-6 text-gray-900 dark:text-gray-100">
-                    <h2 class="text-2xl font-semibold mb-6">Available Courses</h2>
+                    <h2 class="mb-6 text-2xl font-semibold">Available Courses</h2>
 
                     <div v-if="courses.length > 0" class="space-y-4">
-                        <div v-for="course in courses" :key="course.id" class="border p-4 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition">
-                            <h3 class="text-xl font-medium mb-2">
-                                <!-- Use Inertia's Link component for SPA navigation -->
+                        <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>
@@ -41,6 +41,4 @@ defineOptions({ layout: AppLayout });
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/resources/js/pages/courses/Show.vue b/resources/js/pages/courses/Show.vue
index cd160c8..42b2464 100644
--- a/resources/js/pages/courses/Show.vue
+++ b/resources/js/pages/courses/Show.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 
 defineProps({
-    course: Object, // Contains 'id', 'title', 'slug', 'description', 'modules' (array)
-                    // Each module contains 'id', 'title', 'order', 'lessons' (array)
-                    // Each lesson contains 'id', 'module_id', 'title', 'slug', 'order'
+    course: Object,
 });
 
 defineOptions({ layout: AppLayout });
@@ -15,72 +13,77 @@ defineOptions({ layout: AppLayout });
     <Head :title="course.title" />
 
     <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+        <div class="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">
-                    <!-- Breadcrumb/Back Link -->
                     <div class="mb-4">
-                        <Link :href="route('courses.index')" class="text-blue-600 hover:underline dark:text-blue-400">
-                            « Back to Courses
-                        </Link>
+                        <Link :href="route('courses.index')" class="text-blue-600 hover:underline dark:text-blue-400"> « Back to Courses </Link>
                     </div>
 
-                    <h2 class="text-3xl font-semibold mb-2">{{ course.title }}</h2>
-                    <p class="text-gray-600 dark:text-gray-400 mb-6">{{ course.description }}</p>
+                    <h2 class="mb-2 text-3xl font-semibold">{{ course.title }}</h2>
+                    <p class="mb-6 text-gray-600 dark:text-gray-400">{{ course.description }}</p>
 
                     <!-- Assessment Link -->
-                    <div v-if="course.assessment_quiz_id" class="mb-6 p-4 border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg text-center">
-                        <p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-2">Know this already?</p>
-                        <Link :href="route('course.assessment.show', { course: course.slug })" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-800 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 transition ease-in-out duration-150">
+                    <div
+                        v-if="course.assessment_quiz_id"
+                        class="mb-6 rounded-lg border border-indigo-200 bg-indigo-50 p-4 text-center dark:border-indigo-800 dark:bg-indigo-900/30"
+                    >
+                        <p class="mb-2 font-semibold text-indigo-800 dark:text-indigo-300">Know this already?</p>
+                        <Link
+                            :href="route('course.assessment.show', { course: course.slug })"
+                            class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase ring-indigo-300 transition duration-150 ease-in-out hover:bg-indigo-700 focus:border-indigo-900 focus:ring focus:outline-none active:bg-indigo-800"
+                        >
                             Take Placement Assessment
                         </Link>
                     </div>
 
-
                     <div 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="text-xl font-semibold mb-3">{{ module.title }}</h3>
+                            <h3 class="mb-3 text-xl font-semibold">{{ module.title }}</h3>
 
                             <!-- Lesson List -->
                             <div class="mb-4">
-                                <h4 class="text-sm uppercase text-gray-500 dark:text-gray-400 mb-2">Lessons</h4>
-                                <ul v-if="module.lessons.length > 0" class="list-disc list-inside space-y-2 ml-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="text-green-500 mr-1">✓</span>
+                                            <span v-if="lesson.is_completed" class="mr-1 text-green-500">✓</span>
                                             {{ lesson.title }}
                                         </Link>
                                     </li>
                                 </ul>
-                                <p v-else class="text-sm text-gray-500 italic ml-4">No lessons in this module yet.</p>
+                                <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="text-sm uppercase text-gray-500 dark:text-gray-400 mb-2 mt-4">Quizzes</h4>
-                                <ul class="list-disc list-inside space-y-2 ml-4">
+                                <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>
+                                            <span v-if="quiz.description" class="text-xs text-gray-500 dark:text-gray-400">
+                                                - {{ quiz.description }}</span
+                                            >
                                         </Link>
-                                        <!-- We could add quiz completion status later -->
                                     </li>
                                 </ul>
                             </div>
-
                         </div>
                     </div>
-                    <div v-if="course.final_review_quiz_id" class="mt-10 pt-6 border-t dark:border-gray-700 text-center">
-                        <h3 class="text-xl font-semibold mb-3">Ready for a Final Challenge?</h3>
-                        <Link :href="route('course.review.generate', { course: course.slug })" class="inline-flex items-center px-6 py-3 bg-green-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-green-700 active:bg-green-800 focus:outline-none focus:border-green-900 focus:ring ring-green-300 transition ease-in-out duration-150">
+                    <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>
@@ -93,6 +96,4 @@ defineOptions({ layout: AppLayout });
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/resources/js/pages/courses/assessment/Result.vue b/resources/js/pages/courses/assessment/Result.vue
index 100435a..fc8cfe5 100644
--- a/resources/js/pages/courses/assessment/Result.vue
+++ b/resources/js/pages/courses/assessment/Result.vue
@@ -2,58 +2,75 @@
 import { Head, Link } from '@inertiajs/vue3';
 
 const props = defineProps({
-    course: Object, // { id, title, slug }
+    course: Object,
     score: Number,
     recommendationMessage: String,
-    recommendedLessonSlug: String, // Slug of the recommended lesson
-    firstLessonSlug: String, // Slug of the very first lesson
+    recommendedLessonSlug: String,
+    firstLessonSlug: String,
 });
 
-// Helper to generate lesson URLs
 const lessonUrl = (lessonSlug) => {
     if (!lessonSlug) return '#'; // Fallback
     return route('lessons.show', { course: props.course.slug, lesson: lessonSlug });
-}
+};
 
-console.log(props.recommendedLessonSlug)
+console.log(props.recommendedLessonSlug);
 </script>
 
 <template>
     <Head :title="`Assessment Results: ${course.title}`" />
 
     <div class="py-12">
-        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-4">Assessment Results: {{ course.title }}</h2>
+        <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 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                    <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>
+                        <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 p-4 border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
-                        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-2">Recommendation</h3>
+                    <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 gap-4 justify-center border-t pt-6">
-                        <Link v-if="recommendedLessonSlug" :href="lessonUrl(recommendedLessonSlug)" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 transition ease-in-out duration-150">
+                    <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 px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-800 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 transition ease-in-out duration-150">
+                        <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 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
+                        <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>
diff --git a/resources/js/pages/courses/assessment/Show.vue b/resources/js/pages/courses/assessment/Show.vue
index f065951..8613c2c 100644
--- a/resources/js/pages/courses/assessment/Show.vue
+++ b/resources/js/pages/courses/assessment/Show.vue
@@ -1,173 +1,165 @@
 <script setup lang="ts">
-//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
     course: Object,
-    quiz: Object, // Contains id, title, description, questions (array)
-                  // Question contains id, quiz_id, type, text, options (array), order
+    quiz: Object,
 });
 
-console.log(props.quiz)
-//defineOptions({ layout: AppLayout });
+console.log(props.quiz);
+defineOptions({ layout: AppLayout });
 
-// Use Inertia's useForm helper to manage the answers and submission state
 const form = useForm({
-    answers: {}, // Store answers as { question_id: selected_option_id }
+    answers: {},
 });
 
-// Initialize answers object based on questions
-props.quiz.questions.forEach(q => {
-    form.answers[q.id] = null; // Initialize each answer to null
+props.quiz.questions.forEach((q) => {
+    form.answers[q.id] = null;
 });
 
 const submitQuiz = () => {
-    // Ensure all questions are answered (optional, but good practice)
-    const unanswered = props.quiz.questions.some(q => form.answers[q.id] === null);
+    const unanswered = props.quiz.questions.some((q) => form.answers[q.id] === null);
     if (unanswered && !confirm('You have unanswered questions. Submit anyway?')) {
         return;
     }
 
     form.post(route('course.assessment.submit', { course: props.course.slug }), {
-        preserveScroll: true, // Keep scroll position on validation errors
+        preserveScroll: true,
         onError: (errors) => {
-            // Handle potential validation errors from backend
             console.error('Submission errors:', errors);
             alert('There was an error submitting your answers. Please check the console.');
         },
-        onFinish: () => {
-            // Form processing finished (success or error)
-            // We don't need to do much here as success navigates via Inertia response
-        }
     });
 };
 
 const allAnswered = computed(() => {
     if (!props.quiz?.questions || props.quiz.questions.length === 0) return true;
-    // Check for null OR empty string (for fill_blank potentially)
-    return props.quiz.questions.every(q => {
+    return props.quiz.questions.every((q) => {
         const answer = form.answers[q.id];
         return answer !== null && answer !== undefined && answer !== '';
     });
 });
-// const allAnswered = computed(() => {
-//     if (!props.quiz.questions || props.quiz.questions.length === 0) return true; // No questions = technically all answered
-//     return props.quiz.questions.every(q => form.answers[q.id] !== null);
-// });
-
 </script>
 
 <template>
     <Head :title="`Quiz: ${quiz.title}`" />
 
     <div class="py-12">
-        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quiz.title }}</h2>
-                    <p v-if="quiz.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quiz.description }}</p>
+        <div class="mx-auto max-w-3xl sm:px-6 lg:px-8">
+            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                    <h2 class="mb-2 text-2xl font-semibold md:text-3xl">{{ quiz.title }}</h2>
+                    <p v-if="quiz.description" class="mb-6 text-gray-600 dark:text-gray-400">{{ quiz.description }}</p>
 
                     <form @submit.prevent="submitQuiz">
                         <div v-if="quiz.questions.length > 0" class="space-y-6">
                             <div v-for="(question, index) in quiz.questions" :key="question.id" class="border-t pt-6">
-                                <p class="font-semibold mb-3">
-                                    {{ index + 1 }}. {{ question.text }}
-                                </p>
+                                <p class="mb-3 font-semibold">{{ index + 1 }}. {{ question.text }}</p>
 
                                 <!-- Render Multiple Choice Options -->
-                                <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
-                                    <label v-for="option in question.options" :key="option.id"
-                                           class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                                <div v-if="question.type === 'multiple_choice'" class="ml-4 space-y-2">
+                                    <label
+                                        v-for="option in question.options"
+                                        :key="option.id"
+                                        class="flex cursor-pointer items-center rounded-md border p-3 transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                                        :class="{
+                                            'border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30':
+                                                form.answers[question.id] === option.id,
+                                        }"
+                                    >
                                         <input
                                             type="radio"
                                             :name="`question_${question.id}`"
                                             :value="option.id"
                                             v-model="form.answers[question.id]"
-                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
-                                        >
+                                            class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                                        />
                                         <span>{{ option.text }}</span>
                                     </label>
                                 </div>
 
-                                <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
-                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
+                                <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="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
                                         />
                                         <span>True</span>
                                     </label>
-                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
+                                    <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="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            class="mr-3 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
                                         />
                                         <span>False</span>
                                     </label>
                                 </div>
 
                                 <!-- Fill in the Blank -->
-                                <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
-                                    <!-- Display question text above (already done) -->
-                                    <!-- Provide an input field for the answer -->
+                                <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="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                        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"
                                     />
-                                    <!-- Optional: Add styling or hints -->
                                 </div>
-
-                                <!-- Add other types as needed -->
-
                             </div>
-
-
-                            <!-- Add rendering for other question types here later -->
-                            <!--<div v-else-if="question.type === 'other_type'"> ... </div>-->
-
                         </div>
 
                         <!-- Submission Button -->
-                        <div class="mt-8 pt-6 border-t">
+                        <div class="mt-8 border-t pt-6">
                             <button
                                 type="submit"
                                 :disabled="form.processing || !allAnswered"
-                                class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                class="inline-flex w-full items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:w-auto"
                             >
-                                <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <svg
+                                    v-if="form.processing"
+                                    class="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                >
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    <path
+                                        class="opacity-75"
+                                        fill="currentColor"
+                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                    ></path>
                                 </svg>
                                 <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
                             </button>
-                            <p v-if="!allAnswered && !form.processing" class="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                            <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
 
                             <div v-else>
                                 <p>This quiz doesn't have any questions yet.</p>
                             </div>
                         </div>
                     </form>
-
                 </div>
             </div>
         </div>
     </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/pages/courses/review/Show.vue b/resources/js/pages/courses/review/Show.vue
index 253065c..8bc1d17 100644
--- a/resources/js/pages/courses/review/Show.vue
+++ b/resources/js/pages/courses/review/Show.vue
@@ -15,7 +15,7 @@ const form = useForm({
 });
 
 if (props.quizData && props.quizData.questions) {
-    props.quizData.questions.forEach(q => {
+    props.quizData.questions.forEach((q) => {
         form.answers[q.id] = null;
     });
 }
@@ -35,7 +35,7 @@ const submitQuiz = () => {
 
 const allAnswered = computed(() => {
     if (!props.quizData?.questions || props.quizData.questions.length === 0) return true;
-    return props.quizData.questions.every(q => {
+    return props.quizData.questions.every((q) => {
         const answer = form.answers[q.id];
         return answer !== null && answer !== undefined && (typeof answer === 'string' ? answer.trim() !== '' : true);
     });
@@ -50,110 +50,158 @@ const quizMainTitle = computed(() => {
 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="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <div class="mb-4">
-                        <Link :href="route('courses.show', { course: course.slug })" class="text-blue-600 hover:underline dark:text-blue-400 text-sm">
-                            « Back to {{ course.title }}
-                        </Link>
-                    </div>
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quizMainTitle }}</h2>
-
-                    <div v-if="message" class="p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 rounded-lg 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
+        <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>
-                    </div>
 
-                    <!-- Display Quiz Form if generated -->
-                    <div v-if="quizData">
-                        <p class="text-gray-600 dark:text-gray-400 mb-6">{{ 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="font-semibold mb-3">
-                                        {{ index + 1 }}. {{ question.text }}
-                                    </p>
-                                    <!-- Multiple Choice -->
-                                    <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
-                                        <label v-for="option in question.options" :key="option.id"
-                                               class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
+                        <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="radio"
-                                                :name="`question_${question.id}`"
-                                                :value="option.id"
+                                                type="text"
                                                 v-model="form.answers[question.id]"
-                                                class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"
+                                                :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>
-
-                                    <!-- True/False -->
-                                    <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
-                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
-                                            <input type="radio" :name="`question_${question.id}`" value="true" v-model="form.answers[question.id]" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"/>
-                                            <span>True</span>
-                                        </label>
-                                        <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 transition cursor-pointer"
-                                               :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
-                                            <input type="radio" :name="`question_${question.id}`" value="false" v-model="form.answers[question.id]" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 mr-3"/>
-                                            <span>False</span>
-                                        </label>
+                                        </div>
                                     </div>
 
-                                    <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
-                                        <input
-                                            type="text"
-                                            v-model="form.answers[question.id]"
-                                            :name="`question_${question.id}`"
-                                            placeholder="Type your answer here"
-                                            class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
-                                        />
+                                    <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 class="mt-8 pt-6 border-t dark:border-gray-700">
-                                    <button
-                                        type="submit"
-                                        :disabled="form.processing || !allAnswered"
-                                        class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><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="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                                <div v-else class="mt-6">
+                                    <p class="text-gray-500 italic">No questions available for this review quiz at the moment.</p>
                                 </div>
-                            </div>
-                            <div v-else class="mt-6">
-                                <p class="italic text-gray-500">No questions available for this review quiz at the moment.</p>
-                            </div>
-                        </form>
-                    </div>
-                    <div v-else-if="!message" class="mt-6">
-                        <p class="italic text-gray-500">Loading review quiz or no review available...</p>
+                            </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>
-    </div>
     </AppLayout>
 </template>
 
diff --git a/resources/js/pages/lessons/Show.vue b/resources/js/pages/lessons/Show.vue
index f828d04..115f427 100644
--- a/resources/js/pages/lessons/Show.vue
+++ b/resources/js/pages/lessons/Show.vue
@@ -1,62 +1,56 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // Adjust if your layout name differs
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link, router, usePage } from '@inertiajs/vue3';
-import { computed, ref, onMounted, onBeforeUnmount, shallowRef } from 'vue';
 import loader from '@monaco-editor/loader';
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 
 const props = defineProps({
-    lesson: Object, // Contains 'id', 'title', 'slug', 'content', 'is_completed'
-    course: Object, // Contains 'id', 'title', 'slug' (passed from controller)
+    lesson: Object,
+    course: Object,
 });
 
 defineOptions({ layout: AppLayout });
 
-// Access flashed session data using usePage()
 const page = usePage();
-const successMessage = computed(() => page.props.flash?.success); // Check for flash.success
+const successMessage = computed(() => page.props.flash?.success);
 
-// --- Monaco Editor Setup ---
-const editorContainer = ref(null); // Template ref for the container div
-const editorInstance = shallowRef(null); // Holds the Monaco instance (use shallowRef for non-reactive objects)
-const editorCode = ref(props.lesson.initial_code || ''); // Code model for the editor
+const editorContainer = ref(null);
+const editorInstance = shallowRef(null);
+const editorCode = ref(props.lesson.initial_code || '');
 
 onMounted(() => {
-    // Initialize Monaco Editor when component mounts
-    loader.init().then((monaco) => {
-        if (editorContainer.value) {
-            const editor = monaco.editor.create(editorContainer.value, {
-                value: editorCode.value, // Initial value
-                language: 'javascript',
-                theme: 'vs-dark', // Or 'vs-light' etc.
-                automaticLayout: true, // Adjusts editor size on container resize
-                minimap: { enabled: false }, // Optional: disable minimap
-                fontSize: 14,
-                tabSize: 2,
-                // Add other options as needed
-            });
-
-            // Update Vue ref when editor content changes
-            editor.onDidChangeModelContent(() => {
-                editorCode.value = editor.getValue();
-            });
-
-            // Store the instance
-            editorInstance.value = editor;
-        }
-    }).catch(error => console.error('Monaco Editor loading failed:', error));
+    loader
+        .init()
+        .then((monaco) => {
+            if (editorContainer.value) {
+                const editor = monaco.editor.create(editorContainer.value, {
+                    value: editorCode.value,
+                    language: 'javascript',
+                    theme: 'vs-dark',
+                    automaticLayout: true,
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    tabSize: 2,
+                });
+
+                editor.onDidChangeModelContent(() => {
+                    editorCode.value = editor.getValue();
+                });
+
+                editorInstance.value = editor;
+            }
+        })
+        .catch((error) => console.error('Monaco Editor loading failed:', error));
 });
 
-// Clean up editor instance when component unmounts
 onBeforeUnmount(() => {
     editorInstance.value?.dispose();
 });
-// --- End Monaco Editor Setup ---
 
-// --- Code Execution Setup ---
 const terminalOutput = ref('');
 const terminalError = ref('');
 const isExecuting = ref(false);
-const checkResult = ref(null); // null, 'correct', 'incorrect'
+const checkResult = ref(null);
 
 const runCode = () => {
     if (isExecuting.value) return;
@@ -64,97 +58,85 @@ const runCode = () => {
     isExecuting.value = true;
     terminalOutput.value = '';
     terminalError.value = '';
-    checkResult.value = null; // Reset check result
+    checkResult.value = null;
     const codeToRun = editorCode.value;
 
-    // Store original console.log
     const originalConsoleLog = console.log;
     let capturedOutput = '';
 
-    // Temporarily override console.log to capture output
     console.log = (...args) => {
-        // Convert args to string representations and join
-        capturedOutput += args.map(arg => {
-            if (typeof arg === 'object' && arg !== null) {
-                try { return JSON.stringify(arg); } catch (e) { return 'Unserializable Object'; }
-            }
-            return String(arg);
-        }).join(' ') + '\n';
+        capturedOutput +=
+            args
+                .map((arg) => {
+                    if (typeof arg === 'object' && arg !== null) {
+                        try {
+                            return JSON.stringify(arg);
+                        } catch (e) {
+                            console.error(e);
+                            return 'Unserializable Object';
+                        }
+                    }
+                    return String(arg);
+                })
+                .join(' ') + '\n';
     };
 
     try {
-        // Use Function constructor for safer execution than eval
-        // Wrap in an Immediately Invoked Function Expression (IIFE) if needed,
-        // but direct execution is often fine for simple scripts.
         new Function(codeToRun)();
 
-        // Execution finished without throwing an error
-        terminalOutput.value = capturedOutput.trim(); // Display captured output
+        terminalOutput.value = capturedOutput.trim();
 
-        // --- Simple Output Check (Optional) ---
         if (props.lesson.expected_output !== null && props.lesson.expected_output !== undefined) {
-            // Trim both outputs for comparison
             if (terminalOutput.value.trim() === props.lesson.expected_output.trim()) {
                 checkResult.value = 'correct';
-                // Check if lesson is NOT already completed before sending request
                 if (!props.lesson.is_completed) {
-                    console.log('Code correct, marking lesson complete...'); // Debug log
-                    // Use Inertia router to POST to the completion route
-                    router.post(route('lessons.complete', { lesson: props.lesson.id }), {}, {
-                        preserveScroll: true, // Keep user's scroll position
-                        // preserveState: false, // Default: allow props to refresh fully
-                        onSuccess: () => {
-                            console.log('Lesson marked complete successfully via Inertia POST.');
-                            // The page reload triggered by Inertia should update the props,
-                            // including lesson.is_completed, automatically.
+                    console.log('Code correct, marking lesson complete...');
+                    router.post(
+                        route('lessons.complete', { lesson: props.lesson.id }),
+                        {},
+                        {
+                            preserveScroll: true,
+                            onSuccess: () => {
+                                console.log('Lesson marked complete successfully via Inertia POST.');
+                            },
+                            onError: (errors) => {
+                                console.error('Error marking lesson complete:', errors);
+                                alert('Could not mark lesson as complete. Please try running the code again or contact support.');
+                            },
                         },
-                        onError: (errors) => {
-                            console.error('Error marking lesson complete:', errors);
-                            // Optionally show an error message to the user
-                            alert('Could not mark lesson as complete. Please try running the code again or contact support.');
-                        }
-                    });
+                    );
                 }
             } else {
                 checkResult.value = 'incorrect';
             }
         }
-        // --- End Output Check ---
-
     } catch (error) {
-        console.error("Execution Error:", error); // Log the actual error object
-        terminalError.value = error.toString(); // Display user-friendly error string
-        checkResult.value = 'error'; // Indicate an execution error
+        console.error('Execution Error:', error);
+        terminalError.value = error.toString();
+        checkResult.value = 'error';
     } finally {
-        // Restore original console.log
         console.log = originalConsoleLog;
         isExecuting.value = false;
     }
 };
-// --- End Code Execution Setup ---
-
-const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'balanced');
 
-// Assume lesson might have a video_url property (add to model/seeder later)
-// const hasVideoContent = computed(() => !!props.lesson.video_url);
+const userStyle = computed(() => page.props.auth.user?.preferred_learning_style || 'reading');
 </script>
 
 <template>
     <Head :title="lesson.title" />
 
-    <!-- Flash Message Display -->
-    <div v-if="successMessage" class="fixed top-4 right-4 z-50 mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded shadow-lg">
+    <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="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <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 lg:grid-cols-2 gap-6">
-
+            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                 <!-- Left Pane: Lesson Content & Assignment -->
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                    <div class="p-6 text-gray-900 dark:text-gray-100 flex flex-col h-full">
+                <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">
@@ -162,63 +144,75 @@ const userStyle = computed(() => page.props.auth.user?.preferred_learning_style
                             </Link>
                         </div>
 
-                        <h2 class="text-3xl font-semibold mb-4">{{ lesson.title }}</h2>
+                        <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="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200">Video Explanation:</h3>
+                            <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 rounded-md overflow-hidden shadow-lg" v-html="lesson.video_embed_html">
-                            </div>
+                            <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 max-w-none mb-6" v-html="lesson.content"></div>
+                        <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 pt-6 border-t dark:border-gray-700">
-                            <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200">Video Explanation (Optional):</h3>
-                            <div class="aspect-w-16 aspect-h-9 rounded-md overflow-hidden shadow-lg" v-html="lesson.video_embed_html">
-                            </div>
+                        <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="text-xl font-semibold mb-3">Assignment</h3>
+                            <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="bg-gray-900 text-gray-100 overflow-hidden shadow-sm sm:rounded-lg flex flex-col" style="height: 75vh;"> <!-- Fixed height container -->
+                <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="flex-grow h-1/2">
+                    <div ref="editorContainer" class="h-1/2 flex-grow">
                         <!-- Monaco Editor will be mounted here -->
                     </div>
 
                     <!-- Action Bar -->
-                    <div class="flex-shrink-0 px-4 py-2 border-t border-gray-700 flex justify-between items-center">
-                        <button @click="runCode" :disabled="isExecuting" class="px-4 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium disabled:opacity-50">
+                    <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 p-1 bg-green-900/30 border border-green-700 rounded-md text-green-300 text-xs font-semibold">
-                                <svg class="w-4 h-4 mr-1 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
+                            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="flex-shrink-0 bg-black p-3 text-sm font-mono overflow-auto h-1/3 border-t border-gray-700">
-                        <div v-if="checkResult === 'correct'" class="text-green-400 mb-2">✓ Output matches expected result.</div>
-                        <div v-if="checkResult === 'incorrect'" class="text-yellow-400 mb-2">! Output does not match expected result.</div>
-                        <div v-if="checkResult === 'error'" class="text-red-400 mb-2">! Code execution failed.</div>
+                    <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>
+                        <span v-if="!terminalOutput && !terminalError && !isExecuting && checkResult === null" class="text-gray-500"
+                            >Output will appear here...</span
+                        >
                     </div>
                 </div>
             </div>
@@ -245,7 +239,7 @@ const userStyle = computed(() => page.props.auth.user?.preferred_learning_style
 }
 
 /* Give editor container a minimum height */
-[ref="editorContainer"] {
+[ref='editorContainer'] {
     min-height: 200px; /* Adjust as needed */
     height: 100%; /* Allow it to fill flex space */
 }
diff --git a/resources/js/pages/quizzes/Result.vue b/resources/js/pages/quizzes/Result.vue
index 473a091..22f3640 100644
--- a/resources/js/pages/quizzes/Result.vue
+++ b/resources/js/pages/quizzes/Result.vue
@@ -1,30 +1,23 @@
 <script setup lang="ts">
-//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quiz: Object,       // { id, title }
-    attempt: Object,    // { id, score, completed_at }
-    results: Array,     // [{ question_id, question_text, options, user_answer, correct_answer, is_correct, explanation, lesson_id }, ...]
-    reviewSuggestions: Array, // [{ id, title, url }, ...]
-    deepReviewSuggestions: { // New prop for review quiz
+    quiz: Object,
+    attempt: Object,
+    results: Array,
+    reviewSuggestions: Array,
+    deepReviewSuggestions: {
         type: Array,
         default: () => [],
     },
 });
 
-//defineOptions({ layout: AppLayout });
-
-console.log(props.quiz)
-console.log(props.attempt)
-console.log(props.results)
-console.log(props.reviewSuggestions)
-// Helper to get option text by ID
-// const getOptionText = (options, optionId) => {
-//     const option = options.find(o => o.id === optionId);
-//     return option ? option.text : 'N/A';
-// };
+console.log(props.quiz);
+console.log(props.attempt);
+console.log(props.results);
+console.log(props.reviewSuggestions);
 
 const scoreColorClass = computed(() => {
     if (props.attempt.score >= 80) return 'text-green-600 dark:text-green-400';
@@ -34,106 +27,90 @@ const scoreColorClass = computed(() => {
 </script>
 
 <template>
-    <Head :title="`Quiz Results: ${quiz.title}`" />
-
-    <div class="py-12">
-        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-4">Results for: {{ quiz.title }}</h2>
-
-                    <!-- Score Display (uses attempt.score) -->
-                    <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
-                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>
-                        <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>
-                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}</p>
-                        <!-- Optional: Display attempt type -->
-                        <p v-if="attempt.type === 'random'" class="text-xs text-gray-400 dark:text-gray-500 mt-1">(Random Review)</p>
-                    </div>
-
-                    <!-- Score Display -->
-<!--                    <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">-->
-<!--                        <p class="text-lg font-medium text-gray-700 dark:text-gray-300">Your Score:</p>-->
-<!--                        <p class="text-5xl font-bold" :class="scoreColorClass">{{ attempt.score }}%</p>-->
-<!--                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}</p>-->
-<!--                    </div>-->
-
-                    <div v-if="deepReviewSuggestions.length > 0" class="mb-8 p-4 border border-orange-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/30 rounded-lg">
-                        <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-300 mb-2">Areas for Deeper Review</h3>
-                        <p class="text-sm text-orange-700 dark:text-orange-400 mb-3">
-                            You might want to revisit these topics and explore the additional resources:
-                        </p>
-                        <div v-for="suggestion in deepReviewSuggestions" :key="suggestion.id" class="mb-4 pb-3 border-b last:border-b-0 dark:border-gray-700">
-                            <h4 class="font-medium">
-                                <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400">
-                                    Lesson: {{ suggestion.title }}
-                                </Link>
-                            </h4>
-                            <div v-if="suggestion.external_resources.length > 0" class="mt-2 ml-4">
-                                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">Additional Resources:</p>
-                                <ul class="list-disc list-inside space-y-1">
-                                    <li v-for="resource in suggestion.external_resources" :key="resource.url" class="text-xs">
-                                        <a :href="resource.url" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:underline dark:text-purple-400">
-                                            {{ resource.title }} ({{ resource.type }})
-                                        </a>
-                                        <p v-if="resource.description" class="text-gray-500 dark:text-gray-500 ml-4">{{ resource.description }}</p>
-                                    </li>
-                                </ul>
-                            </div>
-                            <p v-else class="text-xs text-gray-500 dark:text-gray-400 ml-4 italic">No additional resources currently linked for this lesson.</p>
+    <AppLayout>
+        <Head :title="`Quiz Results: ${quiz.title}`" />
+
+        <div class="py-12">
+            <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
+                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 text-gray-900 md:p-8 dark:text-gray-100">
+                        <h2 class="mb-4 text-2xl font-semibold md:text-3xl">Results for: {{ quiz.title }}</h2>
+
+                        <!-- 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>
+                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                Completed on: {{ new Date(attempt.completed_at).toLocaleString() }}
+                            </p>
+                            <p v-if="attempt.type === 'random'" class="mt-1 text-xs text-gray-400 dark:text-gray-500">(Random Review)</p>
                         </div>
-                    </div>
-
-                    <!-- Review Suggestions -->
-                    <div v-if="reviewSuggestions.length > 0 && deepReviewSuggestions.length === 0" class="mb-8 p-4 border border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg">
-                        <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-2">Lessons to Review</h3>
-                        <p class="text-sm text-yellow-700 dark:text-yellow-400 mb-3">Based on your answers, you might want to review the following topics:</p>
-                        <ul class="list-disc list-inside space-y-1">
-                            <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
-                                <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400 font-medium">
-                                    {{ suggestion.title }}
-                                </Link>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!-- 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 }}
+                        <div
+                            v-if="deepReviewSuggestions.length > 0"
+                            class="mb-8 rounded-lg border border-orange-300 bg-orange-50 p-4 dark:border-orange-700 dark:bg-orange-900/30"
+                        >
+                            <h3 class="mb-2 text-lg font-semibold text-orange-800 dark:text-orange-300">Areas for Deeper Review</h3>
+                            <p class="mb-3 text-sm text-orange-700 dark:text-orange-400">
+                                You might want to revisit these topics and explore the additional resources:
+                            </p>
+                            <div
+                                v-for="suggestion in deepReviewSuggestions"
+                                :key="suggestion.id"
+                                class="mb-4 border-b pb-3 last:border-b-0 dark:border-gray-700"
+                            >
+                                <h4 class="font-medium">
+                                    <Link :href="suggestion.url" class="text-blue-600 hover:underline dark:text-blue-400">
+                                        Lesson: {{ suggestion.title }}
+                                    </Link>
+                                </h4>
+                                <div v-if="suggestion.external_resources.length > 0" class="mt-2 ml-4">
+                                    <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400">Additional Resources:</p>
+                                    <ul class="list-inside list-disc space-y-1">
+                                        <li v-for="resource in suggestion.external_resources" :key="resource.url" class="text-xs">
+                                            <a
+                                                :href="resource.url"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="text-purple-600 hover:underline dark:text-purple-400"
+                                            >
+                                                {{ resource.title }} ({{ resource.type }})
+                                            </a>
+                                            <p v-if="resource.description" class="ml-4 text-gray-500 dark:text-gray-500">
+                                                {{ resource.description }}
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <p v-else class="ml-4 text-xs text-gray-500 italic dark:text-gray-400">
+                                    No additional resources currently linked for this lesson.
                                 </p>
                             </div>
                         </div>
-                        <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>-->
 
-                    <!-- Back/Next Links -->
-                    <div class="mt-8 border-t pt-6 flex justify-between">
-                        <!-- 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>
+                        <!-- Review Suggestions -->
+                        <div
+                            v-if="reviewSuggestions.length > 0 && deepReviewSuggestions.length === 0"
+                            class="mb-8 rounded-lg border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900/30"
+                        >
+                            <h3 class="mb-2 text-lg font-semibold text-yellow-800 dark:text-yellow-300">Lessons to Review</h3>
+                            <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-400">
+                                Based on your answers, you might want to review the following topics:
+                            </p>
+                            <ul class="list-inside list-disc space-y-1">
+                                <li v-for="suggestion in reviewSuggestions" :key="suggestion.id">
+                                    <Link :href="suggestion.url" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
+                                        {{ suggestion.title }}
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="mt-8 flex justify-between border-t pt-6">
+                            <Link v-if="false" href="#" class="text-blue-600 hover:underline dark:text-blue-400">« Back to Module</Link>
+                            <Link :href="route('dashboard')" class="text-blue-600 hover:underline dark:text-blue-400">Go to Dashboard »</Link>
+                        </div>
                     </div>
-
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/pages/quizzes/Show.vue b/resources/js/pages/quizzes/Show.vue
index 1e4933e..b3c0d26 100644
--- a/resources/js/pages/quizzes/Show.vue
+++ b/resources/js/pages/quizzes/Show.vue
@@ -1,172 +1,168 @@
 <script setup lang="ts">
-//import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
 const props = defineProps({
-    quiz: Object, // Contains id, title, description, questions (array)
-       // Array of { id, title, url, external_resources: [{title, url, type, description}, ...] }
+    quiz: Object,
 });
 
-console.log(props.quiz)
-//defineOptions({ layout: AppLayout });
+console.log(props.quiz);
 
-// Use Inertia's useForm helper to manage the answers and submission state
 const form = useForm({
-    answers: {}, // Store answers as { question_id: selected_option_id }
+    answers: {},
 });
 
-// Initialize answers object based on questions
-props.quiz.questions.forEach(q => {
-    form.answers[q.id] = null; // Initialize each answer to null
+props.quiz.questions.forEach((q) => {
+    form.answers[q.id] = null;
 });
 
 const submitQuiz = () => {
-    // Ensure all questions are answered (optional, but good practice)
-    const unanswered = props.quiz.questions.some(q => form.answers[q.id] === null);
+    // Ensure all questions are answered
+    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('quizzes.submit', { quiz: props.quiz.id }), {
-        preserveScroll: true, // Keep scroll position on validation errors
+        preserveScroll: true,
         onError: (errors) => {
-            // Handle potential validation errors from backend
             console.error('Submission errors:', errors);
             alert('There was an error submitting your answers. Please check the console.');
         },
-        onFinish: () => {
-            // Form processing finished (success or error)
-            // We don't need to do much here as success navigates via Inertia response
-        }
     });
 };
 
 const allAnswered = computed(() => {
     if (!props.quiz?.questions || props.quiz.questions.length === 0) return true;
-    // Check for null OR empty string (for fill_blank potentially)
-    return props.quiz.questions.every(q => {
+    return props.quiz.questions.every((q) => {
         const answer = form.answers[q.id];
         return answer !== null && answer !== undefined && answer !== '';
     });
 });
-// const allAnswered = computed(() => {
-//     if (!props.quiz.questions || props.quiz.questions.length === 0) return true; // No questions = technically all answered
-//     return props.quiz.questions.every(q => form.answers[q.id] !== null);
-// });
-
 </script>
 
 <template>
-    <Head :title="`Quiz: ${quiz.title}`" />
-
-    <div class="py-12">
-        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 md:p-8 text-gray-900 dark:text-gray-100">
-
-                    <h2 class="text-2xl md:text-3xl font-semibold mb-2">{{ quiz.title }}</h2>
-                    <p v-if="quiz.description" class="text-gray-600 dark:text-gray-400 mb-6">{{ quiz.description }}</p>
-
-                    <form @submit.prevent="submitQuiz">
-                        <div v-if="quiz.questions.length > 0" class="space-y-6">
-                            <div v-for="(question, index) in quiz.questions" :key="question.id" class="border-t pt-6">
-                                <p class="font-semibold mb-3">
-                                    {{ index + 1 }}. {{ question.text }}
-                                </p>
-
-                                <!-- Render Multiple Choice Options -->
-                                <div v-if="question.type === 'multiple_choice'" class="space-y-2 ml-4">
-                                    <label v-for="option in question.options" :key="option.id"
-                                           class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === option.id }">
-                                        <input
-                                            type="radio"
-                                            :name="`question_${question.id}`"
-                                            :value="option.id"
-                                            v-model="form.answers[question.id]"
-                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+    <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,
+                                            }"
                                         >
-                                        <span>{{ option.text }}</span>
-                                    </label>
-                                </div>
-
-                                <div v-else-if="question.type === 'true_false'" class="space-y-2 ml-4">
-                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'true' }">
+                                            <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="true"
+                                            type="text"
                                             v-model="form.answers[question.id]"
-                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
-                                        />
-                                        <span>True</span>
-                                    </label>
-                                    <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer"
-                                           :class="{ 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700': form.answers[question.id] === 'false' }">
-                                        <input
-                                            type="radio"
                                             :name="`question_${question.id}`"
-                                            value="false"
-                                            v-model="form.answers[question.id]"
-                                            class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 mr-3"
+                                            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>False</span>
-                                    </label>
-                                </div>
-
-                                <!-- Fill in the Blank -->
-                                <div v-else-if="question.type === 'fill_blank'" class="ml-4 mt-2">
-                                    <!-- Display question text above (already done) -->
-                                    <!-- Provide an input field for the answer -->
-                                    <input
-                                        type="text"
-                                        v-model="form.answers[question.id]"
-                                        :name="`question_${question.id}`"
-                                        placeholder="Type your answer here"
-                                        class="mt-1 block w-full md:w-1/2 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
-                                    />
-                                    <!-- Optional: Add styling or hints -->
+                                    </div>
                                 </div>
-
-                                <!-- Add other types as needed -->
-
-                            </div>
-
-
-                            <!-- Add rendering for other question types here later -->
-                                <!--<div v-else-if="question.type === 'other_type'"> ... </div>-->
-
                             </div>
 
                             <!-- Submission Button -->
-                            <div class="mt-8 pt-6 border-t">
+                            <div class="mt-8 border-t pt-6">
                                 <button
                                     type="submit"
                                     :disabled="form.processing || !allAnswered"
-                                    class="w-full md:w-auto inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    class="inline-flex w-full items-center justify-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:w-auto"
                                 >
-                                    <svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <svg
+                                        v-if="form.processing"
+                                        class="mr-3 -ml-1 h-5 w-5 animate-spin text-white"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                    >
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        <path
+                                            class="opacity-75"
+                                            fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        ></path>
                                     </svg>
                                     <span>{{ form.processing ? 'Submitting...' : 'Submit Answers' }}</span>
                                 </button>
-                                <p v-if="!allAnswered && !form.processing" class="text-sm text-red-600 mt-2">Please answer all questions.</p>
+                                <p v-if="!allAnswered && !form.processing" class="mt-2 text-sm text-red-600">Please answer all questions.</p>
 
                                 <div v-else>
                                     <p>This quiz doesn't have any questions yet.</p>
                                 </div>
                             </div>
-                    </form>
-
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index a1028f6..f8f8f37 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -70,7 +70,7 @@ const submit = () => {
                     </div>
 
                     <div v-if="mustVerifyEmail && !user.email_verified_at">
-                        <p class="-mt-4 text-sm text-muted-foreground">
+                        <p class="text-muted-foreground -mt-4 text-sm">
                             Your email address is unverified.
                             <Link
                                 :href="route('verification.send')"
diff --git a/resources/js/pages/stats/Show.vue b/resources/js/pages/stats/Show.vue
index c8af2e0..d4f5c34 100644
--- a/resources/js/pages/stats/Show.vue
+++ b/resources/js/pages/stats/Show.vue
@@ -1,27 +1,10 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import { Head } from '@inertiajs/vue3';
-import { Pie, Bar } from 'vue-chartjs';
-import {
-    Chart as ChartJS,
-    Title,
-    Tooltip,
-    Legend,
-    ArcElement,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-} from 'chart.js';
+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
-);
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, BarElement);
 
 const props = defineProps({
     totalQuizzesAttempted: Number,
@@ -36,11 +19,7 @@ const pieChartData = {
     datasets: [
         {
             backgroundColor: ['#4CAF50', '#FFC107', '#F44336'], // Green, Yellow, Red
-            data: [
-                props.quizScoreDistribution.green || 0,
-                props.quizScoreDistribution.yellow || 0,
-                props.quizScoreDistribution.red || 0,
-            ],
+            data: [props.quizScoreDistribution.green || 0, props.quizScoreDistribution.yellow || 0, props.quizScoreDistribution.red || 0],
         },
     ],
 };
@@ -59,11 +38,10 @@ const pieChartOptions = {
     },
 };
 
-
 // --- Contribution Graph Data & Options (Bar Chart for now) ---
 const processContributionDataForBarChart = () => {
     const monthlyCompletions = {};
-    props.lessonContributionData?.forEach(item => {
+    props.lessonContributionData?.forEach((item) => {
         const monthYear = item.date.substring(0, 7); // YYYY-MM
         if (!monthlyCompletions[monthYear]) {
             monthlyCompletions[monthYear] = 0;
@@ -72,10 +50,10 @@ const processContributionDataForBarChart = () => {
     });
 
     const labels = Object.keys(monthlyCompletions).sort();
-    const data = labels.map(label => monthlyCompletions[label]);
+    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
+        labels: labels.map((label) => new Date(label + '-01').toLocaleString('default', { month: 'short', year: 'numeric' })), // Format for display
         datasets: [
             {
                 label: 'Lessons Completed',
@@ -105,71 +83,71 @@ const contributionBarChartOptions = {
             beginAtZero: true,
             ticks: {
                 precision: 0,
-            }
+            },
         },
     },
 };
-
 </script>
 
 <template>
     <Head title="My Statistics" />
-<AppLayout>
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
-
-            <!-- Header -->
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    <h2 class="text-2xl font-semibold">My Learning Statistics</h2>
+    <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>
-            </div>
 
-            <!-- Stats Cards -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <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="text-xs text-gray-500 dark:text-gray-400 mt-1">Consecutive days with lesson completions.</p>
-                </div>
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <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="text-xs text-gray-500 dark:text-gray-400 mt-1">Total number of quizzes you've started.</p>
+                <!-- 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>
-            </div>
 
-            <!-- Charts Section -->
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <!-- Pie Chart -->
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <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 items-center justify-center h-full text-gray-500 dark:text-gray-400">
-                            No quiz data yet to display distribution.
+                <!-- 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>
-                </div>
 
-                <!-- Contribution Bar Chart -->
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <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 items-center justify-center h-full text-gray-500 dark:text-gray-400">
-                            No lesson completion data yet.
+                    <!-- 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>
-    </div>
-</AppLayout>
+    </AppLayout>
 </template>