diff --git a/app/Livewire/CoverLetterEditor.php b/app/Livewire/CoverLetterEditor.php
new file mode 100644
index 0000000..ed92afb
--- /dev/null
+++ b/app/Livewire/CoverLetterEditor.php
@@ -0,0 +1,145 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\JobPosting;
+use App\Services\GroqCoverLetterService;
+use Livewire\Component;
+use Exception;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\RateLimiter;
+use Livewire\Attributes\Title;
+
+#[Title('Cover Letter Workspace')]
+class CoverLetterEditor extends Component
+{
+    public JobPosting $jobPosting;
+    public string $content = '';
+    public bool $isGenerating = false;
+    public string $errorMessage = '';
+    public bool $showDeleteModal = false;
+
+    private int $burstLimit = 2;
+
+    public function mount(JobPosting $jobPosting)
+    {
+        if ($jobPosting->user_id !== auth()->id()) {
+            abort(403);
+        }
+
+        $this->jobPosting = $jobPosting;
+        $this->content = $this->formatLetterText($jobPosting->cover_letter ?? '');
+    }
+
+    private function formatLetterText(string $text): string
+    {
+        if (empty($text)) return '';
+        $text = trim(str_replace(['**', '##', '#', '*'], '', $text));
+        if (strpos($text, "\n\n") === false && strpos($text, "\n") !== false) {
+            $text = str_replace("\n", "\n\n", $text);
+        }
+        return $text;
+    }
+
+    // This exposes $this->dailyLimit to your Blade view dynamically
+    public function getDailyLimitProperty(): int
+    {
+        return config('services.groq.daily_limit', 5);
+    }
+
+    public function getCreditsRemainingProperty(): int
+    {
+        $dailyKey = 'cv-gen-daily:' . auth()->id();
+        $attempts = RateLimiter::attempts($dailyKey);
+        return max(0, $this->dailyLimit - $attempts);
+    }
+
+    public function generate(GroqCoverLetterService $service)
+    {
+        $userId = auth()->id();
+        $minuteKey = 'cv-gen-min:' . $userId;
+        $dailyKey = 'cv-gen-daily:' . $userId;
+
+        if (RateLimiter::tooManyAttempts($dailyKey, $this->dailyLimit)) {
+            $this->errorMessage = "You have exhausted your {$this->dailyLimit} daily AI generations. Please try again tomorrow.";
+            $this->dispatch('toast', message: 'Daily limit reached.', type: 'error');
+            return;
+        }
+
+        if (RateLimiter::tooManyAttempts($minuteKey, $this->burstLimit)) {
+            $seconds = RateLimiter::availableIn($minuteKey);
+            $this->errorMessage = "System cooling down. Please wait {$seconds} seconds to ensure high-quality generation.";
+            $this->dispatch('toast', message: 'Generating too fast.', type: 'error');
+            return;
+        }
+
+        $this->isGenerating = true;
+        $this->errorMessage = '';
+
+        try {
+            if (empty(config('services.groq.api_key'))) {
+                throw new Exception('GROQ_API_KEY is missing in your configuration.');
+            }
+
+            $resumeContent = null;
+            $resumeSource = '';
+            
+            $latestMatch = $this->jobPosting->matchReports()->latest()->first();
+
+            if ($latestMatch && $latestMatch->resume && !empty($latestMatch->resume->content_raw)) {
+                $resumeContent = $latestMatch->resume->content_raw;
+                $resumeSource = 'Targeted Match Resume';
+            } else {
+                $primaryResume = auth()->user()->resumes()->where('is_primary', true)->first();
+                if ($primaryResume && !empty($primaryResume->content_raw)) {
+                    $resumeContent = $primaryResume->content_raw;
+                    $resumeSource = 'Primary Resume';
+                }
+            }
+
+            if (empty($resumeContent)) {
+                throw new Exception('No resume found. Please set a Primary Resume.');
+            }
+
+            if (empty($this->jobPosting->description)) {
+                throw new Exception('Job description is missing. AI needs context.');
+            }
+
+            $strictContext = "Company: {$this->jobPosting->company}\nJob Title: {$this->jobPosting->title}\nDescription: {$this->jobPosting->description}\n\nCRITICAL AI INSTRUCTION: Output PLAIN TEXT ONLY. You MUST use double newlines (\\n\\n) between paragraphs to format it as a business letter.";
+
+            $generatedText = $service->generate($resumeContent, $strictContext);
+            $this->content = $this->formatLetterText($generatedText);
+
+            RateLimiter::hit($minuteKey, 60);
+            RateLimiter::hit($dailyKey, 86400);
+
+            $this->dispatch('toast', message: "Draft generated using {$resumeSource}!", type: 'success');
+
+        } catch (Exception $e) {
+            Log::error('Cover Letter Gen Error: ' . $e->getMessage());
+            $this->errorMessage = $e->getMessage();
+            $this->dispatch('toast', message: 'Generation failed.', type: 'error');
+        } finally {
+            $this->isGenerating = false;
+        }
+    }
+
+    public function save()
+    {
+        $this->validate(['content' => 'required|string']);
+        $this->jobPosting->update(['cover_letter' => $this->content]);
+        $this->dispatch('toast', message: 'Cover letter saved securely!', type: 'success');
+    }
+
+    public function executeDelete()
+    {
+        $this->jobPosting->update(['cover_letter' => null]);
+        session()->flash('success', 'Cover letter draft discarded.');
+        return redirect()->route('cover-letters.index');
+    }
+
+    public function render()
+    {
+        return view('livewire.cover-letter-editor');
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/CoverLetterGenerator.php b/app/Livewire/CoverLetterGenerator.php
new file mode 100644
index 0000000..f978e26
--- /dev/null
+++ b/app/Livewire/CoverLetterGenerator.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\JobPosting;
+use App\Services\GroqCoverLetterService;
+use Livewire\Component;
+use Exception;
+
+class CoverLetterGenerator extends Component
+{
+    public $jobs;
+    public $jobId = '';
+    public ?JobPosting $selectedJob = null;
+    public string $coverLetterContent = '';
+    public bool $isGenerating = false;
+
+    public function mount()
+    {
+        $this->jobs = auth()->user()->jobPostings()->latest()->get();
+
+        if (request()->has('job_id')) {
+            $this->jobId = request('job_id');
+            $this->loadJob();
+        }
+    }
+
+    public function updatedJobId()
+    {
+        $this->loadJob();
+    }
+
+    public function loadJob()
+    {
+        if (empty($this->jobId)) {
+            $this->selectedJob = null;
+            $this->coverLetterContent = '';
+            return;
+        }
+
+        $this->selectedJob = auth()->user()->jobPostings()->find($this->jobId);
+        $this->coverLetterContent = $this->selectedJob->cover_letter ?? '';
+    }
+
+    public function generate(GroqCoverLetterService $service)
+    {
+        if (!$this->selectedJob) {
+            session()->flash('error', 'Please select an application first.');
+            return;
+        }
+
+        $this->isGenerating = true;
+
+        try {
+            $primaryResume = auth()->user()->resumes()->where('is_primary', true)->first();
+
+            if (!$primaryResume || empty($primaryResume->content_raw)) {
+                throw new Exception('Please upload and set a primary resume in your profile first.');
+            }
+
+            // Generate draft and populate the editor
+            $this->coverLetterContent = $service->generate(
+                $primaryResume->content_raw,
+                "Company: {$this->selectedJob->company}\nJob Title: {$this->selectedJob->title}\nDescription: {$this->selectedJob->description}"
+            );
+
+            session()->flash('success', 'Draft generated successfully! You can now edit and save it.');
+
+        } catch (Exception $e) {
+            session()->flash('error', $e->getMessage());
+        } finally {
+            $this->isGenerating = false;
+        }
+    }
+
+    public function save()
+    {
+        if (!$this->selectedJob) return;
+
+        $this->validate([
+            'coverLetterContent' => 'required|string',
+        ]);
+
+        $this->selectedJob->update([
+            'cover_letter' => $this->coverLetterContent
+        ]);
+
+        session()->flash('success', 'Cover letter saved to application successfully.');
+    }
+
+    public function render()
+    {
+        return view('livewire.cover-letter-generator');
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/CoverLetterIndex.php b/app/Livewire/CoverLetterIndex.php
new file mode 100644
index 0000000..453dd7e
--- /dev/null
+++ b/app/Livewire/CoverLetterIndex.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\JobPosting;
+use Illuminate\Support\Facades\RateLimiter;
+use Livewire\Component;
+use Livewire\WithPagination;
+use Livewire\Attributes\Title;
+
+#[Title('Cover Letters')]
+class CoverLetterIndex extends Component
+{
+    use WithPagination;
+
+    public string $search = '';
+    public $coverLetterToDelete = null;
+    public $selectedJobForNewLetter = '';
+
+    public function updatingSearch()
+    {
+        $this->resetPage();
+    }
+
+    public function resetFilters()
+    {
+        $this->reset('search');
+        $this->resetPage();
+    }
+
+    public function confirmDelete($id)
+    {
+        $this->coverLetterToDelete = $id;
+    }
+
+    public function executeDelete()
+    {
+        if ($this->coverLetterToDelete) {
+            $job = auth()->user()->jobPostings()->find($this->coverLetterToDelete);
+            
+            if ($job) {
+                $job->update(['cover_letter' => null]);
+                $this->dispatch('toast', message: 'Cover letter draft deleted successfully.', type: 'success');
+            }
+            
+            $this->coverLetterToDelete = null;
+        }
+    }
+
+    public function cancelDelete()
+    {
+        $this->coverLetterToDelete = null;
+    }
+
+    public function startWorkspace()
+    {
+        $this->validate([
+            'selectedJobForNewLetter' => 'required|exists:job_postings,id'
+        ]);
+
+        return redirect()->route('cover-letters.edit', $this->selectedJobForNewLetter);
+    }
+
+    public function getCreditsRemainingProperty(): int
+    {
+        $dailyLimit = config('services.groq.daily_limit', 5);
+        $dailyKey = 'cv-gen-daily:' . auth()->id();
+        $attempts = RateLimiter::attempts($dailyKey);
+        return max(0, $dailyLimit - $attempts);
+    }
+
+    public function render()
+    {
+        $query = auth()->user()->jobPostings()->whereNotNull('cover_letter');
+
+        if (!empty($this->search)) {
+            $query->where(function ($q) {
+                $q->where('title', 'like', '%' . $this->search . '%')
+                  ->orWhere('company', 'like', '%' . $this->search . '%');
+            });
+        }
+
+        $jobs = $query->latest()->paginate(12);
+        
+        $availableJobsForCreation = auth()->user()->jobPostings()
+            ->whereNull('cover_letter')
+            ->latest()
+            ->get();
+
+        return view('livewire.cover-letter-index', [
+            'jobs' => $jobs,
+            'totalDrafts' => auth()->user()->jobPostings()->whereNotNull('cover_letter')->count(),
+            'availableJobs' => $availableJobsForCreation,
+            'creditsRemaining' => $this->creditsRemaining,
+            'dailyLimit' => config('services.groq.daily_limit', 5),
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/CreateApplication.php b/app/Livewire/CreateApplication.php
index 5af0dd0..eee521b 100644
--- a/app/Livewire/CreateApplication.php
+++ b/app/Livewire/CreateApplication.php
@@ -4,6 +4,9 @@
 
 use App\Enums\ApplicationStatus;
 use App\Models\JobPosting;
+use App\Services\GroqFormatterService;
+use Exception;
+use Illuminate\Support\Facades\Log;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 
@@ -21,6 +24,32 @@ class CreateApplication extends Component
     #[Validate('required|string')]
     public $description = '';
 
+    public bool $isFormatting = false;
+
+    public function autoFormatDescription(GroqFormatterService $formatter)
+    {
+        if (empty(trim(strip_tags($this->description)))) {
+            $this->dispatch('toast', message: 'Please paste a description first before formatting.', type: 'error');
+            return;
+        }
+
+        $this->isFormatting = true;
+
+        try {
+            $cleanHtml = $formatter->formatJobDescription($this->description);
+            $this->description = $cleanHtml;
+            
+            $this->dispatch('description-formatted', html: $cleanHtml);
+            $this->dispatch('toast', message: 'Description formatted successfully.', type: 'success');
+            
+        } catch (Exception $e) {
+            Log::error('Description Formatting Error: ' . $e->getMessage());
+            $this->dispatch('toast', message: 'Failed to format description.', type: 'error');
+        } finally {
+            $this->isFormatting = false;
+        }
+    }
+
     public function save()
     {
         $this->validate();
@@ -43,4 +72,4 @@ public function render()
     {
         return view('livewire.create-application');
     }
-}
+}
\ No newline at end of file
diff --git a/app/Livewire/EditApplication.php b/app/Livewire/EditApplication.php
index 86bfa37..2f8db37 100644
--- a/app/Livewire/EditApplication.php
+++ b/app/Livewire/EditApplication.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use App\Models\JobPosting;
+use App\Services\GroqCoverLetterService;
 use Livewire\Component;
+use Exception;
 
 class EditApplication extends Component
 {
@@ -13,6 +15,8 @@ class EditApplication extends Component
     public string $company = '';
     public ?string $url = null;
     public string $description = '';
+    public string $generatedCoverLetter = '';
+    public bool $isGenerating = false;
 
     public function mount(JobPosting $jobPosting)
     {
@@ -26,6 +30,41 @@ public function mount(JobPosting $jobPosting)
         $this->company = $this->jobPosting->company ?? '';
         $this->url = $this->jobPosting->source_url ?? '';
         $this->description = $this->jobPosting->description ?? '';
+        $this->generatedCoverLetter = $this->jobPosting->cover_letter ?? '';
+    }
+
+    public function generateCoverLetter(GroqCoverLetterService $service)
+    {
+        $this->isGenerating = true;
+
+        try {
+            
+            $primaryResume = auth()->user()->resumes()->where('is_primary', true)->first();
+            
+            $resumeContent = $primaryResume->content_raw ?? '';
+            $jobDescription = $this->description;
+
+            if (empty($resumeContent)) {
+                throw new Exception('No primary resume found. Please upload or set a primary resume first.');
+            }
+
+            if (empty($jobDescription)) {
+                throw new Exception('Job description is required to generate a cover letter.');
+            }
+
+            $this->generatedCoverLetter = $service->generate($resumeContent, $jobDescription);
+            
+            $this->jobPosting->update([
+                'cover_letter' => $this->generatedCoverLetter
+            ]);
+
+            session()->flash('success', 'Cover letter generated successfully.');
+
+        } catch (Exception $e) {
+            session()->flash('error', $e->getMessage());
+        } finally {
+            $this->isGenerating = false;
+        }
     }
 
     public function update()
@@ -35,6 +74,7 @@ public function update()
             'company' => 'required|string|max:255',
             'url' => 'nullable|url|max:255',
             'description' => 'required|string',
+            'generatedCoverLetter' => 'nullable|string',
         ]);
 
         $this->jobPosting->update([
@@ -42,6 +82,7 @@ public function update()
             'company' => $this->company,
             'source_url' => $this->url,
             'description' => $this->description,
+            'cover_letter' => $this->generatedCoverLetter,
         ]);
 
         session()->flash('success', 'Job posting updated successfully.');
diff --git a/app/Models/JobPosting.php b/app/Models/JobPosting.php
index f8747b0..15beb12 100644
--- a/app/Models/JobPosting.php
+++ b/app/Models/JobPosting.php
@@ -18,6 +18,7 @@ class JobPosting extends Model
         'description',
         'source_url',
         'status',
+        'cover_letter', 
     ];
 
     protected $casts = [
@@ -33,4 +34,4 @@ public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);
     }
-}
+}
\ No newline at end of file
diff --git a/app/Models/User.php b/app/Models/User.php
index 33e928e..4cf6cd2 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
@@ -31,4 +32,20 @@ protected function casts(): array
             'password' => 'hashed',
         ];
     }
