diff --git a/app/Actions/Auth/CreateZohoLeadAction.php b/app/Actions/Auth/CreateZohoLeadAction.php
new file mode 100644
index 0000000..e89ad8b
--- /dev/null
+++ b/app/Actions/Auth/CreateZohoLeadAction.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Actions\Auth;
+
+use Asciisd\ZohoV8\Models\ZohoLead;
+use Illuminate\Support\Facades\Log;
+
+class CreateZohoLeadAction
+{
+    /**
+     * Create a Zoho lead
+     */
+    public function execute(array $data): mixed
+    {
+        try {
+            return ZohoLead::create([
+                'First_Name' => $data['first_name'],
+                'Last_Name' => $data['last_name'],
+                'Email' => $data['email'],
+                'Phone' => $data['phone'],
+                'Lead_Source' => $data['lead_source'],
+            ]);
+        } catch (\Throwable $e) {
+            Log::channel('zoho_sync')->error('ZohoLead creation failed', [
+                'email' => $data['email'] ?? null,
+                'error' => $e->getMessage(),
+            ]);
+
+            return null;
+        }
+    }
+}
diff --git a/app/Actions/Books/GenerateBookDownloadUrl.php b/app/Actions/Books/GenerateBookDownloadUrl.php
new file mode 100644
index 0000000..6da34da
--- /dev/null
+++ b/app/Actions/Books/GenerateBookDownloadUrl.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Actions\Books;
+
+use App\Models\Book;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Log;
+
+class GenerateBookDownloadUrl
+{
+    /**
+     * Generate a temporary download URL for a book
+     */
+    public function execute(Book $book, int $minutesValid = 30): ?string
+    {
+        try {
+            // Check if file_src exists
+            if (!$book->file_src) {
+                Log::warning('Book file_src is empty', ['book_id' => $book->id]);
+                return null;
+            }
+
+            $path = $this->extractPath($book->file_src);
+
+            if (!$path) {
+                Log::warning('Could not extract path from file_src', [
+                    'book_id' => $book->id,
+                    'file_src' => $book->file_src
+                ]);
+                return null;
+            }
+
+            return Storage::disk('s3_public')->temporaryUrl(
+                $path,
+                now()->addMinutes($minutesValid)
+            );
+
+        } catch (\Exception $e) {
+            Log::error('Failed to generate book download URL', [
+                'book_id' => $book->id,
+                'error' => $e->getMessage()
+            ]);
+            return null;
+        }
+    }
+
+    /**
+     * Extract path from file_src (supports both JSON and plain string)
+     */
+    private function extractPath(string $fileSrc): ?string
+    {
+        // Try to decode as JSON first
+        $decoded = json_decode($fileSrc);
+
+        if (json_last_error() === JSON_ERROR_NONE && is_object($decoded) && isset($decoded->path)) {
+            return $decoded->path;
+        }
+
+        // If not JSON, treat as plain path
+        return trim($fileSrc) ?: null;
+    }
+}
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index c5a5fac..b7aa4aa 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -3,20 +3,22 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Http\Requests\Auth\RegisterUserRequest;
 use App\Models\User;
+use App\Services\UserRegistrationService;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Hash;
-use Illuminate\Validation\Rules;
 use Inertia\Inertia;
 use Inertia\Response;
-use Asciisd\ZohoV8\Models\ZohoLead;
-use Illuminate\Support\Facades\Log;
 
 class RegisteredUserController extends Controller
 {
+    public function __construct(
+        private UserRegistrationService $registrationService
+    ) {}
+
     /**
      * Show the registration page.
      */
@@ -30,71 +32,25 @@ public function create(): Response
      *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function store(Request $request): RedirectResponse
+    public function store(RegisterUserRequest $request): RedirectResponse
     {
-        $request->validate([
-            'first_name' => 'required|string|max:255',
-            'last_name' => 'required|string|max:255',
-            'email' => 'required|string|lowercase|email|max:255|unique:'.User::class,
-            'phone' => 'required||phone|max:255|unique:'.User::class,
-            'password' => ['required', 'confirmed', Rules\Password::defaults()],
-            // 'country' => 'required|string|max:2',
-            // 'terms' => 'required|accepted',
-        ]);
+        $validated = $request->validated();
 
-        $utm_data = null;
-        if (request()->hasCookie('utm')) {
-            $utm_data = json_decode(request()->cookie('utm'));
-        }
+        // Extract UTM data
+        $utmData = $this->registrationService->extractUtmData();
 
-        $user = User::create([
-            'first_name' => $request->first_name,
-            'last_name' => $request->last_name,
-            'email' => $request->email,
-            'phone' => $request->phone,
-            'country' => $request->country,
-            'password' => Hash::make($request->password),
-            'utm_source' => $utm_data->utm_source ?? null,
-            'utm_content' => $utm_data->utm_content ?? null,
-            'utm_medium' => $utm_data->utm_medium ?? null,
-            'utm_campaign' => $utm_data->utm_campaign ?? null,
-            'utm_term' => $utm_data->utm_term ?? null,
-        ]);
+        // Register user
+        $user = $this->registrationService->register($validated, $utmData);
 
-        // Create Zoho Contact
-        try {
-            $this->createZohoLead([
-                'first_name' => $user->first_name,
-                'last_name' => $user->last_name,
-                'email' => $user->email,
-                'phone' => $user->phone,
-                'lead_source' => 'trader_factory',
-            ]);
-        } catch (\Throwable $e) {
-            Log::channel('zoho_sync')->error('ZohoContact creation failed', [
-                'user_id' => $user->id,
-                'email' => $user->email,
-                'error' => $e->getMessage(),
-            ]);
-        }
+        // Create Zoho Lead (non-blocking)
+        $this->registrationService->createZohoLead($user);
 
+        // Fire registered event
         event(new Registered($user));
 
+        // Login user
         Auth::login($user);
 
         return to_route('dashboard');
     }
-
-    public function createZohoLead(array $data)
-    {
-        return ZohoLead::create([
-            'First_Name' => $data['first_name'],
-            'Last_Name' => $data['last_name'],
-            'Email' => $data['email'],
-            'Phone' => $data['phone'],
-            'Lead_Source' => $data['lead_source'],
-        ]);
-    }
-
-
-}
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/BookController.php b/app/Http/Controllers/BookController.php
index bc0affa..922809c 100644
--- a/app/Http/Controllers/BookController.php
+++ b/app/Http/Controllers/BookController.php
@@ -2,85 +2,72 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\Books\GenerateBookDownloadUrl;
 use App\Http\Resources\BookResource;
 use App\Models\Book;
-use App\Models\Order;
-use App\Notifications\BookInvoice;
-use App\Notifications\SendBookLink;
-use Illuminate\Support\Facades\Storage;
+use App\Services\BookService;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Http\RedirectResponse;
 use Inertia\Inertia;
+use Inertia\Response;
 
 class BookController extends Controller
 {
-    public function index()
+    use AuthorizesRequests;
+
+    public function __construct(
+        private BookService $bookService,
+        private GenerateBookDownloadUrl $generateDownloadUrl
+    ) {}
+
+    public function index(): Response
     {
         return Inertia::render('books/Index', [
-            'books' => BookResource::collection(Book::all())
-        ])->with('success', 'تم إرسال رابط التحميل على البريد الإلكتروني');
+            'books' => BookResource::collection(Book::all()),
+        ]);
     }
+
     /**
      * Send download link to user's email
      */
-    public function sendDownloadLink(Book $book)
+    public function sendDownloadLink(Book $book): RedirectResponse
     {
-        $user = auth()->user();
-        $user->notify(new SendBookLink($book));
+        $this->authorize('download', $book);
+        $this->bookService->sendDownloadLink($book, auth()->user());
 
-        return redirect()->back()->with('success', 'تم إرسال رابط التحميل على البريد الإلكتروني');
+        // return redirect()->back()->with('success', 'تم إرسال رابط التحميل على البريد الإلكتروني');
+        return redirect()->route('books.download.page', $book->id)
+            ->with('success', __('locale.download_link_sent'));
     }
 
     /**
      * Display download page for a book
      */
-    public function downloadPage(Book $book)
+    public function downloadPage(Book $book): Response|RedirectResponse
     {
-        // Check if the user owns the book
-        if (! $book->purchased()) {
-            return redirect()->route('books.index')->with('error', 'لا يمكنك تحميل هذا الكتاب لأنك لم تشتريه بعد');
-        }
-
-        // Get the latest order for this book
-        $order = Order::where([
-            'user_id' => auth()->id(),
-            'orderable_type' => Book::class,
-            'orderable_id' => $book->id,
-            'status' => 'SUCCESS',
-        ])->latest()->first();
+        $this->authorize('download', $book);
 
-        // Send invoice email if it's a new purchase
-        if ($order && $order->created_at->diffInMinutes(now()) < 5) {
-            auth()->user()->notify(new BookInvoice($book, $order));
-        }
-
-        // Generate temporary download URL
-        $url = null;
-        if ($book->file_src) {
-            $path = json_decode($book->file_src)->path;
-            $url = Storage::disk('s3_public')->temporaryUrl($path, now()->addMinutes(30));
-        }
+        $data = $this->bookService->prepareDownloadData($book, auth()->user());
 
-        return Inertia::render('Books/Download', [
-            'book' => BookResource::make($book),
-            'downloadUrl' => $url,
+        return Inertia::render('books/Download', [
+            'book' => BookResource::make($data['book']),
+            'downloadUrl' => $data['downloadUrl'],
         ]);
     }
 
     /**
      * Direct download of the book file
      */
-    public function directDownload(Book $book)
+    public function directDownload(Book $book): RedirectResponse
     {
-        // Check if the user owns the book
-        if (! $book->purchased()) {
-            return redirect()->route('books.index')->with('error', 'لا يمكنك تحميل هذا الكتاب لأنك لم تشتريه بعد');
-        }
+        $this->authorize('download', $book);
+
+        $url = $this->generateDownloadUrl->execute($book, 5);
 
-        if (! $book->file_src) {
+        if (! $url) {
             return redirect()->back()->with('error', 'ملف الكتاب غير متوفر');
         }
 
-        $path = json_decode($book->file_src)->path;
-
-        return redirect(Storage::disk('s3_public')->temporaryUrl($path, now()->addMinutes(5)));
+        return redirect($url);
     }
 }
diff --git a/app/Http/Controllers/CourseController.php b/app/Http/Controllers/CourseController.php
index e885520..0e8959f 100644
--- a/app/Http/Controllers/CourseController.php
+++ b/app/Http/Controllers/CourseController.php
@@ -18,7 +18,14 @@ class CourseController extends Controller
     public function index(Course $course): InertiaResponse
     {
         return Inertia::render('courses/Index', [
-            'courses' => CourseResource::collection(Course::with('sections.lessons')->get()),
+            'courses' => CourseResource::collection(
+                Course::query()
+                    ->isPublished()
+                    ->isActive()
+                    ->hasSections()
+                    ->with('sections.lessons')
+                    ->get()
+            ),
             'metadata' => MetaData::where('page_slug', 'courses')->first(),
         ]);
     }
@@ -49,4 +56,4 @@ public function sections(Section $section): InertiaResponse
             'metadata' => MetaData::where('page_slug', $section->slug)->first(),
         ]);
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index ec7074a..1fea2ae 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Enums\OrderStatus;
 use App\Http\Resources\OrderResource;
 use App\Models\Order;
 use Inertia\Inertia;
@@ -10,10 +11,15 @@ class DashboardController extends Controller
 {
     public function __invoke()
     {
+        $user = auth()->user()->loadCount(['courseOrders', 'bookOrders', 'orders']);
+
         return Inertia::render('Dashboard', [
             'orders' => OrderResource::collection(
-                Order::latest()->with('orderable')->get()
+                Order::where('status', OrderStatus::Success)->latest()->with('orderable')->get()
             ),
+            'courses_count' => $user->course_orders_count,
+            'books_count' => $user->book_orders_count,
+            'orders_count' => $user->orders_count,
         ]);
     }
 }
diff --git a/app/Http/Controllers/MagazineController.php b/app/Http/Controllers/MagazineController.php
index 7219436..ec08ef0 100644
--- a/app/Http/Controllers/MagazineController.php
+++ b/app/Http/Controllers/MagazineController.php
@@ -2,9 +2,110 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\MagazineResource;
+use App\Models\Lesson;
+use App\Models\Magazine;
+use App\Models\Section;
+use App\Models\User;
+use App\Policies\Policy;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 
 class MagazineController extends Controller
 {
-    //
-}
+    use AuthorizesRequests;
+
+    public function show(Magazine $magazine)
+    {
+        // $this->authorize(Policy::View, $magazine);
+        // return MagazineResource::make($magazine);
+        return Inertia::render('magazine/Show', [
+            'magazine' => MagazineResource::make($magazine),
+            'lesson' => LessonResource::make($magazine->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, Magazine $magazine)
+    {
+        if ($request->user()->isProgressStarted($magazine)) {
+            event(new EventableStart($magazine, $request->user()));
+
+            if ($request->user()->isProgressStarted($magazine->lesson)) {
+                event(new EventableStart($magazine->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($magazine->section)) {
+                event(new EventableStart($magazine->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $magazine);
+        event(new EventableUpdate($magazine, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($magazine, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $magazine->lesson);
+            $this->updateSectionProgress($request->user(), $magazine->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => MagazineResource::make($magazine),
+            'href' => route('magazines.rates', $magazine),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, Magazine $magazine)
+    {
+        $request->user()->toggleFavorite($magazine);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, Magazine $magazine)
+    {
+        $request->user()->rate($magazine, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/MasterController.php b/app/Http/Controllers/MasterController.php
new file mode 100644
index 0000000..443163d
--- /dev/null
+++ b/app/Http/Controllers/MasterController.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+class MasterController extends Controller
+{
+    /**
+     * Data holder.
+     */
+    protected array $data = [];
+
+    public function __construct() {}
+}
diff --git a/app/Http/Controllers/QuickScanController.php b/app/Http/Controllers/QuickScanController.php
index da96346..94cbe32 100644
--- a/app/Http/Controllers/QuickScanController.php
+++ b/app/Http/Controllers/QuickScanController.php
@@ -2,9 +2,108 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\QuickScanResource;
+use App\Models\Lesson;
+use App\Models\QuickScan;
+use App\Models\Section;
+use App\Models\User;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class QuickScanController extends Controller
 {
-    //
+    /**
+     * Display the specified resource.
+     */
+    public function show(QuickScan $quickScan)
+    {
+        // return QuickScanResource::make($quickScan);
+        return Inertia::render('quick-scan/Show', [
+            'quickScan' => QuickScanResource::make($quickScan->load('quickQuestions')),
+            'lesson' => LessonResource::make($quickScan->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, QuickScan $quickScan)
+    {
+        if ($request->user()->isProgressStarted($quickScan)) {
+            event(new EventableStart($quickScan, $request->user()));
+
+            if ($request->user()->isProgressStarted($quickScan->lesson)) {
+                event(new EventableStart($quickScan->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($quickScan->section)) {
+                event(new EventableStart($quickScan->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $quickScan);
+        event(new EventableUpdate($quickScan, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($quickScan, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $quickScan->lesson);
+            $this->updateSectionProgress($request->user(), $quickScan->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => QuickScanResource::make($quickScan),
+            'href' => route('quickScans.rates', $quickScan),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, QuickScan $quickScan)
+    {
+        $request->user()->toggleFavorite($quickScan);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, QuickScan $quickScan)
+    {
+        $request->user()->rate($quickScan, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
 }
diff --git a/app/Http/Controllers/QuizController.php b/app/Http/Controllers/QuizController.php
index 4cc0568..7db1b57 100644
--- a/app/Http/Controllers/QuizController.php
+++ b/app/Http/Controllers/QuizController.php
@@ -2,9 +2,110 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\QuizResource;
+use App\Models\Lesson;
+use App\Models\Quiz;
+use App\Models\Section;
+use App\Models\User;
+use App\Policies\Policy;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class QuizController extends Controller
 {
-    //
+    /**
+     * Display the specified resource.
+     */
+    public function show(Quiz $quiz)
+    {
+        // $this->authorize(Policy::View, $quiz);
+        // return  QuizResource::make($quiz);
+        return Inertia::render('quiz/Show', [
+            'quiz' => QuizResource::make($quiz),
+            'lesson' => LessonResource::make($quiz->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, Quiz $quiz)
+    {
+        if ($request->user()->isProgressStarted($quiz)) {
+            event(new EventableStart($quiz, $request->user()));
+
+            if ($request->user()->isProgressStarted($quiz->lesson)) {
+                event(new EventableStart($quiz->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($quiz->section)) {
+                event(new EventableStart($quiz->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $quiz);
+        event(new EventableUpdate($quiz, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($quiz, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $quiz->lesson);
+            $this->updateSectionProgress($request->user(), $quiz->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => QuizResource::make($quiz),
+            'href' => route('quizzes.rates', $quiz),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, Quiz $quiz)
+    {
+        $request->user()->toggleFavorite($quiz);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, Quiz $quiz)
+    {
+        $request->user()->rate($quiz, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
 }
diff --git a/app/Http/Controllers/RevisionController.php b/app/Http/Controllers/RevisionController.php
index 9ab5b0f..0546901 100644
--- a/app/Http/Controllers/RevisionController.php
+++ b/app/Http/Controllers/RevisionController.php
@@ -2,9 +2,108 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\RevisionResource;
+use App\Models\Lesson;
+use App\Models\Revision;
+use App\Models\Section;
+use App\Models\User;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class RevisionController extends Controller
 {
-    //
-}
+    /**
+     * Display the specified resource.
+     */
+    public function show(Revision $revision)
+    {
+        // return RevisionResource::make($revision->load('revisionItems'));
+        return Inertia::render('revision/Show', [
+            'revision' => RevisionResource::make($revision->load('revisionItems')),
+            'lesson' => LessonResource::make($revision->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, Revision $revision)
+    {
+        if ($request->user()->isProgressStarted($revision)) {
+            event(new EventableStart($revision, $request->user()));
+
+            if ($request->user()->isProgressStarted($revision->lesson)) {
+                event(new EventableStart($revision->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($revision->section)) {
+                event(new EventableStart($revision->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $revision);
+        event(new EventableUpdate($revision, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($revision, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $revision->lesson);
+            $this->updateSectionProgress($request->user(), $revision->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => RevisionResource::make($revision),
+            'href' => route('revisions.rates', $revision),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, Revision $revision)
+    {
+        $request->user()->toggleFavorite($revision);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, Revision $revision)
+    {
+        $request->user()->rate($revision, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Settings/BookController.php b/app/Http/Controllers/Settings/BookController.php
new file mode 100644
index 0000000..43d4348
--- /dev/null
+++ b/app/Http/Controllers/Settings/BookController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\BookResource;
+use App\Models\Book;
+use App\Models\MetaData;
+use App\Models\Order;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class BookController extends Controller
+{
+    /**
+     * Show the user's purchased books.
+     */
+    public function index(Request $request): Response
+    {
+        $books_orders = Order::where('user_id', $request->user()->id)
+            ->where('orderable_type', Book::class)
+            ->pluck('orderable_id')
+            ->toArray();
+
+        return Inertia::render('settings/Books', [
+            'books' => BookResource::collection(Book::whereIn('id', $books_orders)->get()),
+            'metadata' => MetaData::where('page_slug', 'books')->first(),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Settings/CourseController.php b/app/Http/Controllers/Settings/CourseController.php
new file mode 100644
index 0000000..dc2d368
--- /dev/null
+++ b/app/Http/Controllers/Settings/CourseController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\CourseResource;
+use App\Models\Course;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use App\Models\MetaData;
+use App\Models\Order;
+
+class CourseController extends Controller
+{
+    /**
+     * Show the user's purchased courses.
+     */
+    public function index(Request $request): Response
+    {
+        $courses_orders = Order::where('user_id', auth()->id())->where('orderable_type', Course::class)->pluck('orderable_id')->toArray();
+        // dd($courses_orders);
+        return Inertia::render('settings/Courses', [
+            'courses' => CourseResource::collection(Course::whereIn('id', $courses_orders)->with('sections.lessons')->get()),
+            'metadata' => MetaData::where('page_slug', 'courses')->first(),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/TodoController.php b/app/Http/Controllers/TodoController.php
index 9fd5492..b713886 100644
--- a/app/Http/Controllers/TodoController.php
+++ b/app/Http/Controllers/TodoController.php
@@ -2,9 +2,108 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\TodoResource;
+use App\Models\Lesson;
+use App\Models\Section;
+use App\Models\Todo;
+use App\Models\User;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class TodoController extends Controller
 {
-    //
+    /**
+     * Display the specified resource.
+     */
+    public function show(Todo $todo)
+    {
+        // return  TodoResource::make($todo);
+        return Inertia::render('todo/Show', [
+            'todo' => TodoResource::make($todo),
+            'lesson' => LessonResource::make($todo->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, Todo $todo)
+    {
+        if ($request->user()->isProgressStarted($todo)) {
+            event(new EventableStart($todo, $request->user()));
+
+            if ($request->user()->isProgressStarted($todo->lesson)) {
+                event(new EventableStart($todo->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($todo->section)) {
+                event(new EventableStart($todo->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $todo);
+        event(new EventableUpdate($todo, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($todo, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $todo->lesson);
+            $this->updateSectionProgress($request->user(), $todo->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => TodoResource::make($todo),
+            'href' => route('todos.rates', $todo),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, Todo $todo)
+    {
+        $request->user()->toggleFavorite($todo);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, Todo $todo)
+    {
+        $request->user()->rate($todo, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
 }
diff --git a/app/Http/Controllers/ToolsController.php b/app/Http/Controllers/ToolsController.php
new file mode 100644
index 0000000..0090612
--- /dev/null
+++ b/app/Http/Controllers/ToolsController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response as InertiaResponse;
+
+class ToolsController extends MasterController
+{
+    public function index(): InertiaResponse
+    {
+        return Inertia::render('tools/Index');
+    }
+
+    public function positionSize(): InertiaResponse
+    {
+        return Inertia::render('tools/position-size/Index');
+    }
+
+    public function pipValue(): InertiaResponse
+    {
+        return Inertia::render('tools/pip-value/Index');
+    }
+
+    public function marginCalculator(): InertiaResponse
+    {
+        return Inertia::render('tools/margin-calculator/Index');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/VisualController.php b/app/Http/Controllers/VisualController.php
index c704ee3..9728642 100644
--- a/app/Http/Controllers/VisualController.php
+++ b/app/Http/Controllers/VisualController.php
@@ -2,9 +2,110 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\EventableComplete;
+use App\Events\EventableStart;
+use App\Events\EventableUpdate;
+use App\Http\Requests\ProgressRequest;
+use App\Http\Requests\RatingRequest;
+use App\Http\Resources\LessonResource;
+use App\Http\Resources\VisualResource;
+use App\Models\Lesson;
+use App\Models\Section;
+use App\Models\User;
+use App\Models\Visual;
+use App\Policies\Policy;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class VisualController extends Controller
 {
-    //
+    /**
+     * Display the specified resource.
+     */
+    public function show(Visual $visual)
+    {
+        // $this->authorize(Policy::View, $visual);
+
+        return Inertia::render('visual/Show', [
+            'visual' => VisualResource::make($visual),
+            'lesson' => LessonResource::make($visual->lesson),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function updateProgress(ProgressRequest $request, Visual $visual)
+    {
+        if ($request->user()->isProgressStarted($visual)) {
+            event(new EventableStart($visual, $request->user()));
+
+            if ($request->user()->isProgressStarted($visual->lesson)) {
+                event(new EventableStart($visual->lesson, $request->user()));
+            }
+
+            if ($request->user()->isProgressStarted($visual->section)) {
+                event(new EventableStart($visual->section, $request->user()));
+            }
+        }
+
+        $request->user()->addProgress($request->user_progress, $visual);
+        event(new EventableUpdate($visual, $request->user(), $request->user_progress));
+
+        if ($request->user()->isProgressCompleted($request->user_progress)) {
+            event(new EventableComplete($visual, $request->user()));
+
+            $this->updateLessonProgress($request->user(), $visual->lesson);
+            $this->updateSectionProgress($request->user(), $visual->section);
+        }
+
+        return redirect()->back()->with('progress', [
+            'model' => VisualResource::make($visual),
+            'href' => route('visuals.rates', $visual),
+        ]);
+    }
+
+    public function updateFavorites(Request $request, Visual $visual)
+    {
+        $request->user()->toggleFavorite($visual);
+
+        return redirect()->back();
+    }
+
+    public function updateRate(RatingRequest $request, Visual $visual)
+    {
+        $request->user()->rate($visual, $request->rate);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Update lesson progress and trigger related events.
+     */
+    protected function updateLessonProgress(User $user, Lesson $lesson): void
+    {
+        $lesson_progress = $lesson->calcLessonProgress($user->id);
+        $user->addProgress($lesson_progress, $lesson);
+
+        event(new EventableUpdate($lesson, $user, $lesson_progress));
+
+        if ($user->isProgressCompleted($lesson_progress)) {
+            event(new EventableComplete($lesson, $user));
+        }
+    }
+
+    /**
+     * Update section progress and trigger related events.
+     */
+    protected function updateSectionProgress(User $user, Section $section): void
+    {
+        $section_progress = $section->calcSectionProgress($user->id);
+        $user->addProgress($section_progress, $section);
+
+        event(new EventableUpdate($section, $user, $section_progress));
+
+        if ($user->isProgressCompleted($section_progress)) {
+            event(new EventableComplete($section, $user));
+        }
+    }
 }
diff --git a/app/Http/Controllers/WelcomeController.php b/app/Http/Controllers/WelcomeController.php
index 554e815..006d054 100644
--- a/app/Http/Controllers/WelcomeController.php
+++ b/app/Http/Controllers/WelcomeController.php
@@ -4,6 +4,7 @@
 
 use App\Http\Resources\BookResource;
 use App\Models\Book;
+use App\Models\Faq;
 use App\Models\MetaData;
 use Inertia\Inertia;
 
@@ -20,4 +21,31 @@ public function about()
     {
         return Inertia::render('about/Index');
     }
+
+    public function faq()
+    {
+        return Inertia::render('faqs/Index', [
+            'faqs' => Faq::query()
+                ->where(function ($q) {
+                    $q->where('is_published', true)
+                      ->orWhereNull('is_published');
+                })
+                ->orderBy('order_column')
+                ->get(['id','question','answer'])
+        ]);
+    }
+
+    public function webinars()
+    {
+        return Inertia::render('webinars/Index', [
+            'webinars' => [],
+        ]);
+    }
+
+    public function books()
+    {
+        return Inertia::render('books/Index', [
+            'books' => BookResource::collection(Book::all()),
+        ]);
+    }
 }
diff --git a/app/Http/Middleware/HandleAppearance.php b/app/Http/Middleware/HandleAppearance.php
index f1a02bb..c4ed399 100644
--- a/app/Http/Middleware/HandleAppearance.php
+++ b/app/Http/Middleware/HandleAppearance.php
@@ -20,4 +20,4 @@ public function handle(Request $request, Closure $next): Response
 
         return $next($request);
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 335bfe1..dafecdc 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -4,6 +4,8 @@
 
 use App\Http\Resources\CourseResource;
 use App\Models\Course;
+use App\Models\Faq;
+use App\Models\Book;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
@@ -67,11 +69,15 @@ public function share(Request $request): array
             'language' => fn () => $this->translations(
                 lang_path(app()->getLocale().'.json')
             ),
-            'courses' => CourseResource::collection(Course::with('sections.lessons')->get()),
+            'courses' => CourseResource::collection(Course::with('sections.lessons')->where('active', true)->whereHas('sections')->get()),
             'flash' => [
                 'success' => session('success'),
                 'failed' => session('failed'),
             ],
+            'appEnv' => app()->environment(),
+            'hasCourses' => Course::query()->isPublished()->isActive()->whereHas('sections')->exists(),
+            'hasFaqs' => Faq::query()->active()->exists(),
+            'hasBooks' => Book::exists(),
         ];
     }
 
@@ -90,9 +96,9 @@ public function getSettings(): array
 
         return [
             'site_title' => nova_get_setting('site_title', config('app.name')),
-            'site_subtitle' => nova_get_setting('site_subtitle', ''),
-            'site_description' => nova_get_setting('site_description', ''),
-            'start_learning' => nova_get_setting('site_cta', '#'),
+            'site_subtitle' => nova_get_setting('site_subtitle', config('site.site_subtitle')),
+            'site_description' => nova_get_setting('site_description', config('site.site_description')),
+            'start_learning' => nova_get_setting('site_cta', config('site.site_cta')),
             'header_s3' => $img ? Storage::disk('s3')->url($img) : '',
         ];
     }
diff --git a/app/Http/Requests/Auth/RegisterUserRequest.php b/app/Http/Requests/Auth/RegisterUserRequest.php
new file mode 100644
index 0000000..72f7e34
--- /dev/null
+++ b/app/Http/Requests/Auth/RegisterUserRequest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Requests\Auth;
+
+use App\Models\User;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rules;
+
+class RegisterUserRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'first_name' => 'required|string|max:255',
+            'last_name' => 'required|string|max:255',
+            'email' => 'required|string|lowercase|email|max:255|unique:'.User::class,
+            'phone' => ['required', 'phone', 'max:255', 'unique:'.User::class],
+            'password' => ['required', 'confirmed', Rules\Password::defaults()],
+            'country' => 'nullable|string|max:2',
+        ];
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Requests/UpdateProfileRequest.php b/app/Http/Requests/UpdateProfileRequest.php
new file mode 100644
index 0000000..b228cbc
--- /dev/null
+++ b/app/Http/Requests/UpdateProfileRequest.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateProfileRequest extends FormRequest
+{
+    public function authorize()
+    {
+        return true;
+    }
+
+    public function rules()
+    {
+        return [
+            'first_name' => 'required|string|max:255',
+            'last_name' => 'required|string|max:255',
+            'phone' => 'required|string|max:20|unique:users,phone,'.$this->user()->id,
+            'email' => 'required|email|max:255|unique:users,email,'.$this->user()->id,
+            'profile_photo' => 'nullable|image|mimes:jpeg,jpg,png,gif|max:2048',
+        ];
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Resources/CourseResource.php b/app/Http/Resources/CourseResource.php
index 2d5519c..a559397 100644
--- a/app/Http/Resources/CourseResource.php
+++ b/app/Http/Resources/CourseResource.php
@@ -20,6 +20,7 @@ class CourseResource extends JsonResource
     public function toArray(Request $request): array
     {
         return [
+            'id' => $this->resource->id,
             'title' => $this->resource->title,
             'title_line2' => $this->resource->title_line2,
             'description' => $this->resource->description,
diff --git a/app/Http/Resources/LessonResource.php b/app/Http/Resources/LessonResource.php
index 6aeea92..9635933 100644
--- a/app/Http/Resources/LessonResource.php
+++ b/app/Http/Resources/LessonResource.php
@@ -115,7 +115,7 @@ private function visual(): Collection
     {
         return collect([
             'model' => 'Visual',
-            'item' => $this->resource->visual,
+            'item' => VisualResource::make($this->resource->visual),
             'title' => 'فيديو',
             'href' => $this->resource->visual ? route('visuals.show',
                 $this->resource->visual, false) : '#',
diff --git a/app/Http/Resources/OrderResource.php b/app/Http/Resources/OrderResource.php
index 7687b96..ecb995a 100644
--- a/app/Http/Resources/OrderResource.php
+++ b/app/Http/Resources/OrderResource.php
@@ -30,7 +30,7 @@ public function toArray(Request $request): array
             'type' => $this->type(),
             'status' => $this->resource->status->toFullArray(),
             'created_at' => $this->resource->created_at,
-            'href' => $this->href(),
+            'href' => $this->resource->orderable?->href,
             'is_book' => $this->resource->orderable_type === Book::class,
             'is_downloadable' => $this->isDownloadable(),
             'download_url' => $this->downloadUrl(),
@@ -100,4 +100,4 @@ public function downloadUrl(): ?string
 
         return null;
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/QuizQuestionResource.php b/app/Http/Resources/QuizQuestionResource.php
new file mode 100644
index 0000000..1969dde
--- /dev/null
+++ b/app/Http/Resources/QuizQuestionResource.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\QuizQuestion;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Storage;
+
+/**
+ * @property QuizQuestion $resource
+ */
+class QuizQuestionResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->resource->id,
+            'quiz_id' => $this->resource->quiz_id,
+            'question' => $this->resource->question,
+            'correct_answer' => $this->resource->correct_answer,
+            'background_url' => $this->resource->background_url
+                ? Storage::disk('s3')->url($this->resource->background_url)
+                : null,
+            'slug' => $this->resource->slug,
+            'created_at' => $this->resource->created_at,
+            'updated_at' => $this->resource->updated_at,
+        ];
+    }
+}
diff --git a/app/Http/Resources/QuizResource.php b/app/Http/Resources/QuizResource.php
index 2641f5f..217855e 100644
--- a/app/Http/Resources/QuizResource.php
+++ b/app/Http/Resources/QuizResource.php
@@ -27,7 +27,7 @@ public function toArray(Request $request): array
             'duration' => $this->resource->duration,
             'quantity' => $this->resource->quantity,
             'user_progress' => $this->resource->user_progress,
-            'quiz_questions' => $this->resource->quizQuestions()->get(),
+            'quiz_questions' => QuizQuestionResource::collection($this->resource->quizQuestions()->get()),
             'icon' => 'QuestionMarkCircleIcon',
             'href' => route('quizzes.show', $this),
         ];
diff --git a/app/Http/Resources/RevisionResource.php b/app/Http/Resources/RevisionResource.php
index 9aec577..0d29a1a 100644
--- a/app/Http/Resources/RevisionResource.php
+++ b/app/Http/Resources/RevisionResource.php
@@ -31,4 +31,4 @@ public function toArray(Request $request): array
             'items' => $this->resource->revisionItems()->get(),
         ];
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/SlideResource.php b/app/Http/Resources/SlideResource.php
index 72ce6a2..38e3bda 100644
--- a/app/Http/Resources/SlideResource.php
+++ b/app/Http/Resources/SlideResource.php
@@ -24,8 +24,8 @@ public function toArray(Request $request): array
             'description' => $this->resource->description,
             'background_url' => Storage::disk('s3')->url($this->resource->background_url),
             'layout' => $this->resource->layout,
-            'slide_items' => $this->resource->slide_items,
+            'slide_items' => $this->resource->slideItems,
             's3_image' => Storage::disk('s3')->url($this->resource->background_url),
         ];
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
new file mode 100644
index 0000000..0900c06
--- /dev/null
+++ b/app/Http/Resources/UserResource.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class UserResource extends JsonResource
+{
+    public function toArray(Request $request)
+    {
+        return [
+            'id' => $this->id,
+            'first_name' => $this->first_name,
+            'last_name' => $this->last_name,
+            'phone' => $this->phone,
+            'email' => $this->email,
+            'profile_photo_path' => env('APP_URL').'/storage/'.$this->profile_photo_path,
+        ];
+    }
+}
diff --git a/app/Models/Book.php b/app/Models/Book.php
index 1fbd864..f10d532 100644
--- a/app/Models/Book.php
+++ b/app/Models/Book.php
@@ -18,6 +18,10 @@ class Book extends Model implements OrderableInterface
         'file_src', 'file_cta', 'price', 'tax', 'discount'
     ];
 
+    protected $appends = [
+        'href'
+    ];
+
     /**
      * Get the attributes that should be cast.
      *
@@ -36,4 +40,9 @@ public function totalPrice(): float
     {
         return $this->price + $this->tax - $this->discount;
     }
+
+    public function getHrefAttribute()
+    {
+        return route('books.index');
+    }
 }
diff --git a/app/Models/Course.php b/app/Models/Course.php
index 0324e60..8cb2969 100644
--- a/app/Models/Course.php
+++ b/app/Models/Course.php
@@ -24,6 +24,10 @@ class Course extends Model implements OrderableInterface
         'published_at',
     ];
 
+    protected $appends = [
+        'href'
+    ];
+
     protected function casts(): array
     {
         return [
@@ -76,4 +80,21 @@ public function isFree(): bool
     {
         return $this->price <= 0;
     }
-}
+
+    public function getHrefAttribute()
+    {
+        $first_section = $this->sections->first();
+        if(isset($first_section)){
+            return route('courses.sections.section', $first_section->slug);
+        }else{
+            return 'javascript:;';
+        }
+    }
+
+    public function scopeHasSections(Builder $query): Builder
+    {
+        return $query->has('sections');
+    }
+
+
+}
\ No newline at end of file
diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 1861902..902a5dc 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -7,19 +7,23 @@
 use App\Http\Resources\LessonResource;
 use App\Traits\HasEmailOnEvents;
 use App\Traits\Progressive;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasOne;
+use Illuminate\Support\Facades\Storage;
 use Nagy\LaravelRating\Traits\Rateable;
 use Spatie\EloquentSortable\Sortable;
 use Spatie\EloquentSortable\SortableTrait;
 
 class Lesson extends Model implements EventableInterface, ProgressiveInterface, Sortable
 {
+    use HasEmailOnEvents, Progressive;
+
     /** @use HasFactory<\Database\Factories\LessonFactory> */
     use HasFactory;
-    use HasEmailOnEvents, Progressive;
+
     use Rateable, SortableTrait;
 
     public array $sortable = [
@@ -29,7 +33,7 @@ class Lesson extends Model implements EventableInterface, ProgressiveInterface,
         'sort_on_has_many' => true,
     ];
 
-    protected $appends = ['user_progress'];
+    protected $appends = ['user_progress', 'lesson_video_url'];
 
     protected $fillable = ['name', 'duration', 'slug'];
 
@@ -138,4 +142,17 @@ public function asResource()
     {
         return LessonResource::make($this->refresh());
     }
+
+    public function lessonVideoUrl(): Attribute
+    {
+        return Attribute::make(
+            get: function () {
+                if ($this->visual && $this->visual->video_url) {
+                    return Storage::disk('s3')->url($this->visual->video_url);
+                }
+
+                return null;
+            }
+        );
+    }
 }
diff --git a/app/Models/Order.php b/app/Models/Order.php
index b17a325..92032d9 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -48,4 +48,4 @@ public function course(): BelongsTo
     {
         return $this->belongsTo(Course::class);
     }
-}
+}
\ No newline at end of file
diff --git a/app/Models/User.php b/app/Models/User.php
index 6497633..dece857 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -28,10 +28,15 @@ class User extends Authenticatable implements MustVerifyEmail
      *
      * @var list<string>
      */
+    // protected $fillable = [
+    //     'first_name', 'last_name', 'email', 'password', 'phone', 'country', 'last_login_at',
+    //     'utm_source', 'utm_content', 'utm_medium', 'utm_campaign', 'utm_term'
+    // ];
+
     protected $fillable = [
-        'first_name', 'last_name', 'email', 'password', 'phone', 'country', 'last_login_at',
-        'utm_source', 'utm_content', 'utm_medium', 'utm_campaign', 'utm_term'
-    ];
+    'first_name', 'last_name', 'email', 'password', 'phone', 'country', 'last_login_at',
+    'utm_source', 'utm_content', 'utm_medium', 'utm_campaign', 'utm_term', 'profile_photo_path'
+];
 
     /**
      * The attributes that should be hidden for serialization.
@@ -93,6 +98,16 @@ public function orders(): HasMany
         return $this->hasMany(Order::class);
     }
 
+    public function courseOrders()
+    {
+        return $this->orders()->where('orderable_type', Course::class);
+    }
+
+    public function bookOrders()
+    {
+        return $this->orders()->where('orderable_type', Book::class);
+    }
+
     /**
      * Check if a user owns a specific book
      */
@@ -131,4 +146,6 @@ protected function name(): Attribute
             get: fn ($value, array $attributes) => $attributes['first_name'].' '.$attributes['last_name'],
         );
     }
-}
+
+
+}
\ No newline at end of file
diff --git a/app/Notifications/SendBookLink.php b/app/Notifications/SendBookLink.php
index b4edfba..84917e3 100644
--- a/app/Notifications/SendBookLink.php
+++ b/app/Notifications/SendBookLink.php
@@ -2,46 +2,44 @@
 
 namespace App\Notifications;
 
-use App\Models\Book;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Notifications\Messages\MailMessage;
 use Illuminate\Notifications\Notification;
-use Illuminate\Support\Facades\Storage;
 
 class SendBookLink extends Notification implements ShouldQueue
 {
     use Queueable;
 
-    protected string $temp_link;
+    public $book;
 
-    /**
-     * Create a new notification instance.
-     */
-    public function __construct(Book $book)
+    public $downloadUrl;
+
+    public $duration;
+
+    public function __construct($book, $downloadUrl, $duration)
     {
-        $url = json_decode($book->file_src)->path;
-        $this->temp_link = Storage::disk('s3_public')->temporaryUrl($url, now()->addMinutes(5));
+        $this->book = $book;
+        $this->downloadUrl = $downloadUrl;
+        $this->duration = $duration;
+
     }
 
-    /**
-     * Get the notification's delivery channels.
-     *
-     * @return array<int, string>
-     */
-    public function via(object $notifiable): array
+    public function via($notifiable): array
     {
         return ['mail'];
     }
 
-    /**
-     * Get the mail representation of the notification.
-     */
-    public function toMail(object $notifiable): MailMessage
+    public function toMail($notifiable): MailMessage
     {
         return (new MailMessage)
-            ->line('يمكنك تحميل الكتاب من الرابط التالى')
-            ->action('رابط التحميل', $this->temp_link);
+            ->subject(__('locale.download_book_link').': '.$this->book->name)
+            ->view('mail.book-download-link', [
+                'book' => $this->book,
+                'downloadUrl' => $this->downloadUrl,
+                'duration' => $this->duration,
+                'notifiable' => $notifiable,
+            ]);
     }
 
     /**
diff --git a/app/PaymentGateways/KashierPaymentGateway.php b/app/PaymentGateways/KashierPaymentGateway.php
index d37e159..138fd5b 100644
--- a/app/PaymentGateways/KashierPaymentGateway.php
+++ b/app/PaymentGateways/KashierPaymentGateway.php
@@ -42,7 +42,8 @@ public function calculateTotalAmount($rate = null, $fees = null): string
 
     public function vendorFees(): float
     {
-        return 2.5;
+        // return 2.5;
+        return 0;
     }
 
     public function currency(): string
diff --git a/app/Policies/BookPolicy.php b/app/Policies/BookPolicy.php
new file mode 100644
index 0000000..0745677
--- /dev/null
+++ b/app/Policies/BookPolicy.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Book;
+use App\Models\User;
+
+class BookPolicy
+{
+    /**
+     * Determine if the user can download the book
+     */
+    public function download(User $user, Book $book): bool
+    {
+        return $book->isOwned($user->id);
+    }
+}
diff --git a/app/Policies/Policy.php b/app/Policies/Policy.php
new file mode 100644
index 0000000..cefc2db
--- /dev/null
+++ b/app/Policies/Policy.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Admin;
+use App\Models\User;
+use Illuminate\Auth\Access\HandlesAuthorization;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Laravel\Nova\Http\Requests\NovaRequest;
+use Laravel\Nova\Nova;
+
+abstract class Policy
+{
+    use HandlesAuthorization;
+
+    const string ViewAny = 'viewAny';
+
+    const string Create = 'create';
+
+    const string View = 'view';
+
+    const string Show = 'show';
+
+    const string Update = 'update';
+
+    const string Delete = 'delete';
+
+    const string Restore = 'restore';
+
+    const string ForceDelete = 'forceDelete';
+
+    const string Withdrawal = 'withdrawal';
+
+    const string Deposit = 'deposit';
+
+    protected string $key;
+
+    public function __construct()
+    {
+        $this->key = class_basename(Str::remove('Policy', $this::class));
+    }
+
+    public function before(Authenticatable|User|Admin $auth): ?bool
+    {
+        return Nova::whenServing(function (NovaRequest $request) use ($auth) {
+            try {
+                if ($auth?->isSuper()) {
+                    return true;
+                }
+            } catch (\Throwable $e) {
+                return null;
+            }
+
+            return null;
+        });
+    }
+
+    public function viewAny(Authenticatable|Admin|User $auth): bool
+    {
+        return Nova::whenServing(function (NovaRequest $request) use ($auth) {
+            if ($auth instanceof Admin) {
+                return $auth->hasPermissionTo(Policy::ViewAny.$this->key, 'admin');
+            }
+
+            return false;
+        }, function (Request $request) use ($auth) {
+            return $auth->hasVerifiedEmail();
+        });
+    }
+
+    public function create(Authenticatable|Admin|User $auth): bool
+    {
+        return Nova::whenServing(function (NovaRequest $request) use ($auth) {
+            if ($auth instanceof Admin) {
+                return $auth->hasPermissionTo(Policy::Create.$this->key, 'admin');
+            }
+
+            return false;
+        }, function (Request $request) {
+            return false;
+        });
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..ca3cbb9 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -11,7 +11,7 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        $this->app->useLangPath(base_path('lang'));
     }
 
     /**
@@ -21,4 +21,4 @@ public function boot(): void
     {
         //
     }
-}
+}
\ No newline at end of file
diff --git a/app/Providers/NovaServiceProvider.php b/app/Providers/NovaServiceProvider.php
index 716893e..f367d00 100644
--- a/app/Providers/NovaServiceProvider.php
+++ b/app/Providers/NovaServiceProvider.php
@@ -10,6 +10,7 @@
 use Laravel\Nova\Menu\MenuSection;
 use Laravel\Nova\Nova;
 use Laravel\Nova\NovaApplicationServiceProvider;
+use Outl1ne\NovaSettings\NovaSettings;
 use Sereny\NovaPermissions\NovaPermissions;
 
 class NovaServiceProvider extends NovaApplicationServiceProvider
@@ -34,6 +35,7 @@ public function boot(): void
                 MenuSection::make('E-Learning', [
                     MenuItem::resource(\App\Nova\Course::class),
                     MenuItem::resource(\App\Nova\Section::class),
+                    // MenuItem::resource(\App\Nova\Lesson::class),
                     MenuItem::resource(\App\Nova\Glossary::class),
                 ])->icon('finger-print')->collapsable(),
 
@@ -57,9 +59,16 @@ public function boot(): void
                     ->menu($request)
                     ->canSee(fn () => auth('admin')->user()?->isSuper()),
 
+                // NovaSettings::make()
+                //     ->menu($request),
+
                 LogViewer::make()
                     ->menu($request)
                     ->canSee(fn () => auth('admin')->user()?->isSuper()),
+
+                (new \Bernhardh\NovaTranslationEditor\NovaTranslationEditor)
+                    ->menu($request)
+                    ->canSee(fn () => auth('admin')->user()?->isSuper()),
             ];
         });
     }
@@ -121,7 +130,9 @@ public function tools(): array
     {
         return [
             NovaPermissions::make(),
-            LogViewer::make()
+            LogViewer::make(),
+            NovaSettings::make(),
+            (new \Bernhardh\NovaTranslationEditor\NovaTranslationEditor)->canSee(fn () => auth('admin')->user()?->isSuper()),
         ];
     }
 
diff --git a/app/Services/BookService.php b/app/Services/BookService.php
new file mode 100644
index 0000000..d3edd7d
--- /dev/null
+++ b/app/Services/BookService.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Services;
+
+use App\Actions\Books\GenerateBookDownloadUrl;
+use App\Enums\OrderStatus;
+use App\Models\Book;
+use App\Models\Order;
+use App\Models\User;
+use App\Notifications\BookInvoice;
+use App\Notifications\SendBookLink;
+
+class BookService
+{
+    public function __construct(
+        private GenerateBookDownloadUrl $generateDownloadUrl
+    ) {}
+
+    /**
+     * Send download link notification to user
+     */
+    public function sendDownloadLink(Book $book, User $user): void
+    {
+        $downloadUrl = $this->generateDownloadUrl->execute($book, 30);
+        $user->notify(new SendBookLink($book, $downloadUrl, 30));
+    }
+
+    /**
+     * Get the latest successful order for a book
+     */
+    public function getLatestOrder(Book $book, User $user): ?Order
+    {
+        return Order::where([
+            'user_id' => $user->id,
+            'orderable_type' => Book::class,
+            'orderable_id' => $book->id,
+            'status' => OrderStatus::Success,
+        ])->latest()->first();
+    }
+
+    /**
+     * Send invoice if order is recent (within 5 minutes)
+     */
+    public function sendInvoiceIfRecent(Book $book, Order $order, User $user): void
+    {
+        if ($order->created_at->diffInMinutes(now()) < 5) {
+            $user->notify(new BookInvoice($book, $order));
+        }
+    }
+
+    /**
+     * Generate temporary download URL for a book
+     */
+    public function generateDownloadUrl(Book $book, int $minutesValid = 30): ?string
+    {
+        return $this->generateDownloadUrl->execute($book, $minutesValid);
+    }
+
+    /**
+     * Prepare download page data
+     */
+    public function prepareDownloadData(Book $book, User $user): array
+    {
+        // $order = $this->getLatestOrder($book, $user);
+
+        // if ($order) {
+        //     $this->sendInvoiceIfRecent($book, $order, $user);
+        // }
+
+        return [
+            'book' => $book,
+            'downloadUrl' => $this->generateDownloadUrl->execute($book, 30),
+        ];
+    }
+
+}
diff --git a/app/Services/UserRegistrationService.php b/app/Services/UserRegistrationService.php
new file mode 100644
index 0000000..a47ff47
--- /dev/null
+++ b/app/Services/UserRegistrationService.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Services;
+
+use App\Actions\Auth\CreateZohoLeadAction;
+use App\Models\User;
+use Illuminate\Support\Facades\Hash;
+
+class UserRegistrationService
+{
+    public function __construct(
+        private CreateZohoLeadAction $createZohoLeadAction
+    ) {}
+
+    /**
+     * Register a new user
+     */
+    public function register(array $data, ?array $utmData = null): User
+    {
+        $user = User::create([
+            'first_name' => $data['first_name'],
+            'last_name' => $data['last_name'],
+            'email' => $data['email'],
+            'phone' => $data['phone'],
+            'country' => $data['country'] ?? null,
+            'password' => Hash::make($data['password']),
+            'utm_source' => $utmData['utm_source'] ?? null,
+            'utm_content' => $utmData['utm_content'] ?? null,
+            'utm_medium' => $utmData['utm_medium'] ?? null,
+            'utm_campaign' => $utmData['utm_campaign'] ?? null,
+            'utm_term' => $utmData['utm_term'] ?? null,
+        ]);
+
+        return $user;
+    }
+
+    /**
+     * Extract UTM data from cookie
+     */
+    public function extractUtmData(): ?array
+    {
+        if (! request()->hasCookie('utm')) {
+            return null;
+        }
+
+        $utmData = json_decode(request()->cookie('utm'), true);
+
+        return $utmData ?: null;
+    }
+
+    /**
+     * Create Zoho lead for registered user
+     */
+    public function createZohoLead(User $user): void
+    {
+        $this->createZohoLeadAction->execute([
+            'first_name' => $user->first_name,
+            'last_name' => $user->last_name,
+            'email' => $user->email,
+            'phone' => $user->phone,
+            'lead_source' => 'trader_factory',
+        ]);
+    }
+}
diff --git a/app/Traits/HasOrders.php b/app/Traits/HasOrders.php
index e74b2e6..fdb53b7 100644
--- a/app/Traits/HasOrders.php
+++ b/app/Traits/HasOrders.php
@@ -2,6 +2,7 @@
 
 namespace App\Traits;
 
+use App\Enums\OrderStatus;
 use App\Models\Order;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
 
@@ -20,13 +21,27 @@ public function orders(): MorphMany
     /**
      * Check if the course is owned by the authed user.
      */
-    public function purchased(): bool
+    public function purchased(?int $userId = null): bool
     {
+        $userId = $userId ?? auth()->id();
+
         return $this->orders()->where([
-            'status' => 'SUCCESS',
-            'user_id' => auth()->id(),
+            'status' => OrderStatus::Success,
+            'user_id' => $userId,
             'orderable_type' => self::class,
             'orderable_id' => $this->id,
         ])->count();
     }
-}
+
+    public function isOwned(?int $userId = null): bool
+    {
+        $userId = $userId ?? auth()->id();
+
+        return $this->orders()->where([
+            'status' => OrderStatus::Success,
+            'user_id' => $userId,
+            'orderable_type' => self::class,
+            'orderable_id' => $this->id,
+        ])->exists();
+    }
+}
\ No newline at end of file
diff --git a/app/Traits/HasProfilePhoto.php b/app/Traits/HasProfilePhoto.php
index 7660bc4..92b8df0 100644
--- a/app/Traits/HasProfilePhoto.php
+++ b/app/Traits/HasProfilePhoto.php
@@ -71,6 +71,6 @@ protected function defaultProfilePhotoUrl(): string
      */
     protected function profilePhotoDisk(): string
     {
-        return 's3';
+        return 'public';
     }
 }
diff --git a/composer.json b/composer.json
index d814a44..1ee3d02 100644
--- a/composer.json
+++ b/composer.json
@@ -12,6 +12,7 @@
         "php": "^8.3",
         "asciisd/kashier": "^1.0",
         "asciisd/zoho-v8": "^1.0",
+        "bernhardh/nova-translation-editor": "^2.0",
         "inertiajs/inertia-laravel": "^2.0",
         "interaction-design-foundation/nova-unlayer-field": "^2.2",
         "laravel/framework": "^12.0",
@@ -27,6 +28,7 @@
         "sereny/nova-permissions": "^1.7",
         "spatie/laravel-permission": "^6.17",
         "spatie/laravel-sitemap": "^7.3",
+        "spatie/laravel-translation-loader": "^2.8",
         "tightenco/ziggy": "^2.4"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index 2c82e12..e52afb0 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "87f88be1d841d778b71d8ca07d8905f8",
+    "content-hash": "f5901d3b8944196ac9a1c4b651379456",
     "packages": [
         {
             "name": "asciisd/kashier",
@@ -340,6 +340,53 @@
             },
             "time": "2024-10-01T13:55:55+00:00"
         },
+        {
+            "name": "bernhardh/nova-translation-editor",
+            "version": "v2.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/bernhardh/nova-translation-editor.git",
+                "reference": "f0a45e994d33c9349b82bd60b5fbe39e95e1286f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/bernhardh/nova-translation-editor/zipball/f0a45e994d33c9349b82bd60b5fbe39e95e1286f",
+                "reference": "f0a45e994d33c9349b82bd60b5fbe39e95e1286f",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.3.0",
+                "spatie/laravel-translation-loader": ">=2.6.3"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Bernhardh\\NovaTranslationEditor\\ToolServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Bernhardh\\NovaTranslationEditor\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Laravel Nova translation editor",
+            "keywords": [
+                "laravel",
+                "nova"
+            ],
+            "support": {
+                "issues": "https://github.com/bernhardh/nova-translation-editor/issues",
+                "source": "https://github.com/bernhardh/nova-translation-editor/tree/v2.0.4"
+            },
+            "abandoned": true,
+            "time": "2023-03-01T11:01:27+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.14.0",
@@ -5744,6 +5791,78 @@
             ],
             "time": "2025-08-25T08:07:09+00:00"
         },
+        {
+            "name": "spatie/laravel-translation-loader",
+            "version": "2.8.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-translation-loader.git",
+                "reference": "17fa7d211bca1423a0e424823e7fddd5c2bc4ab6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-translation-loader/zipball/17fa7d211bca1423a0e424823e7fddd5c2bc4ab6",
+                "reference": "17fa7d211bca1423a0e424823e7fddd5c2bc4ab6",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/translation": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0|^13.0",
+                "php": "^8.0",
+                "spatie/laravel-package-tools": "^1.12"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.59",
+                "orchestra/testbench": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0",
+                "pestphp/pest": "^1.23|^2.0|^3.7|^4.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\TranslationLoader\\TranslationServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\TranslationLoader\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Store your language lines in the database, yaml or other sources",
+            "homepage": "https://github.com/spatie/laravel-translation-loader",
+            "keywords": [
+                "database",
+                "db",
+                "i8n",
+                "language",
+                "laravel",
+                "laravel-translation-loader",
+                "spatie",
+                "translate"
+            ],
+            "support": {
+                "source": "https://github.com/spatie/laravel-translation-loader/tree/2.8.3"
+            },
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                }
+            ],
+            "time": "2026-02-21T21:44:45+00:00"
+        },
         {
             "name": "spatie/robots-txt",
             "version": "2.5.2",
diff --git a/config/kashier.php b/config/kashier.php
new file mode 100644
index 0000000..c800c00
--- /dev/null
+++ b/config/kashier.php
@@ -0,0 +1,17 @@
+<?php
+
+return [
+    'enabled' => env('KASHIER_ENABLED', false),
+    'title' => env('KASHIER_TITLE', 'Kashier'),
+    'description' => env('KASHIER_DESCRIPTION', 'Pay with Kashier'),
+    'mode' => env('KASHIER_MODE', 'test'),
+    'apikey' => env('KASHIER_API_KEY', ''),
+    'secretKey' => env('KASHIER_SECRET_KEY', ''),
+    'mid' => env('KASHIER_MERCHANT_ID', ''),
+    'currency' => env('KASHIER_CURRENCY', 'EGP'),
+    'enforce_egp_payment' => env('KASHIER_ENFORCE_EGP_PAYMENT', false),
+
+    'baseUrl' => 'https://checkout.kashier.io',
+    'serverWebhookUrl' => env('KASHIER_SERVER_WEBHOOK_URL', '/kashier/webhook'),
+    'callbackUrl' => env('KASHIER_CALLBACK_URL'),
+];
diff --git a/config/nova-settings.php b/config/nova-settings.php
new file mode 100644
index 0000000..65e0d5b
--- /dev/null
+++ b/config/nova-settings.php
@@ -0,0 +1,51 @@
+<?php
+
+return [
+
+    /**
+     * Set a name for the settings table
+     */
+    'table' => 'nova_settings',
+
+    /**
+     * URL path of settings page
+     */
+    'base_path' => 'nova-settings',
+
+    /**
+     * Reload the entire page on save. Useful when updating any Nova UI related settings.
+     */
+    'reload_page_on_save' => false,
+
+    /**
+     * We need to know which eloquent model should be used to retrieve your permissions.
+     * Of course, it is often just the default model but you may use whatever you like.
+     *
+     * The model you want to use as a model needs to extend the original model.
+     */
+    'models' => [
+        'settings' => \Outl1ne\NovaSettings\Models\Settings::class,
+    ],
+
+    /**
+     * Show the sidebar menu
+     */
+    'show_in_sidebar' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache settings
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the cache connection should be used to
+    | cache the settings. `:memory:` is the default which is a simple
+    | in-memory cache through a singleton service class property.
+    | `null` will disable caching.
+    |
+    */
+    'cache' => [
+        'store' => env('NOVA_SETTINGS_CACHE_DRIVER', ':memory:'),
+
+        'prefix' => 'nova-settings:',
+    ],
+];
diff --git a/config/nova-translation-editor.php b/config/nova-translation-editor.php
new file mode 100644
index 0000000..e1a7369
--- /dev/null
+++ b/config/nova-translation-editor.php
@@ -0,0 +1,19 @@
+<?php
+
+$langPath = base_path('lang/en');
+$groups = [];
+
+if (is_dir($langPath)) {
+    $files = glob($langPath.'/*.php');
+    foreach ($files as $file) {
+        $groups[] = basename($file, '.php');
+    }
+}
+
+return [
+    'groups' => $groups,
+    'languages' => [
+        'ar',
+        'en',
+    ],
+];
diff --git a/config/site.php b/config/site.php
new file mode 100644
index 0000000..8fd11a5
--- /dev/null
+++ b/config/site.php
@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'site_title' => env('SITE_TITLE', config('app.name')),
+    'site_subtitle' => env('SITE_SUBTITLE', 'أحد مصادر التدريب العلمي والعملي لأسواق المال'),
+    'site_description' => env('SITE_DESCRIPTION', 'تدرب على الأستثمار في سوق العملات'),
+    'site_cta' => env('SITE_CTA', '#'),
+];
\ No newline at end of file
diff --git a/config/translation-loader.php b/config/translation-loader.php
new file mode 100644
index 0000000..19ff8ef
--- /dev/null
+++ b/config/translation-loader.php
@@ -0,0 +1,24 @@
+<?php
+
+return [
+
+    /*
+     * Language lines will be fetched by these loaders. You can put any class here that implements
+     * the Spatie\TranslationLoader\TranslationLoaders\TranslationLoader-interface.
+     */
+    'translation_loaders' => [
+        Spatie\TranslationLoader\TranslationLoaders\Db::class,
+    ],
+
+    /*
+     * This is the model used by the Db Translation loader. You can put any model here
+     * that extends Spatie\TranslationLoader\LanguageLine.
+     */
+    'model' => Spatie\TranslationLoader\LanguageLine::class,
+
+    /*
+     * This is the translation manager which overrides the default Laravel `translation.loader`
+     */
+    'translation_manager' => Spatie\TranslationLoader\TranslationLoaderManager::class,
+
+];
diff --git a/database/factories/BookFactory.php b/database/factories/BookFactory.php
index 826dd23..1c1c8fa 100644
--- a/database/factories/BookFactory.php
+++ b/database/factories/BookFactory.php
@@ -17,7 +17,27 @@ class BookFactory extends Factory
     public function definition(): array
     {
         return [
-            //
+            'name' => fake()->sentence(3),
+            'description' => fake()->paragraph(),
+            'image_src' => 'books/covers/default.jpg',
+            'image_alt' => fake()->sentence(2),
+            'file_src' => 'books/pdfs/sample-book.pdf',
+            'file_cta' => 'تحميل الكتاب',
+            'price' => fake()->randomFloat(2, 0, 500),
+            'tax' => fake()->randomFloat(2, 0, 50),
+            'discount' => fake()->randomFloat(2, 0, 100),
         ];
     }
+
+    /**
+     * Indicate that the book is free.
+     */
+    public function free(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'price' => 0,
+            'tax' => 0,
+            'discount' => 0,
+        ]);
+    }
 }
diff --git a/database/factories/OrderFactory.php b/database/factories/OrderFactory.php
index c122d40..96a250a 100644
--- a/database/factories/OrderFactory.php
+++ b/database/factories/OrderFactory.php
@@ -2,22 +2,43 @@
 
 namespace Database\Factories;
 
+use App\Enums\OrderStatus;
+use App\Models\Book;
+use App\Models\User;
 use Illuminate\Database\Eloquent\Factories\Factory;
 
-/**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Order>
- */
 class OrderFactory extends Factory
 {
-    /**
-     * Define the model's default state.
-     *
-     * @return array<string, mixed>
-     */
     public function definition(): array
     {
         return [
-            //
+            'user_id' => User::factory(),
+            'orderable_type' => Book::class,
+            'orderable_id' => Book::factory(),
+            'transaction_id' => fake()->uuid(),
+            'status' => OrderStatus::Success,
+            'conversion_rate' => 1.0,
+            'vendor_fees' => 0,
+            'currency' => 'EGP',
+            'method' => 'card',
+            'provider' => 'KASHIER',
+            'total' => fake()->randomFloat(2, 50, 500),
+            'sub_total' => fake()->randomFloat(2, 50, 500),
         ];
     }
-}
+
+    public function success(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'status' => OrderStatus::Success,
+        ]);
+    }
+
+
+    public function failed(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'status' => OrderStatus::Failure,
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index 584104c..d03e102 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -24,7 +24,8 @@ class UserFactory extends Factory
     public function definition(): array
     {
         return [
-            'name' => fake()->name(),
+            'first_name' => fake()->firstName(),
+            'last_name' => fake()->lastName(),
             'email' => fake()->unique()->safeEmail(),
             'email_verified_at' => now(),
             'password' => static::$password ??= Hash::make('password'),
diff --git a/database/migrations/2019_08_13_000000_create_nova_settings_table.php b/database/migrations/2019_08_13_000000_create_nova_settings_table.php
new file mode 100644
index 0000000..975b9c9
--- /dev/null
+++ b/database/migrations/2019_08_13_000000_create_nova_settings_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+use Outl1ne\NovaSettings\NovaSettings;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        // Settings table
+        Schema::create(NovaSettings::getSettingsTableName(), function (Blueprint $table) {
+            $table->string('key')->unique()->primary();
+            $table->text('value')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists(NovaSettings::getSettingsTableName());
+    }
+};
diff --git a/database/migrations/2021_02_15_000000_update_nova_settings_value_column.php b/database/migrations/2021_02_15_000000_update_nova_settings_value_column.php
new file mode 100644
index 0000000..14859e8
--- /dev/null
+++ b/database/migrations/2021_02_15_000000_update_nova_settings_value_column.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+use Outl1ne\NovaSettings\NovaSettings;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        // TODO Remove in next major release
+        // Legacy support
+        // Convert value column to text if needed as the 'value' column was previously a varchar
+        Schema::table(NovaSettings::getSettingsTableName(), function (Blueprint $table) {
+            $table->text('value')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        // No down because previous migration was also modified
+    }
+};
diff --git a/database/migrations/2025_05_12_204623_create_glossaries_table.php b/database/migrations/2025_05_12_204623_create_glossaries_table.php
index ef6e3aa..21e231d 100644
--- a/database/migrations/2025_05_12_204623_create_glossaries_table.php
+++ b/database/migrations/2025_05_12_204623_create_glossaries_table.php
@@ -13,17 +13,17 @@ public function up(): void
     {
         Schema::create('glossaries', function (Blueprint $table) {
             $table->id();
-            $table->string('title')->nullable()->fulltext();
-            $table->string('title_ar')->fulltext();
+            $table->string('title')->nullable();
+            $table->string('title_ar');
             $table->string('slug')->unique();
             $table->string('initials')->nullable();
             $table->string('initials_ar');
-            $table->text('body')->nullable()->fulltext();
-            $table->text('body_ar')->fulltext();
-            $table->string('topic')->nullable()->fulltext();
-            $table->string('topic_ar')->nullable()->fulltext();
-            $table->string('category')->nullable()->fulltext();
-            $table->string('category_ar')->fulltext();
+            $table->text('body')->nullable();
+            $table->text('body_ar');
+            $table->string('topic')->nullable();
+            $table->string('topic_ar')->nullable();
+            $table->string('category')->nullable();
+            $table->string('category_ar');
             $table->timestamps();
         });
     }
@@ -35,4 +35,4 @@ public function down(): void
     {
         Schema::dropIfExists('glossaries');
     }
-};
+};
\ No newline at end of file
diff --git a/database/migrations/2026_03_24_144855_create_language_lines_table.php b/database/migrations/2026_03_24_144855_create_language_lines_table.php
new file mode 100644
index 0000000..d24d12a
--- /dev/null
+++ b/database/migrations/2026_03_24_144855_create_language_lines_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up(): void
+    {
+        Schema::create('language_lines', function (Blueprint $table) {
+            $table->id();
+            $table->string('group')->index();
+            $table->string('key');
+            $table->json('text');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('language_lines');
+    }
+};
diff --git a/lang/ar/locale.php b/lang/ar/locale.php
new file mode 100644
index 0000000..e662eff
--- /dev/null
+++ b/lang/ar/locale.php
@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'download_book_link' => 'رابط تحميل الكتاب',
+    'download_book_message' => 'يمكنك تحميل الكتاب من الرابط التالي:',
+    'download_book_button' => 'تحميل الكتاب',
+    'download_book_validity' => 'هذا الرابط صالح لمدة :duration دقيقة',
+    'download_link_sent' => 'تم إرسال رابط التحميل على البريد الإلكتروني',
+];
diff --git a/lang/ar/validation.php b/lang/ar/validation.php
index 93fb6c3..18a07cc 100644
--- a/lang/ar/validation.php
+++ b/lang/ar/validation.php
@@ -193,6 +193,13 @@
     |
     */
 
-    'attributes' => [],
+    'attributes' => [
+        'phone' => 'رقم الهاتف',
+        'first_name' => 'الاسم الأول',
+        'last_name' => 'الاسم الأخير',
+        'email' => 'البريد الإلكتروني',
+        'password' => 'كلمة المرور',
+        'password_confirmation' => 'تأكيد كلمة المرور'
+    ],
 
 ];
diff --git a/lang/ar/verify_email.php b/lang/ar/verify_email.php
new file mode 100644
index 0000000..5c3d946
--- /dev/null
+++ b/lang/ar/verify_email.php
@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'subject' => 'مرحبا بك في أكاديمية تريدر فاكتوري',
+    'greeting' => 'مرحباً',
+    'line_1' => 'شكرًا لتسجيلك في أكاديمية تريدر فاكتوري. لإكمال عملية التسجيل وتفعيل حسابك، الرجاء الضغط على الرابط أدناه لتأكيد عنوان بريدك الإلكتروني:',
+    'cta' => 'تأكيد البريد الإلكتروني',
+    'line_2' => 'إذا لم تطلب انشاء حساب على أكاديمية تريدر فاكتوري ، يمكنك تجاهل هذه الرسالة.',
+    'regards' => 'شكرًا لك,',
+    'salutation' => 'فريق أكاديمية تريدر فاكتوري',
+    'subcopy' => "إذا كنت تواجه أي مشاكل فى الضغط على \":actionText\", قم بنسخ الرابط أدناه\n".
+        'فى عنوان المتصفح',
+];
diff --git a/lang/en/locale.php b/lang/en/locale.php
new file mode 100644
index 0000000..5c4e227
--- /dev/null
+++ b/lang/en/locale.php
@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'download_book_link' => 'Book Download Link',
+    'download_book_message' => 'You can download the book from the following link:',
+    'download_book_button' => 'Download Book',
+    'download_book_validity' => 'Valid for :duration minutes',
+    'download_link_sent' => 'The download link has been sent to your email',
+];
diff --git a/lang/en/verify_email.php b/lang/en/verify_email.php
new file mode 100644
index 0000000..7f7cdb3
--- /dev/null
+++ b/lang/en/verify_email.php
@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'subject' => 'Welcome to Trader Factory Academy',
+    'greeting' => 'Hello',
+    'line_1' => 'Thank you for registering with Trader Factory academy, to continue registration process please click the link below to verify your email address.',
+    'cta' => 'Verify Email',
+    'line_2' => 'If you didn\'t create an account on Trader Factory, no further action is required.',
+    'regards' => 'Regards',
+    'salutation' => 'Trader Factory Academy Team',
+    'subcopy' => "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
+        'into your web browser:',
+];
\ No newline at end of file
diff --git a/lang/vendor/nova-settings/ar.json b/lang/vendor/nova-settings/ar.json
new file mode 100644
index 0000000..52e3e81
--- /dev/null
+++ b/lang/vendor/nova-settings/ar.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "الإعدادات",
+  "novaSettings.saveButtonText": "حفظ الإعدادات",
+  "novaSettings.noSettingsFieldsText": "لم يتم اضافة حقول للإعدادات.",
+  "novaSettings.settingsSuccessToast": "تم حفظ الإعدادات",
+  "novaSettings.general": "الإعدادات العامة"
+}
diff --git a/lang/vendor/nova-settings/de.json b/lang/vendor/nova-settings/de.json
new file mode 100644
index 0000000..bcc7158
--- /dev/null
+++ b/lang/vendor/nova-settings/de.json
@@ -0,0 +1,6 @@
+{
+  "novaSettings.navigationItemTitle": "Einstellungen",
+  "novaSettings.saveButtonText": "Einstellungen speichern",
+  "novaSettings.noSettingsFieldsText": "Es wurden keine Einstellungs-Felder definiert.",
+  "novaSettings.settingsSuccessToast": "Einstellungen erfolgreich geändert."
+}
diff --git a/lang/vendor/nova-settings/en.json b/lang/vendor/nova-settings/en.json
new file mode 100644
index 0000000..94efc4b
--- /dev/null
+++ b/lang/vendor/nova-settings/en.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Settings",
+  "novaSettings.saveButtonText": "Save settings",
+  "novaSettings.noSettingsFieldsText": "No settings fields have been defined.",
+  "novaSettings.settingsSuccessToast": "Settings successfully updated!",
+  "novaSettings.general": "General"
+}
diff --git a/lang/vendor/nova-settings/es.json b/lang/vendor/nova-settings/es.json
new file mode 100644
index 0000000..dcb814b
--- /dev/null
+++ b/lang/vendor/nova-settings/es.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Configuración",
+  "novaSettings.saveButtonText": "Guardar configuración",
+  "novaSettings.noSettingsFieldsText": "No se ha definido ningún campo de configuración.",
+  "novaSettings.settingsSuccessToast": "¡La configuración se ha actualizado correctamente!",
+  "novaSettings.general": "General"
+}
diff --git a/lang/vendor/nova-settings/et.json b/lang/vendor/nova-settings/et.json
new file mode 100644
index 0000000..64cb0f2
--- /dev/null
+++ b/lang/vendor/nova-settings/et.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Seaded",
+  "novaSettings.saveButtonText": "Salvesta seaded",
+  "novaSettings.noSettingsFieldsText": "Ühtegi seadevälja ei ole defineeritud.",
+  "novaSettings.settingsSuccessToast": "Seaded uuendatud!",
+  "novaSettings.general": "Üldine"
+}
diff --git a/lang/vendor/nova-settings/fa.json b/lang/vendor/nova-settings/fa.json
new file mode 100644
index 0000000..8077d28
--- /dev/null
+++ b/lang/vendor/nova-settings/fa.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "تنظیمات",
+  "novaSettings.saveButtonText": "ذخیره تنظیمات",
+  "novaSettings.noSettingsFieldsText": "هیچ تنظیمی تعریف نشده است.",
+  "novaSettings.settingsSuccessToast": "تنظیمات ذخیره شد.",
+  "novaSettings.general": "عمومی"
+}
diff --git a/lang/vendor/nova-settings/fr.json b/lang/vendor/nova-settings/fr.json
new file mode 100644
index 0000000..049bc9b
--- /dev/null
+++ b/lang/vendor/nova-settings/fr.json
@@ -0,0 +1,8 @@
+{
+    "novaSettings.navigationItemTitle": "Paramètres",
+    "novaSettings.saveButtonText": "Enregistrer paramètres",
+    "novaSettings.noSettingsFieldsText": "Aucun champ paramètres n'a été défini.",
+    "novaSettings.settingsSuccessToast": "Paramètres mis à jour !",
+    "novaSettings.general": "Paramètres généraux"
+  }
+  
\ No newline at end of file
diff --git a/lang/vendor/nova-settings/it.json b/lang/vendor/nova-settings/it.json
new file mode 100644
index 0000000..b7fc0e4
--- /dev/null
+++ b/lang/vendor/nova-settings/it.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Impostazioni",
+  "novaSettings.saveButtonText": "Salva impostazioni",
+  "novaSettings.noSettingsFieldsText": "Nessun campo Impostazioni è stato definito.",
+  "novaSettings.settingsSuccessToast": "Impostazioni aggiornate con successo",
+  "novaSettings.general": "Generale"
+}
diff --git a/lang/vendor/nova-settings/nl.json b/lang/vendor/nova-settings/nl.json
new file mode 100644
index 0000000..e163959
--- /dev/null
+++ b/lang/vendor/nova-settings/nl.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Instellingen",
+  "novaSettings.saveButtonText": "Instellingen opslaan",
+  "novaSettings.noSettingsFieldsText": "Geen veld gedefineerd.",
+  "novaSettings.settingsSuccessToast": "Instellingen succesvol geupdatet",
+  "novaSettings.general": "Algemeen"
+}
diff --git a/lang/vendor/nova-settings/pt-BR.json b/lang/vendor/nova-settings/pt-BR.json
new file mode 100644
index 0000000..819871c
--- /dev/null
+++ b/lang/vendor/nova-settings/pt-BR.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Configurações",
+  "novaSettings.saveButtonText": "Salvar configurações",
+  "novaSettings.noSettingsFieldsText": "Nenhum campo de configuração foi definido.",
+  "novaSettings.settingsSuccessToast": "Configurações atualizadas com sucesso",
+  "novaSettings.general": "Geral"
+}
diff --git a/lang/vendor/nova-settings/ru.json b/lang/vendor/nova-settings/ru.json
new file mode 100644
index 0000000..535647b
--- /dev/null
+++ b/lang/vendor/nova-settings/ru.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Настройки",
+  "novaSettings.saveButtonText": "Сохранить",
+  "novaSettings.noSettingsFieldsText": "Поля настроек не определены.",
+  "novaSettings.settingsSuccessToast": "Настройки успешно обновлены",
+  "novaSettings.general": "Основные"
+}
diff --git a/lang/vendor/nova-settings/sk.json b/lang/vendor/nova-settings/sk.json
new file mode 100644
index 0000000..14b42ef
--- /dev/null
+++ b/lang/vendor/nova-settings/sk.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Nastavenia",
+  "novaSettings.saveButtonText": "Uložiť nastavenia",
+  "novaSettings.noSettingsFieldsText": "Neboli definované žiadne polia nastavení.",
+  "novaSettings.settingsSuccessToast": "Nastavenia boli úspešne aktualizované!",
+  "novaSettings.general": "Všeobecné"
+}
diff --git a/lang/vendor/nova-settings/tr.json b/lang/vendor/nova-settings/tr.json
new file mode 100644
index 0000000..2c2db1e
--- /dev/null
+++ b/lang/vendor/nova-settings/tr.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Ayarlar",
+  "novaSettings.saveButtonText": "Ayarları Kaydet",
+  "novaSettings.noSettingsFieldsText": "Henüz bir ayar alanı tanımlamadınız.",
+  "novaSettings.settingsSuccessToast": "Ayarlar başarıyla güncellendi!",
+  "novaSettings.general": "Genel"
+}
diff --git a/lang/vendor/nova-settings/uz.json b/lang/vendor/nova-settings/uz.json
new file mode 100644
index 0000000..7cae462
--- /dev/null
+++ b/lang/vendor/nova-settings/uz.json
@@ -0,0 +1,7 @@
+{
+  "novaSettings.navigationItemTitle": "Sozlamalar",
+  "novaSettings.saveButtonText": "Saqlash",
+  "novaSettings.noSettingsFieldsText": "Sozlamalar maydonlari belgilanmagan.",
+  "novaSettings.settingsSuccessToast": "Sozlamalar muvaffaqiyatli saqlandi",
+  "novaSettings.general": "Umumiy"
+}
diff --git a/package-lock.json b/package-lock.json
index 6cc91dd..62071fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,11 +5,18 @@
     "packages": {
         "": {
             "dependencies": {
+                "@fullcalendar/core": "^6.1.20",
+                "@fullcalendar/daygrid": "^6.1.20",
+                "@fullcalendar/interaction": "^6.1.20",
+                "@fullcalendar/list": "^6.1.20",
+                "@fullcalendar/timegrid": "^6.1.20",
+                "@fullcalendar/vue3": "^6.1.20",
                 "@headlessui/vue": "^1.7.23",
                 "@heroicons/vue": "^2.2.0",
                 "@inertiajs/vue3": "^2.0.0",
                 "@tailwindcss/typography": "^0.5.16",
                 "@tailwindcss/vite": "^4.1.1",
+                "@videojs/themes": "^1.0.1",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vueuse/core": "^12.8.2",
                 "class-variance-authority": "^0.7.1",
@@ -23,9 +30,11 @@
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
                 "typescript": "^5.2.2",
+                "video.js": "^8.23.6",
                 "vite": "^6.3.4",
                 "vue": "^3.5.13",
                 "vue-sonner": "^1.3.2",
+                "vue-tel-input": "^9.7.1",
                 "ziggy-js": "^2.4.2"
             },
             "devDependencies": {
@@ -81,6 +90,15 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+            "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/types": {
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
@@ -751,6 +769,64 @@
                 }
             }
         },
+        "node_modules/@fullcalendar/core": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
+            "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
+            "license": "MIT",
+            "dependencies": {
+                "preact": "~10.12.1"
+            }
+        },
+        "node_modules/@fullcalendar/daygrid": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
+            "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.20"
+            }
+        },
+        "node_modules/@fullcalendar/interaction": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
+            "integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.20"
+            }
+        },
+        "node_modules/@fullcalendar/list": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.20.tgz",
+            "integrity": "sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.20"
+            }
+        },
+        "node_modules/@fullcalendar/timegrid": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
+            "integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
+            "license": "MIT",
+            "dependencies": {
+                "@fullcalendar/daygrid": "~6.1.20"
+            },
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.20"
+            }
+        },
+        "node_modules/@fullcalendar/vue3": {
+            "version": "6.1.20",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.20.tgz",
+            "integrity": "sha512-8qg6pS27II9QBwFkkJC+7SfflMpWqOe7i3ii5ODq9KpLAjwQAd/zjfq8RvKR1Yryoh5UmMCmvRbMB7i4RGtqog==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.20",
+                "vue": "^3.0.11"
+            }
+        },
         "node_modules/@headlessui/vue": {
             "version": "1.7.23",
             "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
@@ -1630,17 +1706,17 @@
             "license": "MIT"
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
-            "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
+            "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.12.2",
-                "@typescript-eslint/scope-manager": "8.54.0",
-                "@typescript-eslint/type-utils": "8.54.0",
-                "@typescript-eslint/utils": "8.54.0",
-                "@typescript-eslint/visitor-keys": "8.54.0",
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/type-utils": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "ignore": "^7.0.5",
                 "natural-compare": "^1.4.0",
                 "ts-api-utils": "^2.4.0"
@@ -1653,7 +1729,7 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^8.54.0",
+                "@typescript-eslint/parser": "^8.55.0",
                 "eslint": "^8.57.0 || ^9.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
@@ -1669,16 +1745,16 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
-            "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
+            "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.54.0",
-                "@typescript-eslint/types": "8.54.0",
-                "@typescript-eslint/typescript-estree": "8.54.0",
-                "@typescript-eslint/visitor-keys": "8.54.0",
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -1694,14 +1770,14 @@
             }
         },
         "node_modules/@typescript-eslint/project-service": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
-            "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
+            "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/tsconfig-utils": "^8.54.0",
-                "@typescript-eslint/types": "^8.54.0",
+                "@typescript-eslint/tsconfig-utils": "^8.55.0",
+                "@typescript-eslint/types": "^8.55.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -1716,14 +1792,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
-            "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
+            "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.54.0",
-                "@typescript-eslint/visitor-keys": "8.54.0"
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1734,9 +1810,9 @@
             }
         },
         "node_modules/@typescript-eslint/tsconfig-utils": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
-            "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
+            "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -1751,15 +1827,15 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
-            "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
+            "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.54.0",
-                "@typescript-eslint/typescript-estree": "8.54.0",
-                "@typescript-eslint/utils": "8.54.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0",
                 "debug": "^4.4.3",
                 "ts-api-utils": "^2.4.0"
             },
@@ -1776,9 +1852,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
-            "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
+            "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -1790,16 +1866,16 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
-            "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
+            "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/project-service": "8.54.0",
-                "@typescript-eslint/tsconfig-utils": "8.54.0",
-                "@typescript-eslint/types": "8.54.0",
-                "@typescript-eslint/visitor-keys": "8.54.0",
+                "@typescript-eslint/project-service": "8.55.0",
+                "@typescript-eslint/tsconfig-utils": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "debug": "^4.4.3",
                 "minimatch": "^9.0.5",
                 "semver": "^7.7.3",
@@ -1818,16 +1894,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
-            "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
+            "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.9.1",
-                "@typescript-eslint/scope-manager": "8.54.0",
-                "@typescript-eslint/types": "8.54.0",
-                "@typescript-eslint/typescript-estree": "8.54.0"
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1842,13 +1918,13 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
-            "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
+            "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.54.0",
+                "@typescript-eslint/types": "8.55.0",
                 "eslint-visitor-keys": "^4.2.1"
             },
             "engines": {
@@ -1872,6 +1948,63 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/@videojs/http-streaming": {
+            "version": "3.17.3",
+            "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.17.3.tgz",
+            "integrity": "sha512-6AteOnlpiY8ljijyCB+JszDCIVl9UcSgIiM+CfpBe3Yk2VESjKw9Jq8AkOyZyfLI4U5kDR9izHcGi6ho517n8g==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.1",
+                "aes-decrypter": "^4.0.2",
+                "global": "^4.4.0",
+                "m3u8-parser": "^7.2.0",
+                "mpd-parser": "^1.3.1",
+                "mux.js": "7.1.0",
+                "video.js": "^7 || ^8"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            },
+            "peerDependencies": {
+                "video.js": "^8.19.0"
+            }
+        },
+        "node_modules/@videojs/themes": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@videojs/themes/-/themes-1.0.1.tgz",
+            "integrity": "sha512-2b6YIIIz5x+/eSFdkSZ2RZJfHIMfP7bGODR3wDzLTqFF2kEKnJVIXxBUNzdZC/qiVETqAA2Ba6mCp+iXTUYt4A==",
+            "license": "MIT",
+            "dependencies": {
+                "postcss-inline-svg": "^4.1.0"
+            }
+        },
+        "node_modules/@videojs/vhs-utils": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
+            "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "global": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            }
+        },
+        "node_modules/@videojs/xhr": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+            "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "global": "~4.4.0",
+                "is-function": "^1.0.1"
+            }
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "5.2.4",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1915,53 +2048,93 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
-            "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
+            "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/shared": "3.5.27",
-                "entities": "^7.0.0",
+                "@babel/parser": "^7.29.0",
+                "@vue/shared": "3.5.28",
+                "entities": "^7.0.1",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.2.1"
             }
         },
+        "node_modules/@vue/compiler-core/node_modules/entities": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+            "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
-            "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
+            "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-core": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-core": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
-            "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
+            "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/compiler-core": "3.5.27",
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@babel/parser": "^7.29.0",
+                "@vue/compiler-core": "3.5.28",
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.21",
                 "postcss": "^8.5.6",
                 "source-map-js": "^1.2.1"
             }
         },
+        "node_modules/@vue/compiler-sfc/node_modules/postcss": {
+            "version": "8.5.6",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+            "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.11",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
-            "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
+            "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/compiler-vue2": {
@@ -2027,53 +2200,53 @@
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
-            "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
+            "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
             "license": "MIT",
             "dependencies": {
-                "@vue/shared": "3.5.27"
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
-            "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
+            "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/reactivity": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
-            "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
+            "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/runtime-core": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@vue/reactivity": "3.5.28",
+                "@vue/runtime-core": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "csstype": "^3.2.3"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
-            "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
+            "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
-                "vue": "3.5.27"
+                "vue": "3.5.28"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
-            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
+            "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
             "license": "MIT"
         },
         "node_modules/@vueuse/core": {
@@ -2112,6 +2285,15 @@
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/@xmldom/xmldom": {
+            "version": "0.8.11",
+            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+            "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
         "node_modules/acorn": {
             "version": "8.15.0",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2135,6 +2317,18 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
+        "node_modules/aes-decrypter": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
+            "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.1",
+                "global": "^4.4.0",
+                "pkcs7": "^1.0.4"
+            }
+        },
         "node_modules/ajv": {
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2209,13 +2403,13 @@
             "license": "MIT"
         },
         "node_modules/axios": {
-            "version": "1.13.4",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
-            "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
+            "version": "1.13.5",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+            "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
             "license": "MIT",
             "dependencies": {
-                "follow-redirects": "^1.15.6",
-                "form-data": "^4.0.4",
+                "follow-redirects": "^1.15.11",
+                "form-data": "^4.0.5",
                 "proxy-from-env": "^1.1.0"
             }
         },
@@ -2230,7 +2424,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
             "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/brace-expansion": {
@@ -2434,6 +2627,39 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-select": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+            "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^3.2.1",
+                "domutils": "^1.7.0",
+                "nth-check": "^1.0.2"
+            }
+        },
+        "node_modules/css-select/node_modules/nth-check": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+            "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "~1.0.0"
+            }
+        },
+        "node_modules/css-what": {
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+            "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2508,6 +2734,46 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dom-serializer": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+            "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^1.3.0",
+                "entities": "^1.1.1"
+            }
+        },
+        "node_modules/dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
+        "node_modules/domelementtype": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+            "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/domhandler": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+            "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "domelementtype": "1"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+            "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "dom-serializer": "0",
+                "domelementtype": "1"
+            }
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2542,16 +2808,10 @@
             }
         },
         "node_modules/entities": {
-            "version": "7.0.1",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
-            "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-            "license": "BSD-2-Clause",
-            "engines": {
-                "node": ">=0.12"
-            },
-            "funding": {
-                "url": "https://github.com/fb55/entities?sponsor=1"
-            }
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+            "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+            "license": "BSD-2-Clause"
         },
         "node_modules/es-define-property": {
             "version": "1.0.1",
@@ -3243,6 +3503,16 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/global": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+            "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+            "license": "MIT",
+            "dependencies": {
+                "min-document": "^2.19.0",
+                "process": "^0.11.10"
+            }
+        },
         "node_modules/globals": {
             "version": "14.0.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -3332,6 +3602,20 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/htmlparser2": {
+            "version": "3.10.1",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+            "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^1.3.1",
+                "domhandler": "^2.3.0",
+                "domutils": "^1.5.1",
+                "entities": "^1.1.1",
+                "inherits": "^2.0.1",
+                "readable-stream": "^3.1.1"
+            }
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3369,6 +3653,12 @@
                 "node": ">=0.8.19"
             }
         },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "license": "ISC"
+        },
         "node_modules/is-extglob": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3388,6 +3678,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+            "license": "MIT"
+        },
         "node_modules/is-glob": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3514,6 +3810,13 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/libphonenumber-js": {
+            "version": "1.12.39",
+            "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.39.tgz",
+            "integrity": "sha512-MW79m7HuOqBk8mwytiXYTMELJiBbV3Zl9Y39dCCn1yC8K+WGNSq1QGvzywbylp5vGShEztMScCWHX/XFOS0rXg==",
+            "license": "MIT",
+            "peer": true
+        },
         "node_modules/lightningcss": {
             "version": "1.30.2",
             "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -3828,6 +4131,17 @@
                 "vue": ">=3.0.1"
             }
         },
+        "node_modules/m3u8-parser": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
+            "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.1.1",
+                "global": "^4.4.0"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -3891,6 +4205,15 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/min-document": {
+            "version": "2.19.2",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.2.tgz",
+            "integrity": "sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==",
+            "license": "MIT",
+            "dependencies": {
+                "dom-walk": "^0.1.0"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -3907,6 +4230,21 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/mpd-parser": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.1.tgz",
+            "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/vhs-utils": "^4.0.0",
+                "@xmldom/xmldom": "^0.8.3",
+                "global": "^4.4.0"
+            },
+            "bin": {
+                "mpd-to-m3u8-json": "bin/parse.js"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3921,6 +4259,23 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/mux.js": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.1.0.tgz",
+            "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.11.2",
+                "global": "^4.4.0"
+            },
+            "bin": {
+                "muxjs-transmux": "bin/transmux.js"
+            },
+            "engines": {
+                "node": ">=8",
+                "npm": ">=5"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -4085,6 +4440,18 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pkcs7": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+            "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5"
+            },
+            "bin": {
+                "pkcs7": "bin/cli.js"
+            }
+        },
         "node_modules/playwright": {
             "version": "1.58.2",
             "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
@@ -4116,31 +4483,33 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.5.6",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-            "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/postcss"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
+            "version": "7.0.39",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+            "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
             "license": "MIT",
             "dependencies": {
-                "nanoid": "^3.3.11",
-                "picocolors": "^1.1.1",
-                "source-map-js": "^1.2.1"
+                "picocolors": "^0.2.1",
+                "source-map": "^0.6.1"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14"
+                "node": ">=6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            }
+        },
+        "node_modules/postcss-inline-svg": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz",
+            "integrity": "sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==",
+            "license": "MIT",
+            "dependencies": {
+                "css-select": "^2.0.2",
+                "dom-serializer": "^0.1.1",
+                "htmlparser2": "^3.10.1",
+                "postcss": "^7.0.17",
+                "postcss-value-parser": "^4.0.0"
             }
         },
         "node_modules/postcss-selector-parser": {
@@ -4156,6 +4525,28 @@
                 "node": ">=4"
             }
         },
+        "node_modules/postcss-value-parser": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "license": "MIT"
+        },
+        "node_modules/postcss/node_modules/picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+            "license": "ISC"
+        },
+        "node_modules/preact": {
+            "version": "10.12.1",
+            "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+            "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/preact"
+            }
+        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4286,6 +4677,15 @@
                 }
             }
         },
+        "node_modules/process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4350,6 +4750,20 @@
             ],
             "license": "MIT"
         },
+        "node_modules/readable-stream": {
+            "version": "3.6.2",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+            "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "^2.0.3",
+                "string_decoder": "^1.1.1",
+                "util-deprecate": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/reka-ui": {
             "version": "2.8.0",
             "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.8.0.tgz",
@@ -4372,14 +4786,14 @@
             }
         },
         "node_modules/reka-ui/node_modules/@vueuse/core": {
-            "version": "14.2.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.0.tgz",
-            "integrity": "sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==",
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+            "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
             "license": "MIT",
             "dependencies": {
                 "@types/web-bluetooth": "^0.0.21",
-                "@vueuse/metadata": "14.2.0",
-                "@vueuse/shared": "14.2.0"
+                "@vueuse/metadata": "14.2.1",
+                "@vueuse/shared": "14.2.1"
             },
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
@@ -4389,18 +4803,18 @@
             }
         },
         "node_modules/reka-ui/node_modules/@vueuse/metadata": {
-            "version": "14.2.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.0.tgz",
-            "integrity": "sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==",
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
+            "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
             }
         },
         "node_modules/reka-ui/node_modules/@vueuse/shared": {
-            "version": "14.2.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.0.tgz",
-            "integrity": "sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==",
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
+            "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
@@ -4529,6 +4943,26 @@
                 "tslib": "^2.1.0"
             }
         },
+        "node_modules/safe-buffer": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
         "node_modules/semver": {
             "version": "7.7.4",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -4649,6 +5083,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4658,6 +5101,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/string_decoder": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+            "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "~5.2.0"
+            }
+        },
         "node_modules/string-width": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4876,16 +5328,16 @@
             }
         },
         "node_modules/typescript-eslint": {
-            "version": "8.54.0",
-            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
-            "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.55.0.tgz",
+            "integrity": "sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/eslint-plugin": "8.54.0",
-                "@typescript-eslint/parser": "8.54.0",
-                "@typescript-eslint/typescript-estree": "8.54.0",
-                "@typescript-eslint/utils": "8.54.0"
+                "@typescript-eslint/eslint-plugin": "8.55.0",
+                "@typescript-eslint/parser": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4922,6 +5374,57 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "license": "MIT"
         },
+        "node_modules/video.js": {
+            "version": "8.23.6",
+            "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.23.6.tgz",
+            "integrity": "sha512-qjS3HTDo7iapedJuso62scA303i+6CaCUnwyRr8GYd/BYAp7XGb7InUMw2Eu6zrN6IWooPOb78NzyMyjRbIN+Q==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@videojs/http-streaming": "^3.17.2",
+                "@videojs/vhs-utils": "^4.1.1",
+                "@videojs/xhr": "2.7.0",
+                "aes-decrypter": "^4.0.2",
+                "global": "4.4.0",
+                "m3u8-parser": "^7.2.0",
+                "mpd-parser": "^1.3.1",
+                "mux.js": "^7.0.1",
+                "videojs-contrib-quality-levels": "4.1.0",
+                "videojs-font": "4.2.0",
+                "videojs-vtt.js": "0.15.5"
+            }
+        },
+        "node_modules/videojs-contrib-quality-levels": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+            "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "global": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=16",
+                "npm": ">=8"
+            },
+            "peerDependencies": {
+                "video.js": "^8"
+            }
+        },
+        "node_modules/videojs-font": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+            "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/videojs-vtt.js": {
+            "version": "0.15.5",
+            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+            "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "global": "^4.3.1"
+            }
+        },
         "node_modules/vite": {
             "version": "6.4.1",
             "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
@@ -5049,6 +5552,34 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/vite/node_modules/postcss": {
+            "version": "8.5.6",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+            "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.11",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
         "node_modules/vscode-uri": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -5057,16 +5588,16 @@
             "license": "MIT"
         },
         "node_modules/vue": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
-            "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
+            "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-sfc": "3.5.27",
-                "@vue/runtime-dom": "3.5.27",
-                "@vue/server-renderer": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-sfc": "3.5.28",
+                "@vue/runtime-dom": "3.5.28",
+                "@vue/server-renderer": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
                 "typescript": "*"
@@ -5120,6 +5651,16 @@
             "integrity": "sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A==",
             "license": "MIT"
         },
+        "node_modules/vue-tel-input": {
+            "version": "9.7.1",
+            "resolved": "https://registry.npmjs.org/vue-tel-input/-/vue-tel-input-9.7.1.tgz",
+            "integrity": "sha512-duDKNzEPdNEpWEHgRvjDlfP/ZOT+qys9gN/J3/riwjDLYGW7beV8IuVVCY7vfLPVlgM6DijtT0fnShXTYkIF+w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "libphonenumber-js": "^1.12.12",
+                "vue": "^3.5.4"
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "2.2.12",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
diff --git a/package.json b/package.json
index dfd97e9..529d9f6 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,18 @@
         "vue3-radial-progress": "^1.1.1"
     },
     "dependencies": {
+        "@fullcalendar/core": "^6.1.20",
+        "@fullcalendar/daygrid": "^6.1.20",
+        "@fullcalendar/interaction": "^6.1.20",
+        "@fullcalendar/list": "^6.1.20",
+        "@fullcalendar/timegrid": "^6.1.20",
+        "@fullcalendar/vue3": "^6.1.20",
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.2.0",
-        "@tailwindcss/typography": "^0.5.16",
         "@inertiajs/vue3": "^2.0.0",
+        "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.1",
+        "@videojs/themes": "^1.0.1",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^12.8.2",
         "class-variance-authority": "^0.7.1",
@@ -42,9 +49,11 @@
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
         "typescript": "^5.2.2",
+        "video.js": "^8.23.6",
         "vite": "^6.3.4",
         "vue": "^3.5.13",
         "vue-sonner": "^1.3.2",
+        "vue-tel-input": "^9.7.1",
         "ziggy-js": "^2.4.2"
     },
     "optionalDependencies": {
@@ -52,4 +61,4 @@
         "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
         "lightningcss-linux-x64-gnu": "^1.29.1"
     }
-}
\ No newline at end of file
+}
diff --git a/public/img/GI_Logo_horizontal_white.png b/public/img/GI_Logo_horizontal_white.png
new file mode 100644
index 0000000..3135bb5
Binary files /dev/null and b/public/img/GI_Logo_horizontal_white.png differ
diff --git a/public/img/grey-trader-factory.png b/public/img/grey-trader-factory.png
new file mode 100644
index 0000000..3135bb5
Binary files /dev/null and b/public/img/grey-trader-factory.png differ
diff --git a/public/img/img.jpg b/public/img/img.jpg
new file mode 100644
index 0000000..da2b25e
Binary files /dev/null and b/public/img/img.jpg differ
diff --git a/resources/css/app.css b/resources/css/app.css
index ded4818..7772dfe 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -4,6 +4,12 @@
 
 @import 'tw-animate-css';
 
+@import './tel-input-component.css';
+
+@import './goals-responsive.css';
+
+@import './magazine-slide-responsive.css';
+
 @plugin "@tailwindcss/typography";
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -124,25 +130,30 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+    --color-semi: var(--semi);
+    --color-light-success: var(--light-success);
+    --color-light-error: var(--light-error);
+    --color-dark-success: var(--dark-success);
+    --color-dark-error: var(--dark-error);
 
     --color-warning: var(--warning);
     --color-warning-foreground: var(--warning-foreground);
     --animate-accordion-down: accordion-down 0.2s ease-out;
     --animate-accordion-up: accordion-up 0.2s ease-out;
-  @keyframes accordion-down {
-  from {
-    height: 0;
+    @keyframes accordion-down {
+        from {
+            height: 0;
         }
-  to {
-    height: var(--reka-accordion-content-height);
+        to {
+            height: var(--reka-accordion-content-height);
         }
     }
-  @keyframes accordion-up {
-  from {
-    height: var(--reka-accordion-content-height);
+    @keyframes accordion-up {
+        from {
+            height: var(--reka-accordion-content-height);
         }
-  to {
-    height: 0;
+        to {
+            height: 0;
         }
     }
 }
@@ -178,6 +189,7 @@
 }
 
 :root {
+    --semi: #f9f9f9;
     --background: hsl(0 0% 100%);
     --foreground: hsl(0 0% 3.9%);
     --card: hsl(0 0% 100%);
@@ -228,6 +240,12 @@
 }
 
 .dark {
+    --light-success: #d1fadf;
+    --light-error: #fee2e2;
+    --dark-success: #16ad4a;
+    --dark-error: #c91313;
+    --semi: #1f1e1e;
+    --semi: #1f1e1e;
     --background: hsl(0 0% 10%);
     --foreground: hsl(0 0% 98%);
     --card: hsl(0 0% 3.9%);
diff --git a/resources/css/goals-responsive.css b/resources/css/goals-responsive.css
new file mode 100644
index 0000000..c98a0cf
--- /dev/null
+++ b/resources/css/goals-responsive.css
@@ -0,0 +1,57 @@
+/* Responsive styles for Goals Show page */
+
+/* Mobile-first responsive fixes */
+@media (max-width: 640px) {
+    .goals-show-container {
+        padding: 0.75rem;
+    }
+
+    .goals-card {
+        min-width: auto !important;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .goals-card-title {
+        font-size: 1.5rem !important;
+        line-height: 2rem !important;
+    }
+
+    .goals-card-content {
+        padding: 1rem;
+    }
+
+    .goals-card-content ul {
+        padding-left: 1.25rem;
+        margin: 0;
+    }
+
+    .goals-card-content li {
+        font-size: 0.95rem;
+        line-height: 1.5;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/* Tablet adjustments */
+@media (min-width: 641px) and (max-width: 1024px) {
+    .goals-show-container {
+        padding: 1.5rem;
+    }
+
+    .goals-card {
+        max-width: 42rem;
+        width: 90%;
+    }
+
+    .goals-card-title {
+        font-size: 2rem !important;
+    }
+}
+
+/* Desktop - maintain original styling */
+@media (min-width: 1025px) {
+    .goals-card {
+        min-width: 32rem;
+    }
+}
diff --git a/resources/css/magazine-slide-responsive.css b/resources/css/magazine-slide-responsive.css
new file mode 100644
index 0000000..58ac9cb
--- /dev/null
+++ b/resources/css/magazine-slide-responsive.css
@@ -0,0 +1,85 @@
+/* Responsive styles for Magazine Slide page */
+
+/* Mobile-first responsive fixes */
+@media (max-width: 640px) {
+    .slide-container {
+        padding: 1rem !important;
+        padding-top: 4rem !important;
+        min-height: auto !important;
+    }
+
+    .slide-header {
+        padding: 1.5rem 1rem !important;
+        padding-top: 1rem !important;
+    }
+
+    .slide-title {
+        font-size: 1.25rem !important;
+        line-height: 1.75rem !important;
+    }
+
+    .slide-description {
+        margin-top: 1rem !important;
+        font-size: 0.95rem;
+    }
+
+    .slide-items-container {
+        flex-direction: column !important;
+        gap: 1rem;
+        margin-top: 1.5rem;
+    }
+
+    .slide-item {
+        height: auto !important;
+        min-height: 12rem;
+        padding: 1rem !important;
+    }
+
+    .slide-item-title {
+        font-size: 1.125rem !important;
+        margin-bottom: 0.5rem;
+    }
+
+    .slide-item-description {
+        font-size: 0.9rem;
+        line-height: 1.5;
+        -webkit-line-clamp: 4 !important;
+    }
+}
+
+/* Tablet adjustments */
+@media (min-width: 641px) and (max-width: 1024px) {
+    padding-top: 3rem !important;
+}
+
+.slide-header {
+    padding: 2rem 1.5rem !important;
+    padding-top:
+    .slide-header {
+        padding: 2rem 1.5rem !important;
+    }
+
+    .slide-title {
+        font-size: 1.5rem !important;
+    }
+
+    .slide-items-container {
+        gap: 1rem;
+    }
+
+    .slide-item {
+        height: auto !important;
+        min-height: 16rem;
+    }
+
+    .slide-item-description {
+        -webkit-line-clamp: 4 !important;
+    }
+}
+
+/* Desktop - maintain original styling */
+@media (min-width: 1025px) {
+    .slide-container {
+        padding: 6rem;
+    }
+}
diff --git a/resources/css/tel-input-component.css b/resources/css/tel-input-component.css
index 7608363..00b151f 100644
--- a/resources/css/tel-input-component.css
+++ b/resources/css/tel-input-component.css
@@ -1,42 +1,95 @@
 .vti__dropdown {
-    @apply relative flex cursor-pointer flex-col justify-center hover:dark:bg-gray-800;
+    @apply relative flex cursor-pointer flex-col justify-center;
+    min-width: 80px;
+    height: 100%;
 }
 
 .vti__dropdown.show {
-    @apply overflow-scroll;
+    @apply overflow-visible;
 }
 
 .vti__dropdown.open {
-    @apply dark:bg-gray-800;
+    background-color: transparent !important;
+}
+
+/* Mobile dropdown adjustments */
+@media (max-width: 640px) {
+    .vti__dropdown {
+        min-width: 70px;
+    }
 }
 
 .vti__dropdown.disabled {
-    @apply cursor-no-drop bg-gray-100 outline-0 dark:bg-gray-600;
+    @apply cursor-not-allowed opacity-50;
 }
 
 .vti__selection {
     @apply flex items-center justify-center;
+    height: 100%;
 }
 
 .vti__selection .vti__country-code {
-    @apply bg-gray-600;
+    @apply dark:text-gray-200;
 }
 
 .vti__flag {
-    @apply mx-3;
+    @apply mx-2;
+}
+
+/* RTL Support */
+[dir='rtl'] .vti__flag {
+    @apply mr-0 ml-2;
+}
+
+[dir='rtl'] .vti__dropdown-item .vti__flag {
+    margin-right: 0;
+    margin-left: 5px;
 }
 
 .vti__dropdown-list {
-    @apply absolute z-10 m-0 max-h-48 w-96 overflow-y-scroll rounded-md border border-gray-300 bg-white p-0 text-left shadow-2xl dark:border-gray-700 dark:bg-gray-800;
+    @apply absolute z-50 m-0 max-h-60 w-80 overflow-y-auto rounded-md border border-gray-300 bg-white p-0 text-left shadow-2xl dark:border-gray-700 dark:bg-[#262626];
+}
+
+/* Mobile responsive dropdown */
+@media (max-width: 640px) {
+    .vti__dropdown-list {
+        @apply max-h-72;
+        width: calc(100vw - 2rem);
+        max-width: 400px;
+        left: 0;
+        right: auto;
+    }
+
+    [dir='rtl'] .vti__dropdown-list {
+        left: auto;
+        right: 0;
+    }
+}
+
+/* RTL Dropdown List */
+[dir='rtl'] .vti__dropdown-list {
+    @apply text-right;
 }
 
 .vti__dropdown-list.below {
-    top: 33px;
+    top: 100%;
+    margin-top: 4px;
 }
 
 .vti__dropdown-list.above {
     top: auto;
     bottom: 100%;
+    margin-bottom: 4px;
+}
+
+@media (max-width: 640px) {
+    .vti__dropdown-list.below {
+        margin-top: 2px;
+    }
+
+    .vti__dropdown-list.above {
+        margin-bottom: 2px;
+    }
 }
 
 .vti__dropdown-arrow {
@@ -45,15 +98,155 @@
     color: #666;
 }
 
+/* Dark mode arrow */
+.dark .vti__dropdown-arrow {
+    @apply text-gray-400;
+}
+
 .vti__dropdown-item {
-    @apply hover:bg-primary-600 cursor-pointer p-1 text-sm hover:text-white;
+    @apply cursor-pointer p-2 text-sm hover:text-white dark:text-gray-200;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    &:hover {
+        background-color: #eb6600;
+    }
+}
+
+/* Mobile responsive dropdown items - larger touch targets */
+@media (max-width: 640px) {
+    .vti__dropdown-item {
+        @apply p-3;
+        font-size: 15px;
+        line-height: 1.4;
+    }
 }
 
 .vti__dropdown-item.last-preferred {
     border-bottom: 1px solid #cacaca;
 }
 
+/* Dark mode preferred border */
+.dark .vti__dropdown-item.last-preferred {
+    @apply border-gray-600;
+}
+
 .vti__dropdown-item .vti__flag {
     display: inline-block;
-    margin-right: 5px;
+    flex-shrink: 0;
+    width: 20px;
+    height: 15px;
+}
+
+@media (max-width: 640px) {
+    .vti__dropdown-item .vti__flag {
+        width: 24px;
+        height: 18px;
+    }
+}
+
+[dir='rtl'] .vti__dropdown-item .vti__flag {
+    margin-right: 0;
+    margin-left: 0;
+}
+
+.vti__dropdown-item.highlighted {
+    @apply text-white;
+    background-color: #eb6600 !important;
+}
+
+/* Input field styling for dark mode */
+.vti__input {
+    @apply text-foreground placeholder:text-muted-foreground w-full border-0 bg-transparent px-3 py-1 text-base focus:outline-none md:text-sm;
+    height: 100%;
+    direction: ltr;
+    text-align: left;
+}
+
+/* Mobile responsive input - larger touch target */
+@media (max-width: 640px) {
+    .vti__input {
+        font-size: 16px; /* Prevents iOS zoom on focus */
+    }
+}
+
+/* Disabled input */
+.vti__input:disabled {
+    @apply cursor-not-allowed opacity-50;
+}
+
+.vue-tel-input.disabled {
+    @apply pointer-events-none cursor-not-allowed opacity-50;
+}
+
+/* Main wrapper styling */
+.vue-tel-input {
+    @apply relative flex h-9 w-full items-center rounded-md bg-transparent shadow-xs transition-[color,box-shadow];
+    overflow: visible;
+    border: 1px solid #e5e5e5;
+}
+
+.dark .vue-tel-input {
+    @apply bg-input/30;
+    border-color: #3f3f46;
+}
+
+.vue-tel-input:focus-within {
+    @apply ring-ring/50 ring-[3px];
+    border-color: #e5e5e5;
+}
+
+@media (max-width: 640px) {
+    .vue-tel-input {
+        @apply text-base;
+    }
+}
+
+/* Search input in dropdown */
+.vti__search_box {
+    @apply w-full border-b border-gray-300 px-3 py-2 text-sm focus:outline-none dark:border-gray-700 dark:bg-[#262626] dark:text-gray-100;
+}
+
+@media (max-width: 640px) {
+    .vti__search_box {
+        @apply py-3 text-base;
+    }
+}
+
+/* Country name text */
+.vti__dropdown-item .vti__country-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 4px;
+}
+
+[dir='rtl'] .vti__dropdown-item .vti__country-name {
+    padding-right: 0;
+    padding-left: 4px;
+}
+
+@media (max-width: 640px) {
+    .vti__dropdown-item .vti__country-name {
+        white-space: normal;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        line-height: 1.3;
+    }
+}
+
+/* Dial code in dropdown */
+.vti__dropdown-item .vti__dial-code {
+    @apply text-gray-500 dark:text-gray-400;
+    flex-shrink: 0;
+    font-size: 0.875rem;
+}
+
+[dir='rtl'] .vti__dropdown-item .vti__dial-code {
+    margin-left: 0;
+}
+
+.vue-tel-input.has-error {
+    @apply border-destructive ring-destructive/20;
 }
diff --git a/resources/img/img.jpg:Zone.Identifier b/resources/img/img.jpg:Zone.Identifier
new file mode 100644
index 0000000..d6c1ec6
Binary files /dev/null and b/resources/img/img.jpg:Zone.Identifier differ
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 6f70b77..67c7232 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,6 +6,8 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import VueTelInput from 'vue-tel-input';
+import 'vue-tel-input/vue-tel-input.css';
 
 // Extend ImportMeta interface for Vite...
 declare module 'vite/client' {
@@ -29,6 +31,7 @@ createInertiaApp({
         createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)
+            .use(VueTelInput)
             .mount(el);
     },
     progress: {
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 900df2a..ee1cdf5 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -3,12 +3,11 @@ import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { $trans } from '@/lib/translator';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
-import { ExternalLink, LayoutGrid } from 'lucide-vue-next';
+import { Book, BookOpen, ExternalLink, Heart, Key, LayoutGrid, User } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
-import { $trans } from '@/lib/translator';
-
 
 const mainNavItems: NavItem[] = [
     {
@@ -16,17 +15,27 @@ const mainNavItems: NavItem[] = [
         href: '/dashboard',
         icon: LayoutGrid,
     },
+    {
+        title: $trans('My Profile'),
+        href: '/settings/profile',
+        icon: User,
+    },
+    {
+        title: $trans('My Courses'),
+        href: '/settings/courses',
+        icon: BookOpen,
+    },
+    {
+        title: $trans('My Books'),
+        href: '/settings/books',
+        icon: Book,
+    },
 ];
 
 const footerNavItems: NavItem[] = [
     {
-        title: 'Caveo Brokerage',
-        href: 'https://caveo.com.kw',
-        icon: ExternalLink,
-    },
-    {
-        title: 'ASCIISD',
-        href: 'https://asciisd.com',
+        title: $trans('Go To Home Page'),
+        href: '/',
         icon: ExternalLink,
     },
 ];
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index 43578fb..8c2e2e6 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -5,9 +5,9 @@ import { Monitor, Moon, Sun } from 'lucide-vue-next';
 const { appearance, updateAppearance } = useAppearance();
 
 const tabs = [
-    { value: 'light', Icon: Sun, label: 'Light' },
-    { value: 'dark', Icon: Moon, label: 'Dark' },
-    { value: 'system', Icon: Monitor, label: 'System' },
+    { value: 'light', Icon: Sun, label: 'فاتح' },
+    { value: 'dark', Icon: Moon, label: 'داكن' },
+    { value: 'system', Icon: Monitor, label: 'النظام' },
 ] as const;
 </script>
 
@@ -25,7 +25,7 @@ const tabs = [
             ]"
         >
             <component :is="Icon" class="-ml-1 h-4 w-4" />
-            <span class="ml-1.5 text-sm">{{ label }}</span>
+            <span class="ms-1.5 text-sm">{{ label }}</span>
         </button>
     </div>
 </template>
diff --git a/resources/js/components/ApplicationLogo.vue b/resources/js/components/ApplicationLogo.vue
new file mode 100644
index 0000000..4cd92aa
--- /dev/null
+++ b/resources/js/components/ApplicationLogo.vue
@@ -0,0 +1,3 @@
+<template>
+    <img alt="logo_horizontal_green" src="/img/GI_Logo_horizontal_green.png">
+</template>
diff --git a/resources/js/components/ApplicationLogoLight.vue b/resources/js/components/ApplicationLogoLight.vue
new file mode 100644
index 0000000..02d5ddb
--- /dev/null
+++ b/resources/js/components/ApplicationLogoLight.vue
@@ -0,0 +1,3 @@
+<template>
+    <img alt="logo_horizontal_green" src="/img/GI_Logo_horizontal_white.png">
+</template>
diff --git a/resources/js/components/ApplicationMark.vue b/resources/js/components/ApplicationMark.vue
new file mode 100644
index 0000000..ec7e8e0
--- /dev/null
+++ b/resources/js/components/ApplicationMark.vue
@@ -0,0 +1,3 @@
+<template>
+    <img alt="logo_horizontal_green" class="" src="/img/grey-trader-factory.png">
+</template>
diff --git a/resources/js/components/Banner.vue b/resources/js/components/Banner.vue
new file mode 100644
index 0000000..ff40753
--- /dev/null
+++ b/resources/js/components/Banner.vue
@@ -0,0 +1,88 @@
+<script setup>
+import {computed, ref, watch} from 'vue';
+import {usePage} from '@inertiajs/vue3';
+
+const show = ref(true);
+const style = computed(() => usePage().props.jetstream && usePage().props.jetstream.flash?.bannerStyle || 'success');
+const message = computed(() => usePage().props.jetstream && usePage().props.jetstream.flash?.banner || '');
+
+watch(message, async () => {
+    show.value = true;
+});
+</script>
+
+<template>
+    <div>
+        <div v-if="show && message" :class="{ 'bg-primary-500': style == 'success', 'bg-red-700': style == 'danger' }">
+            <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between flex-wrap">
+                    <div class="w-0 flex-1 flex items-center min-w-0">
+                        <span :class="{ 'bg-primary-600': style == 'success', 'bg-red-600': style == 'danger' }"
+                              class="flex p-2 rounded-lg">
+                            <svg
+                                v-if="style == 'success'"
+                                class="h-5 w-5 text-white"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                />
+                            </svg>
+
+                            <svg
+                                v-if="style == 'danger'"
+                                class="h-5 w-5 text-white"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                />
+                            </svg>
+                        </span>
+
+                        <p class="ms-3 font-medium text-sm text-white truncate">
+                            {{ message }}
+                        </p>
+                    </div>
+
+                    <div class="shrink-0 sm:ms-3">
+                        <button
+                            :class="{ 'hover:bg-primary-600 focus:bg-primary-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
+                            aria-label="Dismiss"
+                            class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition"
+                            type="button"
+                            @click.prevent="show = false"
+                        >
+                            <svg
+                                class="h-5 w-5 text-white"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M6 18L18 6M6 6l12 12"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 550610c..5fce4d5 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -44,39 +44,38 @@ const closeModal = () => {
 
 <template>
     <div class="space-y-6">
-        <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+        <HeadingSmall title="حذف الحساب" description="حذف حسابك وجميع موارده" />
         <div class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
             <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
-                <p class="font-medium">Warning</p>
-                <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
+                <p class="font-medium">تحذير</p>
+                <p class="text-sm">يرجى توخي الحذر، لا يمكن التراجع عن هذا الإجراء.</p>
             </div>
             <Dialog>
                 <DialogTrigger as-child>
-                    <Button variant="destructive">Delete account</Button>
+                    <Button variant="destructive">حذف الحساب</Button>
                 </DialogTrigger>
                 <DialogContent>
                     <form class="space-y-6" @submit="deleteUser">
                         <DialogHeader class="space-y-3">
-                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                            <DialogTitle>هل أنت متأكد أنك تريد حذف حسابك؟</DialogTitle>
                             <DialogDescription>
-                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
-                                password to confirm you would like to permanently delete your account.
+                                بمجرد حذف حسابك، سيتم أيضًا حذف جميع موارده وبياناته بشكل دائم. يرجى إدخال كلمة المرور الخاصة بك لتأكيد رغبتك في حذف حسابك بشكل دائم.
                             </DialogDescription>
                         </DialogHeader>
 
                         <div class="grid gap-2">
-                            <Label for="password" class="sr-only">Password</Label>
-                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
+                            <Label for="password" class="sr-only">كلمة المرور</Label>
+                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="كلمة المرور" />
                             <InputError :message="form.errors.password" />
                         </div>
 
                         <DialogFooter class="gap-2">
                             <DialogClose as-child>
-                                <Button variant="secondary" @click="closeModal"> Cancel </Button>
+                                <Button variant="secondary" @click="closeModal"> إلغاء </Button>
                             </DialogClose>
 
                             <Button variant="destructive" :disabled="form.processing">
-                                <button type="submit">Delete account</button>
+                                <button type="submit">حذف الحساب</button>
                             </Button>
                         </DialogFooter>
                     </form>
diff --git a/resources/js/components/Dropdown.vue b/resources/js/components/Dropdown.vue
new file mode 100644
index 0000000..e8a9bb3
--- /dev/null
+++ b/resources/js/components/Dropdown.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'right',
+    },
+    width: {
+        type: String,
+        default: '48',
+    },
+    contentClasses: {
+        type: Array,
+        default: () => ['py-1', 'bg-white'],
+    },
+});
+
+let open = ref(false);
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+    return {
+        '48': 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'origin-top-left left-0';
+    }
+
+    if (props.align === 'right') {
+        return 'origin-top-right right-0';
+    }
+
+    return 'origin-top';
+});
+</script>
+
+<template>
+    <div class="relative">
+        <div @click="open = ! open">
+            <slot name="trigger" />
+        </div>
+
+        <!-- Full Screen Dropdown Overlay -->
+        <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />
+
+        <transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+        >
+            <div
+                v-show="open"
+                class="absolute z-50 mt-2 rounded-md shadow-lg"
+                :class="[widthClass, alignmentClasses]"
+                style="display: none;"
+                @click="open = false"
+            >
+                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                    <slot name="content" />
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
diff --git a/resources/js/components/DropdownLink.vue b/resources/js/components/DropdownLink.vue
new file mode 100644
index 0000000..9c9d768
--- /dev/null
+++ b/resources/js/components/DropdownLink.vue
@@ -0,0 +1,28 @@
+<script setup>
+import {Link} from '@inertiajs/vue3';
+
+defineProps({
+    href: String,
+    as: String,
+});
+</script>
+
+<template>
+    <div>
+        <button v-if="as == 'button'"
+                class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition text-start"
+                type="submit">
+            <slot/>
+        </button>
+
+        <a v-else-if="as =='a'" :href="href"
+           class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+            <slot/>
+        </a>
+
+        <Link v-else :href="href"
+              class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+            <slot/>
+        </Link>
+    </div>
+</template>
diff --git a/resources/js/components/GuestFooter.vue b/resources/js/components/GuestFooter.vue
index 9ee9b4e..6ac06b5 100644
--- a/resources/js/components/GuestFooter.vue
+++ b/resources/js/components/GuestFooter.vue
@@ -57,14 +57,17 @@ const navigation = [
         name: 'Twitter',
         href: 'https://x.com/trf_academy',
         icon: defineComponent({
-            render: () =>
-                h('svg', {fill: 'currentColor', viewBox: '0 0 24 24'}, [
-                    h('path', {
-                        d:
-                            'M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84',
-                    }),
-                ]),
-        }),
+        render: () =>
+            h('svg', {
+                fill: 'currentColor',
+                viewBox: '0 0 120 120',
+                xmlns: 'http://www.w3.org/2000/svg'
+            }, [
+                h('path', {
+                    d: 'M93.5 20H108L76.5 57.1L113 100H85.6L62.7 74.1L36.8 100H22.2L56.1 60.8L21 20H49.1L69.6 43.2L93.5 20ZM88.5 92.1H96.7L44.1 27.2H35.3L88.5 92.1Z'
+                })
+            ]),
+    }),
     }
 ]
 </script>
diff --git a/resources/js/components/GuestHeader.vue b/resources/js/components/GuestHeader.vue
index 73d534b..a4c5c2b 100644
--- a/resources/js/components/GuestHeader.vue
+++ b/resources/js/components/GuestHeader.vue
@@ -34,40 +34,63 @@ const page = usePage();
 const auth = computed(() => page.props.auth);
 const user = auth.value?.user as User;
 
+const appEnv = page.props.appEnv;
+const hasCourses = page.props.hasCourses;
+const hasFaqs = page.props.hasFaqs;
+const hasBooks = page.props.hasBooks;
+console.log(hasBooks);
+
+
 const isCurrentRoute = computed(() => (url: string) => page.url === url);
 
 const activeItemStyles = computed(
     () => (url: string) => (isCurrentRoute.value(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
 );
 
+
 const mainNavItems: NavItem[] = [
     {
         title: $trans('Home'),
         href: '/',
         icon: LayoutGrid,
+        isActive: true
     },
     {
         title: $trans('Courses'),
         href: '/courses',
         icon: GraduationCapIcon,
+        isActive: hasCourses ? true : false
     },
     {
         title: $trans('Books'),
         href: '/books',
         icon: BookOpenIcon,
+        isActive: hasBooks ? true : false
     },
     {
         title: $trans('Glossary'),
         href: '/glossary',
         icon: BookOpenIcon,
+        isActive: true
+    },
+    {
+        title: $trans('FAQs'),
+        href: '/faqs',
+        icon: BookOpenIcon,
+        isActive: hasFaqs ? true : false
     },
     {
         title: $trans('About Us'),
         href: '/about-us',
         icon: BookOpenIcon,
+        isActive: true
     },
 ];
 
+// Detect RTL (Arabic)
+const isRtl = computed(() => page.props.locale === 'ar');
+const navItems = computed(() => isRtl.value ? [...mainNavItems].reverse() : mainNavItems);
+
 const rightNavItems: NavItem[] = [
     {
         title: 'Repository',
@@ -100,11 +123,12 @@ const rightNavItems: NavItem[] = [
                                 <AppLogoIcon class="text-primary size-12 fill-current" />
                             </SheetHeader>
                             <div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
-                                <nav class="-mx-3 space-y-1">
+                                <nav :class="['-mx-3 space-y-1', isRtl ? 'flex flex-col-reverse' : 'flex flex-col']">
                                     <Link
-                                        v-for="item in mainNavItems"
+                                        v-for="item in navItems"
                                         :key="item.title"
                                         :href="item.href"
+                                        v-show="item.isActive"
                                         class="hover:bg-accent flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium"
                                         :class="activeItemStyles(item.href)"
                                     >
@@ -112,7 +136,7 @@ const rightNavItems: NavItem[] = [
                                         {{ item.title }}
                                     </Link>
                                 </nav>
-                                <div class="flex flex-col space-y-4">
+                                <div v-show="appEnv === 'local'" class="flex flex-col space-y-4">
                                     <a
                                         v-for="item in rightNavItems"
                                         :key="item.title"
@@ -138,7 +162,7 @@ const rightNavItems: NavItem[] = [
                 <div class="hidden h-full lg:flex lg:flex-1">
                     <NavigationMenu class="mr-10 flex h-full items-stretch">
                         <NavigationMenuList class="flex h-full items-stretch space-x-2">
-                            <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full">
+                            <NavigationMenuItem v-for="(item, index) in navItems" :key="index" v-show="item.isActive" class="relative flex h-full">
                                 <Link :href="item.href">
                                     <NavigationMenuLink
                                         :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
@@ -157,7 +181,7 @@ const rightNavItems: NavItem[] = [
                 </div>
 
                 <div class="ms-auto flex items-center space-x-2">
-                    <div class="relative flex items-center space-x-1">
+                    <div v-show="appEnv === 'local'" class="relative flex items-center space-x-1">
                         <div class="hidden space-x-1 lg:flex">
                             <template v-for="item in rightNavItems" :key="item.title">
                                 <TooltipProvider :delay-duration="0">
@@ -200,11 +224,11 @@ const rightNavItems: NavItem[] = [
                                     variant="ghost"
                                     as-child
                                 >
-                                    <Link :href="route('register')"> Register </Link>
+                                    <Link :href="route('register')"> {{$trans('Register')}} </Link>
                                 </Button>
 
                                 <Button class="focus-within:ring-primary relative w-32 p-1 focus-within:ring-2" as-child>
-                                    <Link :href="route('login')"> Login </Link>
+                                    <Link :href="route('login')"> {{$trans('Login')}} </Link>
                                 </Button>
                             </template>
                         </DropdownMenuTrigger>
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
new file mode 100644
index 0000000..bc3d256
--- /dev/null
+++ b/resources/js/components/Modal.vue
@@ -0,0 +1,93 @@
+<script setup>
+import {computed, onMounted, onUnmounted, watch} from 'vue';
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['close']);
+
+watch(() => props.show, () => {
+    if (props.show) {
+        document.body.style.overflow = 'hidden';
+    } else {
+        document.body.style.overflow = null;
+    }
+});
+
+const close = () => {
+    if (props.closeable) {
+        emit('close');
+    }
+};
+
+const closeOnEscape = (e) => {
+    if (e.key === 'Escape' && props.show) {
+        close();
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.body.style.overflow = null;
+});
+
+const maxWidthClass = computed(() => {
+    return {
+        'sm': 'sm:max-w-sm',
+        'md': 'sm:max-w-md',
+        'lg': 'sm:max-w-lg',
+        'xl': 'sm:max-w-xl',
+        '2xl': 'sm:max-w-2xl',
+    }[props.maxWidth];
+});
+</script>
+
+<template>
+    <teleport to="body">
+        <transition leave-active-class="duration-200">
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+                <transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0"
+                    enter-to-class="opacity-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                >
+                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                        <div class="absolute inset-0 bg-gray-500 opacity-75"/>
+                    </div>
+                </transition>
+
+                <transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                    <div v-show="show"
+                         :class="maxWidthClass"
+                         class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto">
+                        <slot v-if="show"/>
+                    </div>
+                </transition>
+            </div>
+        </transition>
+    </teleport>
+</template>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
index f4252ca..66c2ec7 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
+import { Link } from '@inertiajs/vue3';
 
 interface Props {
     items: NavItem[];
@@ -16,10 +17,10 @@ defineProps<Props>();
             <SidebarMenu>
                 <SidebarMenuItem v-for="item in items" :key="item.title">
                     <SidebarMenuButton class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100" as-child>
-                        <a :href="item.href" target="_blank" rel="noopener noreferrer">
+                        <Link :href="item.href" target="_blank" rel="noopener noreferrer">
                             <component :is="item.icon" />
                             <span>{{ item.title }}</span>
-                        </a>
+                        </Link>
                     </SidebarMenuButton>
                 </SidebarMenuItem>
             </SidebarMenu>
diff --git a/resources/js/components/NavLink.vue b/resources/js/components/NavLink.vue
new file mode 100644
index 0000000..d319190
--- /dev/null
+++ b/resources/js/components/NavLink.vue
@@ -0,0 +1,21 @@
+<script setup>
+import {computed} from 'vue';
+import {Link} from '@inertiajs/vue3';
+
+const props = defineProps({
+    href: String,
+    active: Boolean,
+});
+
+const classes = computed(() => {
+    return props.active
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-primary-400 text-sm font-medium leading-5  focus:outline-none focus:border-primary-700 transition'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5  hover:border-gray-300 focus:outline-none focus:border-gray-300 transition';
+});
+</script>
+
+<template>
+    <Link :class="classes" :href="href">
+        <slot/>
+    </Link>
+</template>
diff --git a/resources/js/components/ResponsiveNavLink.vue b/resources/js/components/ResponsiveNavLink.vue
new file mode 100644
index 0000000..64a97fb
--- /dev/null
+++ b/resources/js/components/ResponsiveNavLink.vue
@@ -0,0 +1,28 @@
+<script setup>
+import {computed} from 'vue';
+import {Link} from '@inertiajs/vue3';
+
+const props = defineProps({
+    active: Boolean,
+    href: String,
+    as: String,
+});
+
+const classes = computed(() => {
+    return props.active
+        ? 'block ps-3 pe-4 py-2 border-l-4 border-primary-400 text-base font-medium text-primary-700 bg-primary-50 focus:outline-none focus:text-primary-800 focus:bg-primary-100 focus:border-primary-700 transition'
+        : 'block ps-3 pe-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition';
+});
+</script>
+
+<template>
+    <div>
+        <button v-if="as == 'button'" :class="classes" class="w-full text-left">
+            <slot/>
+        </button>
+
+        <Link v-else :class="classes" :href="href">
+            <slot/>
+        </Link>
+    </div>
+</template>
diff --git a/resources/js/components/SidebarMenu.vue b/resources/js/components/SidebarMenu.vue
new file mode 100644
index 0000000..5a743f8
--- /dev/null
+++ b/resources/js/components/SidebarMenu.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { $trans } from '@/lib/translator';
+import { LayoutDashboard, User, Heart, BookOpen, Book, Key } from 'lucide-vue-next';
+
+const menuItems = [
+  { text: 'لوحة التحكم', href: '/dashboard', icon: LayoutDashboard },
+  { text: 'الملف الشخصي', href: '/profile', icon: User },
+  { text: 'تعديل كلمة السر', href: '/profile/password', icon: Key },
+  { text: 'المفضلة', href: '/favorites', icon: Heart },
+  { text: 'الدورات', href: '/courses', icon: BookOpen },
+  { text: 'الكتب', href: '/books', icon: Book },
+];
+
+const currentPath = window.location.pathname;
+
+</script>
+
+<template>
+  <aside class="w-full md:w-64 bg-background min-h-screen p-7 flex flex-col border-l">
+    <nav class="flex-1">
+      <ul class="flex md:flex-col gap-2 md:gap-0 overflow-x-auto md:overflow-x-visible whitespace-nowrap">
+        <li
+          v-for="item in menuItems"
+          :key="item.text"
+          class="my-1"
+        >
+          <a
+            :href="item.href"
+            class="text-sm flex items-center gap-3 py-3 px-4 md:px-6 rounded-lg transition font-medium min-w-max md:min-w-0 text-lg"
+            :class="[
+              currentPath === item.href
+                ? 'bg-product-orange text-foreground font-bold shadow'
+                : 'text-foreground hover:text-product-orange',
+            ]"
+          >
+            <component :is="item.icon" class="w-5 h-5" />
+            <span>{{ $trans(item.text) }}</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index 7818444..2c841ce 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -4,6 +4,7 @@ import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSep
 import type { User } from '@/types';
 import { Link, router } from '@inertiajs/vue3';
 import { LogOut, Settings } from 'lucide-vue-next';
+import { $trans } from '@/lib/translator';
 
 interface Props {
     user: User;
@@ -27,7 +28,7 @@ defineProps<Props>();
         <DropdownMenuItem :as-child="true">
             <Link class="block w-full" :href="route('profile.edit')" prefetch as="button">
                 <Settings class="mr-2 h-4 w-4" />
-                Settings
+                {{$trans('Settings')}}
             </Link>
         </DropdownMenuItem>
     </DropdownMenuGroup>
@@ -35,7 +36,7 @@ defineProps<Props>();
     <DropdownMenuItem :as-child="true">
         <Link class="block w-full" method="post" :href="route('logout')" @click="handleLogout" as="button">
             <LogOut class="mr-2 h-4 w-4" />
-            Log out
+            {{$trans('Log out')}}
         </Link>
     </DropdownMenuItem>
 </template>
diff --git a/resources/js/components/VideoPlayer.vue b/resources/js/components/VideoPlayer.vue
new file mode 100644
index 0000000..bb213f3
--- /dev/null
+++ b/resources/js/components/VideoPlayer.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <video ref="videoPlayer" class="video-js"></video>
+    </div>
+</template>
+
+<script>
+import videojs from 'video.js';
+import "video.js/dist/video-js.css";
+
+export default {
+    name: "VideoPlayer",
+    props: {
+        options: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            player: null
+        }
+    },
+    mounted() {
+        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
+            console.log('onPlayerReady', this);
+        })
+    },
+    beforeDestroy() {
+        if (this.player) {
+            this.player.dispose()
+        }
+    }
+}
+</script>
diff --git a/resources/js/components/buttons/PrimaryButton.vue b/resources/js/components/buttons/PrimaryButton.vue
new file mode 100644
index 0000000..c726dd5
--- /dev/null
+++ b/resources/js/components/buttons/PrimaryButton.vue
@@ -0,0 +1,19 @@
+<template>
+    <button :type="type"
+            class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+    props: {
+        type: {
+            type: String,
+            default: 'submit',
+        },
+    }
+})
+</script>
diff --git a/resources/js/components/buttons/PrimaryLinkButton.vue b/resources/js/components/buttons/PrimaryLinkButton.vue
new file mode 100644
index 0000000..d9866a4
--- /dev/null
+++ b/resources/js/components/buttons/PrimaryLinkButton.vue
@@ -0,0 +1,26 @@
+<template>
+    <Link :class="classes" :href="href">
+        <slot/>
+    </Link>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+
+import {Head, Link} from '@inertiajs/vue3';
+
+export default defineComponent({
+    components: {
+        Head,
+        Link,
+    },
+
+    props: ['href', 'active'],
+
+    computed: {
+        classes() {
+            return 'inline-flex items-center px-4 py-2 bg-secondary-800 border border-transparent rounded-md text-base font-medium text-dark hover:bg-secondary-700 active:bg-secondary-900 focus:outline-none focus:border-secondary-900 focus:ring focus:ring-secondary-300 disabled:opacity-25 transition'
+        }
+    }
+})
+</script>
diff --git a/resources/js/components/buttons/ProgressButton.vue b/resources/js/components/buttons/ProgressButton.vue
new file mode 100644
index 0000000..1454e7e
--- /dev/null
+++ b/resources/js/components/buttons/ProgressButton.vue
@@ -0,0 +1,559 @@
+<template>
+    <div class="button button_start">
+        <div class="button-title">{{ title }}</div>
+        <div class="button-title-done">{{ titleDone }}</div>
+        <div class="buttonImg">
+            <div class="buttonCloud">
+                <svg
+                    fill="black"
+                    height="18px"
+                    viewBox="0 0 24 24"
+                    width="18px"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path
+                        d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z"
+                    />
+                </svg>
+            </div>
+            <div class="buttonArrow">
+                <div class="buttonArrow_up">
+                    <svg
+                        aria-hidden="true"
+                        focusable="false"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"
+                            fill="currentColor"
+                        ></path>
+                    </svg>
+                </div>
+                <div class="buttonArrow_down">
+                    <svg
+                        aria-hidden="true"
+                        focusable="false"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z"
+                            fill="currentColor"
+                        ></path>
+                    </svg>
+                </div>
+            </div>
+            <div class="buttonCheck">
+                <svg viewBox="0 0 50 50">
+                    <path
+                        class="buttonCheck__path"
+                        d="M 5 20 L 20 40 L 45 10"
+                    ></path>
+                </svg>
+            </div>
+        </div>
+        <div class="buttonBackground"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CloudSyncButton",
+    props: {
+        title: String,
+        titleDone: String,
+        syncProgress: Number,
+        styling: Object,
+        inSync: Boolean,
+    },
+    data() {
+        return {
+            syncProgressStartValue: 0,
+            syncProgressStopValue: 100,
+            btn: Object,
+            loadBg: Object,
+            // inSync: false,
+        };
+    },
+    mounted() {
+        this.loadBg = this.$el.querySelector('.buttonBackground');
+        this.$el.style.background = this.styling.btnColor || "#725fdf"
+        this.loadBg.style.background = this.styling.loadColor || "#81d427"
+        this.$el.style.color = this.styling.strokeColor || "#fff"
+        this.$el.querySelectorAll('svg').forEach(item => {
+            item.style.fill = this.styling.strokeColor || "#fff"
+        })
+        this.$el.querySelector('.buttonCheck__path').style.stroke = this.styling.strokeColor || "#fff"
+    },
+    watch: {
+        syncProgress: {
+            handler() {
+                if (this.inSync) {
+                    this.$el.classList.remove("button_start")
+                    if (this.syncProgress >= this.syncProgressStopValue) {
+                        this.$el.classList.remove("button_loading")
+                        this.$el.classList.add("button_loaded")
+                    } else {
+                        this.$el.classList.add("button_loading");
+                    }
+                    this.loadBg.style.width = (this.syncProgress >= 100 ? 100 : this.syncProgress) + "%";
+                }
+            },
+        },
+        inSync: {
+            handler() {
+                if (this.inSync) {
+                    this.loadBg.style.width = this.syncProgressStartValue + "%";
+                    this.$el.classList.remove("button_start");
+                    this.$el.classList.add("button_loading");
+                } else {
+                    this.$el.classList.remove("button_loaded");
+                    this.$el.classList.remove("button_loading");
+                    this.$el.classList.add("button_start");
+                    this.loadBg.style.width = this.syncProgressStartValue + "%";
+                }
+            },
+        },
+    },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.button {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;
+    background: #725fdf;
+    width: 100%;
+    height: 50px;
+    color: #fff;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    border-radius: 5px;
+    font-family: arial;
+    font-size: 20px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.buttonCheck svg path {
+    display: none;
+}
+
+.button_loading {
+    background: #725fdf;
+}
+
+.button_loading .button-title {
+    left: -100px;
+}
+
+.button_loading .buttonImg {
+    right: 40px;
+    z-index: 3;
+}
+
+.button_loading .buttonArrow_up {
+    -webkit-animation: arrowTop 1.5s infinite 1s;
+    animation: arrowTop 1.5s infinite 1s;
+}
+
+.button_loading .buttonArrow_down {
+    -webkit-animation: arrowBottom 1.5s infinite 1s;
+    animation: arrowBottom 1.5s infinite 1s;
+}
+
+.button_loaded .buttonImg {
+    right: 40px;
+    z-index: 4;
+    -webkit-animation: cloudEnd 0.5s linear forwards 0.5s;
+    animation: cloudEnd 0.5s linear forwards 0.5s;
+}
+
+.button_loaded .buttonArrow {
+    display: none;
+    -webkit-transition: 1s;
+    -o-transition: 1s;
+    transition: 1s;
+}
+
+.button_loaded .buttonCheck {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 12px;
+    height: 12px;
+    -webkit-transition: 3s;
+    -o-transition: 3s;
+    transition: 3s;
+    margin-top: 2px;
+}
+
+.button_loaded .buttonCheck svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.button_loaded .buttonCheck svg path {
+    display: block;
+    stroke: #fff;
+    fill: none;
+    stroke-width: 10px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 65;
+    stroke-dashoffset: 0;
+    -webkit-transition: stroke-dasharray 0.4s;
+    -o-transition: stroke-dasharray 0.4s;
+    transition: stroke-dasharray 0.4s;
+    -webkit-animation: dash 0.5s linear forwards;
+    animation: dash 0.5s linear forwards;
+}
+
+.button_loaded .button-title-done {
+    z-index: 6;
+    -webkit-animation: textEnd 0.7s linear forwards 0.3s;
+    animation: textEnd 0.7s linear forwards 0.3s;
+}
+
+.button_loaded .button-title {
+    left: -100px;
+}
+
+.button-title {
+    position: relative;
+    left: 10px;
+    width: 80px;
+    -webkit-animation: textStart 1s;
+    animation: textStart 1s;
+    -webkit-transition: 1s;
+    -o-transition: 1s;
+    transition: 1s;
+    margin-top: 2px;
+}
+
+.button-title-done {
+    position: absolute;
+    margin-left: 7px;
+    width: 80px;
+    left: -125px;
+    margin-top: 2px;
+}
+
+.buttonImg {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    right: 10px;
+    width: 36px;
+    height: 36px;
+    -webkit-animation: cloudStart 1s;
+    animation: cloudStart 1s;
+    -webkit-transition: 1s;
+    -o-transition: 1s;
+    transition: 1s;
+}
+
+.buttonCloud {
+    width: 100%;
+    height: 100%;
+}
+
+.buttonCloud svg {
+    width: 36px;
+    height: 36px;
+}
+
+.buttonArrow {
+    position: absolute;
+    overflow: hidden;
+    width: 21px;
+    height: 23px;
+    border-radius: 50%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    margin-top: 1px;
+}
+
+.buttonArrow_up,
+.buttonArrow_down {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    width: 30%;
+    height: 100%;
+}
+
+.buttonArrow_up svg,
+.buttonArrow_down svg {
+    width: 9px;
+    height: 12px;
+}
+
+.buttonArrow_down svg {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.buttonBackground {
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    width: 0;
+    height: 55px;
+    background: #81d427;
+    -webkit-transition: width 0.4s;
+    -o-transition: width 0.4s;
+    transition: width 0.4s;
+}
+
+.panel {
+    position: absolute;
+    font-size: 12px;
+    top: 0;
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.panel button {
+    margin: 5px 10px;
+}
+
+@-webkit-keyframes textStart {
+    0% {
+        left: -100px;
+    }
+    85% {
+        left: 12px;
+    }
+    100% {
+        left: 10px;
+    }
+}
+
+@keyframes textStart {
+    0% {
+        left: -100px;
+    }
+    85% {
+        left: 12px;
+    }
+    100% {
+        left: 10px;
+    }
+}
+
+@-webkit-keyframes cloudStart {
+    0% {
+        right: -100%;
+    }
+    85% {
+        right: 12px;
+    }
+    100% {
+        right: 10px;
+    }
+}
+
+@keyframes cloudStart {
+    0% {
+        right: -100%;
+    }
+    85% {
+        right: 12px;
+    }
+    100% {
+        right: 10px;
+    }
+}
+
+@-webkit-keyframes arrowTop {
+    0% {
+        -webkit-transform: translateY(16px);
+        transform: translateY(16px);
+    }
+    40%,
+    60% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    80%,
+    100% {
+        -webkit-transform: translateY(-16px);
+        transform: translateY(-16px);
+    }
+}
+
+@keyframes arrowTop {
+    0% {
+        -webkit-transform: translateY(16px);
+        transform: translateY(16px);
+    }
+    40%,
+    60% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    80%,
+    100% {
+        -webkit-transform: translateY(-16px);
+        transform: translateY(-16px);
+    }
+}
+
+@-webkit-keyframes arrowBottom {
+    0% {
+        -webkit-transform: translateY(-16px);
+        transform: translateY(-16px);
+    }
+    40%,
+    60% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    80%,
+    100% {
+        -webkit-transform: translateY(16px);
+        transform: translateY(16px);
+    }
+}
+
+@keyframes arrowBottom {
+    0% {
+        -webkit-transform: translateY(-16px);
+        transform: translateY(-16px);
+    }
+    40%,
+    60% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    80%,
+    100% {
+        -webkit-transform: translateY(16px);
+        transform: translateY(16px);
+    }
+}
+
+@-webkit-keyframes dash {
+    0% {
+        stroke-dashoffset: 65;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: 65;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@-webkit-keyframes cloudEnd {
+    0%,
+    15% {
+        width: 36px;
+        height: 36px;
+        right: 40px;
+    }
+    10% {
+        width: 42px;
+        height: 42px;
+        right: 40px;
+    }
+    70% {
+        right: 6px;
+    }
+    100% {
+        right: 10px;
+    }
+}
+
+@keyframes cloudEnd {
+    0%,
+    15% {
+        width: 36px;
+        height: 36px;
+        right: 40px;
+    }
+    10% {
+        width: 42px;
+        height: 42px;
+        right: 40px;
+    }
+    70% {
+        right: 6px;
+    }
+    100% {
+        right: 10px;
+    }
+}
+
+@-webkit-keyframes textEnd {
+    0% {
+        left: -125px;
+    }
+    85% {
+        left: 18px;
+    }
+    100% {
+        left: 15px;
+    }
+}
+
+@keyframes textEnd {
+    0% {
+        left: -125px;
+    }
+    85% {
+        left: 18px;
+    }
+    100% {
+        left: 15px;
+    }
+}
+</style>
diff --git a/resources/js/components/buttons/SecondaryLinkButton.vue b/resources/js/components/buttons/SecondaryLinkButton.vue
new file mode 100644
index 0000000..aa72beb
--- /dev/null
+++ b/resources/js/components/buttons/SecondaryLinkButton.vue
@@ -0,0 +1,25 @@
+<template>
+    <Link :class="classes" :href="href">
+        <slot/>
+    </Link>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+
+import {Link} from '@inertiajs/vue3';
+
+export default defineComponent({
+    components: {
+        Link,
+    },
+
+    props: ['href', 'active'],
+
+    computed: {
+        classes() {
+            return 'text-base font-medium text-secondary-800 hover:text-secondary-600'
+        }
+    }
+})
+</script>
diff --git a/resources/js/components/footers/FooterSocialLinksOnly.vue b/resources/js/components/footers/FooterSocialLinksOnly.vue
new file mode 100644
index 0000000..746c73b
--- /dev/null
+++ b/resources/js/components/footers/FooterSocialLinksOnly.vue
@@ -0,0 +1,99 @@
+<template>
+    <footer class="dir-ltr">
+        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
+            <div class="flex justify-center space-x-6  md:order-2">
+                <a v-for="item in navigation" :key="item.name" :href="item.href"
+                   class="text-gray-400 hover:text-gray-500">
+                    <span class="sr-only">{{ item.name }}</span>
+                    <component :is="item.icon" aria-hidden="true" class="h-6 w-6"/>
+                </a>
+            </div>
+            <div class="mt-8 md:mt-0 md:order-1">
+                <p class="text-center text-base text-gray-400">
+                    جمبع الحقوق محفوظة | <a href="/" target="_blank">كافيو للاستشارات والتدريب</a> 2022&copy;
+                    سجل تجاري رقم ٦٢٦٢٩
+                </p>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+import {defineComponent, h} from 'vue'
+
+const navigation = [
+    {
+        name: 'Facebook',
+        href: 'https://www.facebook.com/traderfactoryacademy',
+        icon: defineComponent({
+            render: () =>
+                h('svg', {fill: 'currentColor', viewBox: '0 0 24 24'}, [
+                    h('path', {
+                        'fill-rule': 'evenodd',
+                        d:
+                            'M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z',
+                        'clip-rule': 'evenodd',
+                    }),
+                ]),
+        }),
+    },
+    {
+        name: 'Instagram',
+        href: 'https://www.instagram.com/trader_factory_academy/',
+        icon: defineComponent({
+            render: () =>
+                h('svg', {fill: 'currentColor', viewBox: '0 0 24 24'}, [
+                    h('path', {
+                        'fill-rule': 'evenodd',
+                        d:
+                            'M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z',
+                        'clip-rule': 'evenodd',
+                    }),
+                ]),
+        }),
+    },
+    {
+        name: 'Youtube',
+        href: 'https://www.youtube.com/@trader_factory_academy',
+        icon: defineComponent({
+            render: () =>
+                h('svg', {fill: 'currentColor', viewBox: '0 0 121.48 85.04'}, [
+                    h('g', [
+                        h('g', [
+                            h('path', {
+                                d:
+                                    'M119 13.28a15.23 15.23 0 0 0-10.79-10.74C98.73 0 60.74 0 60.74 0s-38 0-47.46 2.54A15.21 15.21 0 0 0 2.54 13.28C0 22.75 0 42.52 0 42.52s0 19.77 2.54 29.24A15.21 15.21 0 0 0 13.28 82.5C22.75 85 60.74 85 60.74 85s38 0 47.47-2.54A15.23 15.23 0 0 0 119 71.76c2.53-9.47 2.53-29.24 2.53-29.24s-.05-19.77-2.53-29.24Z',
+                            }),
+                            h('path', {
+                                d: 'm48.59 60.74 31.57-18.22L48.59 24.3v36.44z',
+                                fill: "#fff"
+                            })
+                        ])
+                    ])
+                ]),
+        }),
+    },
+    {
+        name: 'Twitter',
+        href: 'https://x.com/trf_academy',
+        icon: defineComponent({
+            render: () =>
+                h('svg', {fill: 'currentColor', viewBox: '0 0 24 24'}, [
+                    h('path', {
+                        d:
+                            'M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84',
+                    }),
+                ]),
+        }),
+    }
+]
+
+
+export default {
+    setup() {
+        return {
+            navigation,
+        }
+    },
+}
+</script>
diff --git a/resources/js/components/menu/BackMenu.vue b/resources/js/components/menu/BackMenu.vue
new file mode 100644
index 0000000..dfeb768
--- /dev/null
+++ b/resources/js/components/menu/BackMenu.vue
@@ -0,0 +1,26 @@
+<template>
+    <div
+        class="flex justify-end mx-auto px-4 py-6 sm:px-6">
+        <div>
+            <Link :href="route('welcome')" class="flex">
+                <span class="sr-only">Traderfactory</span>
+                <span class="me-2 text-gray-200">الرجوع للرئيسية</span>
+                <ArrowLongLeftIcon class="h-8 w-auto text-secondary"/>
+            </Link>
+        </div>
+    </div>
+</template>
+
+<script>
+import {ArrowLongLeftIcon} from '@heroicons/vue/24/outline'
+import {defineComponent} from 'vue'
+import {Head, Link} from '@inertiajs/vue3';
+
+export default defineComponent({
+    components: {
+        Head,
+        Link,
+        ArrowLongLeftIcon,
+    }
+})
+</script>
diff --git a/resources/js/components/menu/ExitMenu.vue b/resources/js/components/menu/ExitMenu.vue
new file mode 100644
index 0000000..1937ccc
--- /dev/null
+++ b/resources/js/components/menu/ExitMenu.vue
@@ -0,0 +1,23 @@
+<script setup>
+import {Link} from '@inertiajs/vue3';
+import {XCircleIcon} from '@heroicons/vue/24/outline'
+
+defineProps({
+    slug: {
+        type: String,
+        required: true
+    }
+})
+</script>
+
+<template>
+    <!-- <pre>{{ slug }}</pre> -->
+    <div class="fixed flex p-2 top-0 z-10 w-full bg-background bg-opacity-50">
+        <div>
+            <Link :href="route('courses.sections.section', slug)" class="flex justify-end" replace>
+                <span class="sr-only">انهاء</span>
+                <XCircleIcon class="h-8 w-auto text-foreground"/>
+            </Link>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/menu/Main.vue b/resources/js/components/menu/Main.vue
new file mode 100644
index 0000000..9fc694e
--- /dev/null
+++ b/resources/js/components/menu/Main.vue
@@ -0,0 +1,147 @@
+<template>
+    <Popover class="z-20" open="true">
+        <div
+            class="flex max-w-7xl mx-auto justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10 ">
+            <div>
+                <Link :href="route('welcome')" class="flex">
+                    <span class="sr-only">Traderfactory</span>
+                    <application-logo-light class="h-8 w-auto sm:h-10"/>
+                </Link>
+            </div>
+            <div class="hidden space-x-8  sm:-my-px sm:ms-10 sm:flex">
+                <Link
+                    v-for="item in navigation"
+                    :key="item.href"
+                    :href="item.href"
+                    class="text-base font-medium"
+                >
+                    {{ item.name }}
+                </Link>
+            </div>
+            <div class="-ms-2 -my-2 md:hidden">
+                <PopoverButton
+                    class="bg-transparent rounded-md p-2 inline-flex items-center justify-center hover:bg-transparent focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white">
+                    <span class="sr-only">Open menu</span>
+                    <Bars3Icon aria-hidden="true" class="h-6 w-6"/>
+                </PopoverButton>
+            </div>
+
+            <div class="hidden md:flex-1 md:flex md:items-center md:justify-between">
+                <PopoverGroup as="nav" class="flex space-x-10 ">
+                </PopoverGroup>
+                <div v-if="$page.props.canRegister" class="flex items-center md:ms-12">
+                    <primary-link-button v-if="$page.props.auth.user" :href="route('dashboard')"
+                                         class="ms-8">
+                        لوحة التحكم
+                    </primary-link-button>
+                    <template v-else>
+                        <secondary-link-button v-if="$page.props.canRegister" :href="route('login')">تسجيل الدخول
+                        </secondary-link-button>
+                        <primary-link-button v-if="$page.props.canRegister" :href="route('register')" class="ms-8">
+                            مستخدم جديد
+                        </primary-link-button>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+                    enter-to-class="opacity-100 scale-100" leave-active-class="duration-100 ease-in"
+                    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+            <PopoverPanel class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" focus>
+                <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
+                    <div class="pt-5 pb-6 px-5">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <Link :href="route('welcome')" class="flex">
+                                    <span class="sr-only">Goethe</span>
+                                    <application-logo class="h-8 w-auto"/>
+                                </Link>
+                            </div>
+                            <div class="-me-2">
+                                <PopoverButton
+                                    class="bg-white rounded-md p-2 inline-flex items-center justify-center text-white-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
+                                    <span class="sr-only">Close menu</span>
+                                    <XMarkIcon aria-hidden="true" class="h-6 w-6"/>
+                                </PopoverButton>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="py-6 px-5">
+                        <div class="grid grid-cols-2 gap-4">
+                            <Link v-for="item in navigation" :key="item.name" :href="item.href"
+                                  class="text-base font-medium text-gray-900 hover:text-gray-700">{{
+                                    item.name
+                                }}
+                            </Link>
+                        </div>
+                        <div v-if="$page.props.canRegister" class="mt-6">
+                            <Link v-if="$page.props.auth.user" :href="route('dashboard')"
+                                  class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-primary-600 hover:bg-primary-700">
+                                لوحة التحكم
+                            </Link>
+                            <template v-else>
+                                <Link v-if="$page.props.canRegister" :href="route('register')"
+                                      class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-primary-600 hover:bg-primary-700">
+                                    مستخدم جديد
+                                </Link>
+                                <p v-if="$page.props.canRegister"
+                                   class="mt-6 text-center text-base font-medium text-gray-500">
+                                    هل لديك حساب بالفعل؟
+                                    {{ ' ' }}
+                                    <Link :href="route('login')"
+                                          class="text-primary-600 hover:text-primary-500">
+                                        تسجيل الدخول
+                                    </Link>
+                                </p>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </PopoverPanel>
+        </transition>
+    </Popover>
+</template>
+
+<script setup>
+import {Popover, PopoverButton, PopoverGroup, PopoverPanel} from '@headlessui/vue'
+import {Bars3Icon, XMarkIcon} from '@heroicons/vue/24/outline'
+import ApplicationLogoLight from "@/components/ApplicationLogoLight.vue";
+import ApplicationLogo from "@/components/ApplicationLogo.vue";
+import PrimaryLinkButton from "@/components/buttons/PrimaryLinkButton.vue";
+import SecondaryLinkButton from "@/components/buttons/SecondaryLinkButton.vue";
+import {Link} from '@inertiajs/vue3';
+import Rank1 from "@/components/icons/Rank1.vue";
+import Rank2 from "@/components/icons/Rank2.vue";
+import Rank3 from "@/components/icons/Rank3.vue";
+
+const navigation = [
+    {name: 'الدورات', href: route('courses.index')},
+    {name: 'الندوات', href: route('webinars')},
+    {name: 'الكتب', href: route('books.index')},
+    {name: 'الأدوات', href: route('tools.index')},
+    {name: 'الأسئلة الشائعة', href: route('faqs.index')},
+    {name: 'عن الأكاديمية', href: route('about')},
+];
+
+const solutions = [
+    {
+        name: 'المستوى التمهيدي',
+        description: '',
+        href: '#',
+        icon: Rank1,
+    },
+    {
+        name: 'المستوى المتوسط',
+        description: '',
+        href: '#',
+        icon: Rank2,
+    },
+    {
+        name: 'المستوى المتقدم',
+        description: '',
+        href: '#',
+        icon: Rank3,
+    }
+];
+</script>
diff --git a/resources/js/components/modals/CenteredWithWideButtons.vue b/resources/js/components/modals/CenteredWithWideButtons.vue
new file mode 100644
index 0000000..546a8be
--- /dev/null
+++ b/resources/js/components/modals/CenteredWithWideButtons.vue
@@ -0,0 +1,95 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <TransitionRoot :show="open" as="template">
+        <Dialog as="div" class="fixed z-10 inset-0 overflow-y-auto" @close="open = false">
+            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
+                                 enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
+                                 leave-to="opacity-0">
+                    <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
+                </TransitionChild>
+
+                <!-- This element is to trick the browser into centering the modal contents. -->
+                <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+                <TransitionChild as="template" enter="ease-out duration-300"
+                                 enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                 enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                                 leave-from="opacity-100 translate-y-0 sm:scale-100"
+                                 leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                    <div
+                        class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+                        <div>
+                            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                                <CheckIcon aria-hidden="true" class="h-6 w-6 text-green-600"/>
+                            </div>
+                            <div class="mt-3 text-center sm:mt-5">
+                                <DialogTitle as="h3" class="text-lg leading-6 font-medium text-gray-900">
+                                    <!-- 'Your feedback help us to improve our courses, How did you enjoy this activity?' -->
+                                    تقييمك يساعدنا على التحسين من دوراتنا، كيف تُقيّم تجربتك معنا؟
+                                </DialogTitle>
+                                <div class="flex w-full justify-center p-6">
+                                    <!-- https://github.com/craigh411/vue-star-rating -->
+                                    <star-rating v-model:rating="rating" :animate="true"
+                                                 :rounded-corners="true"
+                                                 :rtl="true" :show-rating="false" active-color="#82055f"
+                                                 padding="1" star-size="32"/>
+                                </div>
+                                <div class="mt-2">
+                                    <p class="text-sm text-gray-500">
+                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam
+                                        laudantium explicabo pariatur iste dolorem animi vitae error totam. At sapiente
+                                        aliquam accusamus facere veritatis.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+                            <button
+                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:col-start-2 sm:text-sm"
+                                type="button"
+                                @click="open = false">
+                                Deactivate
+                            </button>
+                            <button ref="cancelButtonRef"
+                                    class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+                                    type="button" @click="open = false">
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </TransitionChild>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script>
+import {ref} from 'vue'
+import {Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot} from '@headlessui/vue'
+import {CheckIcon} from '@heroicons/vue/24/outline'
+import StarRating from 'vue-star-rating'
+
+export default {
+    data() {
+        return {
+            rating: 0
+        }
+    },
+    components: {
+        Dialog,
+        DialogOverlay,
+        DialogTitle,
+        TransitionChild,
+        TransitionRoot,
+        CheckIcon,
+        StarRating,
+    },
+    setup() {
+        const open = ref(true)
+
+        return {
+            open,
+        }
+    },
+}
+</script>
diff --git a/resources/js/components/modals/RatingModal.vue b/resources/js/components/modals/RatingModal.vue
new file mode 100644
index 0000000..a838242
--- /dev/null
+++ b/resources/js/components/modals/RatingModal.vue
@@ -0,0 +1,196 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <TransitionRoot :show="open" as="template">
+        <Dialog as="div" class="fixed z-20 inset-0 overflow-y-auto" @close="open = false">
+            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
+                                 enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
+                                 leave-to="opacity-0">
+                    <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
+                </TransitionChild>
+
+                <!-- This element is to trick the browser into centering the modal contents. -->
+                <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+                <TransitionChild as="template" enter="ease-out duration-300"
+                                 enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                 enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                                 leave-from="opacity-100 translate-y-0 sm:scale-100"
+                                 leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                    <div
+                        class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-start overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-6">
+                        <ConfettiExplosion :colors="['#82055f','#003969','#a1c814','#eb6600','#c8b987','#5ac9f5']"
+                                           :particleCount="100"/>
+                        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+
+                            <div class="flex flex-col justify-between">
+                                <div class="flex items-center justify-center mt-3 text-center">
+                                    <ve-progress :progress="progress?.model.user_progress" :size="80"
+                                                 :thickness="4" color="#003a69">
+                                        <div class="w-full h-full rounded-full bg-primary">
+                                            <component :is="progress?.model.icon"
+                                                       class="p-3 h-16 w-16 text-white stroke-current transform group-hover:rotate-[-8deg] transition"/>
+                                        </div>
+                                    </ve-progress>
+                                </div>
+                                <div class="bg-gray-100 p-8 rounded-md mt-5 sm:mt-0">
+                                    <p class="text-sm text-center text-gray-500">
+                                        ممتاز، لقد قمت باكمال هذا المحتوى
+                                    </p>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="bg-gray-100 p-8 rounded-md mt-5 sm:mt-0">
+                                    <p class="text-sm text-center text-gray-500">
+                                        تقييمك يساعدنا على التحسين من دوراتنا، كيف تُقيّم تجربتك معنا؟
+                                    </p>
+                                    <star-rating v-model:rating="rating" :animate="true"
+                                                 :rounded-corners="true" :rtl="true" :show-rating="false"
+                                                 :star-size="30" class="justify-center mt-4"/>
+                                </div>
+                                <div class="mt-5 sm:mt-6">
+                                    <button
+                                        class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                                        type="button"
+                                        @click="open = false">
+                                        سوف يتم اغلاق الصفحة تلقائيا بعد
+                                        {{ this.remainingTime }}
+                                        ثواني
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </TransitionChild>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script>
+import {ref} from 'vue'
+import {Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot} from '@headlessui/vue'
+import {
+    AcademicCapIcon,
+    BookOpenIcon,
+    ChevronDownIcon,
+    ClipboardDocumentListIcon,
+    ForwardIcon,
+    MagnifyingGlassIcon,
+    QuestionMarkCircleIcon,
+    VideoCameraIcon
+} from '@heroicons/vue/24/outline'
+import StarRating from 'vue-star-rating'
+import {VeProgress} from "vue-ellipse-progress";
+import ConfettiExplosion from "vue-confetti-explosion";
+import ProgressButton from "@/Components/Buttons/ProgressButton.vue";
+import {useForm} from "@inertiajs/vue3";
+
+export default {
+    components: {
+        ConfettiExplosion,
+        ProgressButton,
+        Dialog,
+        DialogOverlay,
+        DialogTitle,
+        TransitionChild,
+        TransitionRoot,
+        StarRating,
+        VeProgress,
+        BookOpenIcon,
+        ClipboardDocumentListIcon,
+        ForwardIcon,
+        QuestionMarkCircleIcon,
+        MagnifyingGlassIcon,
+        AcademicCapIcon,
+        ChevronDownIcon,
+        VideoCameraIcon,
+    },
+    props: ['progress'],
+    data() {
+        return {
+            remainingTime: 10
+        }
+    },
+    mounted() {
+        this.startCounter();
+    },
+    watch: {
+        open: function (newVal, oldVal) {
+            if (!newVal) {
+                useForm({
+                    rate: this.rating
+                }).put(this.progress.href, {
+                    preserveScroll: true,
+                });
+            }
+        }
+    },
+    methods: {
+        startCounter() {
+            let self = this;
+
+            let interval = setInterval(function () {
+                self.remainingTime = a.getTimeLeft();
+            }, 1000);
+
+            let a = new timer(function () {
+                self.open = false;
+                console.log("bye bye!");
+                clearInterval(interval);
+                self.remainingTime = 10
+            }, 11 * 1000);
+        },
+    },
+    setup() {
+        const open = ref(true);
+        const rating = ref(0);
+
+        return {
+            open,
+            rating,
+        }
+    },
+
+
+}
+
+class timer {
+    id = null;
+    remaining = 0;
+    callback = null;
+    started = null;
+    running = false;
+
+    constructor(__callback, __delay) {
+        this.remaining = __delay
+        this.callback = __callback
+
+        this.start()
+    }
+
+    start() {
+        this.running = true
+        this.started = new Date()
+        this.id = setTimeout(this.callback, this.remaining)
+    }
+
+    pause() {
+        this.running = false
+        clearTimeout(this.id)
+        this.remaining -= new Date() - this.started
+    }
+
+    getTimeLeft() {
+        if (this.running) {
+            this.pause()
+            this.start()
+        }
+
+        return Math.ceil(this.remaining / 1000);
+    }
+
+    getStateRunning() {
+        return this.running
+    }
+}
+</script>
diff --git a/resources/js/components/modals/VideoModal.vue b/resources/js/components/modals/VideoModal.vue
new file mode 100644
index 0000000..77652d6
--- /dev/null
+++ b/resources/js/components/modals/VideoModal.vue
@@ -0,0 +1,52 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <TransitionRoot :show="open" as="template">
+        <Dialog as="div" class="fixed z-10 inset-0 overflow-y-auto" @close="open = false">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
+                                 enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
+                                 leave-to="opacity-0">
+                    <DialogOverlay class="fixed inset-0 bg-background bg-opacity-75 transition-opacity"/>
+                </TransitionChild>
+
+                <!-- This element is to trick the browser into centering the modal contents. -->
+                <span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+                <TransitionChild as="template" enter="ease-out duration-300"
+                                 enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                 enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                                 leave-from="opacity-100 translate-y-0 sm:scale-100"
+                                 leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                    <div
+                        class="relative inline-block align-bottom bg-background rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle max-w-2xl w-full">
+                        <slot></slot>
+                    </div>
+                </TransitionChild>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script>
+import {ref} from 'vue'
+import {Dialog, DialogOverlay, TransitionChild, TransitionRoot} from '@headlessui/vue'
+
+export default {
+    components: {
+        Dialog,
+        DialogOverlay,
+        TransitionChild,
+        TransitionRoot,
+    },
+    setup() {
+        const open = ref(true)
+
+        return {
+            open,
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/pagination/MagazinePagination.vue b/resources/js/components/pagination/MagazinePagination.vue
new file mode 100644
index 0000000..44c3c01
--- /dev/null
+++ b/resources/js/components/pagination/MagazinePagination.vue
@@ -0,0 +1,77 @@
+<template>
+    <nav class="fixed inset-x-0 bottom-0 mb-2 h-8 w-full z-10 flex justify-center space-x-2 ">
+        <a :class="[currentPage >= pages ? 'cursor-not-allowed text-gray-100' : 'text-gray-500' ]"
+           class="relative inline-flex items-center rounded-md border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50"
+           href="#"
+           @click.prevent="getNextPage">
+            <span class="sr-only">Next</span>
+            <ChevronRightIcon aria-hidden="true" class="h-8 w-8"/>
+        </a>
+        <div aria-current="page"
+             class="z-10 rounded-md bg-white text-gray-600 relative inline-flex items-center px-4 py-2 border text-lg font-semibold">
+            {{ currentPage }}/{{ pages }}
+        </div>
+        <a :class="[currentPage === 1 ? 'cursor-not-allowed text-gray-100' : 'text-gray-500']"
+           class="relative inline-flex items-center rounded-md border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50"
+           href="#"
+           @click.prevent="getPreviousPage">
+            <span class="sr-only">Previous</span>
+            <ChevronLeftIcon aria-hidden="true" class="h-8 w-8"/>
+        </a>
+    </nav>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/24/solid'
+
+export default defineComponent({
+    emits: ["pageChanged"],
+    props: {
+        pages: {
+            type: Number,
+            default: 0
+        },
+        currentPage: {
+            type: Number,
+            default: 1
+        }
+    },
+    components: {
+        ChevronLeftIcon,
+        ChevronRightIcon
+    },
+    methods: {
+        getPage(page) {
+            this.$emit('pageChanged', page);
+        },
+        getPreviousPage() {
+            if (this.currentPage === 1) return;
+            this.getPage(this.currentPage - 1)
+        },
+        getNextPage() {
+            if (this.currentPage >= this.pages) return;
+            this.getPage(this.currentPage + 1)
+        }
+    },
+    mounted() {
+        let self = this;
+
+        // get more info from https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/
+        window.addEventListener('keyup', function (ev) {
+
+            if (ev.key === 'ArrowLeft') {
+                self.getPreviousPage();
+            }
+
+            if (ev.key === 'ArrowRight') {
+                self.getNextPage();
+            }
+        });
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/ui/accordion/AccordionTrigger.vue b/resources/js/components/ui/accordion/AccordionTrigger.vue
index f6cbea8..5b78d50 100644
--- a/resources/js/components/ui/accordion/AccordionTrigger.vue
+++ b/resources/js/components/ui/accordion/AccordionTrigger.vue
@@ -29,7 +29,7 @@ const delegatedProps = reactiveOmit(props, 'class')
       <slot />
       <slot name="icon">
         <ChevronDown
-          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          class="text-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>
     </AccordionTrigger>
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
index 386c622..675697f 100644
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="sidebar-inset"
     :class="cn(
       'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
       props.class,
     )"
   >
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 4409628..fe93d7b 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import Banner from '@/components/Banner.vue';
 import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
-import type { BreadcrumbItemType } from '@/types';
-import { ConfigProvider } from 'reka-ui';
+import type { BreadcrumbItemType, Metadata } from '@/types';
 
 interface Props {
     breadcrumbs?: BreadcrumbItemType[];
+    metadata?: Metadata;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -13,9 +14,33 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <ConfigProvider :dir="$page.props.locale === 'ar' ? 'rtl' : 'ltr'">
-        <AppLayout :breadcrumbs="breadcrumbs">
-            <slot />
-        </AppLayout>
-    </ConfigProvider>
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <Head v-if="metadata" :title="metadata?.title">
+            <meta v-if="metadata?.keywords" :content="metadata?.keywords" name="keywords" />
+
+            <meta v-if="metadata?.description" :content="metadata?.description" name="description" />
+            <meta v-if="metadata?.description" :content="metadata?.description" name="twitter:description" />
+            <meta v-if="metadata?.description" :content="metadata?.description" property="og:description" />
+
+            <meta v-if="metadata?.image" :content="metadata?.image" name="image" />
+            <meta v-if="metadata?.image" :content="metadata?.image" name="twitter:image" />
+            <meta v-if="metadata?.image" :content="metadata?.image" property="og:image" />
+        </Head>
+
+        <Banner />
+
+        <div class="min-h-screen">
+            <!-- Page Heading -->
+            <header v-if="$slots.header" class="shadow">
+                <div>
+                    <slot name="header" />
+                </div>
+            </header>
+
+            <!-- Page Content -->
+            <main>
+                <slot />
+            </main>
+        </div>
+    </AppLayout>
 </template>
diff --git a/resources/js/layouts/BoxesSlideLayout.vue b/resources/js/layouts/BoxesSlideLayout.vue
new file mode 100644
index 0000000..b844465
--- /dev/null
+++ b/resources/js/layouts/BoxesSlideLayout.vue
@@ -0,0 +1,84 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="py-16 md:p-24 bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen"
+         tabindex="0"
+         @focus="unselectBoxes">
+        <div class="grid grid-cols-1 lg:grid-cols-8 p-4 lg:p-0 lg:gap-4">
+            <div class="lg:hidden mb-4">
+                <select v-model="selectedBox"
+                        class="sticky mt-1 block w-full ps-3 pe-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                    <option v-for="option in slideItems" :key="option.id" :value="option">{{ option.title }}</option>
+                </select>
+            </div>
+
+            <!-- Right Boxes Section -->
+            <div
+                class="hidden lg:block w-full h-full col-span-2 lg:flex lg:flex-col lg:justify-start lg:items-end lg:gap-4 rounded-md">
+                <template v-for="(rightBox, i) in slideItems">
+                    <a v-if="!(i%2)"
+                       class="rounded-md text-center inline-flex items-center justify-center p-4 w-32 h-32 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-GoetheBeige-500 focus:bg-GoetheBeige focus:text-white focus:font-semibold"
+                       href="#" type="button"
+                       @click.prevent="boxSelected(rightBox)">
+                        {{ rightBox.title }}
+                    </a>
+                </template>
+            </div>
+
+            <!-- Center Content Section -->
+            <div class="lg:p-4 w-full h-auto col-span-4 rounded-md">
+                <div class="p-6 w-full h-full bg-background/50 backdrop-blur-xs rounded-md">
+                    <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                        <slot v-if="!selectedBox"></slot>
+                        <div v-else class="mt-2 description-light"
+                             v-html="selectedBox.description"/>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Left Boxes Section -->
+            <div
+                class="hidden lg:block w-full h-full col-span-2 lg:flex lg:flex-col lg:justify-start lg:items-start lg:gap-4 rounded-md">
+                <template v-for="(leftBox, i) in slideItems">
+                    <a v-if="i%2"
+                       class="rounded-md text-center inline-flex items-center justify-center p-4 w-32 h-32 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-GoetheBeige-500 focus:bg-GoetheBeige focus:text-white focus:font-semibold"
+                       href="#" type="button"
+                       @click.prevent="boxSelected(leftBox)">
+                        {{ leftBox.title }}
+                    </a>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        },
+        slideItems: {
+            type: Array,
+            default: []
+        },
+    },
+    data() {
+        return {
+            selectedBox: null
+        }
+    },
+    methods: {
+        boxSelected(box) {
+            console.log('Box Selected ' + box)
+            this.selectedBox = box;
+        },
+        unselectBoxes() {
+            console.log('Boxes UnSelected')
+            this.selectedBox = null;
+        }
+    }
+})
+</script>
diff --git a/resources/js/layouts/CenterContentScreenLayout.vue b/resources/js/layouts/CenterContentScreenLayout.vue
new file mode 100644
index 0000000..063bc01
--- /dev/null
+++ b/resources/js/layouts/CenterContentScreenLayout.vue
@@ -0,0 +1,94 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="py-16 md:p-24 bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen"
+         tabindex="0"
+         @focus="unselectBoxes">
+        <div class="grid grid-cols-1 lg:grid-cols-8">
+            <div class="lg:hidden mb-4">
+                <select v-model="selectedBox"
+                        class="sticky mt-1 block w-full ps-3 pe-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
+                    <option v-for="option in leftBoxes" :key="option.id" :value="option">{{ option.title }}</option>
+                    <option v-for="option in rightBoxes" :key="option.id" :value="option">{{ option.title }}</option>
+                </select>
+            </div>
+            <div
+                class="hidden lg:block w-full h-full col-span-2 lg:flex lg:flex-col lg:justify-start lg:items-end lg:space-y-1 lg:-ms-4">
+                <a v-for="rightBox in rightBoxes"
+                   class="text-center inline-flex items-center justify-center p-4 w-32 h-32 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-GoetheBeige-500 focus:bg-GoetheBeige focus:text-white focus:font-semibold"
+                   href="#" type="button"
+                   @click.prevent="boxSelected(rightBox)">
+                    {{ rightBox.title }}
+                </a>
+            </div>
+            <div class="lg:p-4 w-full h-auto bg-black bg-opacity-25 col-span-4">
+                <div class="p-6 w-full h-full bg-black bg-opacity-50">
+                    <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                        <slot v-if="!selectedBox"></slot>
+                        <div v-else>
+                            <div class="mt-2 text-xl leading-8 font-medium tracking-tight text-white sm:text-2xl">
+                                {{ selectedBox.content }}
+                            </div>
+                            <div v-if="selectedBox.list" class="prose prose-primary mt-8 text-lg text-white">
+                                <ul role="list">
+                                    <li v-for="item in selectedBox.list" class="ps-6">
+                                        {{ item }}
+                                    </li>
+                                </ul>
+                            </div>
+                            <div v-if="selectedBox.images">
+                                <img v-for="image in selectedBox.images" :src="image"
+                                     alt="" class="mt-4 w-full rounded-lg overflow-hidden">
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <div
+                class="hidden lg:block w-full h-full col-span-2 lg:flex-col lg:justify-start lg:items-start lg:space-y-1 lg:space-x-4  lg:ms-4">
+                <a v-for="leftBox in leftBoxes"
+                   class="text-center inline-flex items-center justify-center p-4 w-32 h-32 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-GoetheBeige-500 focus:bg-GoetheBeige focus:text-white focus:font-semibold"
+                   href="#" type="button"
+                   @click.prevent="boxSelected(leftBox)">
+                    {{ leftBox.title }}
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        },
+        leftBoxes: {
+            type: Array,
+            default: []
+        },
+        rightBoxes: {
+            type: Array,
+            default: []
+        }
+    },
+    data() {
+        return {
+            selectedBox: null
+        }
+    },
+    methods: {
+        boxSelected(box) {
+            console.log('Box Selected ' + box)
+            this.selectedBox = box;
+        },
+        unselectBoxes() {
+            console.log('Boxes UnSelected')
+            this.selectedBox = null;
+        }
+    }
+})
+</script>
diff --git a/resources/js/layouts/FinalSlideLayout.vue b/resources/js/layouts/FinalSlideLayout.vue
new file mode 100644
index 0000000..2809f2c
--- /dev/null
+++ b/resources/js/layouts/FinalSlideLayout.vue
@@ -0,0 +1,19 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen overflow-scroll">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        }
+    }
+})
+</script>
diff --git a/resources/js/layouts/FullBackgroundScreenLayout.vue b/resources/js/layouts/FullBackgroundScreenLayout.vue
new file mode 100644
index 0000000..6c0d3fe
--- /dev/null
+++ b/resources/js/layouts/FullBackgroundScreenLayout.vue
@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+    backgroundUrl: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+
+<template>
+    <div :style="{backgroundImage: `url(${backgroundUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen">
+        <slot></slot>
+    </div>
+</template>
diff --git a/resources/js/layouts/GuestLayout.vue b/resources/js/layouts/GuestLayout.vue
index 63303a8..7729a0f 100644
--- a/resources/js/layouts/GuestLayout.vue
+++ b/resources/js/layouts/GuestLayout.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import GuestLayout from '@/layouts/guest/GuestHeaderLayout.vue';
-import type { BreadcrumbItemType } from '@/types';
-import { ConfigProvider } from 'reka-ui';
-
-interface Props {
-    breadcrumbs?: BreadcrumbItemType[];
-}
-
-withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
+import FooterSocialLinksOnly from '@/components/footers/FooterSocialLinksOnly.vue';
+import { Head } from '@inertiajs/vue3';
+import GuestHeaderLayout from './guest/GuestHeaderLayout.vue';
 </script>
 
 <template>
-    <ConfigProvider :dir="$page.props.locale === 'ar' ? 'rtl' : 'ltr'">
-        <GuestLayout :breadcrumbs="breadcrumbs">
-            <slot />
-        </GuestLayout>
-    </ConfigProvider>
+    <Head :title="title" />
+
+    <GuestHeaderLayout class="min-h-screen">
+        <slot name="header"> </slot>
+
+        <!-- Page Content -->
+        <main>
+            <slot></slot>
+        </main>
+    </GuestHeaderLayout>
 </template>
diff --git a/resources/js/layouts/HalfScreenLayout.vue b/resources/js/layouts/HalfScreenLayout.vue
new file mode 100644
index 0000000..1ee2c13
--- /dev/null
+++ b/resources/js/layouts/HalfScreenLayout.vue
@@ -0,0 +1,29 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen">
+        <div class="grid grid-cols-1 md:grid-cols-2">
+            <div
+                class="pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:mx-auto w-full min-h-screen bg-background/50 backdrop-blur-xs">
+                <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                    <slot>
+                        <!-- Content goes here -->
+                    </slot>
+                </div>
+            </div>
+            <div class="w-full h-full">
+                <!-- empty space for image -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        imageUrl: {
+            type: String,
+            default: '/img/img.jpg'
+        }
+    }
+}
+</script>
diff --git a/resources/js/layouts/LeftHalfScreenLayout.vue b/resources/js/layouts/LeftHalfScreenLayout.vue
new file mode 100644
index 0000000..efc8c66
--- /dev/null
+++ b/resources/js/layouts/LeftHalfScreenLayout.vue
@@ -0,0 +1,28 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen">
+        <div class="grid grid-cols-1 md:grid-cols-2">
+            <div class="w-full h-full">
+                <!-- Empty space for image -->
+            </div>
+            <div
+                class="pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:mx-auto w-full min-h-screen bg-background/50 backdrop-blur-xs">
+                <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                    <!-- Content goes here -->
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
diff --git a/resources/js/layouts/LessonLayout.vue b/resources/js/layouts/LessonLayout.vue
new file mode 100644
index 0000000..8e2b47a
--- /dev/null
+++ b/resources/js/layouts/LessonLayout.vue
@@ -0,0 +1,32 @@
+<template>
+    <Head>
+        <meta v-if="lesson.meta_description" :content="lesson.meta_description" name="description">
+        <meta v-if="lesson.meta_keywords" :content="lesson.meta_keywords" name="keywords">
+        <title v-if="lesson.meta_title">{{ lesson.meta_title }}</title>
+    </Head>
+
+    <div>
+        <ExitMenu v-if="$page.component !== 'Section/Index'" :slug="lesson.data.section_slug"/>
+
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import ExitMenu from "@/components/menu/ExitMenu.vue";
+import {Head} from "@inertiajs/vue3";
+
+export default {
+    props: {
+        lesson: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    components: {
+        ExitMenu,
+        Head
+    }
+}
+</script>
diff --git a/resources/js/layouts/PointsScreenLayout.vue b/resources/js/layouts/PointsScreenLayout.vue
new file mode 100644
index 0000000..a45e63a
--- /dev/null
+++ b/resources/js/layouts/PointsScreenLayout.vue
@@ -0,0 +1,29 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen overflow-scroll">
+        <div class="w-full h-full flex justify-evenly flex-col lg:flex-row">
+            <div class="w-full h-full">
+
+            </div>
+            <div
+                class="pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:mx-auto w-full min-h-screen bg-white bg-opacity-75">
+                <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        }
+    }
+})
+</script>
diff --git a/resources/js/layouts/RightHalfScreenLayout.vue b/resources/js/layouts/RightHalfScreenLayout.vue
new file mode 100644
index 0000000..703d7b0
--- /dev/null
+++ b/resources/js/layouts/RightHalfScreenLayout.vue
@@ -0,0 +1,29 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-fixed bg-cover bg-no-repeat bg-blend-multiply w-full min-h-screen">
+        <div class="grid grid-cols-1 md:grid-cols-2">
+            <div
+                class="pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:mx-auto w-full min-h-screen bg-background/50 backdrop-blur-xs">
+                <div class="text-base max-w-prose mx-auto lg:ms-auto lg:me-0 ">
+                    <slot>
+                        <!-- Content goes here -->
+                    </slot>
+                </div>
+            </div>
+            <div class="w-full h-full">
+                <!-- Empty space for image -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
diff --git a/resources/js/layouts/SectionLayout.vue b/resources/js/layouts/SectionLayout.vue
new file mode 100644
index 0000000..35a4d75
--- /dev/null
+++ b/resources/js/layouts/SectionLayout.vue
@@ -0,0 +1,37 @@
+<script setup>
+import ExitMenu from "@/Components/Menu/ExitMenu.vue";
+import SideOver from "@/Pages/Section/Partials/SideOver.vue";
+import {Head} from '@inertiajs/vue3'
+
+defineProps({
+    title: String,
+    section: {
+        type: Object,
+        default: {},
+        required: true
+    }
+})
+</script>
+
+<template>
+    <Head :title="title">
+        <meta :content="section.meta_title ?? title" name="title">
+        <meta :content="section.meta_description" name="description">
+        <meta :content="section.meta_image" name="image">
+        <meta :content="section.meta_keywords" name="keywords">
+
+        <meta :content="section.meta_title" property="og:title">
+        <meta :content="section.meta_description" property="og:description">
+        <meta :content="section.meta_image" property="og:image">
+
+        <meta :content="section.meta_title" name="twitter:title">
+        <meta :content="section.meta_description" name="twitter:description">
+        <meta :content="section.meta_image" name="twitter:image">
+    </Head>
+
+    <div>
+        <ExitMenu v-if="$page.component !== 'Section/Index'" :slug="section.data.slug"/>
+        <SideOver :slug="section.data.slug"/>
+        <slot></slot>
+    </div>
+</template>
diff --git a/resources/js/layouts/TodoLayout.vue b/resources/js/layouts/TodoLayout.vue
new file mode 100644
index 0000000..2708b62
--- /dev/null
+++ b/resources/js/layouts/TodoLayout.vue
@@ -0,0 +1,19 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-cover bg-no-repeat bg-right flex w-full h-screen justify-center items-end bg-gray-200">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: ''
+        }
+    }
+})
+</script>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 0f74bb7..0a9cb8e 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -7,15 +7,15 @@ import { Link, usePage } from '@inertiajs/vue3';
 
 const sidebarNavItems: NavItem[] = [
     {
-        title: 'Profile',
+        title: 'الملف الشخصي',
         href: '/settings/profile',
     },
     {
-        title: 'Password',
+        title: 'كلمة المرور',
         href: '/settings/password',
     },
     {
-        title: 'Appearance',
+        title: 'المظهر',
         href: '/settings/appearance',
     },
 ];
@@ -27,7 +27,7 @@ const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.locati
 
 <template>
     <div class="px-4 py-6">
-        <Heading title="Settings" description="Manage your profile and account settings" />
+        <Heading title="الإعدادات" description="إدارة ملفك الشخصي وإعدادات الحساب" />
 
         <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-y-0 lg:space-x-12">
             <aside class="w-full max-w-xl lg:w-48">
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 5f7b8a0..d329eb3 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
@@ -7,11 +8,14 @@ import { egyCurrencyFormat, formattedDate } from '@/lib/currencyFormatter';
 import { $trans } from '@/lib/translator';
 import { type BreadcrumbItem } from '@/types';
 import { Orders } from '@/types/orders';
-import { Head } from '@inertiajs/vue3';
-import { Badge } from '@/components/ui/badge';
+import { Head, router } from '@inertiajs/vue3';
+import { Book, BookOpen, LayoutDashboard } from 'lucide-vue-next';
 
 interface Props {
     orders: Orders;
+    courses_count: number;
+    books_count: number;
+    orders_count: number;
 }
 
 defineProps<Props>();
@@ -28,38 +32,98 @@ const breadcrumbs: BreadcrumbItem[] = [
     <Head title="Dashboard" />
 
     <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl p-4 max-w-7xl mx-auto">
-            <h1 class="text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">
-                {{ $trans('My Orders') }}
-            </h1>
-            <Card class="mt-4">
-                <CardContent class="marker:text-product-pink list-inside">
-                    <Table>
-                        <TableHeader>
-                            <TableRow>
-                                <TableHead class="text-start">{{ $trans('Name') }}</TableHead>
-                                <TableHead class="text-start">{{ $trans('Type') }}</TableHead>
-                                <TableHead class="text-start">{{ $trans('Price') }}</TableHead>
-                                <TableHead class="text-start">{{ $trans('Date') }}</TableHead>
-                                <TableHead class="text-start">{{ $trans('Actions') }}</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                            <TableRow v-for="order in orders.data" :key="order.id">
-                                <TableCell class="text-start font-medium">{{ order.order_title }}</TableCell>
-                                <TableCell class="text-start">{{ $trans(order.order_type) }}</TableCell>
-                                <TableCell class="text-start"><Badge :class="order.status.bg_color">{{ egyCurrencyFormat(order.total) }}</Badge></TableCell>
-                                <TableCell class="text-start">{{ formattedDate(order.created_at) }}</TableCell>
-                                <TableCell class="text-start">
-                                    <Button class="cursor-pointer" variant="default" v-if="order.is_downloadable" :href="order.download_url" @click="router.visit(order.download_url)">
-                                        {{ $trans('Download') }}
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </CardContent>
-            </Card>
+        <div class="mx-auto max-w-7xl p-4">
+            <div class="mt-3 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+                <div class="bg-card flex items-center gap-4 rounded-xl p-4 shadow">
+                    <div class="text-product-orange flex h-12 w-12 items-center justify-center rounded-full text-2xl">
+                        <BookOpen class="h-7 w-7" />
+                    </div>
+                    <div>
+                        <div class="text-foreground text-2xl font-bold">{{ courses_count }}</div>
+                        <div class="text-product-orange text-sm">دوراتك</div>
+                    </div>
+                </div>
+                <div class="bg-card flex items-center gap-4 rounded-xl p-4 shadow">
+                    <div class="text-product-orange flex h-12 w-12 items-center justify-center rounded-full text-2xl">
+                        <Book class="h-7 w-7" />
+                    </div>
+                    <div>
+                        <div class="text-foreground text-2xl font-bold">{{ books_count }}</div>
+                        <div class="text-product-orange text-sm">كتبك</div>
+                    </div>
+                </div>
+                <div class="bg-card flex items-center gap-4 rounded-xl p-4 shadow">
+                    <div class="text-product-orange flex h-12 w-12 items-center justify-center rounded-full text-2xl">
+                        <LayoutDashboard class="h-7 w-7" />
+                    </div>
+                    <div>
+                        <div class="text-foreground text-2xl font-bold">{{ orders_count }}</div>
+                        <div class="text-product-orange text-sm">طلباتك</div>
+                    </div>
+                </div>
+            </div>
+            <div class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl">
+                <p class="leading-8 tracking-tight">
+                    {{ $trans('My Orders') }}
+                </p>
+                <Card v-if="orders.data.length > 0" class="mt-1">
+                    <CardContent class="marker:text-product-pink list-inside overflow-x-auto">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead class="text-start">{{ $trans('Name') }}</TableHead>
+                                    <TableHead class="text-start">{{ $trans('Type') }}</TableHead>
+                                    <TableHead class="text-start">{{ $trans('Price') }}</TableHead>
+                                    <TableHead class="text-start">{{ $trans('Date') }}</TableHead>
+                                    <TableHead class="text-start">{{ $trans('Actions') }}</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow v-for="order in orders.data" :key="order.id">
+                                    <TableCell class="text-start font-medium">
+                                        <a :href="order.href" class="hover:underline">
+                                            {{ order.order_title }}
+                                        </a>
+                                    </TableCell>
+                                    <TableCell class="text-start">{{ $trans(order.order_type) }}</TableCell>
+                                    <TableCell class="text-start">
+                                        <Badge :class="order.status.bg_color">{{ egyCurrencyFormat(order.total) }}</Badge>
+                                    </TableCell>
+                                    <TableCell class="text-start">{{ formattedDate(order.created_at) }}</TableCell>
+                                    <TableCell class="text-start">
+                                        <Button
+                                            class="cursor-pointer"
+                                            variant="default"
+                                            v-if="order.is_downloadable"
+                                            :href="order.download_url"
+                                            @click="router.visit(order.download_url)"
+                                        >
+                                            {{ $trans('Download') }}
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    </CardContent>
+                </Card>
+                <div v-else class="flex flex-col items-center justify-center w-full rounded-md p-5">
+                    <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                        <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                        <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                        <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                        <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                        <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                        <circle cx="62" cy="48" r="2" fill="#fff"/>
+                        <circle cx="78" cy="48" r="2" fill="#fff"/>
+                        <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+                    </svg>
+                    <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                        <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد لديك أي طلبات متاحة حالياً</span>
+                    </h1>
+                    <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
+                </div>
+            </div>
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/pages/Survey.vue b/resources/js/pages/Survey.vue
new file mode 100644
index 0000000..4d39156
--- /dev/null
+++ b/resources/js/pages/Survey.vue
@@ -0,0 +1,39 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div class="bg-secondary-600">
+        <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between flex-wrap">
+                <div class="w-0 flex-1 flex items-center">
+          <span class="flex p-2 rounded-lg bg-secondary-800">
+            <MegaphoneIcon aria-hidden="true" class="h-6 w-6 text-white"/>
+          </span>
+                    <p class="ms-3 font-medium text-white truncate">
+            <span class="md:hidden">
+              يهمنا رأيك جداً
+            </span>
+                        <span class="hidden md:inline">
+              يهمنا رأيك جدا, استطلاع راى خاص بتقييم مهارة تحديد الاحتياج للمعلومات
+            </span>
+                    </p>
+                </div>
+                <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
+                    <a class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-secondary-600 bg-white hover:bg-secondary-50"
+                       href="https://forms.gle/DRHC3NuxTgz3LfKZ6">
+                        ابدأ التقييم
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {MegaphoneIcon, XMarkIcon} from '@heroicons/vue/24/outline'
+
+export default {
+    components: {
+        MegaphoneIcon,
+        XMarkIcon,
+    },
+}
+</script>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index e5ba3be..568c1f8 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -22,9 +22,9 @@ defineProps<Props>();
 
         <Features class="overflow-hidden py-16 lg:py-12" />
 
-        <div class="mt-8 text-center lg:mt-12">
+        <div v-show="courses?.data?.length > 0" class="mt-8 text-center lg:mt-12">
             <h1 class="text-5xl leading-tight font-extrabold">
-                <span class="text-pink-900">الأستثمار في سوق العملات</span>
+                <span class="text-primary">الأستثمار في سوق العملات</span>
             </h1>
         </div>
 
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index e70fbad..b65ba75 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { $trans } from '@/lib/translator';
 
 defineProps<{
     status?: string;
@@ -22,8 +23,8 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
-        <Head title="Forgot password" />
+    <AuthLayout :title="$trans('Forgot password')" :description="$trans('Enter your email to receive a password reset link')">
+        <Head :title="$trans('Forgot password')" />
 
         <div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
             {{ status }}
@@ -32,7 +33,7 @@ const submit = () => {
         <div class="space-y-6">
             <form @submit.prevent="submit">
                 <div class="grid gap-2">
-                    <Label for="email">Email address</Label>
+                    <Label for="email">{{$trans('Email address')}}</Label>
                     <Input id="email" type="email" name="email" autocomplete="off" v-model="form.email" autofocus placeholder="email@example.com" />
                     <InputError :message="form.errors.email" />
                 </div>
@@ -40,14 +41,14 @@ const submit = () => {
                 <div class="my-6 flex items-center justify-start">
                     <Button class="w-full" :disabled="form.processing">
                         <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                        Email password reset link
+                        {{$trans('Email password reset link')}}
                     </Button>
                 </div>
             </form>
 
             <div class="text-muted-foreground space-x-1 text-center text-sm">
-                <span>Or, return to</span>
-                <TextLink :href="route('login')">log in</TextLink>
+                <span>{{$trans('Or, return to')}}</span>
+                <TextLink :href="route('login')">{{$trans('log in')}}</TextLink>
             </div>
         </div>
     </AuthLayout>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index 3f1cd22..37c69bd 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -17,6 +17,14 @@ const form = useForm({
     password_confirmation: '',
 });
 
+const onPhoneInput = (phoneNumber: string, phoneObject: any) => {
+    if (phoneObject?.number) {
+        form.phone = phoneObject.number;
+    } else {
+        form.phone = phoneNumber;
+    }
+};
+
 const submit = () => {
     form.post(route('register'), {
         onFinish: () => form.reset('password', 'password_confirmation'),
@@ -68,16 +76,29 @@ const submit = () => {
 
                 <div class="grid gap-2">
                     <Label for="phone">رقم الهاتف</Label>
-                    <Input
-                        id="phone"
-                        type="text"
-                        required
-                        autofocus
-                        :tabindex="1"
-                        autocomplete="phone"
-                        v-model="form.phone"
-                        placeholder="رقم الهاتف"
-                    />
+                    <div class="relative">
+                        <vue-tel-input
+                            v-model="form.phone"
+                            mode="international"
+                            :input-options="{
+                                placeholder: '10 1234 5678',
+                                id: 'phone',
+                                tabindex: 1,
+                                required: true,
+                                autofocus: true
+                            }"
+                            :dropdown-options="{
+                                showSearchBox: true,
+                                showDialCodeInSelection: true,
+                                showFlags: true
+                            }"
+                            :disabled="form.processing"
+                            default-country="EG"
+                            :preferred-countries="['EG', 'SA', 'AE', 'KW', 'QA']"
+                            :ignored-countries="['IL']"
+                            auto-format
+                        />
+                    </div>
                     <InputError :message="form.errors.phone" />
                 </div>
 
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index dad75f7..b6f7973 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -4,7 +4,11 @@ import { Button } from '@/components/ui/button';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
+import { $trans } from '@/lib/translator';
 
+const title = $trans('Verify email');
+const description = $trans('Please verify your email address by clicking on the link we just emailed to you');
+const newLink = $trans('A new verification link has been sent to the email address you provided during registration');
 defineProps<{
     status?: string;
 }>();
@@ -17,20 +21,20 @@ const submit = () => {
 </script>
 
 <template>
-    <AuthLayout title="Verify email" description="Please verify your email address by clicking on the link we just emailed to you.">
-        <Head title="Email verification" />
+    <AuthLayout :title="title" :description="description">
+        <Head :title="$trans('Email verification')" />
 
         <div v-if="status === 'verification-link-sent'" class="mb-4 text-center text-sm font-medium text-green-600">
-            A new verification link has been sent to the email address you provided during registration.
+            {{newLink}}
         </div>
 
         <form @submit.prevent="submit" class="space-y-6 text-center">
             <Button :disabled="form.processing" variant="secondary">
                 <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
-                Resend verification email
+                {{$trans('Resend verification email')}}
             </Button>
 
-            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> Log out </TextLink>
+            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> {{$trans('Log out')}} </TextLink>
         </form>
     </AuthLayout>
 </template>
diff --git a/resources/js/pages/books/Download.vue b/resources/js/pages/books/Download.vue
index 3c7484a..0abac14 100644
--- a/resources/js/pages/books/Download.vue
+++ b/resources/js/pages/books/Download.vue
@@ -22,13 +22,17 @@ interface Props {
 const props = defineProps<Props>();
 
 const sendEmailLink = () => {
-    router.post(route('books.download', props.book.id));
+    router.post(route('books.download', props.book.data.id), {},
+        {
+            preserveScroll: true,
+            preserveState: false,
+        }
+    );
 };
 </script>
 
 <template>
     <Head title="Downloads" />
-
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="py-12">
             <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
diff --git a/resources/js/pages/books/Index.vue b/resources/js/pages/books/Index.vue
index e61a9c1..2c0f631 100644
--- a/resources/js/pages/books/Index.vue
+++ b/resources/js/pages/books/Index.vue
@@ -37,10 +37,9 @@ const buyBook = (book_id: number) => {
     <GuestLayout>
         <Head title="Books" />
         <Toaster position="top-right" dir="auto" />
-        <div class="py-12">
             <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                 <main>
-                    <div class="max-w-7xl">
+                    <div v-if="books.data && books.data.length > 0" class="max-w-7xl">
                         <div class="rounded-lg">
                             <div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 sm:py-16 lg:max-w-7xl lg:px-8">
                                 <div class="mt-16 space-y-24">
@@ -84,8 +83,24 @@ const buyBook = (book_id: number) => {
                             </div>
                         </div>
                     </div>
+                    <div v-else class="flex flex-col items-center justify-center min-h-[60vh] md:min-h-[70vh] w-full rounded-md p-5">
+                        <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                            <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                            <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                            <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                            <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                            <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                            <circle cx="62" cy="48" r="2" fill="#fff"/>
+                            <circle cx="78" cy="48" r="2" fill="#fff"/>
+                            <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+                        </svg>
+                        <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                            <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد أي كتب متاحة حالياً</span>
+                        </h1>
+                        <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
+                    </div>
                 </main>
             </div>
-        </div>
     </GuestLayout>
 </template>
diff --git a/resources/js/pages/courses/Index.vue b/resources/js/pages/courses/Index.vue
index 3d0a3f5..933bff4 100644
--- a/resources/js/pages/courses/Index.vue
+++ b/resources/js/pages/courses/Index.vue
@@ -14,14 +14,32 @@ defineProps<Props>();
 <template>
     <GuestLayout>
         <Head title="Courses" />
-        <div class="mt-8 text-center lg:mt-12">
-            <h1 class="text-5xl leading-tight font-extrabold">
-                <span class="text-pink">الأستثمار في سوق العملات</span>
-            </h1>
+        <div v-if="courses.data && courses.data.length > 0">
+            <div class="mt-8 text-center lg:mt-12">
+                <h1 class="text-5xl leading-tight font-extrabold">
+                    <span class="text-pink">الأستثمار في سوق العملات</span>
+                </h1>
+            </div>
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <CourseCard :courses="courses.data" />
+            </div>
         </div>
-
-        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
-            <CourseCard :courses="courses.data" />
+        <div v-else class="flex flex-col items-center justify-center min-h-[60vh] md:min-h-[70vh] w-full rounded-md p-5">
+            <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                <circle cx="62" cy="48" r="2" fill="#fff"/>
+                <circle cx="78" cy="48" r="2" fill="#fff"/>
+                <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+            </svg>
+            <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد أي دورات متاحة حالياً</span>
+            </h1>
+            <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
         </div>
     </GuestLayout>
 </template>
diff --git a/resources/js/pages/courses/partials/CourseCard.vue b/resources/js/pages/courses/partials/CourseCard.vue
index 2384d78..5c92d38 100644
--- a/resources/js/pages/courses/partials/CourseCard.vue
+++ b/resources/js/pages/courses/partials/CourseCard.vue
@@ -2,9 +2,10 @@
 import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card';
 import { Course } from '@/types/courses';
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
-import { computed, ref } from 'vue';
+import { computed, ref, reactive } from 'vue';
 import { ClockIcon } from 'lucide-vue-next';
 import { Link } from '@inertiajs/vue3';
+import { arabicPlural } from '@/utils/arabicPlural';
 
 interface Props {
     courses: Course[];
@@ -12,71 +13,66 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const search = ref('');
+const sectionSearch = reactive({});
 
 const filteredCourses = computed(() => {
-    return {
-        sections: props.courses.filter((item) => {
-            return (
-                item.title.toLowerCase().indexOf(search.value.toLowerCase()) > -1 ||
-                item.description.toLowerCase().indexOf(search.value.toLowerCase()) > -1
-            );
-        }),
-    };
+    return props.courses.map(course => {
+        const searchValue = sectionSearch[course.id] || '';
+        const filteredSections = course.sections.filter(section =>
+            section.title.toLowerCase().includes(searchValue.toLowerCase())
+        );
+        return { ...course, filteredSections };
+    });
 });
 </script>
 
 <template>
-    <div class="relative my-8 flex justify-center lg:my-12 lg:gap-8">
-        <div class="max-w-2xl flex-1 md:px-8 lg:px-0 xl:col-span-6">
-            <div class="flex items-center px-6 py-4 md:mx-auto md:max-w-2xl lg:mx-0 lg:max-w-3xl xl:px-0">
-                <div class="w-full">
-                    <label class="sr-only" for="search">بحث</label>
-                    <div class="relative">
-                        <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
-                            <MagnifyingGlassIcon aria-hidden="true" class="text-primary h-5 w-5" />
-                        </div>
-                        <input
-                            id="search"
-                            v-model="search"
-                            class="text-md block h-12 w-full rounded-full border border-gray-300 bg-gray-200 py-2 ps-10 pe-3 placeholder-gray-500 focus:border-pink-500 focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-pink-500 focus:outline-none"
-                            name="search"
-                            placeholder="ماذا ستتعلم اليوم؟"
-                            type="search"
-                        />
+    <div class="max-w-7xl mx-auto py-8 px-4">
+        <div v-for="course in filteredCourses" :key="course.id" class="mb-12">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold">{{ course.title }}</h2>
+                <div class="relative w-72">
+                    <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
+                        <MagnifyingGlassIcon aria-hidden="true" class="text-primary h-5 w-5" />
                     </div>
+                    <input
+                        :id="'section-search-' + course.id"
+                        v-model="sectionSearch[course.id]"
+                        class="text-md block h-10 w-full rounded-full border border-gray-300 bg-gray-200 py-2 ps-10 pe-3 placeholder-gray-500 focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:outline-none"
+                        :placeholder="'ابحث في محتوى ' + course.title"
+                        type="search"
+                    />
                 </div>
             </div>
-        </div>
-    </div>
-
-    <div class="scrollbar-hide overflow-x-auto py-16 lg:mx-auto lg:max-w-7xl lg:px-8 min-h-screen">
-        <div class="grid grid-cols-1 gap-6 px-4 sm:grid-cols-2 md:px-8 lg:grid-cols-3 lg:px-0">
-            <Card v-for="course in filteredCourses.sections" :key="course.slug" :class="['relative group cursor-pointer hover:scale-105 duration-200 hover:text-white overflow-hidden', `hover:${course.sections[0].color}`]">
-                <Link :href="route('courses.sections.section', course.slug)" preserve-state preserve-scroll>
-                <div class="absolute z-[70] -right-16 w-48 rotate-45 rounded px-2 py-1 text-center text-gray-700 shadow-xl group-hover:text-white"
-                :class="course.sections[0].is_free ? 'bg-green-300' : 'bg-yellow-300'">
-                    <p class="text-sm font-bold">{{ course.sections[0].is_free ? 'مجانا' : 'مدفوع' }}</p>
-                </div>
-                <CardContent class="flex items-center space-x-4 sm:flex-col sm:items-start">
-                    <img
-                        :alt="course.sections[0].image_alt"
-                        :src="course.sections[0].s3_image"
-                        class="sm:h-36 w-28 object-contain object-center p-4 sm:h-60 sm:w-full sm:object-top sm:px-12 sm:pt-12"
-                    />
-                    <div class="w-full">
-                        <CardTitle>{{ course.sections[0].title }}</CardTitle>
-                        <CardDescription class="mt-4 flex items-center gap-2 group-hover:text-white">
-                            <ClockIcon class="h-4 w-4" />
-
-                            <p>{{ course.sections[0].duration }}</p>
-                            <p>•</p>
-                            <p>{{ course.sections[0].lessons_count + ' دروس' }}</p>
-                        </CardDescription>
-                    </div>
-                </CardContent>
-                </Link>
-            </Card>
+            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+                <Card v-for="section in course.filteredSections" :key="section.id" :class="['relative group cursor-pointer hover:scale-105 duration-200 hover:text-white overflow-hidden', `hover:${section.color || ''}`]">
+                    <Link :href="route('courses.sections.section', section.slug)" preserve-state preserve-scroll>
+                        <div class="absolute z-[70] -right-16 w-48 rotate-45 rounded px-2 py-1 text-center text-gray-700 shadow-xl group-hover:text-white"
+                        :class="section.is_free ? 'bg-green-300' : 'bg-yellow-300'">
+                            <p class="text-sm font-bold">
+                                {{ section.is_free ? 'مجانا' : 'مدفوع' }}
+                            </p>
+                        </div>
+                        <CardContent class="flex items-center space-x-4 sm:flex-col sm:items-start">
+                            <img
+                                :alt="section.image_alt"
+                                :src="section.s3_image"
+                                class="sm:h-36 w-28 object-contain object-center p-4 sm:h-60 sm:w-full sm:object-top sm:px-12 sm:pt-12"
+                            />
+                            <div class="w-full">
+                                <CardTitle>{{ section.title }}</CardTitle>
+                                <CardDescription class="mt-4 flex items-center gap-2 group-hover:text-white">
+                                    <ClockIcon class="h-4 w-4 text-primary" />
+                                    <span class="text-sm">{{ arabicPlural('دقيقة', section.duration) }}</span>
+                                    <span class="mx-2 text-secondary-500 text-lg font-bold">-</span>
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-500 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20l9-5-9-5-9 5 9 5zm0 0V10" /></svg>
+                                    <span class="text-sm">{{ arabicPlural('درس', section.lessons_count) }}</span>
+                                </CardDescription>
+                            </div>
+                        </CardContent>
+                    </Link>
+                </Card>
+            </div>
         </div>
     </div>
 </template>
diff --git a/resources/js/pages/faqs/Index.vue b/resources/js/pages/faqs/Index.vue
index 920b22b..00a5aa7 100644
--- a/resources/js/pages/faqs/Index.vue
+++ b/resources/js/pages/faqs/Index.vue
@@ -1,29 +1,49 @@
+<script setup lang="ts">
+import GuestLayout from '@/layouts/GuestLayout.vue';
+import { Head } from '@inertiajs/vue3';
+import { $trans } from '@/lib/translator.js';
+
+defineProps({
+    faqs: {
+        type: Array,
+        required: true,
+        default: () => []
+    }
+})
+</script>
 <template>
-    <AppLayout title="الأسئلة الشائعة">
-        <div class="max-w-5xl mx-auto px-4 py-12">
+    <GuestLayout title="الأسئلة الشائعة">
+        <Head :title="$trans('Faqs')" />
+        <div v-if="faqs && faqs.length > 0" class="max-w-5xl mx-auto px-4 py-12">
             <h1 class="text-3xl font-bold mb-8">الأسئلة الشائعة</h1>
             <div class="space-y-4">
-                <details v-for="item in faqs" :key="item.id" class="group rounded-lg border border-gray-200 bg-white p-4">
+                <details v-for="item in faqs" :key="item.id" class="group rounded-lg border border-gray-200 p-4">
                     <summary class="cursor-pointer select-none text-lg font-semibold flex items-center justify-between">
                         <span class="text-primary-700">{{ item.question }}</span>
-                        <span class="text-gray-400 group-open:rotate-180 transition-transform">▾</span>
+                        <span class="group-open:rotate-180 transition-transform">▾</span>
                     </summary>
-                    <div class="mt-3 prose max-w-none text-gray-700 leading-relaxed" v-html="item.answer"></div>
+                    <div class="mt-3 max-w-none leading-relaxed" v-html="item.answer"></div>
                 </details>
             </div>
         </div>
-    </AppLayout>
+        <div v-else class="flex flex-col items-center justify-center min-h-[60vh] md:min-h-[70vh] w-full rounded-md p-5">
+            <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                <circle cx="62" cy="48" r="2" fill="#fff"/>
+                <circle cx="78" cy="48" r="2" fill="#fff"/>
+                <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+            </svg>
+            <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد أي أسئلة متاحة حالياً</span>
+            </h1>
+            <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
+        </div>
+    </GuestLayout>
 </template>
 
-<script setup>
-import AppLayout from '@/layouts/AppLayout.vue'
-defineProps({
-    faqs: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
-})
-</script>
-
 
diff --git a/resources/js/pages/glossary/Index.vue b/resources/js/pages/glossary/Index.vue
index ad89632..9bdffb8 100644
--- a/resources/js/pages/glossary/Index.vue
+++ b/resources/js/pages/glossary/Index.vue
@@ -1,18 +1,23 @@
-<script setup>
-import GlossaryTabs from "@/pages/glossary/Partials/GlossaryTabs.vue"
-import {MagnifyingGlassIcon} from "@heroicons/vue/24/outline";
-import {Link} from "@inertiajs/vue3";
-import {computed, ref, onMounted} from "vue";
-import Alphabets from "@/pages/glossary/Partials/Alphabets.vue";
-import AlphabetResults from "@/pages/glossary/Partials/AlphabetResults.vue";
-import TopicBrowser from "@/pages/glossary/Partials/TopicBrowser.vue";
-import AppLayout from "@/layouts/AppLayout.vue";
-
-const props = defineProps({
-    glossaries: Object
-})
-
-const arabicAlphabets = ['أ', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م', 'ن', 'ه', 'و', 'ي'];
+<script setup lang="ts">
+import GuestLayout from '@/layouts/GuestLayout.vue';
+import { Head } from '@inertiajs/vue3';
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline';
+import { Link } from '@inertiajs/vue3';
+import { computed, ref, onMounted } from 'vue';
+import GlossaryTabs from '@/pages/glossary/Partials/GlossaryTabs.vue';
+import Alphabets from '@/pages/glossary/Partials/Alphabets.vue';
+import AlphabetResults from '@/pages/glossary/Partials/AlphabetResults.vue';
+import TopicBrowser from '@/pages/glossary/Partials/TopicBrowser.vue';
+
+interface Props {
+    glossaries: {
+        data: Array<any>;
+    };
+}
+
+const props = defineProps<Props>();
+
+const arabicAlphabets = ['ء', 'ا', 'أ', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م', 'ن', 'ه', 'و', 'ي'];
 const selectedTab = ref('tab_1')
 const searchInput = ref('');
 const selectedLetter = ref(arabicAlphabets[0]); // Default to first alphabet letter
@@ -32,19 +37,19 @@ const filteredItems = computed(() => {
     if (searchTerm === '') {
         return [];
     } else {
-        return props.glossaries.data.filter(item => (item.title).toLowerCase().includes(searchTerm));
+        return props.glossaries.data.filter((item: any) => (item.title).toLowerCase().includes(searchTerm));
     }
 });
 
-const handleSearch = (query) => {
+const handleSearch = (query: string) => {
     searchInput.value = query;
 };
 
-const handleLetterSelected = (letter) => {
+const handleLetterSelected = (letter: string) => {
     selectedLetter.value = letter;
 };
 
-const handleTopicLetterSelected = (letter) => {
+const handleTopicLetterSelected = (letter: string) => {
     // Set the selected letter without clearing it
     selectedTopicLetter.value = letter;
 
@@ -52,7 +57,7 @@ const handleTopicLetterSelected = (letter) => {
     // This ensures the letter stays highlighted when scrolling
 };
 
-const handleTabChange = (tab) => {
+const handleTabChange = (tab: string) => {
     selectedTab.value = tab;
     // Reset search when changing tabs
     searchInput.value = '';
@@ -80,7 +85,7 @@ const showTopics = computed(() => {
 });
 
 // Add a new handler for the letter-scrolled event
-const handleLetterScrolled = (letter) => {
+const handleLetterScrolled = (letter: string) => {
     // Only update if the letter is different to prevent unnecessary re-renders
     if (selectedTopicLetter.value !== letter) {
         // Keep the letter selected
@@ -99,15 +104,16 @@ const handleLetterDeselected = () => {
 </script>
 
 <template>
-    <AppLayout title="Glossaries">
-        <div class="max-w-7xl mx-auto py-6 sm:py-12 bg-white">
+    <GuestLayout>
+        <Head title="Glossaries" />
+        <div class="max-w-7xl mx-auto py-6 sm:py-12">
             <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-3xl lg:px-8">
                 <!-- Sticky header with tabs -->
-                <div class="sticky top-16 z-50 bg-white">
+                <div class="sticky top-16 z-50 bg-background">
                     <GlossaryTabs @update-tab="handleTabChange" @search="handleSearch"/>
 
                     <!-- Show alphabets when on term tab and not searching -->
-                    <div v-if="showAlphabets" class="bg-white border border-gray-200 rounded-b-lg p-4">
+                    <div v-if="showAlphabets" class="border border-border rounded-b-lg p-4">
                         <Alphabets
                             :glossaries="glossaries.data"
                             :sticky-alphabet="true"
@@ -118,14 +124,14 @@ const handleLetterDeselected = () => {
                     </div>
 
                     <!-- Show topic alphabets when on topic tab and not searching -->
-                    <div v-if="showTopics" class="bg-white border border-gray-200 rounded-b-lg p-4">
+                    <div v-if="showTopics" class="border border-border rounded-b-lg p-4">
                         <div class="flex justify-center flex-wrap">
                             <button v-for="letter in arabicAlphabets" :key="letter"
                                     :class="[
                                         letter === selectedTopicLetter
-                                            ? 'bg-secondary text-white'
-                                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
-                                        'mt-2 mx-1 h-8 w-8 inline-flex items-center justify-center duration-300 text-sm'
+                                            ? 'bg-secondary text-secondary-foreground'
+                                            : 'bg-muted text-muted-foreground hover:bg-muted/80',
+                                        'mt-2 mx-1 h-8 w-8 inline-flex items-center justify-center duration-300 text-sm rounded'
                                     ]"
                                     @click="handleTopicLetterSelected(letter)">
                                 {{ letter }}
@@ -135,7 +141,7 @@ const handleLetterDeselected = () => {
                 </div>
 
                 <!-- Content area -->
-                <div class="mt-4 bg-white border border-gray-200 rounded-lg p-4 sm:p-8">
+                <div class="mt-4 border border-border rounded-lg p-4 sm:p-8">
                     <!-- Show topics when on topic tab and not searching -->
                     <TopicBrowser
                         v-if="showTopics"
@@ -156,41 +162,27 @@ const handleLetterDeselected = () => {
 
                     <!-- Show search results when searching or search tab is active -->
                     <div v-if="isSearching">
-                        <h3 class="text-lg font-medium text-gray-900 mb-4" v-if="searchInput.trim()">نتائج البحث عن: "{{ searchInput }}"</h3>
-                        <h3 class="text-lg font-medium text-gray-900 mb-4" v-else>البحث في المصطلحات</h3>
+                        <h3 class="text-lg font-medium text-foreground mb-4" v-if="searchInput.trim()">نتائج البحث عن: "{{ searchInput }}"</h3>
+                        <h3 class="text-lg font-medium text-foreground mb-4" v-else>البحث في المصطلحات</h3>
 
                         <ul v-if="filteredItems.length > 0" role="list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                             <li v-for="glossary in filteredItems" :key="glossary.id" class="py-1">
                                 <Link :href="route('glossary.show', glossary)"
-                                      class="text-primary hover:text-primary-700 hover:underline">
+                                      class="text-primary hover:text-primary/80 hover:underline">
                                     {{ glossary.title }}
                                 </Link>
                             </li>
                         </ul>
-                        <div v-else-if="searchInput.trim()" class="text-center py-8 text-gray-500">
-                            <MagnifyingGlassIcon class="h-12 w-12 mx-auto text-gray-400 mb-4" />
+                        <div v-else-if="searchInput.trim()" class="text-center py-8 text-muted-foreground">
+                            <MagnifyingGlassIcon class="h-12 w-12 mx-auto text-muted-foreground/50 mb-4" />
                             لا توجد نتائج مطابقة لـ "{{ searchInput }}"
                         </div>
-                        <div v-else class="text-center py-8 text-gray-500">
+                        <div v-else class="text-center py-8 text-muted-foreground">
                             ابدأ البحث عن المصطلحات...
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </GuestLayout>
 </template>
-
-<style>
-/* Add some space at the bottom of the page to prevent content from being hidden behind the sticky header */
-body {
-    padding-bottom: 2rem;
-    background-color: white;
-}
-
-/* Ensure sticky elements work properly */
-.sticky {
-    position: -webkit-sticky;
-    position: sticky;
-}
-</style>
diff --git a/resources/js/pages/glossary/Partials/AlphabetResults.vue b/resources/js/pages/glossary/Partials/AlphabetResults.vue
index 773b3d6..767157c 100644
--- a/resources/js/pages/glossary/Partials/AlphabetResults.vue
+++ b/resources/js/pages/glossary/Partials/AlphabetResults.vue
@@ -43,6 +43,7 @@ const filteredTerms = computed(() => {
     if (!props.selectedLetter) {
         return [];
     }
+
     return props.glossaries.filter(glossary => glossary.initial === props.selectedLetter);
 });
-</script> 
\ No newline at end of file
+</script>
diff --git a/resources/js/pages/glossary/Partials/Alphabets.vue b/resources/js/pages/glossary/Partials/Alphabets.vue
index c9a96ae..9d2c17a 100644
--- a/resources/js/pages/glossary/Partials/Alphabets.vue
+++ b/resources/js/pages/glossary/Partials/Alphabets.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
         <div v-if="showAlphabetBar" class="flex justify-center flex-wrap p-4">
-            <button v-for="letter in arabicAlphabets" :key="letter" 
+            <button v-for="letter in arabicAlphabets" :key="letter"
                     :class="[
-                        letter === selectedLetter 
-                            ? 'bg-secondary text-white' 
-                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200', 
+                        letter === selectedLetter
+                            ? 'bg-secondary text-white'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
                         'mt-2 mx-1 h-8 w-8 inline-flex items-center justify-center duration-300 text-sm'
                     ]"
                     @click="filterStrings(letter)">
@@ -48,7 +48,7 @@ const props = defineProps({
     }
 })
 
-const arabicAlphabets = ['أ', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م', 'ن', 'ه', 'و', 'ي'];
+const arabicAlphabets = ['ء', 'ا', 'أ', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م', 'ن', 'ه', 'و', 'ي'];
 const selectedLetter = ref('');
 
 // Watch for changes from parent component
@@ -65,7 +65,7 @@ const filteredStrings = computed(() => {
 
 const filterStrings = (letter) => {
     selectedLetter.value === letter ? selectedLetter.value = '' : selectedLetter.value = letter;
-    
+
     // Emit the selected letter to parent component
     emit('letter-selected', selectedLetter.value);
 };
diff --git a/resources/js/pages/glossary/Partials/TopicBrowser.vue b/resources/js/pages/glossary/Partials/TopicBrowser.vue
index c03d89b..c73ecdb 100644
--- a/resources/js/pages/glossary/Partials/TopicBrowser.vue
+++ b/resources/js/pages/glossary/Partials/TopicBrowser.vue
@@ -9,20 +9,20 @@
                     <h2 class="text-2xl font-bold text-secondary">{{ letter }}</h2>
                     <div class="flex-grow h-0.5 bg-gray-200 ms-8"></div>
                 </div>
-                
+
                 <!-- Topics that start with this letter -->
                 <div v-for="(topic, index) in getTopicsByLetter(letter)" :key="index" class="mb-6">
                     <div :id="`topic-${topic.id}`" class="flex items-center cursor-pointer" @click="toggleTopic(topic.id)">
-                        <h3 class="text-xl font-bold text-gray-900">{{ topic.name }}</h3>
-                        <ChevronDownIcon v-if="!expandedTopics.includes(topic.id)" class="h-5 w-5 me-2 text-gray-500" />
-                        <ChevronUpIcon v-else class="h-5 w-5 me-2 text-gray-500" />
+                        <h3 class="text-xl font-bold text-product-orange">{{ topic.name }}</h3>
+                        <ChevronDownIcon v-if="!expandedTopics.includes(topic.id)" class="h-5 w-5 me-2 text-foreground" />
+                        <ChevronUpIcon v-else class="h-5 w-5 me-2 text-foreground" />
                     </div>
-                    
+
                     <div v-if="expandedTopics.includes(topic.id)" class="mt-4 transition-all duration-300 ease-in-out">
                         <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                             <li v-for="term in topic.terms" :key="term.id" class="py-1">
                                 <Link :href="route('glossary.show', term)"
-                                      class="text-primary hover:text-primary-700 hover:underline">
+                                      class="text-foreground hover:text-foreground-700 hover:underline">
                                     {{ term.title }}
                                 </Link>
                             </li>
@@ -30,7 +30,7 @@
                     </div>
                 </div>
             </div>
-            
+
             <!-- No topics message -->
             <div v-if="topics.length === 0 && selectedLetter" class="text-center py-8 text-gray-500">
                 لا توجد موضوعات تبدأ بـ "{{ selectedLetter }}"
@@ -87,7 +87,7 @@ watch(() => props.selectedLetter, (newLetter) => {
         if (!isAutoSelecting.value) {
             scrollToSection(newLetter);
         }
-        
+
         // Emit an event to keep the letter selected in the parent component
         emit('letter-scrolled', newLetter);
     }
@@ -99,10 +99,10 @@ const emit = defineEmits(['letter-scrolled', 'letter-deselected']);
 onMounted(() => {
     // Group glossaries by topic
     const topicMap = {};
-    
+
     props.glossaries.forEach(glossary => {
         const topic = glossary.topic || 'عام'; // Default topic if none provided
-        
+
         if (!topicMap[topic]) {
             topicMap[topic] = {
                 id: topic.toLowerCase().replace(/\s+/g, '-'),
@@ -111,18 +111,18 @@ onMounted(() => {
                 initial: topic.charAt(0) // Store the first letter of the topic
             };
         }
-        
+
         topicMap[topic].terms.push(glossary);
     });
-    
+
     // Convert to array and sort alphabetically
     topics.value = Object.values(topicMap).sort((a, b) => a.name.localeCompare(b.name));
-    
+
     // Expand all topics by default
     topics.value.forEach(topic => {
         expandedTopics.value.push(topic.id);
     });
-    
+
     // Setup intersection observers after the DOM has updated
     nextTick(() => {
         setupIntersectionObservers();
@@ -133,13 +133,13 @@ const setupIntersectionObservers = () => {
     // Clear any existing observers
     topicObservers.value.forEach(observer => observer.disconnect());
     topicObservers.value = [];
-    
+
     // Create a new intersection observer for letter headers
     const letterObserver = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             // The data-letter attribute contains the letter
             const letter = entry.target.getAttribute('data-letter');
-            
+
             if (entry.isIntersecting) {
                 // Letter section is visible
                 // Auto-select the alphabet letter when scrolling to a section
@@ -147,7 +147,7 @@ const setupIntersectionObservers = () => {
                     // Set flag to indicate this is an auto-selection from scrolling
                     isAutoSelecting.value = true;
                     emit('letter-scrolled', letter);
-                    
+
                     // Reset the flag after a short delay
                     setTimeout(() => {
                         isAutoSelecting.value = false;
@@ -159,14 +159,14 @@ const setupIntersectionObservers = () => {
             }
         });
     }, { threshold: 0.3, rootMargin: '-100px 0px' });
-    
+
     // Create a new intersection observer for topics
     const topicObserver = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             const topicId = entry.target.id;
             const topicName = topicId.replace('topic-', '');
             const topic = topics.value.find(t => t.id === topicName);
-            
+
             if (entry.isIntersecting) {
                 // Topic is visible
                 if (!currentVisibleTopics.value.includes(topicName)) {
@@ -178,11 +178,11 @@ const setupIntersectionObservers = () => {
                 if (index !== -1) {
                     currentVisibleTopics.value.splice(index, 1);
                 }
-                
+
                 // If no visible topics match the selected letter, deselect it
-                if (currentVisibleTopics.value.length === 0 || 
-                    !topics.value.some(t => 
-                        currentVisibleTopics.value.includes(t.id) && 
+                if (currentVisibleTopics.value.length === 0 ||
+                    !topics.value.some(t =>
+                        currentVisibleTopics.value.includes(t.id) &&
                         t.initial === props.selectedLetter
                     )) {
                     emit('letter-deselected');
@@ -190,7 +190,7 @@ const setupIntersectionObservers = () => {
             }
         });
     }, { threshold: 0.1 });
-    
+
     // Observe all letter headers
     nextTick(() => {
         // Find all letter headers and observe them
@@ -198,7 +198,7 @@ const setupIntersectionObservers = () => {
         letterHeaders.forEach(header => {
             letterObserver.observe(header);
         });
-        
+
         // Observe all topic elements
         topics.value.forEach(topic => {
             const element = document.getElementById(`topic-${topic.id}`);
@@ -206,7 +206,7 @@ const setupIntersectionObservers = () => {
                 topicObserver.observe(element);
             }
         });
-        
+
         // Store the observers for cleanup
         topicObservers.value.push(letterObserver, topicObserver);
     });
@@ -224,20 +224,20 @@ const toggleTopic = (topicId) => {
 const scrollToSection = (letter) => {
     // Find the letter header element
     const letterElement = document.getElementById(`letter-${letter}`);
-    
+
     if (letterElement) {
         // Use scrollIntoView with a block: "start" option to ensure the letter header is at the top of the viewport
-        letterElement.scrollIntoView({ 
+        letterElement.scrollIntoView({
             behavior: 'smooth',
             block: 'start'
         });
-        
+
         // This is an explicit user selection, not an auto-selection
         isAutoSelecting.value = false;
-        
+
         // Explicitly emit the letter-scrolled event for immediate feedback
         emit('letter-scrolled', letter);
-        
+
         // Expand all topics under this letter if they aren't already
         const topicsWithLetter = getTopicsByLetter(letter);
         topicsWithLetter.forEach(topic => {
@@ -252,4 +252,4 @@ const scrollToSection = (letter) => {
 defineExpose({
     scrollToSection
 });
-</script> 
\ No newline at end of file
+</script>
diff --git a/resources/js/pages/glossary/Show.vue b/resources/js/pages/glossary/Show.vue
index d67ea23..6f7da8d 100644
--- a/resources/js/pages/glossary/Show.vue
+++ b/resources/js/pages/glossary/Show.vue
@@ -1,7 +1,7 @@
 <template>
-    <AppLayout title="Glossary">
+    <GuestLayout title="Glossary">
         <div class="max-w-7xl mx-auto py-12 sm:py-16">
-            <div class="bg-white rounded-lg shadow-md">
+            <div class="bg-card rounded-lg shadow-md border border-border">
                 <div class="max-w-2xl mx-auto py-12 px-4 sm:px-6 sm:py-16 lg:max-w-3xl lg:px-8">
 
                     <nav class="flex mb-8" aria-label="Breadcrumb">
@@ -9,22 +9,22 @@
                             <li class="p-0">
                                 <div class="flex items-center">
                                     <Link :href="route('glossary.index')"
-                                          class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">المصطلحات
+                                          class="ml-4 text-sm font-medium text-muted-foreground hover:text-foreground">المصطلحات
                                     </Link>
                                 </div>
                             </li>
                             <li class="p-0">
                                 <div class="flex items-center">
-                                    <ChevronLeftIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true"/>
-                                    <div class="ml-4 text-sm font-medium text-gray-500">{{ glossary.data.title }}</div>
+                                    <ChevronLeftIcon class="h-5 w-5 flex-shrink-0 text-muted-foreground" aria-hidden="true"/>
+                                    <div class="ml-4 text-sm font-medium text-muted-foreground">{{ glossary.data.title }}</div>
                                 </div>
                             </li>
                         </ol>
                     </nav>
 
                     <!-- Term header -->
-                    <div class="border-b border-gray-200 pb-6 mb-6">
-                        <h2 class="text-3xl font-bold text-gray-900">{{ glossary.data.title }}</h2>
+                    <div class="border-b border-border pb-6 mb-6">
+                        <h2 class="text-3xl font-bold text-foreground">{{ glossary.data.title }}</h2>
 
                         <div class="mt-4 flex flex-wrap gap-2">
                             <span v-if="glossary.data.topic" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
@@ -37,17 +37,17 @@
                     </div>
 
                     <!-- Term content -->
-                    <div class="prose prose-lg max-w-none">
+                    <div class="prose-lg max-w-none">
                         <div v-html="glossary.data.body" class="mt-8"></div>
                     </div>
 
                     <!-- Related terms -->
-                    <div v-if="relatedTerms.length > 0" class="mt-12 pt-6 border-t border-gray-200">
-                        <h3 class="text-lg font-medium text-gray-900 mb-4">مصطلحات ذات صلة</h3>
+                    <div v-if="relatedTerms.length > 0" class="mt-12 pt-6 border-t border-border">
+                        <h3 class="text-lg font-medium text-foreground mb-4">مصطلحات ذات صلة</h3>
                         <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                             <li v-for="term in relatedTerms" :key="term.id" class="py-1">
                                 <Link :href="route('glossary.show', term)"
-                                      class="text-primary hover:text-primary-700 hover:underline">
+                                      class="text-primary hover:text-primary/80 hover:underline">
                                     {{ term.title }}
                                 </Link>
                             </li>
@@ -55,16 +55,16 @@
                     </div>
 
                     <!-- Navigation -->
-                    <div class="mt-12 pt-6 border-t border-gray-200 flex justify-between">
+                    <div class="mt-12 pt-6 border-t border-border flex justify-between">
                         <Link v-if="prevTerm" :href="route('glossary.show', prevTerm)"
-                              class="inline-flex items-center gap-x-1.5 text-sm font-medium text-primary hover:text-primary-700">
+                              class="inline-flex items-center gap-x-1.5 text-sm font-medium text-primary hover:text-primary/80">
                             <ChevronRightIcon class="h-5 w-5" />
                             <span>{{ prevTerm.title }}</span>
                         </Link>
                         <div v-else></div>
 
                         <Link v-if="nextTerm" :href="route('glossary.show', nextTerm)"
-                              class="inline-flex items-center gap-x-1.5 text-sm font-medium text-primary hover:text-primary-700">
+                              class="inline-flex items-center gap-x-1.5 text-sm font-medium text-primary hover:text-primary/80">
                             <span>{{ nextTerm.title }}</span>
                             <ChevronLeftIcon class="h-5 w-5" />
                         </Link>
@@ -73,24 +73,30 @@
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </GuestLayout>
 </template>
 
-<script setup>
-import AppLayout from "@/layouts/AppLayout.vue"
-import {ChevronLeftIcon, ChevronRightIcon} from "@heroicons/vue/24/outline";
-import {Link} from "@inertiajs/vue3";
+<script setup lang="ts">
+import GuestLayout from '@/layouts/GuestLayout.vue';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
+import { Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
-const props = defineProps({
-    glossary: Object,
-    allGlossaries: Object
-});
+interface Props {
+    glossary: {
+        data: any;
+    };
+    allGlossaries: {
+        data: any[];
+    };
+}
+
+const props = defineProps<Props>();
 
 // Find the index of the current term
 const currentIndex = computed(() => {
     if (!props.allGlossaries || !props.allGlossaries.data) return -1;
-    return props.allGlossaries.data.findIndex(item => item.id === props.glossary.data.id);
+    return props.allGlossaries.data.findIndex((item: any) => item.id === props.glossary.data.id);
 });
 
 // Get previous and next terms for navigation
@@ -109,7 +115,7 @@ const relatedTerms = computed(() => {
     if (!props.allGlossaries || !props.allGlossaries.data) return [];
 
     return props.allGlossaries.data
-        .filter(item =>
+        .filter((item: any) =>
             item.id !== props.glossary.data.id &&
             (item.topic === props.glossary.data.topic ||
              item.category === props.glossary.data.category)
diff --git a/resources/js/pages/goals/Show.vue b/resources/js/pages/goals/Show.vue
index a2bdb53..418d7c4 100644
--- a/resources/js/pages/goals/Show.vue
+++ b/resources/js/pages/goals/Show.vue
@@ -35,12 +35,12 @@ onBeforeUnmount(() => {
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head :title="goal.data.title" />
-        <div class="flex h-full flex-1 flex-col items-center justify-center gap-4 p-4">
-            <Card class="prose min-w-lg">
+        <div class="goals-show-container flex h-full flex-1 flex-col items-center justify-center gap-4 p-4">
+            <Card class="goals-card prose min-w-lg">
                 <CardHeader>
-                    <CardTitle class="text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">{{ goal.data.title }} </CardTitle>
+                    <CardTitle class="goals-card-title text-primary text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl">{{ goal.data.title }} </CardTitle>
                 </CardHeader>
-                <CardContent class="marker:text-product-pink list-inside">
+                <CardContent class="goals-card-content marker:text-primary list-inside">
                     <ul role="list">
                         <li v-for="(point, index) in goal.data.points" :key="index">{{ point }}</li>
                     </ul>
diff --git a/resources/js/pages/magazine/Show.vue b/resources/js/pages/magazine/Show.vue
new file mode 100644
index 0000000..84a0e26
--- /dev/null
+++ b/resources/js/pages/magazine/Show.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <slide :slide="magazine.data.slides[pageIndex]"/>
+        <magazine-pagination :currentPage="currentPage" :pages="totalPages" @pageChanged="pageChanged"/>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import MagazinePagination from "@/components/pagination/MagazinePagination.vue";
+import Slide from "./partials/Slide.vue";
+import {useForm} from "@inertiajs/vue3";
+import LessonLayout from "@/layouts/LessonLayout.vue";
+
+export default defineComponent({
+    layout: LessonLayout,
+    props: {
+        magazine: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    data() {
+        return {
+            currentPage: 1,
+            userProgress: 0.0
+        }
+    },
+    components: {
+        Slide,
+        MagazinePagination
+    },
+    computed: {
+        totalPages() {
+            return this.magazine.data.slides.length;
+        },
+        pageIndex() {
+            return this.currentPage - 1;
+        },
+        progress() {
+            return (this.currentPage / this.totalPages * 100);
+        }
+    },
+    methods: {
+        pageChanged(page) {
+            this.currentPage = page;
+            this.incrementUserProgress();
+        },
+        incrementUserProgress() {
+            if (this.userProgress <= this.progress) {
+                this.userProgress = this.progress;
+            }
+        },
+    },
+    mounted() {
+        this.incrementUserProgress();
+        console.log(this.magazine);
+    },
+    beforeUnmount() {
+        if (this.magazine.data.user_progress < 100) {
+            useForm({user_progress: this.userProgress.toFixed(2),})
+                .put(route('magazines.progress', this.magazine.data.slug), {
+                    preserveScroll: true,
+                })
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/magazine/partials/Slide.vue b/resources/js/pages/magazine/partials/Slide.vue
new file mode 100644
index 0000000..b801922
--- /dev/null
+++ b/resources/js/pages/magazine/partials/Slide.vue
@@ -0,0 +1,64 @@
+<template>
+    <component :is="slide.layout" v-if="slide.layout === 'final-slide-layout'" :image-url="slide.s3_image">
+        <div class="slide-container flex flex-col items-center justify-between min-h-screen py-24 lg:p-24">
+            <div class="slide-header rounded pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:mx-auto w-full bg-background/50 backdrop-blur-xs">
+                <h3 class="slide-title" :class="[slide.layout === 'boxes-slide-layout' ? 'text-primary' : 'text-primary', 'mt-2', 'text-2xl', 'font-bold']" v-text="slide.title"/>
+                <div class="slide-description" :class="['mt-8', 'font-light']">
+                    <div v-html="slide.description"/>
+                </div>
+            </div>
+            <div class="slide-items-container flex flex-col lg:flex-row w-full lg:space-x-4 space-y-4 lg:space-y-0">
+                <div v-for="item in slide.slide_items" :key="item.id" class="slide-item rounded p-4 w-full h-64 bg-white bg-opacity-75">
+                    <h3 class="slide-item-title text-gray-700 text-xl font-bold">
+                        {{ item.title }}
+                    </h3>
+                    <div class="slide-item-description description sm-li line-clamp-3 overflow-hidden group relative cursor-help"
+                         v-html="item.description"
+                         :title="stripHtml(item.description)">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </component>
+    <component :is="slide.layout" v-else :image-url="slide.s3_image" :slide-items="slide.slide_items">
+        <div>
+            <h3 :class="[slide.layout === 'boxes-slide-layout' ? 'text-primary' : 'text-primary', 'mt-2', 'text-2xl', 'font-bold']"
+                v-text="slide.title"/>
+            <div :class="['mt-8', 'font-light']">
+                <div v-html="slide.description"/>
+            </div>
+        </div>
+    </component>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import HalfScreenLayout from '@/layouts/HalfScreenLayout.vue'
+import RightHalfScreenLayout from '@/layouts/RightHalfScreenLayout.vue'
+import LeftHalfScreenLayout from '@/layouts/LeftHalfScreenLayout.vue'
+import BoxesSlideLayout from "@/layouts/BoxesSlideLayout.vue";
+import FinalSlideLayout from "@/layouts/FinalSlideLayout.vue";
+import {Head} from '@inertiajs/vue3'
+
+export default defineComponent({
+    props: ['slide'],
+    components: {
+        Head,
+        HalfScreenLayout,
+        RightHalfScreenLayout,
+        LeftHalfScreenLayout,
+        BoxesSlideLayout,
+        FinalSlideLayout,
+    },
+    methods: {
+        stripHtml(html) {
+            const tmp = document.createElement('div');
+            tmp.innerHTML = html;
+            return tmp.textContent || tmp.innerText || '';
+        }
+    }
+    // mounted(){
+    //     console.log(this.slide);
+    // }
+})
+</script>
diff --git a/resources/js/pages/quick-scan/Show.vue b/resources/js/pages/quick-scan/Show.vue
new file mode 100644
index 0000000..44e1225
--- /dev/null
+++ b/resources/js/pages/quick-scan/Show.vue
@@ -0,0 +1,21 @@
+<template>
+    <QuickScanList :quick-scan="quickScan"/>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import QuickScanList from "./partials/QuickScanList.vue";
+import SkillsLayout from "@/layouts/LessonLayout.vue";
+
+export default defineComponent({
+    layout: SkillsLayout,
+    props: {
+        quickScan: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    components: {QuickScanList}
+})
+</script>
diff --git a/resources/js/pages/quick-scan/partials/AnswersList.vue b/resources/js/pages/quick-scan/partials/AnswersList.vue
new file mode 100644
index 0000000..de97988
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/AnswersList.vue
@@ -0,0 +1,63 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div>
+        <h2 class="text-lg font-semibold text-foreground-500 mb-8">{{ question.question }}</h2>
+
+        <RadioGroup v-model="answer" class="mt-2">
+            <RadioGroupLabel class="sr-only">
+                {{ question.question }}
+            </RadioGroupLabel>
+            <div class="grid gap-3">
+                <RadioGroupOption v-for="option in question.quick_answers" :key="option.choice"
+                                  v-slot="{ active, checked }"
+                                  :value="option.choice" as="template" @click="questionAnswer">
+                    <div
+                        :class="[active ? 'ring-2 ring-offset-2 ring-foreground' : '', checked ? 'bg-foreground border-transparent text-background hover:bg-foreground' : 'bg-background border-foreground text-foreground hover:bg-background', 'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center text-sm font-medium uppercase sm:flex-1']">
+                        <RadioGroupLabel as="p">
+                            {{ option.description }}
+                        </RadioGroupLabel>
+                    </div>
+                </RadioGroupOption>
+            </div>
+        </RadioGroup>
+    </div>
+</template>
+
+<script>
+import {RadioGroup, RadioGroupLabel, RadioGroupOption, TransitionRoot} from "@headlessui/vue";
+
+export default {
+    emits: ['questionAnswer'],
+    props: {
+        question: {
+            type: Object,
+            default: null
+        },
+        oldAnswer: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            answer: this.oldAnswer ?? null
+        }
+    },
+    computed: {
+        hasAnswer() {
+            return this.answer !== null
+        }
+    },
+    components: {
+        RadioGroup,
+        TransitionRoot,
+        RadioGroupLabel,
+        RadioGroupOption,
+    },
+    methods: {
+        questionAnswer() {
+            this.$emit('questionAnswer', this.answer)
+        }
+    }
+}
+</script>
diff --git a/resources/js/pages/quick-scan/partials/QuickScanItem.vue b/resources/js/pages/quick-scan/partials/QuickScanItem.vue
new file mode 100644
index 0000000..350c6bf
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/QuickScanItem.vue
@@ -0,0 +1,103 @@
+<template>
+    <div :style="{backgroundImage: `url(${question.s3_image})`}"
+         class="bg-center bg-cover bg-no-repeat h-72 rounded-t-lg shadow-lg w-full">
+        <div class="rounded-t-lg w-full h-full bg-background bg-opacity-50 flex flex-col justify-center px-12">
+            <div class="text-center">
+                <h3 class="text-lg leading-6 font-semibold text-foreground">
+                    {{ question['question'] }}
+                </h3>
+            </div>
+        </div>
+    </div>
+    <div class="h-32 flex flex-col justify-center p-12">
+        <div class="grid grid-cols-2 gap-3">
+            <TransitionRoot
+                :show="!hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[400ms] ease-out"
+                enter-from="translate-x-4 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="trueButtonPressed"
+                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-product-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-product-orange-500 sm:text-sm"
+                        type="button" @click="answered(true)">
+                    صح
+                </button>
+            </TransitionRoot>
+
+            <TransitionRoot
+                :show="!hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[400ms] ease-out"
+                enter-from="translate-x-4 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="falseButtonPressed"
+                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                        type="button" @click="answered(false)">
+                    خطأ
+                </button>
+            </TransitionRoot>
+
+            <TransitionRoot
+                :show="hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[800ms] ease-out"
+                enter-from="translate-x-12 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="trueButtonPressed"
+                        class="col-span-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                        type="button" @click="nextQuestion">
+                    التالي
+                </button>
+            </TransitionRoot>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import {CheckIcon, XCircleIcon} from '@heroicons/vue/24/outline'
+import {TransitionRoot} from '@headlessui/vue'
+
+export default defineComponent({
+    emits: ["questionAnswer", "nextQuestion"],
+    props: {
+        question: {
+            type: Object,
+            default: null
+        },
+        answer: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        CheckIcon,
+        XCircleIcon,
+        TransitionRoot
+    },
+    methods: {
+        answered(choice) {
+            this.$emit('questionAnswer', choice)
+        },
+        nextQuestion() {
+            this.$emit('nextQuestion')
+            this.resetQuestion()
+        }
+    },
+    computed: {
+        hasAnswer() {
+            return this.answer !== ''
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/quick-scan/partials/QuickScanLayout.vue b/resources/js/pages/quick-scan/partials/QuickScanLayout.vue
new file mode 100644
index 0000000..ee465df
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/QuickScanLayout.vue
@@ -0,0 +1,21 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-cover bg-no-repeat bg-right flex w-full h-screen justify-center items-center bg-background">
+        <div class="max-w-xl w-full p-3">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: '/img/img.jpg',
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/quick-scan/partials/QuickScanList.vue b/resources/js/pages/quick-scan/partials/QuickScanList.vue
new file mode 100644
index 0000000..251e150
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/QuickScanList.vue
@@ -0,0 +1,144 @@
+<template>
+    <QuickScanLayout :image-url="quickScanBegin ? '' : quickScan.data.s3_image">
+        <div v-if="quickScanBegin">
+            <!--  Questions  -->
+            <div v-if="!showResults">
+                <AnswersList :key="idx" :old-answer="currentAnswer" :question="questions[idx]"
+                             @questionAnswer="answered"/>
+
+                <TransitionRoot :show="canFinishQuickScan" appear as="template"
+                                enter="transform transition duration-[800ms] ease-out"
+                                enter-from="translate-x-12 opacity-0"
+                                enter-to="translate-x-0 opacity-100">
+
+                    <button
+                        class="mt-12 col-span-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-product-orange-600 text-base font-medium text-foreground hover:bg-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-background sm:text-sm"
+                        type="button"
+                        @click="showResults = true">
+                        انهاء الاختبار
+                    </button>
+                </TransitionRoot>
+                <MagazinePagination :currentPage="currentPage" :pages="totalPages" @pageChanged="pageChanged"/>
+            </div>
+
+            <!--  Results  -->
+            <div v-else class="p-12 bg-background rounded-lg shadow-lg w-full mt-8">
+                <div>
+                    <QuickScanResult :answers="answers" :questions="questions" :total-answers="totalPages"
+                                     @resetQuickScan="resetQuickScan"/>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+
+            <!--  Start Page  -->
+            <TransitionRoot
+                :show="true"
+                appear
+                as="template"
+                enter="transform transition duration-[1500ms]"
+                enter-from="opacity-0 rotate-[-120deg] scale-50"
+                enter-to="opacity-100 rotate-0 scale-100"
+                leave="transform duration-200 transition ease-in-out"
+                leave-from="opacity-100 rotate-0 scale-100 "
+                leave-to="opacity-0 scale-95 ">
+                <StartQuickScan :quick-scan="quickScan" @startQuickScan="quickScanBegin = true"/>
+            </TransitionRoot>
+        </div>
+    </QuickScanLayout>
+</template>
+
+<script>
+import QuickScanLayout from "./QuickScanLayout.vue";
+import StartQuickScan from "./StartQuickScan.vue";
+import {TransitionRoot} from "@headlessui/vue";
+import QuickScanItem from "./QuickScanItem.vue";
+import QuickScanResult from "./QuickScanResult.vue";
+import AnswersList from "./AnswersList.vue";
+import MagazinePagination from "@/components/pagination/MagazinePagination.vue";
+import {useForm} from "@inertiajs/vue3";
+
+export default {
+    props: ['quickScan'],
+
+    components: {
+        MagazinePagination,
+        AnswersList, QuickScanResult, QuickScanItem, QuickScanLayout, StartQuickScan, TransitionRoot
+    },
+    data() {
+        return {
+            idx: 0,
+            answers: ['', '', ''],
+            currentPage: 1,
+            wrongAnswers: 0,
+            correctAnswers: 0,
+            showResults: false,
+            quickScanBegin: false,
+            canFinishQuickScan: false,
+            questions: this.quickScan.data.quick_questions,
+            userProgress: 0.0
+        }
+    },
+    computed: {
+        totalPages() {
+            return this.questions.length;
+        },
+        currentAnswer() {
+            return this.answers[this.idx];
+        },
+        progress() {
+            return (this.currentPage / this.totalPages * 100);
+        }
+    },
+    methods: {
+        answered(choice) {
+            this.incrementUserProgress();
+            this.saveAnswer(this.idx, choice);
+            if (this.allQuestionsAnswered()) {
+                this.canFinishQuickScan = true
+            }
+        },
+        saveAnswer(index, choice) {
+            this.answers.splice(index, 1, choice)
+        },
+        allQuestionsAnswered() {
+            let noEmptyResult = true;
+            for (let i = 0; i < this.answers.length; i++) {
+                if (this.answers[i] === '') {
+                    noEmptyResult = false
+                }
+            }
+
+            return this.answers.length === this.questions.length && noEmptyResult
+        },
+        pageChanged(page) {
+            this.currentPage = page;
+            this.idx = page - 1;
+        },
+        incrementUserProgress() {
+            if (this.userProgress <= this.progress) {
+                this.userProgress = this.progress;
+            }
+        },
+        resetQuickScan() {
+            this.idx = 0
+            this.answers = []
+            this.currentPage = 1
+            this.wrongAnswers = 0
+            this.correctAnswers = 0
+            this.showResults = false
+            this.quickScanBegin = false
+            this.canFinishQuickScan = false
+        }
+    },
+    beforeUnmount() {
+        if (this.quickScan.data.user_progress < 100) {
+            useForm({
+                user_progress: this.userProgress.toFixed(2),
+            }).put(route('quickScans.progress', this.quickScan.data.slug), {
+                preserveScroll: true,
+            })
+        }
+    }
+}
+</script>
diff --git a/resources/js/pages/quick-scan/partials/QuickScanResult.vue b/resources/js/pages/quick-scan/partials/QuickScanResult.vue
new file mode 100644
index 0000000..783dedb
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/QuickScanResult.vue
@@ -0,0 +1,90 @@
+<script>
+import RadialProgress from "vue3-radial-progress";
+
+export default {
+    emits: ['resetQuickScan'],
+    props: {
+        questions: {
+            type: Array,
+            default: []
+        },
+        answers: {
+            type: Array,
+            default: []
+        },
+        totalAnswers: {
+            type: Number,
+            default: 0
+        }
+    },
+    components: {
+        RadialProgress
+    },
+    computed: {
+        score() {
+            return this.calculateScore();
+        },
+        pass() {
+            return this.calculateScore() >= 65
+        },
+        progressColor() {
+            return this.calculateScore() >= 65 ? '#A1C814' : '#EF4444'
+        }
+    },
+    methods: {
+        resetQuickScan() {
+            this.$emit('resetQuickScan');
+        },
+        exitQuickScan() {
+            window.history.back();
+        },
+        calculateScore() {
+            let score = 0;
+            for (let i = 0; i < this.questions.length; i++) {
+                if (this.questions[i].correct_answer === this.answers[i]) {
+                    score = score + 1
+                }
+            }
+
+            return Math.round((score / this.questions.length) * 100).toFixed(0)
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-6">
+        <h2 class="text-3xl font-semibold leading-loose text-secondary">النتيجة</h2>
+
+        <div class="flex gap-3 items-center">
+
+            <RadialProgress :completed-steps="score" :diameter="70" :inner-stroke-width="4" :stroke-width="4"
+                            :total-steps="100" inner-stroke-color="rgb(209 213 219)" start-color="#017ea1"
+                            stop-color="#017ea1">
+                <p class="m-2">{{ score }}%</p>
+            </RadialProgress>
+            <div v-if="pass">
+                <h3 class="font-semibold text-xl text-primary">مبروك</h3>
+                <p class="leading-loose text-sm text-gray-400">لقد قمت باجتياز الاختبار بنجاح</p>
+            </div>
+            <div v-else>
+                <h3 class="font-semibold text-xl text-red-500">حاول مرة اخرى</h3>
+                <p class="leading-loose text-sm text-gray-400">يمكنك المحاولة مرة اخرى من خلال الضغط على الزر الموجود
+                    بالاسفل.</p>
+            </div>
+        </div>
+
+        <div class="mt-6 flow-root">
+            <button v-if="pass"
+                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                    type="button" @click="exitQuickScan">
+                انهاء الاختبار
+            </button>
+            <button v-else
+                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+                    type="button" @click="resetQuickScan">
+                حاول مرة اخرى
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/quick-scan/partials/StartQuickScan.vue b/resources/js/pages/quick-scan/partials/StartQuickScan.vue
new file mode 100644
index 0000000..1e2e26f
--- /dev/null
+++ b/resources/js/pages/quick-scan/partials/StartQuickScan.vue
@@ -0,0 +1,68 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div class="bg-background bg-center bg-cover bg-no-repeat h-auto rounded-lg shadow-lg w-full py-8">
+        <div class="rounded-lg w-full h-full flex flex-col justify-center px-12">
+            <div class="text-start">
+                <div class="description" v-html="quickScan.info"></div>
+                <div class="py-5">
+                    <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+                        <div class="sm:col-span-1">
+                            <dt class="text-sm font-medium text-foreground-500">
+                                عدد الاسئلة
+                            </dt>
+                            <dd class="mt-1 text-sm text-foreground-900">
+                                <!-- {{ quickScan.data.quick_questions.length }} -->
+                                {{ quickScan.data.quantity}}
+                            </dd>
+                        </div>
+                        <div class="sm:col-span-1">
+                            <dt class="text-sm font-medium text-foreground-500">
+                                المدة
+                            </dt>
+                            <dd class="mt-1 text-sm text-foreground-900">
+                                {{ quickScan.data.duration}}
+                            </dd>
+                        </div>
+                        <div class="sm:col-span-1">
+                            <dt class="text-sm font-medium text-foreground-500">
+                                التقييم
+                            </dt>
+                            <dd class="mt-1 text-sm text-foreground-900">
+                                {{ quickScan.data.rating }}
+                            </dd>
+                        </div>
+                        <div class="sm:col-span-1">
+                            <dt class="text-sm font-medium text-foreground-500">
+                                الموضوع
+                            </dt>
+                            <dd class="mt-1 text-sm text-foreground-900">
+                                {{ quickScan.data.title }}
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+
+            <button
+                class="mt-12 col-span-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-product-orange text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                type="button"
+                @click="startQuickScan">
+                اختبر نفسك
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    emits: ['startQuickScan'],
+    props: ['quickScan'],
+    methods: {
+        startQuickScan() {
+            this.$emit('startQuickScan')
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/quiz/QuizItem.vue b/resources/js/pages/quiz/QuizItem.vue
new file mode 100644
index 0000000..75e8bad
--- /dev/null
+++ b/resources/js/pages/quiz/QuizItem.vue
@@ -0,0 +1,142 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div :style="{backgroundImage: `url(${question.background_url})`}"
+         class="bg-center bg-cover bg-no-repeat h-72 rounded-t-lg shadow-lg w-full">
+        <div class="rounded-t-lg w-full h-full bg-opacity-50 flex flex-col justify-center px-12">
+            <div v-if="hasAnswer">
+                <TransitionRoot
+                    :show="isRight"
+                    appear
+                    as="template"
+                    enter="transform transition duration-[1200ms]"
+                    enter-from="opacity-0 rotate-[-120deg] scale-50"
+                    enter-to="opacity-100 rotate-0 scale-100"
+                    leave="transform duration-200 transition ease-in-out"
+                    leave-from="opacity-100 rotate-0 scale-100 "
+                    leave-to="opacity-0 scale-95 ">
+
+                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
+                        <CheckIcon aria-hidden="true" class="h-10 w-10 text-green-600"/>
+                    </div>
+                </TransitionRoot>
+
+                <TransitionRoot
+                    :show="!isRight"
+                    appear
+                    as="template"
+                    enter="transform transition duration-[1200ms]"
+                    enter-from="opacity-0 rotate-[-120deg] scale-50"
+                    enter-to="opacity-100 rotate-0 scale-100"
+                    leave="transform duration-200 transition ease-in-out"
+                    leave-from="opacity-100 rotate-0 scale-100 "
+                    leave-to="opacity-0 scale-95 ">
+
+                    <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mb-4">
+                        <XCircleIcon aria-hidden="true" class="h-10 w-10 text-red-600"/>
+                    </div>
+                </TransitionRoot>
+            </div>
+            <div class="text-center">
+                <h3 class="text-lg leading-6 font-semibold text-foreground">
+                    {{ question['question'] }}
+                </h3>
+            </div>
+        </div>
+    </div>
+    <div class="h-32 flex flex-col justify-center p-12">
+        <div class="grid grid-cols-2 gap-3">
+            <TransitionRoot
+                :show="!hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[400ms] ease-out"
+                enter-from="translate-x-4 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="trueButtonPressed"
+                        class="bg-light-success w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-dark-success hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                        type="button" @click="answer(1)">
+                    صح
+                </button>
+            </TransitionRoot>
+
+            <TransitionRoot
+                :show="!hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[400ms] ease-out"
+                enter-from="translate-x-4 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="falseButtonPressed"
+                        class="bg-light-error w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-dark-error hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                        type="button" @click="answer(0)">
+                    خطأ
+                </button>
+            </TransitionRoot>
+
+            <TransitionRoot
+                :show="hasAnswer"
+                appear
+                as="template"
+                enter="transform transition duration-[800ms] ease-out"
+                enter-from="translate-x-12 opacity-0"
+                enter-to="translate-x-0 opacity-100">
+
+                <button ref="trueButtonPressed"
+                        class="bg-product-orange col-span-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-foreground hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 sm:text-sm"
+                        type="button" @click="nextQuestion">
+                    التالي
+                </button>
+            </TransitionRoot>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import {CheckIcon, XCircleIcon} from '@heroicons/vue/24/outline'
+import {TransitionRoot} from '@headlessui/vue'
+
+export default defineComponent({
+    emits: ["questionAnswer", "nextQuestion"],
+    props: {
+        s3_image: '',
+        question: {
+            type: Object,
+            default: '/img/img.jpg',
+        }
+    },
+    data() {
+        return {
+            boolAnswer: null
+        }
+    },
+    components: {
+        CheckIcon,
+        XCircleIcon,
+        TransitionRoot
+    },
+    methods: {
+        answer(boolAnswer) {
+            this.boolAnswer = boolAnswer
+            this.$emit('questionAnswer', boolAnswer)
+        },
+        nextQuestion() {
+            this.$emit('nextQuestion')
+            this.resetQuestion()
+        },
+        resetQuestion() {
+            this.boolAnswer = null
+        }
+    },
+    computed: {
+        hasAnswer() {
+            return this.boolAnswer !== null
+        },
+        isRight() {
+            return this.boolAnswer === this.question.correct_answer
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/quiz/QuizLayout.vue b/resources/js/pages/quiz/QuizLayout.vue
new file mode 100644
index 0000000..a72958a
--- /dev/null
+++ b/resources/js/pages/quiz/QuizLayout.vue
@@ -0,0 +1,21 @@
+<template>
+    <div :style="{backgroundImage: `url(${imageUrl})`}"
+         class="bg-cover bg-no-repeat flex w-full h-screen justify-center items-center bg-background">
+        <div class="max-w-xl w-full p-3">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    props: {
+        imageUrl: {
+            type: String,
+            default: '/img/img.jpg'
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/quiz/QuizList.vue b/resources/js/pages/quiz/QuizList.vue
new file mode 100644
index 0000000..04aeeac
--- /dev/null
+++ b/resources/js/pages/quiz/QuizList.vue
@@ -0,0 +1,116 @@
+<template>
+    <QuizLayout :image-url="quizBegin ? '' : quiz.s3_image">
+        <div v-if="quizBegin">
+            <div v-if="idx < count" class="bg-semi rounded-lg shadow-xl">
+                <quiz-item :question="questions[idx]" :s3_image="quiz.s3_image" @nextQuestion="nextQuestion"
+                           @questionAnswer="answered"/>
+            </div>
+
+            <div v-else class="p-12 bg-semi rounded-lg shadow-lg w-full mt-8">
+                <div>
+                    <QuizResult :correct-answers="correctAnswers" :total-answers="count" :wrong-answers="wrongAnswers"
+                                @resetQuiz="resetQuiz"/>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            <TransitionRoot
+                :show="true"
+                appear
+                as="template"
+                enter="transform transition duration-[1500ms]"
+                enter-from="opacity-0 rotate-[-120deg] scale-50"
+                enter-to="opacity-100 rotate-0 scale-100"
+                leave="transform duration-200 transition ease-in-out"
+                leave-from="opacity-100 rotate-0 scale-100 "
+                leave-to="opacity-0 scale-95 ">
+                <start-quiz :quiz="quiz" @startQuiz="quizBegin = true"/>
+            </TransitionRoot>
+        </div>
+    </QuizLayout>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import QuizLayout from "./QuizLayout.vue";
+import QuizItem from "./QuizItem.vue";
+import {ChevronLeftIcon, ChevronRightIcon} from "@heroicons/vue/24/solid";
+import QuizResult from "./QuizResult.vue";
+import StartQuiz from "./StartQuiz.vue";
+import {TransitionRoot} from '@headlessui/vue'
+import {useForm} from '@inertiajs/vue3'
+
+export default defineComponent({
+    components: {StartQuiz, QuizResult, QuizItem, QuizLayout, ChevronLeftIcon, ChevronRightIcon, TransitionRoot},
+    props: ['quiz'],
+    data() {
+
+        return {
+            idx: 0,
+            selectedAnswer: null,
+            correctAnswers: 0,
+            wrongAnswers: 0,
+            quizBegin: false,
+            questions: this.quiz.data.quiz_questions,
+            userProgress: 0.0,
+        }
+    },
+    computed: {
+        count() {
+            return this.questions.length;
+        },
+        progress() {
+            return (this.idx / this.count * 100);
+        }
+    },
+    methods: {
+        answered(boolAnswer) {
+            this.selectedAnswer = boolAnswer
+            if (this.selectedAnswer === this.questions[this.idx].correct_answer) {
+                this.correctAnswers++
+            } else {
+                this.wrongAnswers++
+            }
+        },
+        nextQuestion() {
+            this.idx++
+            this.selectedAnswer = null
+            this.incrementUserProgress();
+        },
+        incrementUserProgress() {
+            if (this.userProgress <= this.progress) {
+                this.userProgress = this.progress;
+            }
+        },
+        showResults() {
+            this.idx++
+        },
+        resetQuiz() {
+            this.idx = 0
+            this.selectedAnswer = null
+            this.correctAnswers = 0
+            this.wrongAnswers = 0
+            this.quizBegin = false
+        }
+    },
+    mounted() {
+        console.log('Full Quiz Object:', this.quiz);
+        console.log('Quiz Data:', this.quiz.data);
+        console.log('Quiz Questions:', this.questions);
+        console.log('First Question:', this.questions[0]);
+    },
+    beforeUnmount() {
+        if (this.quiz.data.user_progress < 100) {
+            useForm({
+                user_progress: this.userProgress.toFixed(2),
+            }).put(route('quizzes.progress', this.quiz.data.slug), {
+                preserveScroll: true,
+            })
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/quiz/QuizResult.vue b/resources/js/pages/quiz/QuizResult.vue
new file mode 100644
index 0000000..89cd510
--- /dev/null
+++ b/resources/js/pages/quiz/QuizResult.vue
@@ -0,0 +1,97 @@
+<script>
+import RadialProgress from "vue3-radial-progress";
+
+export default {
+    emits: ['resetQuiz'],
+    props: {
+        correctAnswers: {
+            type: Number,
+            default: 0
+        },
+        wrongAnswers: {
+            type: Number,
+            default: 0
+        },
+        totalAnswers: {
+            type: Number,
+            default: 0
+        }
+    },
+    components: {
+        RadialProgress
+    },
+    computed: {
+        correctAnswersPercentage() {
+            if (this.correctAnswers / this.totalAnswers * 100 === 0)
+                return 0;
+            return Math.round(this.correctAnswers / this.totalAnswers * 100).toExponential(0)
+        },
+        wrongAnswersPercentage() {
+            if (this.wrongAnswers / this.totalAnswers * 100 === 0)
+                return 0;
+            return Math.round(this.wrongAnswers / this.totalAnswers * 100).toExponential(0)
+        },
+        score() {
+            return this.calculateScore();
+        },
+        pass() {
+            return this.calculateScore() >= 65
+        },
+        progressColor() {
+            return this.calculateScore() >= 65 ? '#A1C814' : '#EF4444'
+        }
+    },
+    methods: {
+        resetQuiz() {
+            this.$emit('resetQuiz');
+        },
+        exitQuiz() {
+            window.history.back();
+        },
+        calculateScore() {
+            return Math.round((this.correctAnswers / this.totalAnswers) * 100).toFixed(0)
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-6">
+        <h2 class="text-3xl font-semibold leading-loose text-primary text-center">نتيجة الاختبار</h2>
+        <div class="flex gap-3 items-center">
+            <RadialProgress :completed-steps="correctAnswersPercentage" :diameter="70" :inner-stroke-width="4"
+                            :stroke-width="4" :total-steps="100" inner-stroke-color="rgb(209 213 219)"
+                            start-color="hsl(142.1 76.2% 36.3%)" stop-color="hsl(142.1 76.2% 36.3%)">
+                <p class="m-2">{{ score }}%</p>
+            </RadialProgress>
+            <p class="leading-loose text-lg text-success">الاجابات الصحيحة:
+                <span class="leading-loose text-lg text-success">{{ correctAnswers }}</span>
+            </p>
+        </div>
+
+        <div class="flex gap-3 items-center">
+            <RadialProgress :completed-steps="wrongAnswersPercentage" :diameter="70" :inner-stroke-width="4"
+                            :stroke-width="4" :total-steps="100" inner-stroke-color="rgb(209 213 219)"
+                            start-color="hsl(0 84.2% 60.2%)" stop-color="hsl(0 84.2% 60.2%)">
+                <p class="m-2">{{ wrongAnswersPercentage }}%</p>
+            </RadialProgress>
+            <p class="leading-loose text-lg text-error">الاجابات الخاطئة: <span class="leading-loose text-lg text-error">{{
+                    wrongAnswers
+                }}</span></p>
+        </div>
+
+        <div class="mt-6 flow-root">
+            <button v-if="correctAnswers < 2"
+                    class="bg-product-orange w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                    type="button" @click="resetQuiz">
+                حاول مرة اخرى
+            </button>
+
+            <button v-else
+                    class="bg-product-orange w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                    type="button" @click="exitQuiz">
+                انهاء الاختبار
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/quiz/Show.vue b/resources/js/pages/quiz/Show.vue
new file mode 100644
index 0000000..32d1fca
--- /dev/null
+++ b/resources/js/pages/quiz/Show.vue
@@ -0,0 +1,21 @@
+<template>
+    <quiz-list :quiz="quiz"/>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import QuizList from "./QuizList.vue";
+import LessonLayout from "@/layouts/LessonLayout.vue";
+
+export default defineComponent({
+    layout: LessonLayout,
+    props: {
+        quiz: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    components: {QuizList}
+})
+</script>
diff --git a/resources/js/pages/quiz/StartQuiz.vue b/resources/js/pages/quiz/StartQuiz.vue
new file mode 100644
index 0000000..a7d4932
--- /dev/null
+++ b/resources/js/pages/quiz/StartQuiz.vue
@@ -0,0 +1,34 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div class="bg-background backdrop-filter backdrop-blur-lg bg-opacity-50 h-72 rounded-lg shadow-lg w-full">
+        <div class="rounded-lg w-full h-full flex flex-col justify-center px-12">
+            <div class="text-center">
+                <div class="text-lg leading-loose font-semibold text-foreground">
+                    {{
+                        'هذا الاختبار مكون من ' + quiz.data.quantity + 'أسئلة. ويجب عليك الاختيار إذا ما كانت الإجابة صحيحة أم خاطئة.'
+                    }}
+                </div>
+            </div>
+
+            <button ref="trueButtonPressed"
+                    class="mt-12 col-span-2 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-product-orange text-base font-medium text-background hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+                    type="button" @click="startQuiz">
+                ابدأ الاسئلة
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    emits: ['startQuiz'],
+    props: ['quiz'],
+    methods: {
+        startQuiz() {
+            this.$emit('startQuiz')
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/revision/Show.vue b/resources/js/pages/revision/Show.vue
new file mode 100644
index 0000000..db125b5
--- /dev/null
+++ b/resources/js/pages/revision/Show.vue
@@ -0,0 +1,110 @@
+<template>
+    <full-background-screen-layout :background-url="revision.s3_image">
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-8 lg:gap-8 p-4 lg:mx-12 lg:pt-24 pt-16">
+            <div class="hidden lg:block grid grid-rows-1 gap-3 col-span-1">
+                <RadioGroup v-model="groupSelected">
+                    <div class="grid grid-cols-1 gap-3">
+                        <RadioGroupOption v-for="(option, index) in revision.data.items" :key="option.id"
+                                          v-slot="{ active, checked }"
+                                          :value="option"
+                                          as="template">
+                            <div :class="[active ? 'ring-2 ring-offset-2 ring-foreground' : '', checked ? 'bg-product-orange border-product-orange text-white hover:bg-product-orange font-bolder' : 'bg-background border-foreground-200 text-gray-900 hover:bg-product-orange font-medium', 'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center sm:flex-1']">
+                                <RadioGroupLabel as="p" class="text-foreground">
+                                    {{ option.title }}
+                                </RadioGroupLabel>
+                            </div>
+                        </RadioGroupOption>
+                    </div>
+                </RadioGroup>
+            </div>
+
+            <div class="lg:hidden">
+                <select v-model="groupSelected"
+                        class="sticky mt-1 block w-full ps-3 pe-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
+                    <option v-for="(option, index) in revision.data.items" :key="option.id" :value="option">
+                        {{ option.title }}
+                    </option>
+                </select>
+            </div>
+
+            <div v-if="groupSelected" class="h-full w-full bg-background p-12 rounded-lg col-span-2 shadow-2xl">
+                <h3 class="title mt-2 text-foreground" v-text="groupSelected.title"/>
+                <div class="description mt-8 text-foreground" v-html="groupSelected.description"/>
+            </div>
+
+        </div>
+    </full-background-screen-layout>
+</template>
+
+<script>
+import {RadioGroup, RadioGroupLabel, RadioGroupOption} from '@headlessui/vue'
+import FullBackgroundScreenLayout from "@/layouts/FullBackgroundScreenLayout.vue";
+import LessonLayout from "@/layouts/LessonLayout.vue";
+import {useForm} from "@inertiajs/vue3";
+
+export default {
+    layout: LessonLayout,
+    props: {
+        revision: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    data() {
+        return {
+            groupSelected: this.revision.data.items[0],
+            currentPage: 1,
+            userProgress: 0.0
+        }
+    },
+    components: {
+        FullBackgroundScreenLayout, RadioGroup,
+        RadioGroupLabel,
+        RadioGroupOption,
+    },
+    computed: {
+        totalPages() {
+            return this.revision.data.items.length;
+        },
+        pageIndex() {
+            return this.currentPage - 1;
+        },
+        progress() {
+            return (this.currentPage / this.totalPages * 100);
+        }
+    },
+    watch: {
+        groupSelected: function (newVal, oldVal) {
+            let newIndex = this.revision.data.items.indexOf(newVal)
+            console.log(newIndex);
+            this.markComplete(newIndex);
+        }
+    },
+    methods: {
+        pageChanged(page) {
+            this.currentPage = page;
+            this.incrementUserProgress();
+        },
+        incrementUserProgress() {
+            if (this.userProgress <= this.progress) {
+                this.userProgress = this.progress;
+            }
+        },
+        markComplete(index) {
+            console.log('Index : ' + index + ' Checked.');
+            this.pageChanged(index + 1)
+        }
+    },
+    beforeUnmount() {
+        if (this.revision.data.user_progress < this.userProgress.toFixed(2)) {
+            useForm({
+                user_progress: this.userProgress.toFixed(2),
+            }).put(route('revisions.progress', this.revision.data.slug), {
+                preserveScroll: true,
+            })
+        }
+    }
+}
+</script>
diff --git a/resources/js/pages/sections/Index.vue b/resources/js/pages/sections/Index.vue
index 346cbd8..b92e606 100644
--- a/resources/js/pages/sections/Index.vue
+++ b/resources/js/pages/sections/Index.vue
@@ -8,7 +8,7 @@ import { watch } from 'vue';
 import CourseLayout from '@/layouts/CourseLayout.vue';
 import { Head } from '@inertiajs/vue3';
 import type { BreadcrumbItem, Flash } from '@/types';
-import AppLayout from '@/layouts/AppLayout.vue';
+import GuestLayout from '@/layouts/GuestLayout.vue';
 
 interface Props {
     section: Sections;
@@ -36,7 +36,7 @@ watch(
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <GuestLayout :breadcrumbs="breadcrumbs">
         <Head :title="section.data.meta_title" />
         <Toaster position="top-left" dir="rtl" richColors />
         <div class="max-w-3xl px-4 mx-auto py-12">
@@ -44,5 +44,5 @@ watch(
             <Separator class="my-8" />
             <SectionContent :canView="section.data.can?.view" :section="section.data" />
         </div>
-    </AppLayout>
+    </GuestLayout>
 </template>
diff --git a/resources/js/pages/sections/SectionHead.vue b/resources/js/pages/sections/SectionHead.vue
index 1b09e84..eaa6dac 100644
--- a/resources/js/pages/sections/SectionHead.vue
+++ b/resources/js/pages/sections/SectionHead.vue
@@ -36,7 +36,7 @@ const byuCourse = () => {
     <h1>
         <span class="mt-1 block text-2xl font-extrabold tracking-tight sm:text-3xl xl:text-4xl">
             <span class="text-primary block leading-loose">{{ section.title }}</span>
-            <span class="block leading-relaxed">{{ section.description }}</span>
+            <!-- <span class="block leading-relaxed">{{ section.description }}</span> -->
         </span>
     </h1>
     <p class="mt-3 text-base sm:mt-5 sm:text-xl lg:text-lg xl:text-xl" v-html="section.overview"></p>
@@ -57,10 +57,10 @@ const byuCourse = () => {
 
         <div v-if="$page.props.auth.user" class="flex items-center">
             <form @submit.prevent="addToFav">
-                <Button variant="outline" :class="{ 'text-product-pink': favStatus }" :disabled="form.processing" type="submit">
+                <Button variant="outline" :class="{ 'text-primary': favStatus }" :disabled="form.processing" type="submit">
                     <input v-model="form.section" type="hidden" />
                     <span class="inline-flex items-center text-sm sm:text-base">
-                        <HeartIcon :class="[favStatus ? 'fill-product-pink' : 'animate-bounce', 'h-5 w-5 sm:me-2']" />
+                        <HeartIcon :class="[favStatus ? 'fill-primary' : 'animate-bounce', 'h-5 w-5 sm:me-2']" />
                         {{ favStatus ? 'إلغاء من المفضلة' : 'اضف الى المفضلة' }}
                     </span>
                 </Button>
diff --git a/resources/js/pages/sections/partials/LessonItem.vue b/resources/js/pages/sections/partials/LessonItem.vue
index 8c63d49..a3dae45 100644
--- a/resources/js/pages/sections/partials/LessonItem.vue
+++ b/resources/js/pages/sections/partials/LessonItem.vue
@@ -14,7 +14,15 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { ref } from 'vue';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ref, watch } from 'vue';
 
 const page = usePage();
 const icons = {
@@ -37,15 +45,23 @@ interface Props {
 const props = defineProps<Props>();
 
 const needLogin = ref(false);
+const showVideoModal = ref(false);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const userProgress = ref(props.activity.item.user_progress);
 
 const visitActivity = () => {
     if (!props.canView) {
         return needLogin.value = true;
     }
-
+    if (props.activity.model === 'Visual') {
+        showVideoModal.value = true;
+        return;
+    }
     router.visit(props.activity.href);
 };
 
+
+
 const form = useForm({
     course_id: props.course_id,
     price: props.course_price,
@@ -57,6 +73,35 @@ const buyCourse = () => {
         onSuccess: () => needLogin.value = false,
     });
 };
+
+const videoClosed = () => {
+    if (videoRef.value) {
+        const currentTime = videoRef.value.currentTime;
+        const duration = videoRef.value.duration;
+        if (duration) {
+            userProgress.value = (currentTime / duration) * 100;
+            console.log('video closed on : ' + userProgress.value);
+        }
+    }
+    updateVisualProgress();
+};
+
+const updateVisualProgress = () => {
+    if (props.activity.item.user_progress < 100 && props.activity.item.user_progress < userProgress.value) {
+        useForm({
+            user_progress: userProgress.value.toFixed(2),
+        }).put(route('visuals.progress', props.activity.item.slug), {
+            preserveScroll: true,
+        });
+    }
+};
+
+// Watch for modal close to save progress
+watch(showVideoModal, (newValue, oldValue) => {
+    if (oldValue === true && newValue === false) {
+        videoClosed();
+    }
+});
 </script>
 
 <template>
@@ -71,8 +116,8 @@ const buyCourse = () => {
                 :stroke-width="4"
                 :inner-stroke-width="4"
                 inner-stroke-color="#f9981030"
-                start-color="#017ea1"
-                stop-color="#017ea1"
+                start-color="#F99810"
+                stop-color="#F99810"
             >
                 <Component :is="icons[activity.model]" class="text-primary h-8 w-8 transform stroke-current transition group-hover:rotate-[-12deg]" />
             </RadialProgress>
@@ -82,17 +127,33 @@ const buyCourse = () => {
             <div @click.prevent="visitActivity" class="focus:outline-none">
                 <span aria-hidden="true" class="absolute inset-0" />
                 <div class="flex justify-between">
-                    <p class="text-sm font-medium text-gray-900">
+                    <p class="text-sm font-medium text-foreground-900">
                         {{ activity.title }}
                     </p>
-                    <p class="truncate text-sm text-gray-500">
-                        {{ activity.item.duration }}
+                    <p class="truncate text-sm text-foreground-500">
+                        {{ activity.item.duration }} دقيقة
                     </p>
                 </div>
             </div>
         </div>
     </div>
 
+    <!-- Video Modal -->
+    <Dialog v-model:open="showVideoModal">
+        <DialogContent class="max-w-4xl">
+            <div class="w-full aspect-video bg-background">
+                <video
+                    v-if="activity.item.video_url"
+                    ref="videoRef"
+                    :src="`${activity.item.video_url}`"
+                    :poster="activity.item.video_poster ? `${activity.item.video_poster}` : undefined"
+                    controls
+                    class="w-full h-full rounded"
+                />
+            </div>
+        </DialogContent>
+    </Dialog>
+
     <AlertDialog :open="needLogin">
         <AlertDialogContent>
             <AlertDialogHeader>
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index 7dacd58..b625309 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -10,7 +10,7 @@ import SettingsLayout from '@/layouts/settings/Layout.vue';
 
 const breadcrumbItems: BreadcrumbItem[] = [
     {
-        title: 'Appearance settings',
+        title: 'إعدادات المظهر',
         href: '/settings/appearance',
     },
 ];
@@ -18,11 +18,11 @@ const breadcrumbItems: BreadcrumbItem[] = [
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Appearance settings" />
+        <Head title="إعدادات المظهر" />
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Appearance settings" description="Update your account's appearance settings" />
+                <HeadingSmall title="إعدادات المظهر" description="تحديث إعدادات مظهر حسابك" />
                 <AppearanceTabs />
             </div>
         </SettingsLayout>
diff --git a/resources/js/pages/settings/Books.vue b/resources/js/pages/settings/Books.vue
new file mode 100644
index 0000000..9c2662b
--- /dev/null
+++ b/resources/js/pages/settings/Books.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import { Head } from '@inertiajs/vue3';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { type BreadcrumbItem } from '@/types';
+import { type Books } from '@/types/books';
+
+interface Props {
+    books: Books;
+}
+
+defineProps<Props>();
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'كتبي',
+        href: '/settings/books',
+    },
+];
+</script>
+
+<template>
+    <Head title="كتبي" />
+
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <div class="mx-auto max-w-7xl p-4">
+            <div v-if="books.data.length === 0" class="flex flex-col items-center justify-center w-full rounded-md p-5">
+                    <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                        <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                        <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                        <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                        <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                        <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                        <circle cx="62" cy="48" r="2" fill="#fff"/>
+                        <circle cx="78" cy="48" r="2" fill="#fff"/>
+                        <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+                    </svg>
+                    <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                        <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد لديك أي كتب متاحة حالياً</span>
+                    </h1>
+                    <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
+            </div>
+
+            <div v-else class="py-12">
+                <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                    <main>
+                        <div class="max-w-7xl">
+                            <div class="rounded-lg">
+                                <div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 sm:py-16 lg:max-w-7xl lg:px-8">
+                                    <div class="mt-16 space-y-24">
+                                        <div
+                                            v-for="book in books.data"
+                                            :key="book.name"
+                                            class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-8"
+                                        >
+                                            <div class="col-span-6 mt-6 space-y-6 p-4 text-center md:text-right lg:mt-0">
+                                                <h3 class="text-2xl font-bold">{{ book.name }}</h3>
+                                                <div class="text-md mt-2 space-y-2 font-medium" v-html="book.description"></div>
+
+                                                <!-- Download button for owned books -->
+                                                <Button v-if="book.isOwned" as="a" :href="book.downloadUrl">
+                                                    تحميل الكتاب
+                                                </Button>
+                                            </div>
+                                            <div class="col-span-4 col-start-8 flex h-full items-center justify-center">
+                                                <div class="relative overflow-hidden lg:w-full">
+                                                    <img
+                                                        :alt="book.imageAlt"
+                                                        :src="book.imageSrc"
+                                                        class="mx-auto rounded-lg shadow-xl lg:w-full"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/pages/settings/Courses.vue b/resources/js/pages/settings/Courses.vue
new file mode 100644
index 0000000..78175f6
--- /dev/null
+++ b/resources/js/pages/settings/Courses.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import AppLayout from '@/layouts/AppLayout.vue';
+import CourseCard from '@/pages/courses/partials/CourseCard.vue';
+import { type BreadcrumbItem } from '@/types';
+import { type Courses } from '@/types/courses';
+
+interface Props {
+    courses: Courses;
+}
+
+defineProps<Props>();
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'دوراتي',
+        href: '/settings/courses',
+    },
+];
+</script>
+
+<template>
+    <Head title="دوراتي" />
+
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <div class="mx-auto max-w-7xl p-4">
+            <div v-if="courses.data.length > 0" class="text-center py-12">
+                <CourseCard :courses="courses.data" />
+            </div>
+
+            <div v-else class="flex flex-col items-center justify-center w-full rounded-md p-5">
+                    <svg class="mb-6" width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <ellipse cx="70" cy="90" rx="50" ry="8" fill="#FDE68A"/>
+                        <circle cx="70" cy="50" r="24" fill="#FBBF24"/>
+                        <ellipse cx="70" cy="60" rx="18" ry="8" fill="#FFF"/>
+                        <rect x="56" y="60" width="28" height="16" rx="4" fill="#F59E42"/>
+                        <rect x="60" y="64" width="20" height="8" rx="2" fill="#FFF"/>
+                        <rect x="66" y="68" width="8" height="2" rx="1" fill="#F59E42"/>
+                        <circle cx="62" cy="48" r="2" fill="#fff"/>
+                        <circle cx="78" cy="48" r="2" fill="#fff"/>
+                        <rect x="68" y="54" width="4" height="2" rx="1" fill="#fff"/>
+                    </svg>
+                    <h1 class="text-3xl md:text-4xl leading-tight font-extrabold text-center">
+                        <span class="bg-gradient-to-r from-orange-500 via-orange-400 to-orange-300 bg-clip-text text-transparent drop-shadow">لا توجد لديك أي دورات متاحة حالياً</span>
+                    </h1>
+                    <p class="mt-4 text-orange-500 text-lg">تابعنا ليصلك كل جديد!</p>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index f4c35c1..d7ad6b7 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -13,7 +13,7 @@ import { type BreadcrumbItem } from '@/types';
 
 const breadcrumbItems: BreadcrumbItem[] = [
     {
-        title: 'Password settings',
+        title: 'تغيير كلمة المرور',
         href: '/settings/password',
     },
 ];
@@ -52,15 +52,15 @@ const updatePassword = () => {
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Password settings" />
+        <Head title="تغيير كلمة المرور" />
 
         <SettingsLayout>
             <div class="space-y-6">
-                <HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
+                <HeadingSmall title="تحديث كلمة المرور" description="تأكد من أن حسابك يستخدم كلمة مرور طويلة وعشوائية للبقاء آمنًا" />
 
                 <form @submit.prevent="updatePassword" class="space-y-6">
                     <div class="grid gap-2">
-                        <Label for="current_password">Current password</Label>
+                        <Label for="current_password">كلمة المرور الحالية</Label>
                         <Input
                             id="current_password"
                             ref="currentPasswordInput"
@@ -68,13 +68,13 @@ const updatePassword = () => {
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="current-password"
-                            placeholder="Current password"
+                            placeholder="كلمة المرور الحالية"
                         />
                         <InputError :message="form.errors.current_password" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="password">New password</Label>
+                        <Label for="password">كلمة المرور الجديدة</Label>
                         <Input
                             id="password"
                             ref="passwordInput"
@@ -82,26 +82,26 @@ const updatePassword = () => {
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="new-password"
-                            placeholder="New password"
+                            placeholder="كلمة المرور الجديدة"
                         />
                         <InputError :message="form.errors.password" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="password_confirmation">Confirm password</Label>
+                        <Label for="password_confirmation">تأكيد كلمة المرور</Label>
                         <Input
                             id="password_confirmation"
                             v-model="form.password_confirmation"
                             type="password"
                             class="mt-1 block w-full"
                             autocomplete="new-password"
-                            placeholder="Confirm password"
+                            placeholder="تأكيد كلمة المرور"
                         />
                         <InputError :message="form.errors.password_confirmation" />
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="form.processing">Save password</Button>
+                        <Button :disabled="form.processing">حفظ كلمة المرور</Button>
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -109,7 +109,7 @@ const updatePassword = () => {
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">تم الحفظ.</p>
                         </Transition>
                     </div>
                 </form>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index 8c4e9f1..6f9e624 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -20,7 +20,7 @@ defineProps<Props>();
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
-        title: 'Profile settings',
+        title: 'إعدادات الملف الشخصي',
         href: '/settings/profile',
     },
 ];
@@ -35,6 +35,14 @@ const form = useForm({
     phone: user.phone,
 });
 
+const onPhoneInput = (phoneNumber: string, phoneObject: any) => {
+    if (phoneObject?.number) {
+        form.phone = phoneObject.number;
+    } else {
+        form.phone = phoneNumber;
+    }
+};
+
 const submit = () => {
     form.patch(route('profile.update'), {
         preserveScroll: true,
@@ -47,52 +55,66 @@ const submit = () => {
         <Head title="Profile settings" />
 
         <SettingsLayout>
-            <div class="flex flex-col space-y-6">
-                <HeadingSmall title="Profile information" description="Update your name and email address" />
+            <div class="flex flex-col space-y-6 overflow-visible">
+                <HeadingSmall title="معلومات الملف الشخصي" description="تحديث اسمك وعنوان بريدك الإلكتروني" />
 
-                <form @submit.prevent="submit" class="space-y-6">
+                <form @submit.prevent="submit" class="space-y-6 overflow-visible">
                     <div class="grid gap-2">
-                        <Label for="first_name">First Name</Label>
+                        <Label for="first_name">الاسم الأول</Label>
                         <Input
                             id="first_name"
                             class="mt-1 block w-full"
                             v-model="form.first_name"
                             required
                             autocomplete="first_name"
-                            placeholder="First Name"
+                            placeholder="الاسم الأول"
                         />
                         <InputError class="mt-2" :message="form.errors.first_name" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="last_name">Last Name</Label>
+                        <Label for="last_name">الاسم الأخير</Label>
                         <Input
                             id="last_name"
                             class="mt-1 block w-full"
                             v-model="form.last_name"
                             required
                             autocomplete="last_name"
-                            placeholder="Last Name"
+                            placeholder="الاسم الأخير"
                         />
                         <InputError class="mt-2" :message="form.errors.last_name" />
                     </div>
 
-                    <div class="grid gap-2">
-                        <Label for="phone">Phone</Label>
-                        <Input
-                            id="phone"
-                            type="text"
-                            class="mt-1 block w-full"
+                    <div class="grid gap-2 overflow-visible">
+                        <Label for="phone">رقم الهاتف</Label>
+                        <div class="relative overflow-visible">
+                        <vue-tel-input
                             v-model="form.phone"
-                            required
-                            autocomplete="username"
-                            placeholder="Email address"
+                            mode="international"
+                            :input-options="{
+                                placeholder: '10 1234 5678',
+                                id: 'phone',
+                                tabindex: 1,
+                                required: true,
+                                autofocus: true
+                            }"
+                            :dropdown-options="{
+                                showSearchBox: true,
+                                showDialCodeInSelection: true,
+                                showFlags: true
+                            }"
+                            :disabled="form.processing"
+                            default-country="EG"
+                            :preferred-countries="['EG', 'SA', 'AE', 'KW', 'QA']"
+                            :ignored-countries="['IL']"
+                            auto-format
                         />
-                        <InputError class="mt-2" :message="form.errors.phone" />
+                    </div>
+                    <InputError :message="form.errors.phone" />
                     </div>
 
                     <div class="grid gap-2">
-                        <Label for="email">Email address</Label>
+                        <Label for="email">البريد الإلكتروني</Label>
                         <Input
                             id="email"
                             type="email"
@@ -100,31 +122,31 @@ const submit = () => {
                             v-model="form.email"
                             required
                             autocomplete="username"
-                            placeholder="Email address"
+                            placeholder="البريد الإلكتروني"
                         />
                         <InputError class="mt-2" :message="form.errors.email" />
                     </div>
 
                     <div v-if="mustVerifyEmail && !user.email_verified_at">
                         <p class="text-muted-foreground -mt-4 text-sm">
-                            Your email address is unverified.
+                            عنوان بريدك الإلكتروني غير مؤكد.
                             <Link
                                 :href="route('verification.send')"
                                 method="post"
                                 as="button"
                                 class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
                             >
-                                Click here to resend the verification email.
+                                انقر هنا لإعادة إرسال بريد التحقق.
                             </Link>
                         </p>
 
                         <div v-if="status === 'verification-link-sent'" class="mt-2 text-sm font-medium text-green-600">
-                            A new verification link has been sent to your email address.
+                            تم إرسال رابط تحقق جديد إلى عنوان بريدك الإلكتروني.
                         </div>
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="form.processing">Save</Button>
+                        <Button :disabled="form.processing">حفظ</Button>
 
                         <Transition
                             enter-active-class="transition ease-in-out"
@@ -132,7 +154,7 @@ const submit = () => {
                             leave-active-class="transition ease-in-out"
                             leave-to-class="opacity-0"
                         >
-                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
+                            <p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">تم الحفظ.</p>
                         </Transition>
                     </div>
                 </form>
@@ -142,3 +164,15 @@ const submit = () => {
         </SettingsLayout>
     </AppLayout>
 </template>
+
+<style>
+/* Ensure vue-tel-input dropdown is not clipped by parent containers */
+.vue-tel-input {
+    position: relative;
+    overflow: visible !important;
+}
+
+.vti__dropdown-list {
+    z-index: 9999 !important;
+}
+</style>
diff --git a/resources/js/pages/todo/Show.vue b/resources/js/pages/todo/Show.vue
new file mode 100644
index 0000000..857fc10
--- /dev/null
+++ b/resources/js/pages/todo/Show.vue
@@ -0,0 +1,77 @@
+<template>
+    <div v-if="todoBegin">
+        <half-screen-layout :is="todo.layout" class="bg-GoetheBeige">
+
+            <!-- Right side code -->
+            <template v-slot:right-side>
+                <div class="mt-12 lg:p-12">
+                    <button ref="trueButtonPressed"
+                            class="col-span-2 lg:rounded-lg w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 bg-secondary-600 text-base font-semibold text-white hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 sm:text-md"
+                            type="button" @click="showTodo(1)">
+                        {{ todo.data.title }}
+                    </button>
+                </div>
+            </template>
+
+            <!-- Left side code -->
+            <div class="description" v-html="todo.data.description"/>
+        </half-screen-layout>
+    </div>
+
+    <TodoLayout v-else :image-url="todo.data.s3_image">
+        <TransitionRoot
+            :show="!todoBegin"
+            appear
+            as="template"
+            enter="transform transition duration-[1500ms]"
+            enter-from="opacity-0 rotate-[-120deg] scale-50"
+            enter-to="opacity-100 rotate-0 scale-100"
+            leave="transform duration-200 transition ease-in-out"
+            leave-from="opacity-100 rotate-0 scale-100 "
+            leave-to="opacity-0 scale-95 ">
+
+            <StartTodo @startTodo="todoBegin = true"/>
+
+        </TransitionRoot>
+    </TodoLayout>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+import StartTodo from "./StartTodo.vue"
+import TodoLayout from "@/layouts/TodoLayout.vue";
+import HalfScreenLayout from '@/layouts/HalfScreenLayout.vue'
+import {TransitionRoot} from "@headlessui/vue";
+import LessonLayout from "@/layouts/LessonLayout.vue";
+import {useForm} from "@inertiajs/vue3";
+
+export default defineComponent({
+    layout: LessonLayout,
+    props: {
+        todo: {
+            type: Object,
+            default: {},
+            required: true
+        }
+    },
+    data() {
+        return {
+            todoBegin: false
+        }
+    },
+    methods: {
+        showTodo(page) {
+        }
+    },
+    components: {TodoLayout, HalfScreenLayout, StartTodo, TransitionRoot},
+    beforeUnmount() {
+        if (this.todo.data.user_progress < 100) {
+            useForm({
+                user_progress: 100,
+            }).put(route('todos.progress', this.todo.data.slug), {
+                preserveScroll: true,
+            })
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/todo/StartTodo.vue b/resources/js/pages/todo/StartTodo.vue
new file mode 100644
index 0000000..4205cfb
--- /dev/null
+++ b/resources/js/pages/todo/StartTodo.vue
@@ -0,0 +1,28 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <button
+        class="lg:max-w-md lg:mb-12 col-span-2 w-full inline-flex justify-center lg:rounded-md border border-transparent shadow-sm px-4 py-2 bg-product-orange text-base font-medium text-white hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm"
+        type="button"
+        @click="startTodo">
+        مارس بنفسك
+    </button>
+</template>
+
+<script>
+import {defineComponent} from "vue";
+
+export default defineComponent({
+    emits: ['startTodo'],
+    props: {
+        title: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        startTodo() {
+            this.$emit('startTodo')
+        }
+    }
+})
+</script>
diff --git a/resources/js/pages/tools/Index.vue b/resources/js/pages/tools/Index.vue
new file mode 100644
index 0000000..fb0a566
--- /dev/null
+++ b/resources/js/pages/tools/Index.vue
@@ -0,0 +1,19 @@
+<template>
+    <GuestLayout title="الأدوات">
+        <div class="max-w-5xl mx-auto px-4 py-12">
+            <h1 class="text-3xl font-bold mb-8">الأدوات</h1>
+            <ul class="list-disc pe-6 space-y-3">
+                <li><Link :href="route('tools.position-size')">حساب حجم الصفقة (Position Size)</Link></li>
+                <li><Link :href="route('tools.pip-value')">قيمة النقطة (Pip Value)</Link></li>
+                <li><Link :href="route('tools.margin-calculator')">حاسبة الهامش (Margin Calculator)</Link></li>
+            </ul>
+        </div>
+    </GuestLayout>
+</template>
+
+<script setup>
+import GuestLayout from '@/layouts/GuestLayout.vue'
+import {Link} from '@inertiajs/vue3'
+</script>
+
+
diff --git a/resources/js/pages/tools/margin-calculator/Index.vue b/resources/js/pages/tools/margin-calculator/Index.vue
new file mode 100644
index 0000000..33c8596
--- /dev/null
+++ b/resources/js/pages/tools/margin-calculator/Index.vue
@@ -0,0 +1,14 @@
+<template>
+    <GuestLayout title="حاسبة الهامش">
+        <div class="max-w-5xl mx-auto px-4 py-12">
+            <h1 class="text-3xl font-bold mb-8">حاسبة الهامش (Margin Calculator)</h1>
+            <p>صفحة جاهزة لإضافة الحاسبة لاحقًا.</p>
+        </div>
+    </GuestLayout>
+</template>
+
+<script setup>
+import GuestLayout from '@/layouts/GuestLayout.vue'
+</script>
+
+
diff --git a/resources/js/pages/tools/pip-value/Index.vue b/resources/js/pages/tools/pip-value/Index.vue
new file mode 100644
index 0000000..7b0662f
--- /dev/null
+++ b/resources/js/pages/tools/pip-value/Index.vue
@@ -0,0 +1,14 @@
+<template>
+    <GuestLayout title="قيمة النقطة">
+        <div class="max-w-5xl mx-auto px-4 py-12">
+            <h1 class="text-3xl font-bold mb-8">قيمة النقطة (Pip Value)</h1>
+            <p>صفحة جاهزة لإضافة الحاسبة لاحقًا.</p>
+        </div>
+    </GuestLayout>
+</template>
+
+<script setup>
+import GuestLayout from '@/layouts/GuestLayout.vue'
+</script>
+
+
diff --git a/resources/js/pages/tools/position-size/Index.vue b/resources/js/pages/tools/position-size/Index.vue
new file mode 100644
index 0000000..5d260b4
--- /dev/null
+++ b/resources/js/pages/tools/position-size/Index.vue
@@ -0,0 +1,14 @@
+<template>
+    <GuestLayout title="حساب حجم الصفقة">
+        <div class="max-w-5xl mx-auto px-4 py-12">
+            <h1 class="text-3xl font-bold mb-8">حساب حجم الصفقة (Position Size)</h1>
+            <p>صفحة جاهزة لإضافة الحاسبة لاحقًا.</p>
+        </div>
+    </GuestLayout>
+</template>
+
+<script setup>
+import GuestLayout from '@/layouts/GuestLayout.vue'
+</script>
+
+
diff --git a/resources/js/pages/visual/Index.vue b/resources/js/pages/visual/Index.vue
new file mode 100644
index 0000000..4c42228
--- /dev/null
+++ b/resources/js/pages/visual/Index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "Index"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/visual/Show.vue b/resources/js/pages/visual/Show.vue
new file mode 100644
index 0000000..7d5d9a6
--- /dev/null
+++ b/resources/js/pages/visual/Show.vue
@@ -0,0 +1,19 @@
+<script setup>
+import VideoModal from "@/components/modals/VideoModal.vue";
+import VideoPlayer from "@/components/VideoPlayer.vue";
+import '@videojs/themes/dist/fantasy/index.css';
+
+defineProps({
+    visual: Object
+})
+
+const play = () => {
+    this.$refs.videoPlayer.player.play()
+}
+</script>
+
+<template>
+    <VideoModal>
+        <VideoPlayer ref="videoPlayer" :options="visual.data.videoOptions" class="vjs-theme-fantasy"/>
+    </VideoModal>
+</template>
diff --git a/resources/js/pages/webinars/Index.vue b/resources/js/pages/webinars/Index.vue
new file mode 100644
index 0000000..7c369b8
--- /dev/null
+++ b/resources/js/pages/webinars/Index.vue
@@ -0,0 +1,89 @@
+<template>
+    <GuestLayout title="Webinars">
+        <template #header>
+            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                <h1 class="text-3xl font-bold mb-8">
+                    الندوات
+                </h1>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+
+                <main>
+                    <div class="max-w-7xl">
+                        <FullCalendar ref="fullCalendar" :options="calendarOptions"
+                                      class="h-screen p-8 rounded-lg"/>
+                        <Modal :closeable="true" :show="show" max-width="2xl" @close="close">
+                            <Webinar v-if="show" :current-event="currentEvent"/>
+                        </Modal>
+                    </div>
+                </main>
+
+            </div>
+        </div>
+    </GuestLayout>
+</template>
+
+<script>
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+import interactionPlugin from "@fullcalendar/interaction";
+import Webinar from "./Webinar.vue";
+import GuestLayout from "@/layouts/GuestLayout.vue";
+import Modal from '@/components/Modal.vue'
+
+export default {
+    components: {FullCalendar, Webinar, GuestLayout, Modal},
+    data() {
+        return {
+            // webinars: [],
+            show: false,
+            showModal: false,
+            currentEvent: {},
+            calendarOptions: {
+                events: '/events',
+                initialView: "dayGridMonth",
+                eventClick: this.handleEventClick,
+                selectable: true,
+                locale: 'ar',
+                nowIndicator: true,
+                headerToolbar: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+                },
+                eventTimeFormat: {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                },
+                timeFormat: 'HH:mm:ss',
+                plugins: [
+                    dayGridPlugin,
+                    interactionPlugin,
+                    timeGridPlugin,
+                    listPlugin,
+                ],
+            },
+        };
+    },
+    methods: {
+        handleEventClick(event) {
+            this.currentEvent = event;
+            this.show = true;
+        },
+        close() {
+            this.show = false;
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/pages/webinars/Webinar.vue b/resources/js/pages/webinars/Webinar.vue
new file mode 100644
index 0000000..bbfba70
--- /dev/null
+++ b/resources/js/pages/webinars/Webinar.vue
@@ -0,0 +1,83 @@
+<template>
+    <!-- This example requires Tailwind CSS v2.0+ -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div class="px-4 py-5 sm:px-6">
+            <h3 class="text-lg leading-6 font-medium text-gray-900">{{ currentEvent.title }}</h3>
+            <p class="mt-1 max-w-2xl text-sm text-gray-500">Personal details and application.</p>
+        </div>
+        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+                <div class="sm:col-span-1">
+                    <dt class="text-sm font-medium text-gray-500">Full name</dt>
+                    <dd class="mt-1 text-sm text-gray-900">Margot Foster</dd>
+                </div>
+                <div class="sm:col-span-1">
+                    <dt class="text-sm font-medium text-gray-500">Application for</dt>
+                    <dd class="mt-1 text-sm text-gray-900">Backend Developer</dd>
+                </div>
+                <div class="sm:col-span-1">
+                    <dt class="text-sm font-medium text-gray-500">Email address</dt>
+                    <dd class="mt-1 text-sm text-gray-900">margotfoster@example.com</dd>
+                </div>
+                <div class="sm:col-span-1">
+                    <dt class="text-sm font-medium text-gray-500">Date & Time</dt>
+                    <dd class="mt-1 text-sm text-gray-900">{{ currentEvent.start }}</dd>
+                </div>
+                <div class="sm:col-span-2">
+                    <dt class="text-sm font-medium text-gray-500">About</dt>
+                    <dd class="mt-1 text-sm text-gray-900">Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim
+                        incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit
+                        nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing
+                        reprehenderit deserunt qui eu.
+                    </dd>
+                </div>
+                <div class="sm:col-span-2">
+                    <dt class="text-sm font-medium text-gray-500">Attachments</dt>
+                    <dd class="mt-1 text-sm text-gray-900">
+                        <ul class="border border-gray-200 rounded-md divide-y divide-gray-200" role="list">
+                            <li class="ps-3 pe-4 py-3 flex items-center justify-between text-sm">
+                                <div class="w-0 flex-1 flex items-center">
+                                    <PaperClipIcon aria-hidden="true" class="flex-shrink-0 h-5 w-5 text-gray-400"/>
+                                    <span class="ms-2 flex-1 w-0 truncate"> resume_back_end_developer.pdf </span>
+                                </div>
+                                <div class="ms-4 flex-shrink-0">
+                                    <a class="font-medium text-primary-600 hover:text-primary-500" href="#">
+                                        Download </a>
+                                </div>
+                            </li>
+                            <li class="ps-3 pe-4 py-3 flex items-center justify-between text-sm">
+                                <div class="w-0 flex-1 flex items-center">
+                                    <PaperClipIcon aria-hidden="true" class="flex-shrink-0 h-5 w-5 text-gray-400"/>
+                                    <span class="ms-2 flex-1 w-0 truncate"> coverletter_back_end_developer.pdf </span>
+                                </div>
+                                <div class="ms-4 flex-shrink-0">
+                                    <a class="font-medium text-primary-600 hover:text-primary-500" href="#">
+                                        Download </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </dd>
+                </div>
+            </dl>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import {PaperClipIcon} from '@heroicons/vue/24/solid'
+
+export default {
+    props: ["currentEvent"],
+    components: {
+        PaperClipIcon
+    },
+    methods: {
+        hidePopup() {
+            const calendar = document.getElementById("calendar");
+            this.$emit('hide')
+            calendar.classList.remove("opacity-50");
+        },
+    }
+};
+</script>
diff --git a/resources/js/pages/welcome/Hero.vue b/resources/js/pages/welcome/Hero.vue
index 29e132b..fc0afd1 100644
--- a/resources/js/pages/welcome/Hero.vue
+++ b/resources/js/pages/welcome/Hero.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button';
 import { Settings } from '@/types';
-import { Link } from '@inertiajs/vue3';
+
+import { Link, usePage } from '@inertiajs/vue3';
+
+const page = usePage();
+const courses = page.props.courses;
 
 interface Props {
     settings: Settings;
@@ -20,7 +24,7 @@ defineProps<Props>();
                 </h1>
                 <p class="text-md mt-2 font-normal tracking-tight xl:text-xl" v-html="settings.site_description" />
                 <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
-                    <Button class="mt-4 w-64" size="lg">
+                    <Button v-if="courses.data.length > 0" class="mt-4 w-64" size="lg">
                         <Link :href="route('courses.index')">تصفح الدورات</Link>
                     </Button>
                 </div>
diff --git a/resources/js/pages/welcome/Index.vue b/resources/js/pages/welcome/Index.vue
index 14105d9..65eda1a 100644
--- a/resources/js/pages/welcome/Index.vue
+++ b/resources/js/pages/welcome/Index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppLayout from '@/Layouts/AppLayout.vue';
+import AppLayout from '@/layouts/AppLayout.vue';
 import CourseCard from '@/pages/courses/partials/CourseCard.vue';
 
 interface Props {
diff --git a/resources/js/pages/welcome/partials/Features.vue b/resources/js/pages/welcome/partials/Features.vue
index 7fdcb18..60030b3 100644
--- a/resources/js/pages/welcome/partials/Features.vue
+++ b/resources/js/pages/welcome/partials/Features.vue
@@ -46,7 +46,7 @@ const transferFeatures = [
             </svg>
 
             <div class="relative">
-                <h2 class="text-center text-3xl leading-8 font-bold tracking-tight sm:text-4xl">
+                <h2 class="text-primary text-center text-3xl leading-8 font-bold tracking-tight sm:text-4xl">
                     أفضل طريقة لتعلم التداول هو ان تتداول بنفسك.. هل أنت جاهز؟
                 </h2>
                 <p class="mx-auto mt-4 max-w-3xl text-center text-xl">
@@ -56,7 +56,7 @@ const transferFeatures = [
 
             <div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
                 <div class="relative">
-                    <h3 class="text-2xl font-bold tracking-tight sm:text-3xl">
+                    <h3 class="text-primary text-2xl font-bold tracking-tight sm:text-3xl">
                         تدرب على استخدام أحدث أساليب التداول والاستثمار في أسواق المال
                     </h3>
                     <p class="mt-3 text-lg">
@@ -68,9 +68,9 @@ const transferFeatures = [
                         <div v-for="item in transferFeatures" :key="item.id" class="relative">
                             <dt>
                                 <div class="absolute flex h-12 w-12 items-center justify-center rounded-xl">
-                                    <component :is="item.icon" aria-hidden="true" class="h-8 w-8" />
+                                    <component :is="item.icon" aria-hidden="true" class="h-8 w-8 text-primary" />
                                 </div>
-                                <p class="ms-16 text-lg leading-6 font-bold">{{ item.name }}</p>
+                                <p class="ms-16 text-lg leading-6 font-bold text-primary">{{ item.name }}</p>
                             </dt>
                             <dd class="ms-16 mt-2 text-base">{{ item.description }}</dd>
                         </div>
diff --git a/resources/js/translations/ar.json b/resources/js/translations/ar.json
index d8d6831..93ddce6 100644
--- a/resources/js/translations/ar.json
+++ b/resources/js/translations/ar.json
@@ -18,5 +18,26 @@
     "Platform": "المنصة",
     "Price": "المبلغ",
     "Type": "النوع",
-    "Unknown": "غير معروف"
+    "Unknown": "غير معروف",
+    "My Profile": "ملفي الشخصي",
+    "My Courses": "دوراتي",
+    "My Books": "كتبي",
+    "Go To Home Page": "الذهاب إلى الصفحة الرئيسية",
+    "Glossary": "المصطلحات",
+    "Register": "حساب جديد",
+    "Login": "تسجيل الدخول",
+    "Enter your email to receive a password reset link": "أدخل بريدك الإلكتروني لتلقي رابط إعادة تعيين كلمة المرور",
+    "Forgot password": "نسيت كلمة المرور",
+    "Email address": "البريد الإلكتروني",
+    "Email password reset link": "إرسال رابط إعادة تعيين كلمة المرور",
+    "Or, return to": "أو العودة ل",
+    "log in": "تسجيل الدخول",
+    "Settings": "الإعدادات",
+    "Log out": "تسجيل الخروج",
+    "FAQs": "الأسئلة الشائعة",
+    "Verify email": "تأكيد البريد الإلكتروني",
+    "Please verify your email address by clicking on the link we just emailed to you": "يرجى تأكيد عنوان بريدك الإلكتروني بالنقر على الرابط الذي أرسلناه للتو إلى بريدك الإلكتروني.",
+    "A new verification link has been sent to the email address you provided during registration": "تم إرسال رابط تحقق جديد إلى عنوان البريد الإلكتروني الذي قدمته أثناء التسجيل.",
+    "Resend verification email": "إعادة إرسال بريد التحقق"
+
 }
diff --git a/resources/js/translations/en.json b/resources/js/translations/en.json
index 82638c6..f9dba09 100644
--- a/resources/js/translations/en.json
+++ b/resources/js/translations/en.json
@@ -18,5 +18,11 @@
     "Platform": "Platform",
     "Price": "Price",
     "Type": "Type",
-    "Unknown": "Unknown"
+    "Unknown": "Unknown",
+    "My Courses": "My Courses",
+    "Glossary": "Glossary",
+    "Verify email": "Verify email",
+    "Please verify your email address by clicking on the link we just emailed to you": "Please verify your email address by clicking on the link we just emailed to you.",
+    "A new verification link has been sent to the email address you provided during registration": "A new verification link has been sent to the email address you provided during registration.",
+    "Resend verification email": "Resend verification email"
 }
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 34cc996..fbab4ce 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -54,6 +54,7 @@ export interface User {
     id: number;
     first_name: string;
     last_name: string;
+    phone: string
     email: string;
     profile_photo_url?: string;
     email_verified_at: string | null;
@@ -61,4 +62,11 @@ export interface User {
     updated_at: string;
 }
 
+export interface Metadata {
+    title: string;
+    keywords: string;
+    description: string;
+    image: string;
+}
+
 export type BreadcrumbItemType = BreadcrumbItem;
diff --git a/resources/js/utils/arabicPlural.ts b/resources/js/utils/arabicPlural.ts
new file mode 100644
index 0000000..2a99d3a
--- /dev/null
+++ b/resources/js/utils/arabicPlural.ts
@@ -0,0 +1,16 @@
+export function arabicPlural(word: string, count: number): string {
+    const forms: Record<string, [string, string, string]> = {
+        'دقيقة': ['دقيقة', 'دقيقتان', 'دقائق'],
+        'درس': ['درس', 'درسان', 'دروس'],
+    };
+    const [singular, dual, plural] = forms[word] || [word, word, word];
+
+    let counter = Number(count);
+
+    if (counter === 0) return `0 ${plural}`;
+    if (counter === 1) return `1 ${singular}`;
+    if (counter === 2) return dual;
+    if (counter >= 3 && counter <= 10) return `${counter} ${plural}`;
+    if (counter >= 11) return `${counter} ${singular}`;
+    return `${counter} ${word}`;
+}
diff --git a/resources/views/mail/book-download-link.blade.php b/resources/views/mail/book-download-link.blade.php
new file mode 100644
index 0000000..3e5fe92
--- /dev/null
+++ b/resources/views/mail/book-download-link.blade.php
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html dir="rtl" lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>رابط تحميل الكتاب</title>
+</head>
+
+<body
+    style="margin: 0; padding: 0; font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; direction: rtl;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4; padding: 40px 0;">
+        <tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0"
+                    style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                    <!-- Header -->
+                    <tr>
+                        <td
+                            style="background: linear-gradient(135deg, #f59e0b 0%, #eb6600 100%); padding: 40px 30px; text-align: center; border-radius: 8px 8px 0 0;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: bold;">تريدر فاكتوري
+                            </h1>
+                        </td>
+                    </tr>
+
+                    <!-- Content -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <h2 style="color: #333333; font-size: 24px; margin: 0 0 20px 0; text-align: right;">مرحباً
+                                {{ $notifiable->name ?? 'عميلنا العزيز' }}،</h2>
+
+                            <p
+                                style="color: #555555; font-size: 16px; line-height: 1.8; margin: 0 0 20px 0; text-align: right;">
+                                نود إعلامك بأن كتابك <strong style="color: #eb6600;">"{{ $book->name }}"</strong> جاهز
+                                للتحميل!
+                            </p>
+
+                            <p
+                                style="color: #555555; font-size: 16px; line-height: 1.8; margin: 0 0 30px 0; text-align: right;">
+                                يمكنك الآن تحميل كتابك من خلال الزر أدناه:
+                            </p>
+
+                            <!-- Button -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 30px 0;">
+                                <tr>
+                                    <td align="center">
+                                        <a href="{{ $downloadUrl }}"
+                                            style="display: inline-block; background: linear-gradient(135deg, #f59e0b 0%, #eb6600 100%); color: #ffffff; text-decoration: none; padding: 16px 40px; border-radius: 50px; font-size: 18px; font-weight: bold; box-shadow: 0 4px 15px rgba(235, 102, 0, 0.4);">
+                                            📥 تحميل الكتاب الآن
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <!-- Panel -->
+                            <table width="100%" cellpadding="0" cellspacing="0"
+                                style="margin: 30px 0; background-color: #fff7ed; border-right: 4px solid #f59e0b; border-radius: 4px;">
+                                <tr>
+                                    <td style="padding: 20px; text-align: right;">
+                                        <p style="margin: 0; color: #92400e; font-size: 15px; line-height: 1.6;">
+                                            ⏰ <strong>ملاحظة هامة:</strong> هذا الرابط صالح لمدة
+                                            <strong>{{ $duration }}</strong> دقيقة فقط.
+                                        </p>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <p
+                                style="color: #555555; font-size: 16px; line-height: 1.8; margin: 30px 0 10px 0; text-align: right;">
+                                مع أطيب التحيات،<br>
+                                <strong style="color: #eb6600;">فريق تريدر فاكتوري</strong>
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td
+                            style="background-color: #f8f9fa; padding: 30px; text-align: center; border-radius: 0 0 8px 8px; border-top: 1px solid #e9ecef;">
+                            <p style="margin: 0; color: #6c757d; font-size: 14px; line-height: 1.6;">
+                                إذا كنت تواجه أي مشكلة في التحميل، يرجى التواصل معنا عبر:<br>
+                                <a href="mailto:support@traderfactory.com"
+                                    style="color: #eb6600; text-decoration: none; font-weight: bold;">support@traderfactory.com</a>
+                            </p>
+                            <p style="margin: 15px 0 0 0; color: #adb5bd; font-size: 12px;">
+                                © {{ date('Y') }} تريدر فاكتوري. جميع الحقوق محفوظة.
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+
+</html>
diff --git a/resources/views/mail/book-invoice.blade.php b/resources/views/mail/book-invoice.blade.php
index 3327a64..191fddc 100644
--- a/resources/views/mail/book-invoice.blade.php
+++ b/resources/views/mail/book-invoice.blade.php
@@ -13,12 +13,12 @@
     | طريقة الدفع  |{{ $order['cardBrand'] }} |
     | تاريخ الطلب  |{{ $order['created_at']->format('Y-m-d H:i') }} |
 @endcomponent
-
+{{-- 
 يمكنك تحميل الكتاب من خلال الرابط أدناه:
 
 @component('mail::button', ['url' => route('books.download.page', ['book' => $book->id])])
     تحميل الكتاب
-@endcomponent
+@endcomponent --}}
 
 شكراً لاختيارك تريدر فاكتوري.
 @endcomponent
diff --git a/resources/views/vendor/mail/html/button.blade.php b/resources/views/vendor/mail/html/button.blade.php
new file mode 100644
index 0000000..050e969
--- /dev/null
+++ b/resources/views/vendor/mail/html/button.blade.php
@@ -0,0 +1,24 @@
+@props([
+    'url',
+    'color' => 'primary',
+    'align' => 'center',
+])
+<table class="action" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="{{ $align }}">
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="{{ $align }}">
+<table border="0" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener">{!! $slot !!}</a>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
diff --git a/resources/views/vendor/mail/html/footer.blade.php b/resources/views/vendor/mail/html/footer.blade.php
new file mode 100644
index 0000000..3ff41f8
--- /dev/null
+++ b/resources/views/vendor/mail/html/footer.blade.php
@@ -0,0 +1,11 @@
+<tr>
+<td>
+<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="content-cell" align="center">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
+</td>
+</tr>
diff --git a/resources/views/vendor/mail/html/header.blade.php b/resources/views/vendor/mail/html/header.blade.php
new file mode 100644
index 0000000..c47a260
--- /dev/null
+++ b/resources/views/vendor/mail/html/header.blade.php
@@ -0,0 +1,12 @@
+@props(['url'])
+<tr>
+<td class="header">
+<a href="{{ $url }}" style="display: inline-block;">
+@if (trim($slot) === 'Laravel')
+<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
+@else
+{!! $slot !!}
+@endif
+</a>
+</td>
+</tr>
diff --git a/resources/views/vendor/mail/html/layout.blade.php b/resources/views/vendor/mail/html/layout.blade.php
new file mode 100644
index 0000000..0fa6b82
--- /dev/null
+++ b/resources/views/vendor/mail/html/layout.blade.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>{{ config('app.name') }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="color-scheme" content="light">
+<meta name="supported-color-schemes" content="light">
+<style>
+@media only screen and (max-width: 600px) {
+.inner-body {
+width: 100% !important;
+}
+
+.footer {
+width: 100% !important;
+}
+}
+
+@media only screen and (max-width: 500px) {
+.button {
+width: 100% !important;
+}
+}
+</style>
+{!! $head ?? '' !!}
+</head>
+<body>
+
+<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td align="center">
+<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+{!! $header ?? '' !!}
+
+<!-- Email Body -->
+<tr>
+<td class="body" width="100%" cellpadding="0" cellspacing="0" style="border: hidden !important;">
+<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+<!-- Body content -->
+<tr>
+<td class="content-cell">
+{!! Illuminate\Mail\Markdown::parse($slot) !!}
+
+{!! $subcopy ?? '' !!}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+
+{!! $footer ?? '' !!}
+</table>
+</td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/resources/views/vendor/mail/html/message.blade.php b/resources/views/vendor/mail/html/message.blade.php
new file mode 100644
index 0000000..a16bace
--- /dev/null
+++ b/resources/views/vendor/mail/html/message.blade.php
@@ -0,0 +1,27 @@
+<x-mail::layout>
+{{-- Header --}}
+<x-slot:header>
+<x-mail::header :url="config('app.url')">
+{{ config('app.name') }}
+</x-mail::header>
+</x-slot:header>
+
+{{-- Body --}}
+{!! $slot !!}
+
+{{-- Subcopy --}}
+@isset($subcopy)
+<x-slot:subcopy>
+<x-mail::subcopy>
+{!! $subcopy !!}
+</x-mail::subcopy>
+</x-slot:subcopy>
+@endisset
+
+{{-- Footer --}}
+<x-slot:footer>
+<x-mail::footer>
+© {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}
+</x-mail::footer>
+</x-slot:footer>
+</x-mail::layout>
diff --git a/resources/views/vendor/mail/html/panel.blade.php b/resources/views/vendor/mail/html/panel.blade.php
new file mode 100644
index 0000000..2975a60
--- /dev/null
+++ b/resources/views/vendor/mail/html/panel.blade.php
@@ -0,0 +1,14 @@
+<table class="panel" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-content">
+<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td class="panel-item">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+
diff --git a/resources/views/vendor/mail/html/subcopy.blade.php b/resources/views/vendor/mail/html/subcopy.blade.php
new file mode 100644
index 0000000..790ce6c
--- /dev/null
+++ b/resources/views/vendor/mail/html/subcopy.blade.php
@@ -0,0 +1,7 @@
+<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<tr>
+<td>
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</td>
+</tr>
+</table>
diff --git a/resources/views/vendor/mail/html/table.blade.php b/resources/views/vendor/mail/html/table.blade.php
new file mode 100644
index 0000000..a5f3348
--- /dev/null
+++ b/resources/views/vendor/mail/html/table.blade.php
@@ -0,0 +1,3 @@
+<div class="table">
+{{ Illuminate\Mail\Markdown::parse($slot) }}
+</div>
diff --git a/resources/views/vendor/mail/html/themes/default.css b/resources/views/vendor/mail/html/themes/default.css
new file mode 100644
index 0000000..2f12a32
--- /dev/null
+++ b/resources/views/vendor/mail/html/themes/default.css
@@ -0,0 +1,329 @@
+/* Base */
+
+body,
+body *:not(html):not(style):not(br):not(tr):not(code) {
+    box-sizing: border-box;
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    position: relative;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+    background-color: #ffffff;
+    color: #718096;
+    height: 100%;
+    line-height: 1.4;
+    margin: 0;
+    padding: 0;
+    width: 100% !important;
+}
+
+p,
+ul,
+ol,
+blockquote {
+    line-height: 1.4;
+    text-align: left;
+}
+
+a {
+    color: #3869d4;
+}
+
+a img {
+    border: none;
+}
+
+/* Typography */
+
+h1 {
+    color: #1a202c;
+    font-size: 22px;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 16px;
+    text-align: left;
+    line-height: 1.3;
+}
+
+h2 {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 0;
+    text-align: left;
+    color: #2d3748;
+}
+
+h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 24px;
+    margin-bottom: 12px;
+    text-align: left;
+    color: #2d3748;
+}
+
+p {
+    font-size: 15px;
+    line-height: 1.6em;
+    margin-top: 0;
+    text-align: left;
+    color: #4a5568;
+}
+
+p.sub {
+    font-size: 12px;
+}
+
+img {
+    max-width: 100%;
+}
+
+/* Layout */
+
+.wrapper {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #f3f4f6;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.content {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+/* Header */
+
+.header {
+    padding: 25px 0;
+    text-align: center;
+}
+
+.header a {
+    color: #3d4852;
+    font-size: 19px;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+/* Logo */
+
+.logo {
+    height: 75px;
+    max-height: 75px;
+    width: 75px;
+}
+
+/* Body */
+
+.body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    background-color: #edf2f7;
+    border-bottom: 1px solid #edf2f7;
+    border-top: 1px solid #edf2f7;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.inner-body {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    background-color: #ffffff;
+    border-color: #e8e5ef;
+    border-radius: 2px;
+    border-width: 1px;
+    box-shadow:
+        0 2px 0 rgba(0, 0, 150, 0.025),
+        2px 4px 0 rgba(0, 0, 150, 0.015);
+    margin: 0 auto;
+    padding: 0;
+    width: 570px;
+}
+
+.inner-body a {
+    word-break: break-all;
+}
+
+/* Subcopy */
+
+.subcopy {
+    border-top: 1px solid #e8e5ef;
+    margin-top: 25px;
+    padding-top: 25px;
+}
+
+.subcopy p {
+    font-size: 14px;
+}
+
+/* Footer */
+
+.footer {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 570px;
+    margin: 0 auto;
+    padding: 0;
+    text-align: center;
+    width: 570px;
+}
+
+.footer p {
+    color: #b0adc5;
+    font-size: 12px;
+    text-align: center;
+}
+
+.footer a {
+    color: #b0adc5;
+    text-decoration: underline;
+}
+
+/* Tables */
+
+.table table {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.table th {
+    background-color: #f7fafc;
+    border-bottom: 2px solid #e2e8f0;
+    padding: 12px 16px;
+    text-align: right;
+    font-weight: 600;
+    color: #2d3748;
+}
+
+.table td {
+    color: #4a5568;
+    font-size: 15px;
+    line-height: 22px;
+    margin: 0;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.table tr:last-child td {
+    border-bottom: none;
+}
+
+.table tr:nth-child(even) {
+    background-color: #f7fafc;
+}
+
+.table th {
+    padding-bottom: 8px;
+}
+
+.content-cell {
+    max-width: 100vw;
+    padding: 32px;
+}
+
+/* Buttons */
+
+.action {
+    -premailer-cellpadding: 0;
+    -premailer-cellspacing: 0;
+    -premailer-width: 100%;
+    margin: 30px auto;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+    float: unset;
+}
+
+.button {
+    -webkit-text-size-adjust: none;
+    border-radius: 4px;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-decoration: none;
+}
+
+.button-blue,
+.button-primary {
+    background-color: #3b82f6;
+    border-bottom: 8px solid #3b82f6;
+    border-left: 18px solid #3b82f6;
+    border-right: 18px solid #3b82f6;
+    border-top: 8px solid #3b82f6;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.button-green,
+.button-success {
+    background-color: #48bb78;
+    border-bottom: 8px solid #48bb78;
+    border-left: 18px solid #48bb78;
+    border-right: 18px solid #48bb78;
+    border-top: 8px solid #48bb78;
+}
+
+.button-red,
+.button-error {
+    background-color: #e53e3e;
+    border-bottom: 8px solid #e53e3e;
+    border-left: 18px solid #e53e3e;
+    border-right: 18px solid #e53e3e;
+    border-top: 8px solid #e53e3e;
+}
+
+/* Panels */
+
+.panel {
+    border-left: #2d3748 solid 4px;
+    margin: 21px 0;
+}
+
+.panel-content {
+    background-color: #edf2f7;
+    color: #718096;
+    padding: 16px;
+}
+
+.panel-content p {
+    color: #718096;
+}
+
+.panel-item {
+    padding: 0;
+}
+
+.panel-item p:last-of-type {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+/* Utilities */
+
+.break-all {
+    word-break: break-all;
+}
diff --git a/resources/views/vendor/mail/text/button.blade.php b/resources/views/vendor/mail/text/button.blade.php
new file mode 100644
index 0000000..97444eb
--- /dev/null
+++ b/resources/views/vendor/mail/text/button.blade.php
@@ -0,0 +1 @@
+{{ $slot }}: {{ $url }}
diff --git a/resources/views/vendor/mail/text/footer.blade.php b/resources/views/vendor/mail/text/footer.blade.php
new file mode 100644
index 0000000..3338f62
--- /dev/null
+++ b/resources/views/vendor/mail/text/footer.blade.php
@@ -0,0 +1 @@
+{{ $slot }}
diff --git a/resources/views/vendor/mail/text/header.blade.php b/resources/views/vendor/mail/text/header.blade.php
new file mode 100644
index 0000000..97444eb
--- /dev/null
+++ b/resources/views/vendor/mail/text/header.blade.php
@@ -0,0 +1 @@
+{{ $slot }}: {{ $url }}
diff --git a/resources/views/vendor/mail/text/layout.blade.php b/resources/views/vendor/mail/text/layout.blade.php
new file mode 100644
index 0000000..ec58e83
--- /dev/null
+++ b/resources/views/vendor/mail/text/layout.blade.php
@@ -0,0 +1,9 @@
+{!! strip_tags($header ?? '') !!}
+
+{!! strip_tags($slot) !!}
+@isset($subcopy)
+
+{!! strip_tags($subcopy) !!}
+@endisset
+
+{!! strip_tags($footer ?? '') !!}
diff --git a/resources/views/vendor/mail/text/message.blade.php b/resources/views/vendor/mail/text/message.blade.php
new file mode 100644
index 0000000..80bce21
--- /dev/null
+++ b/resources/views/vendor/mail/text/message.blade.php
@@ -0,0 +1,27 @@
+<x-mail::layout>
+    {{-- Header --}}
+    <x-slot:header>
+        <x-mail::header :url="config('app.url')">
+            {{ config('app.name') }}
+        </x-mail::header>
+    </x-slot:header>
+
+    {{-- Body --}}
+    {{ $slot }}
+
+    {{-- Subcopy --}}
+    @isset($subcopy)
+        <x-slot:subcopy>
+            <x-mail::subcopy>
+                {{ $subcopy }}
+            </x-mail::subcopy>
+        </x-slot:subcopy>
+    @endisset
+
+    {{-- Footer --}}
+    <x-slot:footer>
+        <x-mail::footer>
+            © {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
+        </x-mail::footer>
+    </x-slot:footer>
+</x-mail::layout>
diff --git a/resources/views/vendor/mail/text/panel.blade.php b/resources/views/vendor/mail/text/panel.blade.php
new file mode 100644
index 0000000..3338f62
--- /dev/null
+++ b/resources/views/vendor/mail/text/panel.blade.php
@@ -0,0 +1 @@
+{{ $slot }}
diff --git a/resources/views/vendor/mail/text/subcopy.blade.php b/resources/views/vendor/mail/text/subcopy.blade.php
new file mode 100644
index 0000000..3338f62
--- /dev/null
+++ b/resources/views/vendor/mail/text/subcopy.blade.php
@@ -0,0 +1 @@
+{{ $slot }}
diff --git a/resources/views/vendor/mail/text/table.blade.php b/resources/views/vendor/mail/text/table.blade.php
new file mode 100644
index 0000000..3338f62
--- /dev/null
+++ b/resources/views/vendor/mail/text/table.blade.php
@@ -0,0 +1 @@
+{{ $slot }}
diff --git a/routes/auth.php b/routes/auth.php
index 7862ed4..8f90b84 100644
--- a/routes/auth.php
+++ b/routes/auth.php
@@ -53,4 +53,4 @@
 
     Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
         ->name('logout');
-});
+});
\ No newline at end of file
diff --git a/routes/settings.php b/routes/settings.php
index 98e418d..f2a709b 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Controllers\Settings\BookController;
+use App\Http\Controllers\Settings\CourseController;
 use App\Http\Controllers\Settings\PasswordController;
 use App\Http\Controllers\Settings\ProfileController;
 use Illuminate\Support\Facades\Route;
@@ -18,4 +20,7 @@
     Route::get('settings/appearance', function () {
         return Inertia::render('settings/Appearance');
     })->name('appearance');
+
+    Route::get('settings/courses', [CourseController::class, 'index'])->name('settings.courses');
+    Route::get('settings/books', [BookController::class, 'index'])->name('settings.books');
 });
diff --git a/routes/web.php b/routes/web.php
index 568dc6d..6bb5bbb 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,21 +3,22 @@
 use App\Http\Controllers\BookController;
 use App\Http\Controllers\CourseController;
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\FaqController;
 use App\Http\Controllers\GlossaryController;
 use App\Http\Controllers\GoalController;
 use App\Http\Controllers\LessonController;
 use App\Http\Controllers\MagazineController;
 use App\Http\Controllers\OrdersController;
+use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\QuickScanController;
 use App\Http\Controllers\QuizController;
 use App\Http\Controllers\RevisionController;
 use App\Http\Controllers\SectionController;
 use App\Http\Controllers\TodoController;
+use App\Http\Controllers\ToolsController;
 use App\Http\Controllers\VisualController;
 use App\Http\Controllers\WelcomeController;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
-use App\Http\Controllers\FaqController;
 
 Route::get('dashboard', DashboardController::class)
     ->middleware(['auth', 'verified'])
@@ -94,7 +95,7 @@
     Route::post('orders/{type}/{id}', [OrdersController::class, 'order'])->name('orders.create');
 });
 
-//Route::middleware(['auth:sanctum', 'verified'])
+// Route::middleware(['auth:sanctum', 'verified'])
 //    ->group(function () {
 //        Route::put('user/generate_referral_token',
 //            [UserController::class, 'generateReferralToken'])->name('user.generate-referral-token');
@@ -104,3 +105,14 @@
 
 // get FAQs grouped by category
 Route::get('faqs', [FaqController::class, 'index'])->name('faqs.index');
+
+// Tools routes
+Route::prefix('tools')->name('tools.')->group(function () {
+    Route::get('/', [ToolsController::class, 'index'])->name('index');
+    Route::get('/position-size', [ToolsController::class, 'positionSize'])->name('position-size');
+    Route::get('/pip-value', [ToolsController::class, 'pipValue'])->name('pip-value');
+    Route::get('/margin-calculator', [ToolsController::class, 'marginCalculator'])->name('margin-calculator');
+});
+
+// webinars route
+Route::get('/webinars', [WelcomeController::class, 'webinars'])->name('webinars');
diff --git a/tests/Feature/Books/BookDownloadLinkTest.php b/tests/Feature/Books/BookDownloadLinkTest.php
new file mode 100644
index 0000000..8d18f0f
--- /dev/null
+++ b/tests/Feature/Books/BookDownloadLinkTest.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace Tests\Feature\Books;
+
+use App\Models\Book;
+use App\Models\Order;
+use App\Models\User;
+use App\Notifications\SendBookLink;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Notification;
+use Tests\TestCase;
+
+class BookDownloadLinkTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_authorized_user_can_request_download_link(): void
+    {
+        Notification::fake();
+
+        $user = User::factory()->create();
+        $book = Book::factory()->create([
+            'name' => 'Laravel Testing Guide',
+            'price' => 0,
+        ]);
+
+        Order::factory()->success()->create([
+            'user_id' => $user->id,
+            'orderable_type' => Book::class,
+            'orderable_id' => $book->id,
+        ]);
+
+        $response = $this->actingAs($user)
+            ->post(route('books.download', $book));
+
+        $response->assertStatus(302);
+        $response->assertRedirect(route('books.download.page', $book->id));
+        $response->assertSessionHas('success');
+
+        Notification::assertSentTo($user, SendBookLink::class);
+    }
+
+    public function test_unauthorized_user_cannot_request_download_link(): void
+    {
+        $user = User::factory()->create();
+        $book = Book::factory()->create();
+
+        $response = $this->actingAs($user)
+            ->post(route('books.download', $book));
+
+        $response->assertStatus(403);
+    }
+
+    public function test_guest_cannot_request_download_link(): void
+    {
+        $book = Book::factory()->create();
+
+        $response = $this->post(route('books.download', $book));
+
+        $response->assertStatus(302);
+        $response->assertRedirect(route('login'));
+    }
+
+    public function test_notification_contains_correct_download_url(): void
+    {
+        Notification::fake();
+
+        $user = User::factory()->create();
+        $book = Book::factory()->create(['name' => 'PHP Design Patterns']);
+
+        Order::factory()->success()->create([
+            'user_id' => $user->id,
+            'orderable_type' => Book::class,
+            'orderable_id' => $book->id,
+        ]);
+
+        $this->actingAs($user)
+            ->post(route('books.download', $book));
+
+        Notification::assertSentTo($user, SendBookLink::class, function ($notification) use ($book) {
+            return $notification->book->id === $book->id
+                && ! empty($notification->downloadUrl)
+                && $notification->duration === 30;
+        });
+    }
+}
diff --git a/tests/Feature/Settings/ProfileUpdateTest.php b/tests/Feature/Settings/ProfileUpdateTest.php
index 50e4514..5c8e699 100644
--- a/tests/Feature/Settings/ProfileUpdateTest.php
+++ b/tests/Feature/Settings/ProfileUpdateTest.php
@@ -84,4 +84,4 @@
         ->assertRedirect('/settings/profile');
 
     expect($user->fresh())->not->toBeNull();
-});
\ No newline at end of file
+});