-}
+
+    /**
+     * Get the job postings associated with the user.
+     */
+    public function jobPostings(): HasMany
+    {
+        return $this->hasMany(JobPosting::class);
+    }
+
+    /**
+     * Get the resumes associated with the user.
+     */
+    public function resumes(): HasMany
+    {
+        return $this->hasMany(Resume::class);
+    }
+}
\ No newline at end of file
diff --git a/app/Services/GroqCoverLetterService.php b/app/Services/GroqCoverLetterService.php
new file mode 100644
index 0000000..0e775bd
--- /dev/null
+++ b/app/Services/GroqCoverLetterService.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Services;
+
+use Exception;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class GroqCoverLetterService
+{
+    public function generate(string $resumeContent, string $jobContext): string
+    {
+        $apiKey = config('services.groq.api_key');
+
+        if (empty($apiKey)) {
+            Log::error('Groq API Key is missing from configuration.');
+            throw new Exception('Groq API key is missing. Please check your configuration.');
+        }
+
+        // Enforce strict paragraph formatting in the prompt
+        $prompt = config('services.groq.cover_letter_prompt', 'You are an expert career coach. Based on the provided resume and job context, write a highly professional cover letter. IMPORTANT: Output ONLY plain text. NO Markdown. You MUST structure the letter with clear paragraphs separated by double line breaks (\n\n). Return the output strictly as a JSON object with a single key "cover_letter" containing the text.');
+
+        $response = Http::withToken($apiKey)
+            ->timeout(60)
+            ->post('https://api.groq.com/openai/v1/chat/completions', [
+                'model' => 'llama-3.3-70b-versatile',
+                'messages' => [
+                    ['role' => 'system', 'content' => $prompt],
+                    ['role' => 'user', 'content' => "Resume: \n" . $resumeContent . "\n\nJob Context: \n" . $jobContext],
+                ],
+                'response_format' => ['type' => 'json_object'],
+            ]);
+
+        if ($response->failed()) {
+            Log::error('Groq API Error (Cover Letter): ' . $response->body());
+            throw new Exception('Failed to connect to Groq AI. Please try again later.');
+        }
+
+        $content = $response->json('choices.0.message.content');
+        $decoded = json_decode($content, true);
+
+        return $decoded['cover_letter'] ?? 'Failed to generate content.';
+    }
+}
\ No newline at end of file
diff --git a/app/Services/GroqFormatterService.php b/app/Services/GroqFormatterService.php
new file mode 100644
index 0000000..3f9c877
--- /dev/null
+++ b/app/Services/GroqFormatterService.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Services;
+
+use Exception;
+use Illuminate\Support\Facades\Http;
+
+class GroqFormatterService
+{
+    public function formatJobDescription(string $rawText): string
+    {
+        $apiKey = config('services.groq.api_key');
+
+        if (empty($apiKey)) {
+            throw new Exception('GROQ_API_KEY is not configured.');
+        }
+
+        $systemPrompt = "You are an expert data formatting assistant. Your task is to clean and structure messy job posting text into semantic HTML. "
+            . "CRITICAL FORMATTING RULES: "
+            . "1. STRICTLY use ONLY these tags: <p>, <ul>, <li>, and <strong>. DO NOT use <br> tags under any circumstances. "
+            . "2. ELIMINATE ALL excessive whitespace. Do not output empty tags like <p></p> or multiple consecutive line breaks. "
+            . "3. Aggressively identify lists (lines starting with dashes, asterisks, bullets, or short consecutive requirements) and format them properly using <ul> and <li> tags. "
+            . "4. Identify section headers (e.g., 'Responsibilities', 'Requirements', 'Qualifications') and format them strictly as <p><strong>Header Name</strong></p>. "
+            . "5. You must return ONLY the raw HTML string. Do not use markdown blocks, do not wrap the output in ```html, and do not include any conversational text.";
+
+        // Breaking the URL into pieces so your clipboard/editor cannot auto-format it into a markdown link
+        $endpoint = 'https://' . 'api.groq.com' . '/openai/v1/chat/completions';
+
+        $response = Http::withToken($apiKey)
+            ->timeout(30)
+            ->post($endpoint, [
+                'model' => 'llama-3.1-8b-instant',
+                'messages' => [
+                    ['role' => 'system', 'content' => $systemPrompt],
+                    ['role' => 'user', 'content' => $rawText],
+                ],
+                'temperature' => 0.1,
+            ]);
+
+        if ($response->failed()) {
+            throw new Exception('Failed to format the text via Groq API. ' . $response->body());
+        }
+
+        $result = $response->json('choices.0.message.content');
+
+        return trim(str_replace(['```html', '```'], '', $result));
+    }
+}
\ No newline at end of file
diff --git a/app/Support/Csp/CustomPolicy.php b/app/Support/Csp/CustomPolicy.php
index d30e9ab..51d0983 100644
--- a/app/Support/Csp/CustomPolicy.php
+++ b/app/Support/Csp/CustomPolicy.php
@@ -36,7 +36,10 @@ public function configure(Policy $policy): void
                 Keyword::UNSAFE_INLINE,
                 Keyword::UNSAFE_EVAL,
                 'unpkg.com', // Added for Trix Editor JS
-                // 'cdn.jsdelivr.net', // Uncomment if your chart uses jsdelivr
+            ])
+            ->add(Directive::CONNECT, [
+                Keyword::SELF,
+                'unpkg.com', // Added for Trix Editor source maps
             ])
             ->add(Directive::FRAME, [
                 Keyword::SELF,
diff --git a/config/services.php b/config/services.php
index 9e2a891..bc2531f 100644
--- a/config/services.php
+++ b/config/services.php
@@ -43,6 +43,7 @@
 
     'groq' => [
         'api_key' => env('GROQ_API_KEY'),
+        'daily_limit' => env('GROQ_DAILY_LIMIT', 5),
     ],
 
-];
+];
\ No newline at end of file
diff --git a/database/migrations/2026_04_07_125131_add_cover_letter_to_applications_table.php b/database/migrations/2026_04_07_125131_add_cover_letter_to_applications_table.php
new file mode 100644
index 0000000..36336fb
--- /dev/null
+++ b/database/migrations/2026_04_07_125131_add_cover_letter_to_applications_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('job_postings', function (Blueprint $table) {
+            $table->text('cover_letter')->nullable()->after('status');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('job_postings', function (Blueprint $table) {
+            $table->dropColumn('cover_letter');
+        });
+    }
+};
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index 8a4e70d..70e66ff 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -51,4 +51,26 @@
 
 .custom-pagination nav a:hover svg {
     color: #e26a35 !important;
+}
+
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 10px;
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: #94a3b8;
 }
\ No newline at end of file
diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index ba20800..6c2f84d 100644
--- a/resources/views/components/toast.blade.php
+++ b/resources/views/components/toast.blade.php
@@ -1,6 +1,6 @@
 @php
     $initialMessage = session('success') ?? session('status') ?? session('error') ?? '';
-    $isError = session('error') || $errors->any();
+    $initialType = session('error') || $errors->any() ? 'error' : 'success';
     
     if (!$initialMessage && $errors->any()) {
         $initialMessage = $errors->first();
@@ -10,47 +10,53 @@
 <div x-data="{ 
         show: false, 
         message: @js($initialMessage),
-        isError: @js($isError)
-    }" x-init="
+        type: @js($initialType),
+        timeout: null
+    }" 
+    x-init="
         if (message !== '') { 
             show = true; 
-            setTimeout(() => show = false, 5000); 
+            timeout = setTimeout(() => show = false, 5000); 
         }
-    " @notify.window="
-        message = $event.detail.message; 
-        isError = $event.detail.isError ?? false;
+    " 
+    @toast.window="
+        clearTimeout(timeout);
+        let detail = $event.detail;
+        message = detail.message || (detail[0] && detail[0].message) || detail;
+        let incomingType = detail.type || (detail[0] && detail[0].type) || 'success';
+        type = (incomingType === 'error' || detail.isError) ? 'error' : 'success';
         show = true; 
-        setTimeout(() => show = false, 5000);
-    " x-show="show" x-cloak x-transition:enter="transition ease-out duration-300"
+        timeout = setTimeout(() => show = false, 5000);
+    " 
+    x-show="show" x-cloak 
+    x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 translate-y-8 sm:translate-y-0 sm:scale-95"
-    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="transition ease-in duration-200"
+    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
+    x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
     x-transition:leave-end="opacity-0 translate-y-8 sm:translate-y-0 sm:scale-95"
-    class="fixed bottom-6 right-6 z-[100] flex items-center p-4 text-gray-800 bg-white rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] border border-gray-100"
+    class="fixed bottom-6 right-6 z-[100] flex items-center p-4 text-gray-800 bg-white rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-gray-200/80"
     role="alert" style="display: none;">
 
-    <div x-show="!isError" class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-[#e26a35] bg-[#e26a35]/10 rounded-lg">
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-            viewBox="0 0 20 20">
-            <path
-                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
+    <div x-show="type !== 'error'" class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-[#e26a35] bg-[#fff5f0] border border-[#e26a35]/20 rounded-lg">
+        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
         </svg>
     </div>
 
-    <div x-show="isError" class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg">
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.5 11.5a1 1 0 0 1-1.414 1.414L10 11.414l-2.086 2.086a1 1 0 0 1-1.414-1.414L8.586 10 6.5 7.914A1 1 0 0 1 7.914 6.5L10 8.586l2.086-2.086a1 1 0 0 1 1.414 1.414L11.414 10l2.086 2.086Z"/>
+    <div x-show="type === 'error'" class="inline-flex items-center justify-center shrink-0 w-8 h-8 text-red-600 bg-red-50 border border-red-100 rounded-lg">
+        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
     </div>
 
-    <div class="ml-3 text-sm font-medium pr-4" x-text="message"></div>
+    <div class="ml-3 text-sm font-bold text-gray-700 pr-4" x-text="message"></div>
 
     <button type="button" @click="show = false"
         class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-50 transition-colors inline-flex items-center justify-center h-8 w-8">
         <span class="sr-only">Close Notification</span>
         <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
         </svg>
     </button>
 </div>
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 46c41aa..e70fd87 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -68,11 +68,11 @@ class="lg:hidden p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded
                 </button>
             </div>
 
-            <nav class="flex-1 px-4 py-2 space-y-1.5 overflow-y-auto mt-2 custom-scrollbar">
-                <div class="text-[11px] font-semibold text-gray-600 mb-3 px-3 tracking-wider uppercase">Menu</div>
+            <nav class="flex-1 min-h-0 px-4 py-2 space-y-1 overflow-y-auto mt-1 custom-scrollbar">
+                <div class="text-[11px] font-semibold text-gray-600 mb-2 px-3 tracking-wider uppercase">Menu</div>
 
                 <a href="{{ route('dashboard') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('dashboard') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('dashboard') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('dashboard') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -82,7 +82,7 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
                 </a>
 
                 <a href="{{ route('applications.index') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('applications.index', 'applications.create', 'applications.show', 'applications.edit') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('applications.index', 'applications.create', 'applications.show', 'applications.edit') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('applications.index', 'applications.create', 'applications.show', 'applications.edit') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -92,7 +92,7 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
                 </a>
 
                 <a href="{{ route('resumes.index') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('resumes.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('resumes.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('resumes.*') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -102,13 +102,21 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
                     Resumes
                 </a>
 
-                {{-- Replaced the massive mt-16 with a perfectly balanced pt-6 block --}}
-                <div class="pt-6 pb-2">
+                <a href="{{ route('cover-letters.index') }}" @click="sidebarOpen = false"
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('cover-letters.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    <svg class="w-5 h-5 {{ request()->routeIs('cover-letters.*') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
+                        aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+                    </svg>
+                    Cover Letters
+                </a>
+
+                <div class="pt-4 pb-1">
                     <div class="text-[11px] font-semibold text-gray-600 px-3 tracking-wider uppercase">Analysis & Tracking</div>
                 </div>
 
                 <a href="{{ route('matches.index') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('matches.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('matches.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('matches.*') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"></path>
@@ -118,7 +126,7 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
                 </a>
 
                 <a href="{{ route('applications.board') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('applications.board') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('applications.board') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('applications.board') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h12A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6z" />
@@ -128,7 +136,7 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
                 </a>
 
                 <a href="{{ route('interviews.index') }}" @click="sidebarOpen = false"
-                    class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('interviews.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
+                    class="group flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('interviews.*') ? 'bg-[#e26a35]/10 text-[#e26a35]' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                     <svg class="w-5 h-5 {{ request()->routeIs('interviews.*') ? 'text-[#e26a35]' : 'text-gray-500 group-hover:text-gray-700' }} transition-colors"
                         aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
@@ -140,7 +148,7 @@ class="group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
             <div class="mt-auto px-4 pb-5 pt-2">
                 <div class="space-y-1 mb-4">
                     <a href="{{ route('profile.edit') }}" @click="sidebarOpen = false"
-                        class="group flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-xl text-sm font-medium transition-colors">
+                        class="group flex items-center gap-3 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-xl text-sm font-medium transition-colors">
                         <svg class="w-5 h-5 text-gray-500 group-hover:text-gray-700 transition-colors"
                             aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                             <path stroke-linecap="round" stroke-linejoin="round"
@@ -155,7 +163,7 @@ class="group flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-gray-50
                     <form method="POST" action="{{ route('logout') }}">
                         @csrf
                         <button type="submit"
-                            class="group w-full flex items-center gap-3 px-3 py-2.5 text-gray-600 hover:bg-red-50 hover:text-red-700 rounded-xl text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/50">
+                            class="group w-full flex items-center gap-3 px-3 py-2 text-gray-600 hover:bg-red-50 hover:text-red-700 rounded-xl text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/50">
                             <svg class="w-5 h-5 text-gray-500 group-hover:text-red-600 transition-colors"
                                 aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 stroke-width="1.5">
diff --git a/resources/views/livewire/cover-letter-editor.blade.php b/resources/views/livewire/cover-letter-editor.blade.php
new file mode 100644
index 0000000..367b928
--- /dev/null
+++ b/resources/views/livewire/cover-letter-editor.blade.php
@@ -0,0 +1,181 @@
+<div class="max-w-7xl mx-auto py-8 sm:py-12 px-4 sm:px-6 lg:px-8" x-data="{ showDeleteModal: @entangle('showDeleteModal') }">
+
+    <a href="{{ route('cover-letters.index') }}" class="inline-flex items-center text-sm font-semibold text-gray-500 hover:text-[#e26a35] transition-colors mb-6 group w-fit">
+        <x-heroicon-o-arrow-left class="w-4 h-4 mr-1.5 group-hover:-translate-x-1 transition-transform" />
+        Back to Cover Letters
+    </a>
+
+    <div class="mb-8 flex flex-col xl:flex-row xl:items-end justify-between gap-6">
+        <div class="flex items-start sm:items-center gap-4">
+            <div class="w-12 h-12 rounded-2xl bg-[#fff5f0] border border-[#e26a35]/20 hidden sm:flex items-center justify-center shrink-0 mt-1 sm:mt-0">
+                <x-heroicon-o-document-text class="w-6 h-6 text-[#e26a35]" />
+            </div>
+            <div>
+                <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 tracking-tight leading-tight">Cover Letter Editor</h1>
+                <p class="text-sm font-medium text-gray-500 mt-1">
+                    Target: <span class="text-gray-900 font-bold">{{ $jobPosting->title }}</span> at {{ $jobPosting->company }}
+                </p>
+            </div>
+        </div>
+
+        <div class="flex items-center gap-3 w-full xl:w-auto">
+            <a href="{{ route('applications.show', $jobPosting->id) }}" class="flex-1 xl:flex-none inline-flex items-center justify-center px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-bold text-gray-700 hover:bg-gray-50 transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-[#e26a35]/20">
+                <x-heroicon-o-briefcase class="w-4 h-4 mr-1.5 text-gray-400" />
+                View Job
+            </a>
+            
+            <button wire:click="save" wire:loading.attr="disabled" class="flex-1 xl:flex-none flex items-center justify-center gap-1.5 px-6 py-2.5 bg-[#e26a35] border border-transparent rounded-xl text-sm font-bold text-white hover:bg-[#cf5b29] hover:shadow-md transition-all focus:outline-none focus:ring-2 focus:ring-[#e26a35]/50 disabled:opacity-70 disabled:cursor-wait">
+                <x-heroicon-o-check wire:loading.remove wire:target="save" class="w-4 h-4" />
+                <svg wire:loading wire:target="save" class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                <span wire:loading.remove wire:target="save">Save Letter</span>
+                <span wire:loading wire:target="save">Saving...</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 items-start">
+        
+        <div class="xl:col-span-1 space-y-6 xl:sticky xl:top-8 order-2 xl:order-1">
+            
+            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 flex flex-col">
+                <h3 class="text-xs font-extrabold text-gray-500 uppercase tracking-widest mb-5">Application Context</h3>
+                <div class="space-y-4 mb-6">
+                    <div>
+                        <p class="text-xs font-semibold text-gray-500">Target Role</p>
+                        <p class="text-sm font-bold text-gray-900">{{ $jobPosting->title }}</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-500">Company</p>
+                        <p class="text-sm font-bold text-[#e26a35]">{{ $jobPosting->company }}</p>
+                    </div>
+                </div>
+
+                @if($jobPosting->cover_letter)
+                    <div class="pt-5 border-t border-gray-100 mt-auto">
+                        <button type="button" @click="showDeleteModal = true" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-xl text-sm font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/20">
+                            <x-heroicon-o-trash class="w-4 h-4" />
+                            Discard Draft
+                        </button>
+                    </div>
+                @endif
+            </div>
+
+            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center gap-2">
+                            <x-heroicon-o-cpu-chip class="w-5 h-5 text-[#e26a35]" />
+                            <h2 class="text-base font-extrabold text-gray-900">Grit Co-Pilot</h2>
+                        </div>
+                    </div>
+                    <p class="text-sm text-gray-500 leading-relaxed mb-6">
+                        Instantly write a highly targeted cover letter using the job description and your best matching resume.
+                    </p>
+
+                    @if($errorMessage)
+                        <div class="mb-5 p-3 rounded-xl bg-red-50 border border-red-100 text-red-700 text-xs font-semibold leading-relaxed shadow-sm">
+                            <div class="flex gap-2">
+                                <x-heroicon-o-exclamation-triangle class="w-4 h-4 shrink-0" />
+                                <span>{{ $errorMessage }}</span>
+                            </div>
+                        </div>
+                    @endif
+
+                    <button 
+                        wire:click="generate" 
+                        wire:loading.attr="disabled" 
+                        @if($this->creditsRemaining <= 0) disabled @endif
+                        class="w-full flex justify-center items-center gap-1.5 py-3.5 px-4 bg-[#e26a35] hover:bg-[#cf5b29] text-white text-sm font-bold rounded-xl shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#e26a35]/50 disabled:opacity-70 disabled:cursor-not-allowed">
+                        <x-heroicon-s-pencil-square wire:loading.remove wire:target="generate" class="w-4 h-4 text-white/90" />
+                        <svg wire:loading wire:target="generate" class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                        
+                        <span wire:loading.remove wire:target="generate">{{ $content ? 'Regenerate Draft' : 'Draft with AI' }}</span>
+                        <span wire:loading wire:target="generate">Analyzing Data...</span>
+                    </button>
+
+                    <div class="mt-4 flex items-center justify-between">
+                        <span class="text-xs font-semibold text-gray-500 uppercase tracking-widest">Daily Limit</span>
+                        <span class="text-xs font-bold {{ $this->creditsRemaining > 0 ? 'text-gray-700' : 'text-red-600' }}">
+                            {{ $this->creditsRemaining }} / {{ $this->dailyLimit }} remaining
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="xl:col-span-2 order-1 xl:order-2">
+            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col h-[600px] xl:h-[calc(100vh-10rem)] relative overflow-hidden">
+                
+                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 shrink-0">
+                    <div class="flex items-center">
+                        <span class="text-xs font-bold text-gray-600 uppercase tracking-widest">Document Text</span>
+                    </div>
+                    @if($content)
+                        <button type="button" 
+                            x-data="{ 
+                                copied: false,
+                                copyText() {
+                                    const editor = document.getElementById('content-editor');
+                                    if (navigator.clipboard && window.isSecureContext) {
+                                        navigator.clipboard.writeText(editor.value);
+                                    } else {
+                                        editor.focus();
+                                        editor.select();
+                                        try {
+                                            document.execCommand('copy');
+                                        } catch (err) {
+                                            console.error('Fallback copy failed', err);
+                                        }
+                                        window.getSelection().removeAllRanges();
+                                    }
+                                    this.copied = true;
+                                    setTimeout(() => this.copied = false, 3000);
+                                }
+                            }"
+                            @click="copyText()" 
+                            class="inline-flex items-center justify-center gap-1.5 text-xs font-bold transition-all px-3 py-1.5 rounded-lg border min-w-[100px]"
+                            :class="copied ? 'bg-green-50 text-green-700 border-green-200' : 'bg-[#fff5f0] text-[#e26a35] hover:text-[#cf5b29] border-[#e26a35]/20'"
+                        >
+                            <x-heroicon-o-clipboard-document x-show="!copied" class="w-4 h-4" />
+                            <x-heroicon-s-check-circle x-show="copied" x-cloak class="w-4 h-4" />
+                            <span x-text="copied ? 'Copied to clipboard!' : 'Copy Text'"></span>
+                        </button>
+                    @endif
+                </div>
+
+                <div class="flex-1 flex flex-col relative bg-white min-h-0">
+                    
+                    <div wire:loading wire:target="generate" class="absolute inset-0 z-20 bg-white/90 backdrop-blur-sm p-8 sm:p-12 flex flex-col pointer-events-none">
+                        <div class="flex items-center gap-3 mb-8">
+                            <svg class="animate-spin h-5 w-5 text-[#e26a35]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                            <span class="text-sm font-extrabold text-[#e26a35] uppercase tracking-widest animate-pulse">Drafting Document...</span>
+                        </div>
+
+                        <div class="space-y-4 w-full opacity-60">
+                            <div class="h-3 bg-gray-200 rounded w-1/4 animate-pulse"></div>
+                            <div class="h-3 bg-gray-200 rounded w-1/3 animate-pulse mb-8"></div>
+                            
+                            <div class="h-2.5 bg-gray-100 rounded w-full animate-pulse delay-75"></div>
+                            <div class="h-2.5 bg-gray-100 rounded w-full animate-pulse delay-100"></div>
+                            <div class="h-2.5 bg-gray-100 rounded w-11/12 animate-pulse delay-150"></div>
+                            <div class="h-2.5 bg-gray-100 rounded w-full animate-pulse delay-200"></div>
+                            <div class="h-2.5 bg-gray-100 rounded w-4/5 animate-pulse delay-300"></div>
+                        </div>
+                    </div>
+
+                    <textarea 
+                        id="content-editor"
+                        wire:model="content" 
+                        class="flex-1 w-full resize-none border-0 focus:ring-0 p-6 sm:p-10 text-gray-900 text-[15px] sm:text-base leading-[1.8] whitespace-pre-wrap font-sans bg-transparent outline-none overflow-y-auto custom-scrollbar placeholder-gray-400"
+                        placeholder="Use the Grit Co-Pilot to write your first draft, or start typing your cover letter here..."
+                        spellcheck="false"
+                    ></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <x-delete-modal show="showDeleteModal" title="Discard Draft"
+        description="Are you sure you want to clear this cover letter draft? The job application itself will remain safe."
+        on-confirm="executeDelete" on-cancel="showDeleteModal = false" />
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/cover-letter-index.blade.php b/resources/views/livewire/cover-letter-index.blade.php
new file mode 100644
index 0000000..7457c9a
--- /dev/null
+++ b/resources/views/livewire/cover-letter-index.blade.php
@@ -0,0 +1,226 @@
+<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 relative" x-data="{ showDeleteModal: false }">
+
+    <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left gap-6 mb-10">
+        <div class="flex flex-col items-center md:items-start w-full md:w-auto">
+            <div class="flex items-center justify-center md:justify-start gap-3 mb-2">
+                <div class="p-2 bg-[#fff5f0] rounded-lg border border-[#e26a35]/20">
+                    <x-heroicon-o-envelope class="w-6 h-6 text-[#e26a35]" />
+                </div>
+                <h1 class="text-3xl font-extrabold tracking-tight text-gray-900">Cover Letters</h1>
+            </div>
+            <p class="text-base font-medium text-gray-500 max-w-sm mx-auto md:mx-0">
+                Manage and edit tailored cover letters for your applications.
+            </p>
+        </div>
+        
+        <div class="flex gap-3 w-full md:w-auto">
+            <button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-cover-letter-modal')"
+                class="w-full md:w-auto justify-center px-6 py-3 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 inline-flex items-center gap-2">
+                <x-heroicon-o-document-plus class="w-5 h-5" />
+                Generate New Letter
+            </button>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:border-[#e26a35]/40 transition-colors flex items-center gap-4">
+            <div class="p-3 bg-[#fff5f0] rounded-xl">
+                <x-heroicon-o-envelope-open class="w-6 h-6 text-[#e26a35]" />
+            </div>
+            <div>
+                <p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Active Drafts</p>
+                <p class="text-3xl font-extrabold text-gray-900 tracking-tight">{{ $totalDrafts }}</p>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:border-[#e26a35]/40 transition-colors flex items-center gap-4">
+            <div class="p-3 bg-gray-50 rounded-xl">
+                <x-heroicon-o-briefcase class="w-6 h-6 text-gray-600" />
+            </div>
+            <div>
+                <p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Available Jobs</p>
+                <p class="text-3xl font-extrabold text-gray-900 tracking-tight">{{ count($availableJobs) }}</p>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:border-[#e26a35]/40 transition-colors flex items-center gap-4">
+            <div class="p-3 bg-indigo-50 rounded-xl">
+                <x-heroicon-o-bolt class="w-6 h-6 text-indigo-600" />
+            </div>
+            <div>
+                <p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Daily AI Credits</p>
+                <div class="flex items-baseline gap-1">
+                    <p class="text-3xl font-extrabold text-gray-900 tracking-tight">{{ $creditsRemaining }}</p>
+                    <p class="text-sm font-semibold text-gray-400">/ {{ $dailyLimit }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-4 mb-8 z-30 relative">
+        <div class="relative w-full">
+            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                <x-heroicon-o-magnifying-glass class="h-5 w-5 text-gray-400" />
+            </div>
+            <input wire:model.live.debounce.300ms="search" type="text" placeholder="Search saved letters by role or company..."
+                class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 bg-white text-sm font-medium focus:border-[#e26a35] focus:ring-1 focus:ring-[#e26a35] transition-all shadow-sm outline-none text-gray-900 placeholder-gray-400">
+        </div>
+    </div>
+
+    <div class="relative min-h-[400px] z-10">
+        <div wire:loading.grid wire:target="search, gotoPage"
+            class="absolute inset-0 z-10 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 bg-[#f9fafb]">
+            @for ($i = 0; $i < 6; $i++)
+                <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm flex flex-col h-full animate-pulse">
+                    <div class="h-7 w-24 bg-gray-200 rounded-full mb-6"></div>
+                    <div class="mb-8 flex-1">
+                        <div class="h-6 w-3/4 bg-gray-200 rounded-md mb-4"></div>
+                        <div class="h-4 w-1/2 bg-gray-100 rounded-md"></div>
+                    </div>
+                </div>
+            @endfor
+        </div>
+
+        <div wire:loading.remove wire:target="search, gotoPage">
+            @if($jobs->count() > 0)
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+                    @foreach($jobs as $job)
+                        <div wire:key="job-card-{{ $job->id }}"
+                            class="bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-md hover:border-[#e26a35]/40 hover:-translate-y-1 transition-all duration-300 flex flex-col p-6 group h-full">
+
+                            <div class="flex justify-between items-start mb-6 shrink-0">
+                                <div class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-green-50 text-green-700 border border-green-200">
+                                    Draft Saved
+                                </div>
+                                <div class="flex items-center gap-1.5 text-xs font-bold text-gray-400 bg-gray-50 px-2.5 py-1.5 rounded-lg border border-gray-100">
+                                    <x-heroicon-o-calendar class="w-3.5 h-3.5" />
+                                    {{ $job->updated_at->format('M d') }}
+                                </div>
+                            </div>
+
+                            <div class="mb-6 flex-1">
+                                <h3 class="text-xl font-extrabold text-gray-900 leading-tight mb-2 group-hover:text-[#e26a35] transition-colors">
+                                    {{ $job->title }}
+                                </h3>
+                                <div class="flex items-center gap-2 text-sm font-semibold text-gray-500">
+                                    <x-heroicon-o-building-office-2 class="w-4 h-4 opacity-70" />
+                                    {{ $job->company }}
+                                </div>
+                            </div>
+
+                            <div class="pt-5 border-t border-gray-100 flex items-center justify-between mt-auto shrink-0">
+                                <a href="{{ route('cover-letters.edit', $job) }}"
+                                    class="text-sm font-bold text-gray-600 hover:text-[#e26a35] transition-colors flex items-center gap-1.5 group/link">
+                                    Open Workspace
+                                    <x-heroicon-o-arrow-up-right
+                                        class="w-4 h-4 opacity-0 -translate-y-1 translate-x-1 group-hover/link:opacity-100 group-hover/link:translate-y-0 group-hover/link:translate-x-0 transition-all duration-300" />
+                                </a>
+
+                                <button type="button" @click="$wire.confirmDelete({{ $job->id }}); showDeleteModal = true"
+                                    class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
+                                    <x-heroicon-o-trash class="w-5 h-5" />
+                                </button>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+
+                @if($jobs->hasPages())
+                    <div class="mt-10 custom-pagination">
+                        {{ $jobs->links() }}
+                    </div>
+                @endif
+            @else
+                <div class="w-full bg-white rounded-3xl border border-gray-200 flex flex-col items-center justify-center text-center p-16 sm:p-24 shadow-sm">
+                    <div class="w-20 h-20 bg-[#fff5f0] rounded-2xl flex items-center justify-center mb-6 shadow-inner border border-[#e26a35]/10">
+                        <x-heroicon-o-envelope class="w-10 h-10 text-[#e26a35]" />
+                    </div>
+                    <h3 class="text-2xl font-extrabold text-gray-900 mb-3 tracking-tight">No Cover Letters Yet</h3>
+                    <p class="text-base font-medium text-gray-500 max-w-md mx-auto mb-8">
+                        You have not generated any cover letters yet. Click the button above to select a job application and start drafting.
+                    </p>
+                    <button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-cover-letter-modal')"
+                        class="px-6 py-3 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg transition-all duration-200 inline-flex items-center gap-2">
+                        <x-heroicon-o-document-plus class="w-5 h-5" />
+                        Generate New Letter
+                    </button>
+                </div>
+            @endif
+        </div>
+    </div>
+
+    <x-modal name="create-cover-letter-modal" maxWidth="md">
+        <div class="relative overflow-hidden bg-white rounded-2xl">
+            <div class="bg-gradient-to-b from-[#fff5f0] to-white px-6 py-8 border-b border-gray-100 text-center">
+                <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm border border-[#e26a35]/20">
+                    <x-heroicon-o-document-plus class="w-8 h-8 text-[#e26a35]" />
+                </div>
+                <h2 class="text-2xl font-extrabold text-gray-900 tracking-tight mb-2">New Cover Letter</h2>
+                <p class="text-sm font-medium text-gray-500 max-w-xs mx-auto">Select a target application to generate a tailored letter using your primary resume.</p>
+            </div>
+            
+            <div class="p-6">
+                <div class="mb-8">
+                    <label class="block text-sm font-bold text-gray-700 mb-2">Target Application</label>
+                    
+                    <div x-data="{ open: false, selectedId: @entangle('selectedJobForNewLetter') }" class="relative">
+                        <button type="button" @click="open = !open" @click.outside="open = false"
+                            class="w-full flex justify-between items-center rounded-xl border border-gray-300 py-3 pl-4 pr-4 text-gray-900 font-medium focus:outline-none focus:border-[#e26a35] focus:ring-2 focus:ring-[#e26a35]/20 shadow-sm bg-gray-50 hover:bg-white transition-all cursor-pointer text-left h-[50px]">
+                            
+                            <span x-show="!selectedId" class="text-gray-500 truncate pr-4">-- Choose an application --</span>
+                            
+                            @foreach($availableJobs as $job)
+                                <span x-show="selectedId == {{ $job->id }}" x-cloak class="truncate pr-4">
+                                    {{ $job->title }} <span class="text-gray-500 font-normal">at {{ $job->company }}</span>
+                                </span>
+                            @endforeach
+
+                            <x-heroicon-o-chevron-down class="w-5 h-5 text-gray-500 shrink-0 transition-transform duration-200" x-bind:class="open ? 'rotate-180' : ''" />
+                        </button>
+
+                        <div x-show="open" x-cloak x-transition.opacity
+                            class="absolute z-50 mt-2 w-full rounded-xl bg-white shadow-xl border border-gray-100 overflow-hidden py-2 max-h-60 overflow-y-auto custom-scrollbar">
+                            
+                            <button type="button" @click="selectedId = ''; open = false"
+                                class="w-full text-left px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
+                                :class="selectedId == '' ? 'bg-gray-50 text-gray-900' : 'text-gray-500'">
+                                -- Choose an application --
+                            </button>
+                            
+                            @foreach($availableJobs as $availableJob)
+                                <button type="button" @click="selectedId = {{ $availableJob->id }}; open = false"
+                                    class="w-full text-left px-5 py-2.5 text-sm font-semibold transition-colors truncate"
+                                    :class="selectedId == {{ $availableJob->id }} ? 'bg-[#fff5f0] text-[#e26a35]' : 'text-gray-700 hover:bg-[#fff5f0] hover:text-[#e26a35]'">
+                                    {{ $availableJob->title }} <span class="text-gray-400 font-normal">at {{ $availableJob->company }}</span>
+                                </button>
+                            @endforeach
+                            
+                            @if(count($availableJobs) === 0)
+                                <div class="px-5 py-3 text-sm text-gray-500 italic">No applications available.</div>
+                            @endif
+                        </div>
+                    </div>
+                    
+                    @error('selectedJobForNewLetter') <span class="text-red-500 text-sm font-medium mt-2 block">{{ $message }}</span> @enderror
+                </div>
+
+                <div class="flex flex-col gap-3">
+                    <button wire:click="startWorkspace" 
+                        class="w-full flex justify-center items-center gap-2 px-4 py-3.5 text-sm font-bold text-white bg-[#e26a35] rounded-xl hover:bg-[#cf5b29] disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm" 
+                        @if(empty($selectedJobForNewLetter)) disabled @endif>
+                        Continue to Editor
+                        <x-heroicon-o-arrow-right class="w-4 h-4" />
+                    </button>
+                    <button type="button" x-on:click="$dispatch('close-modal', 'create-cover-letter-modal')" 
+                        class="w-full px-4 py-3 text-sm font-bold text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    </x-modal>
+
+    <x-delete-modal show="showDeleteModal" title="Delete Cover Letter"
+        description="Are you sure you want to remove this cover letter? This will not delete the job application, only the drafted text. This action cannot be undone."
+        on-confirm="executeDelete" on-cancel="cancelDelete" />
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/create-application.blade.php b/resources/views/livewire/create-application.blade.php
index 1031a0f..2d9a9b2 100644
--- a/resources/views/livewire/create-application.blade.php
+++ b/resources/views/livewire/create-application.blade.php
@@ -28,26 +28,46 @@ class="block w-full rounded-xl border-gray-200 bg-gray-50 py-3.5 px-4 text-sm fo
             @error('url') <p class="mt-2 text-xs font-bold text-red-600">{{ $message }}</p> @enderror
         </div>
 
-        <div wire:ignore x-data="{ description: @entangle('description') }">
-            <label for="description" class="block text-sm font-extrabold text-gray-900 mb-2">Job Description</label>
+        <div wire:ignore x-data="{ 
+            description: @entangle('description'),
+            init() {
+                window.addEventListener('description-formatted', (event) => {
+                    this.$refs.trix.editor.loadHTML(event.detail.html);
+                });
+            }
+        }">
+            <div class="flex items-center justify-between mb-2">
+                <label for="description" class="block text-sm font-extrabold text-gray-900">Job Description</label>
+                
+                <button type="button" wire:click="autoFormatDescription" wire:loading.attr="disabled"
+                    class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#fff5f0] text-[#e26a35] border border-[#e26a35]/20 rounded-lg text-xs font-bold hover:bg-[#ffece4] transition-colors focus:outline-none focus:ring-2 focus:ring-[#e26a35]/50 disabled:opacity-50 disabled:cursor-wait">
+                    
+                    <x-heroicon-o-sparkles wire:loading.remove wire:target="autoFormatDescription" class="w-4 h-4" />
+                    <svg wire:loading wire:target="autoFormatDescription" class="animate-spin h-4 w-4 text-[#e26a35]" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    
+                    <span wire:loading.remove wire:target="autoFormatDescription">Auto Format</span>
+                    <span wire:loading wire:target="autoFormatDescription">Formatting...</span>
+                </button>
+            </div>
+            
             <input id="description" type="hidden">
             
             <div class="rounded-xl border border-gray-300 shadow-sm overflow-hidden focus-within:ring-2 focus-within:ring-[#e26a35]/50 focus-within:border-[#e26a35] transition-all group">
-                <trix-editor input="description"
+                <trix-editor x-ref="trix" input="description"
                     x-on:trix-change="description = $event.target.value"
-                    class="trix-content border-none outline-none"></trix-editor>
+                    class="trix-content border-none outline-none min-h-[200px]"></trix-editor>
             </div>
         </div>
         @error('description') <p class="mt-2 text-xs font-bold text-red-600">{{ $message }}</p> @enderror
 
         <div class="pt-6 border-t border-gray-100 flex justify-end shrink-0">
-            <button type="submit" wire:loading.attr="disabled"
+            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                 class="w-full md:w-auto px-8 py-3.5 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 shadow-sm flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed">
                 
-                <span wire:loading.remove>Save Job Posting</span>
+                <span wire:loading.remove wire:target="save">Save Job Posting</span>
 
-                <span wire:loading.flex class="items-center gap-2">
-                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <span wire:loading.flex wire:target="save" class="items-center gap-2">
+                    <svg class="animate-spin h-5 w-5 text-white" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
diff --git a/routes/web.php b/routes/web.php
index 0492872..dca618d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,8 @@
 use App\Http\Controllers\ResumeController;
 use App\Livewire\ApplicationBoard;
 use App\Livewire\InterviewIndex;
+use App\Livewire\CoverLetterIndex;
+use App\Livewire\CoverLetterEditor;
 use App\Livewire\InterviewPrep;
 use Illuminate\Support\Facades\Route;
 
@@ -76,7 +78,10 @@
 
         Route::get('/interviews', InterviewIndex::class)->name('interviews.index');
         Route::get('/matches/{matchReport}/interview', InterviewPrep::class)->name('interviews.prep');
+
+        Route::get('/cover-letters', CoverLetterIndex::class)->name('cover-letters.index');
+        Route::get('/cover-letters/{jobPosting}', CoverLetterEditor::class)->name('cover-letters.edit');
     });
 });
 
-require __DIR__.'/auth.php';
+require __DIR__ . '/auth.php';