diff --git a/src/Commands/ClearMailbaseCommand.php b/src/Commands/ClearMailbaseCommand.php
index 3409d2b..fe8f1b3 100644
--- a/src/Commands/ClearMailbaseCommand.php
+++ b/src/Commands/ClearMailbaseCommand.php
@@ -1,8 +1,11 @@
 <?php
 
+declare(strict_types=1);
+
 namespace Tkeer\Mailbase\Commands;
 
 use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Storage;
 use Tkeer\Mailbase\Mailbase;
 
 class ClearMailbaseCommand extends Command
@@ -19,22 +22,19 @@ class ClearMailbaseCommand extends Command
      *
      * @var string
      */
-    protected $description = 'Delete all emails stored by Mailbase in the database.';
+    protected $description = 'Delete all emails and attachment files stored by Mailbase.';
 
-    /**
-     * Execute the console command. Attempt to delete
-     * all of the Mailbase items stored in the DB.
-     * If an exception is thrown, catch it and
-     * display it in the console.
-     *
-     * @return void
-     */
-    public function handle()
+    public function handle(): void
     {
         $this->line('Clearing stored Mailbase emails.');
 
         Mailbase::truncate();
 
-        $this->info('Cleared stored Mailbase emails.');
+        $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+        foreach ($disk->allDirectories() as $dir) {
+            $disk->deleteDirectory($dir);
+        }
+
+        $this->info('Cleared stored Mailbase emails and attachments.');
     }
 }
diff --git a/src/MailController.php b/src/MailController.php
index a163796..fd33c25 100644
--- a/src/MailController.php
+++ b/src/MailController.php
@@ -4,7 +4,12 @@
 
 namespace Tkeer\Mailbase;
 
+use Exception;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\HttpFoundation\StreamedResponse;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 class MailController extends Controller
 {
@@ -15,11 +20,76 @@ public function index()
         return view('mailbase::index', ['mails' => $mails]);
     }
 
-    public function show(Mailbase $mailbase)
+    public function show(Mailbase $mailbase): JsonResponse
     {
         $mailbase->update(['is_read' => 1]);
 
         return response()->json($mailbase);
     }
 
+    public function attachment(Mailbase $mailbase, int $index): StreamedResponse
+    {
+        $attachment = $this->resolveAttachment($mailbase, $index);
+        $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+
+        return $disk->response($attachment['storage_path'], $attachment['filename'], [
+            'Content-Type' => $attachment['mime_type'],
+        ]);
+    }
+
+    public function downloadAttachment(Mailbase $mailbase, int $index): StreamedResponse
+    {
+        $attachment = $this->resolveAttachment($mailbase, $index);
+        $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+
+        return $disk->download($attachment['storage_path'], $attachment['filename']);
+    }
+
+    /**
+     * Clear all emails from the database and delete stored attachments.
+     */
+    public function clear(): JsonResponse
+    {
+        try {
+            Mailbase::truncate();
+
+            $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+            foreach ($disk->allDirectories() as $dir) {
+                $disk->deleteDirectory($dir);
+            }
+
+            return response()->json([
+                'success' => true,
+                'message' => 'All emails have been cleared successfully.',
+            ]);
+        } catch (Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to clear emails: ' . $e->getMessage(),
+            ], 500);
+        }
+    }
+
+    /**
+     * Resolve an attachment from the mail's JSON metadata by index.
+     *
+     * @return array{filename: string, mime_type: string, size: int, storage_path: string}
+     */
+    protected function resolveAttachment(Mailbase $mailbase, int $index): array
+    {
+        $attachments = json_decode($mailbase->attachments ?? '[]', true);
+
+        if (! is_array($attachments) || ! isset($attachments[$index])) {
+            throw new NotFoundHttpException('Attachment not found.');
+        }
+
+        $attachment = $attachments[$index];
+        $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+
+        if (! $disk->exists($attachment['storage_path'])) {
+            throw new NotFoundHttpException('Attachment file not found on disk.');
+        }
+
+        return $attachment;
+    }
 }
diff --git a/src/MailbaseServiceProvider.php b/src/MailbaseServiceProvider.php
index bd66350..0040d7a 100644
--- a/src/MailbaseServiceProvider.php
+++ b/src/MailbaseServiceProvider.php
@@ -1,26 +1,43 @@
 <?php
 
+declare(strict_types=1);
+
 namespace Tkeer\Mailbase;
 
 use Illuminate\Mail\MailManager;
 use Tkeer\Mailbase\Commands\ClearMailbaseCommand;
-use Illuminate\Mail\MailServiceProvider;
-use Illuminate\Support\ServiceProvider;
 use Tkeer\Mailbase\Commands\TestMailbaseCommand;
+use Illuminate\Support\ServiceProvider;
 
 class MailbaseServiceProvider extends ServiceProvider
 {
-    public function boot()
+    public function register(): void
+    {
+        $this->mergeConfigFrom(__DIR__ . '/config/mailbase.php', 'mailbase');
+    }
+
+    public function boot(): void
     {
-        // add `mailbase` to mailers config
+        // Add `mailbase` to mailers config
         config([
-            'mail.mailers.mailbase' => ['transport' => 'mailbase']
+            'mail.mailers.mailbase' => ['transport' => 'mailbase'],
         ]);
 
         app(MailManager::class)->extend('mailbase', function ($app) {
             return new MailbaseTransport();
         });
 
+        // Auto-register the mailbase filesystem disk if not already configured
+        $diskName = config('mailbase.disk', 'mailbase');
+        if (! config("filesystems.disks.{$diskName}")) {
+            config([
+                "filesystems.disks.{$diskName}" => [
+                    'driver' => 'local',
+                    'root' => config('mailbase.storage_path', storage_path('app/mailbase')),
+                ],
+            ]);
+        }
+
         $this->loadMigrationsFrom(__DIR__ . '/migrations/');
         $this->loadRoutesFrom(__DIR__ . '/routes.php');
         $this->loadViewsFrom(__DIR__ . '/views', 'mailbase');
@@ -30,6 +47,10 @@ public function boot()
                 ClearMailbaseCommand::class,
                 TestMailbaseCommand::class,
             ]);
+
+            $this->publishes([
+                __DIR__ . '/config/mailbase.php' => config_path('mailbase.php'),
+            ], 'mailbase-config');
         }
     }
 }
diff --git a/src/MailbaseTransport.php b/src/MailbaseTransport.php
index 6bf38ee..49111ed 100644
--- a/src/MailbaseTransport.php
+++ b/src/MailbaseTransport.php
@@ -1,7 +1,11 @@
 <?php
 
+declare(strict_types=1);
+
 namespace Tkeer\Mailbase;
 
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
 use Symfony\Component\Mailer\SentMessage;
 use Symfony\Component\Mailer\Transport\AbstractTransport;
 
@@ -9,9 +13,7 @@ class MailbaseTransport extends AbstractTransport
 {
     protected function doSend(SentMessage $message): void
     {
-        /**
-         * @var $email \Symfony\Component\Mime\Email
-         */
+        /** @var \Symfony\Component\Mime\Email $email */
         $email = $message->getOriginalMessage();
 
         $subject = $email->getSubject();
@@ -20,9 +22,10 @@ protected function doSend(SentMessage $message): void
         $cc = collect($email->getCc())->map->toString()->implode("\n");
         $bcc = collect($email->getBcc())->map->toString()->implode("\n");
         $body = $email->getHtmlBody() ?: $email->getTextBody();
-        $attachments = collect($email->getAttachments())->toJson();
         $headers = $email->getHeaders()->toString();
 
+        $attachments = $this->storeAttachments($email->getAttachments());
+
         Mailbase::create([
             'from'        => $from,
             'to'          => $to,
@@ -31,11 +34,42 @@ protected function doSend(SentMessage $message): void
             'subject'     => $subject,
             'body'        => $body,
             'headers'     => $headers,
-            'attachments' => $attachments,
+            'attachments' => json_encode($attachments),
             'sent_at'     => now()->toDateTimeString(),
         ]);
     }
 
+    /**
+     * Store attachment files to disk and return metadata array.
+     *
+     * @param  iterable<\Symfony\Component\Mime\Part\DataPart>  $parts
+     * @return array<int, array{filename: string, mime_type: string, size: int, storage_path: string}>
+     */
+    protected function storeAttachments(iterable $parts): array
+    {
+        $disk = Storage::disk(config('mailbase.disk', 'mailbase'));
+        $date = now()->format('Y-m-d');
+        $attachments = [];
+
+        foreach ($parts as $part) {
+            $filename = $part->getFilename() ?? 'attachment';
+            $content = $part->getBody();
+            $mimeType = $part->getContentType();
+
+            $storagePath = $date . '/' . Str::uuid() . '_' . $filename;
+            $disk->put($storagePath, $content);
+
+            $attachments[] = [
+                'filename'     => $filename,
+                'mime_type'    => $mimeType,
+                'size'         => strlen($content),
+                'storage_path' => $storagePath,
+            ];
+        }
+
+        return $attachments;
+    }
+
     public function __toString(): string
     {
         return 'mailbase';
diff --git a/src/config/mailbase.php b/src/config/mailbase.php
new file mode 100644
index 0000000..b1b1391
--- /dev/null
+++ b/src/config/mailbase.php
@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Storage Disk
+    |--------------------------------------------------------------------------
+    |
+    | The filesystem disk used to store email attachments. If this disk is not
+    | defined in your filesystems.php config, Mailbase will automatically
+    | register a local disk pointing to the storage_path below.
+    |
+    */
+
+    'disk' => env('MAILBASE_DISK', 'mailbase'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Storage Path
+    |--------------------------------------------------------------------------
+    |
+    | The local path used when Mailbase auto-registers its filesystem disk.
+    | This is only used if the disk above is not already configured in
+    | your application's filesystems.php config file.
+    |
+    */
+
+    'storage_path' => storage_path('app/mailbase'),
+
+];
\ No newline at end of file
diff --git a/src/routes.php b/src/routes.php
index 309c6da..8d09c6d 100644
--- a/src/routes.php
+++ b/src/routes.php
@@ -7,5 +7,8 @@
 
 Route::group(['as' => 'mailbase::', 'prefix' => 'mailbase', 'middleware' => SubstituteBindings::class], function () {
     Route::get('/', MailController::class . '@index')->name('index');
+    Route::post('/clear', MailController::class . '@clear')->name('clear');
+    Route::get('/{mailbase}/attachments/{index}', MailController::class . '@attachment')->name('attachment');
+    Route::get('/{mailbase}/attachments/{index}/download', MailController::class . '@downloadAttachment')->name('attachment.download');
     Route::get('/{mailbase}', MailController::class . '@show')->name('show');
 });
diff --git a/src/views/index.blade.php b/src/views/index.blade.php
index 254a4bc..4026e81 100644
--- a/src/views/index.blade.php
+++ b/src/views/index.blade.php
@@ -2,138 +2,587 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>{{ config('app.name') }} - Mail Viewer</title>
 
-    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
     <style>
-        .mail:hover, .mail.unread:hover {
-            background-color: #e8e8ed !important;
+        /* Custom animations and transitions */
+        .mail-item {
+            transition: all 0.2s ease-in-out;
         }
 
-        .mail {
-            cursor: pointer;
+        .mail-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
-        .mail.selected {
-            background-color: #6c757d52 !important;
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
         }
 
-        .mail.unread {
-            background-color: white !important;
-            border-right: #4f4f59 1px solid !important;
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        .pagination-links nav {
-            float: right;
+        /* Smooth scrollbar */
+        .scrollbar-thin::-webkit-scrollbar {
+            width: 6px;
         }
 
-        .pagination-links .page-link {
-            color: dimgrey;
+        .scrollbar-thin::-webkit-scrollbar-track {
+            background: #f1f5f9;
+            border-radius: 3px;
         }
 
-        .pagination-links .active .page-link {
-            background-color: #e8e8ed;
-            border-color: #e8e8ed;
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 3px;
         }
 
-        .pagination-links .active .page-link {
-            background-color: #e8e8ed;
+        .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
         }
 
-
-        .pagination-links .page-link:focus {
-            border-color: #e8e8ed;
-            box-shadow: none;
+        /* Mobile header visibility */
+        @media (max-width: 767px) {
+            /* Hide reset button when viewing mail details on mobile */
+            .mobile-mail-viewer #reset-btn {
+                display: none;
+            }
         }
-
-
     </style>
 </head>
-<body style="overflow: hidden">
+<body class="bg-gray-50 font-sans">
 
-<div class="row bg-light border" style="height: 60px">
-    <h3 style="margin: auto">{{ config('app.name') }} - Outgoing mails</h3>
-</div>
+<!-- Header -->
+<header id="main-header" class="bg-white shadow-sm border-b border-gray-200">
+    <div class="px-4 sm:px-6 lg:px-8 py-4">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <i class="fas fa-envelope text-blue-600 text-xl"></i>
+                <h1 class="text-xl font-semibold text-gray-900">{{ config('app.name') }} - Outgoing Mails</h1>
+            </div>
+            <div class="flex items-center space-x-3">
+                <!-- Reset Button -->
+                <button id="reset-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center space-x-2">
+                    <i class="fas fa-trash-alt text-sm"></i>
+                    <span class="hidden sm:inline">Clear All</span>
+                </button>
+                <!-- Mobile back button -->
+                <button id="mobile-back-btn" class="md:hidden bg-gray-100 hover:bg-gray-200 p-2 rounded-lg transition-colors duration-200 hidden">
+                    <i class="fas fa-arrow-left text-gray-600"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</header>
+
+<div class="flex h-screen bg-gray-50" style="height: calc(100vh - 73px);">
 
-<div class="row p-5">
-    <div class="col-md-3">
+    <!-- Mail List Sidebar -->
+    <div id="mail-list-panel" class="w-full md:w-80 lg:w-96 bg-white border-r border-gray-200 flex flex-col">
 
-        <div class="container-fluid" style="max-height: 650px; overflow-y: scroll">
+        <!-- Mail List Header -->
+        <div class="p-4 border-b border-gray-100 bg-gray-50">
+            <div class="flex items-center justify-between">
+                <h2 class="font-medium text-gray-900 flex items-center">
+                    <i class="fas fa-inbox text-gray-500 mr-2"></i>
+                    Inbox
+                </h2>
+                <span class="text-sm text-gray-500 bg-gray-200 px-2 py-1 rounded-full">
+                        {{ $mails->total() ?? 0 }}
+                    </span>
+            </div>
+        </div>
 
+        <!-- Mail List -->
+        <div class="flex-1 overflow-y-auto scrollbar-thin">
             @forelse($mails as $mail)
-                <div class="container bg-light p-2 flex-column border-bottom mail mail--js {{ $mail->is_read ?: 'unread' }}" data-id="{{ $mail->id }}">
-                    <div>
-                        {{ $mail->subject }}
-                    </div>
-                    <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
-                        <div>
-                            {{ $mail->to }}
+                <div class="mail-item border-b border-gray-100 p-4 cursor-pointer hover:bg-gray-50 {{ $mail->is_read ? '' : 'bg-blue-50 border-l-4 border-l-blue-500' }}"
+                     data-id="{{ $mail->id }}">
+
+                    <div class="flex items-start justify-between mb-2">
+                        <div class="flex items-center space-x-2 min-w-0 flex-1">
+                            <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
+                                {{ strtoupper(substr($mail->to, 0, 1)) }}
+                            </div>
+                            <div class="min-w-0 flex-1">
+                                <p class="text-sm font-medium text-gray-900 truncate">{{ $mail->to }}</p>
+                            </div>
                         </div>
-                        <div>
+                        <div class="flex items-center space-x-2 ml-2">
+                            @if(!$mail->is_read)
+                                <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+                            @endif
+                            <button class="external-link-btn text-gray-400 hover:text-blue-600 transition-colors duration-200"
+                                    data-id="{{ $mail->id }}" title="Open in new tab">
+                                <i class="fas fa-external-link-alt text-xs"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-1">
+                        {{ $mail->subject ?: 'No Subject' }}
+                    </h3>
+
+                    <div class="flex items-center justify-between text-xs text-gray-500">
+                        <div class="flex items-center space-x-1">
+                            <i class="fas fa-clock"></i>
                             <span>{{ $mail->sent_at->diffForHumans() }}</span>
                         </div>
+                        @php $attachmentList = json_decode($mail->attachments, true) ?? []; @endphp
+                        @if(count($attachmentList) > 0)
+                            <span class="flex items-center space-x-1 text-gray-400">
+                                <i class="fas fa-paperclip"></i>
+                                <span>{{ count($attachmentList) }}</span>
+                            </span>
+                        @endif
                     </div>
                 </div>
             @empty
-                No mail found
+                <div class="p-8 text-center">
+                    <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
+                    <p class="text-gray-500">No mails found</p>
+                </div>
             @endforelse
-            <div class="pagination-links">
-                {{ $mails->links() }}
-            </div>
-
         </div>
 
+        <!-- Pagination -->
+        @if($mails->hasPages())
+            <div class="border-t border-gray-200 p-4 bg-gray-50">
+                <div class="flex items-center justify-between text-sm text-gray-700">
+                    <div class="flex items-center space-x-2">
+                        @if($mails->onFirstPage())
+                            <button disabled class="p-2 text-gray-400 cursor-not-allowed">
+                                <i class="fas fa-chevron-left"></i>
+                            </button>
+                        @else
+                            <a href="{{ $mails->previousPageUrl() }}" class="p-2 text-gray-600 hover:text-blue-600 transition-colors">
+                                <i class="fas fa-chevron-left"></i>
+                            </a>
+                        @endif
+
+                        <span class="px-3 py-1 bg-white rounded border">
+                                {{ $mails->currentPage() }} of {{ $mails->lastPage() }}
+                            </span>
+
+                        @if($mails->hasMorePages())
+                            <a href="{{ $mails->nextPageUrl() }}" class="p-2 text-gray-600 hover:text-blue-600 transition-colors">
+                                <i class="fas fa-chevron-right"></i>
+                            </a>
+                        @else
+                            <button disabled class="p-2 text-gray-400 cursor-not-allowed">
+                                <i class="fas fa-chevron-right"></i>
+                            </button>
+                        @endif
+                    </div>
+
+                    <div class="text-xs text-gray-500">
+                        Showing {{ $mails->firstItem() ?? 0 }}-{{ $mails->lastItem() ?? 0 }} of {{ $mails->total() ?? 0 }}
+                    </div>
+                </div>
+            </div>
+        @endif
     </div>
 
+    <!-- Mail Viewer -->
+    <div id="mail-viewer-panel" class="hidden md:flex flex-1 flex-col bg-white">
 
-    <div class="col-md-9">
+        <!-- Mail Viewer Header -->
+        <div id="mail-header" class="border-b border-gray-200 p-6 bg-white">
+            <div id="empty-state" class="text-center py-12">
+                <i class="fas fa-envelope-open text-4xl text-gray-300 mb-4"></i>
+                <p class="text-gray-500">Select a mail to view its content</p>
+            </div>
 
-        <div class="row flex-column pl-3">
-            <h3 id="mail-subject"></h3>
-            <p class="m-0">
-                <span><strong>From:</strong></span>
-                <span id="mail-from"></span>
-            </p>
-            <p class="m-0">
-                <span><strong>To:</strong></span>
-                <span id="mail-to"></span>
-            </p>
-        </div>
+            <div id="mail-details" class="hidden">
+                <div class="flex items-start justify-between mb-4">
+                    <h2 id="mail-subject" class="text-xl font-semibold text-gray-900 flex-1 mr-4"></h2>
+                    <div class="flex items-center space-x-2">
+                        <button id="open-external" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center space-x-2">
+                            <i class="fas fa-external-link-alt"></i>
+                        </button>
+                    </div>
+                </div>
 
-        <iframe class="border" width="100%" height="650px" id="mail-iframe">
+                <div class="space-y-2 text-sm">
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-user text-gray-400 w-4"></i>
+                        <span class="font-medium text-gray-700">From:</span>
+                        <span id="mail-from" class="text-gray-900"></span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-paper-plane text-gray-400 w-4"></i>
+                        <span class="font-medium text-gray-700">To:</span>
+                        <span id="mail-to" class="text-gray-900"></span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-clock text-gray-400 w-4"></i>
+                        <span class="font-medium text-gray-700">Sent:</span>
+                        <span id="mail-date" class="text-gray-900"></span>
+                    </div>
+                </div>
 
-        </iframe>
+                <div id="mail-attachments" class="hidden mt-4 pt-4 border-t border-gray-100">
+                    <div class="flex items-center space-x-2 mb-2">
+                        <i class="fas fa-paperclip text-gray-400"></i>
+                        <span class="text-sm font-medium text-gray-700">Attachments</span>
+                        <span id="attachment-count" class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full"></span>
+                    </div>
+                    <div id="attachment-list" class="flex flex-wrap gap-2"></div>
+                </div>
+            </div>
+        </div>
 
+        <!-- Mail Content -->
+        <div class="flex-1 overflow-hidden">
+            <iframe id="mail-iframe" class="w-full h-full border-0 bg-white"></iframe>
+        </div>
     </div>
 </div>
 
-<script
-    src="https://code.jquery.com/jquery-3.4.1.min.js"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-    crossorigin="anonymous">
-</script>
+<!-- Reset Confirmation Modal -->
+<div id="reset-modal" class="fixed inset-0 z-50 hidden">
+    <div class="flex items-center justify-center min-h-screen px-4">
+        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"></div>
+        <div class="relative bg-white rounded-lg max-w-md w-full p-6 shadow-xl">
+            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full mb-4">
+                <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
+            </div>
+            <h3 class="text-lg font-medium text-gray-900 text-center mb-2">Clear All Emails</h3>
+            <p class="text-sm text-gray-500 text-center mb-6">
+                Are you sure you want to delete all emails? This action cannot be undone.
+            </p>
+            <div class="flex space-x-3">
+                <button id="cancel-reset" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200">
+                    Cancel
+                </button>
+                <button id="confirm-reset" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
+                    Delete All
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
-  $(function () {
-    $(".mail").click(function () {
-      $('.mail.selected').removeClass('selected')
-      $(this).addClass('selected').removeClass('unread')
-      $.get('/mailbase/' + $(this).data('id'), function (response) {
-        $("#mail-iframe").attr('srcdoc', '<base target="_blank" /> ' + response.body)
-        $("#mail-subject").html(response.subject)
-        $("#mail-to").text(response.to);
-        $("#mail-from").text(response.from)
-      })
-    }).first().click();
-  })
+    $(function () {
+        let currentMailId = null;
+
+        // Handle mail item clicks
+        $(".mail-item").click(function (e) {
+            // Prevent event if clicking on external link button
+            if ($(e.target).closest('.external-link-btn').length) {
+                return;
+            }
+
+            const mailId = $(this).data('id');
+            selectMail(mailId, $(this));
+        });
 
+        // Handle external link button clicks
+        $('.external-link-btn').click(function(e) {
+            e.stopPropagation(); // Prevent mail selection
+            const mailId = $(this).data('id');
+            openMailInNewTab(mailId);
+        });
+
+        // Handle mobile back button
+        $('#mobile-back-btn').click(function() {
+            showMailList();
+        });
+
+        // Handle open external button in viewer
+        $('#open-external').click(function() {
+            if (currentMailId) {
+                openMailInNewTab(currentMailId);
+            }
+        });
+
+        // Handle reset button click
+        $('#reset-btn').click(function() {
+            $('#reset-modal').removeClass('hidden');
+        });
+
+        // Handle reset modal buttons
+        $('#cancel-reset').click(function() {
+            $('#reset-modal').addClass('hidden');
+        });
+
+        $('#confirm-reset').click(function() {
+            resetAllMails();
+        });
+
+        // Close modal when clicking outside
+        $('#reset-modal').click(function(e) {
+            if (e.target === this) {
+                $(this).addClass('hidden');
+            }
+        });
+
+        // Function to reset all mails
+        function resetAllMails() {
+            // Show loading state on button
+            const originalText = $('#confirm-reset').html();
+            $('#confirm-reset').html('<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...');
+            $('#confirm-reset').prop('disabled', true);
+
+            // Make AJAX request to clear all mails
+            $.ajax({
+                url: '/mailbase/clear',
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+                },
+                success: function(response) {
+                    // Hide modal
+                    $('#reset-modal').addClass('hidden');
+
+                    // Show success message (you could use a toast notification here)
+                    alert('All emails have been cleared successfully!');
+
+                    // Reload the page to refresh the mail list
+                    window.location.reload();
+                },
+                error: function(xhr, status, error) {
+                    // Handle error
+                    alert('Failed to clear emails. Please try again.');
+                    console.error('Reset error:', error);
+                },
+                complete: function() {
+                    // Reset button state
+                    $('#confirm-reset').html(originalText);
+                    $('#confirm-reset').prop('disabled', false);
+                }
+            });
+        }
+
+        // Function to select and display mail
+        function selectMail(mailId, mailElement) {
+            currentMailId = mailId;
+
+            // Update UI - remove previous selection and add new
+            $('.mail-item').removeClass('bg-blue-100 ring-2 ring-blue-500 ring-opacity-50');
+            mailElement.addClass('bg-blue-100 ring-2 ring-blue-500 ring-opacity-50')
+                .removeClass('bg-blue-50 border-l-4 border-l-blue-500'); // Remove unread styling
+
+            // Show loading state
+            showLoadingState();
+
+            // Fetch mail content
+            $.get('/mailbase/' + mailId)
+                .done(function (response) {
+                    displayMail(response);
+                    showMailViewer();
+                })
+                .fail(function() {
+                    showErrorState();
+                });
+        }
+
+        // Function to display mail content
+        function displayMail(mailData) {
+            $("#mail-iframe").attr('srcdoc', '<base target="_blank" /> ' + mailData.body);
+            $("#mail-subject").text(mailData.subject || 'No Subject');
+            $("#mail-to").text(mailData.to);
+            $("#mail-from").text(mailData.from);
+            $("#mail-date").text(mailData.sent_at || 'Unknown');
+
+            // Render attachments
+            renderAttachments(mailData);
+
+            // Show mail details, hide empty state
+            $("#empty-state").hide();
+            $("#mail-details").removeClass('hidden').addClass('fade-in');
+        }
+
+        function renderAttachments(mailData) {
+            let attachments = [];
+            try {
+                attachments = typeof mailData.attachments === 'string'
+                    ? JSON.parse(mailData.attachments)
+                    : (mailData.attachments || []);
+            } catch (e) {
+                attachments = [];
+            }
+
+            if (!Array.isArray(attachments) || attachments.length === 0) {
+                $('#mail-attachments').addClass('hidden');
+                return;
+            }
+
+            $('#attachment-count').text(attachments.length);
+            const $list = $('#attachment-list').empty();
+
+            attachments.forEach(function (att, index) {
+                const previewUrl = '/mailbase/' + mailData.id + '/attachments/' + index;
+                const downloadUrl = previewUrl + '/download';
+
+                const $chip = $('<div>')
+                    .addClass('flex items-center space-x-2 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm');
+
+                $chip.append($('<i>').addClass(getFileIcon(att.mime_type) + ' text-gray-500'));
+                $chip.append(
+                    $('<a>').attr('href', previewUrl).attr('target', '_blank')
+                        .addClass('text-blue-600 hover:text-blue-800 font-medium truncate max-w-[200px]')
+                        .text(att.filename)
+                );
+                $chip.append($('<span>').addClass('text-gray-400 text-xs').text(formatFileSize(att.size)));
+                $chip.append(
+                    $('<a>').attr('href', downloadUrl).attr('title', 'Download')
+                        .addClass('text-gray-400 hover:text-gray-600')
+                        .append($('<i>').addClass('fas fa-download text-xs'))
+                );
+
+                $list.append($chip);
+            });
+
+            $('#mail-attachments').removeClass('hidden');
+        }
+
+        function formatFileSize(bytes) {
+            if (!bytes || bytes === 0) return '0 B';
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / 1048576).toFixed(1) + ' MB';
+        }
+
+        function getFileIcon(mimeType) {
+            if (!mimeType) return 'fas fa-file';
+            if (mimeType.startsWith('image/')) return 'fas fa-file-image';
+            if (mimeType === 'application/pdf') return 'fas fa-file-pdf';
+            if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'fas fa-file-excel';
+            if (mimeType.includes('word') || mimeType.includes('document')) return 'fas fa-file-word';
+            if (mimeType.includes('zip') || mimeType.includes('archive')) return 'fas fa-file-archive';
+            if (mimeType.startsWith('text/')) return 'fas fa-file-alt';
+            return 'fas fa-file';
+        }
+
+        // Function to open mail in new tab
+        function openMailInNewTab(mailId) {
+            $.get('/mailbase/' + mailId)
+                .done(function (response) {
+                    let attachments = [];
+                    try {
+                        attachments = typeof response.attachments === 'string'
+                            ? JSON.parse(response.attachments)
+                            : (response.attachments || []);
+                    } catch (e) {
+                        attachments = [];
+                    }
+
+                    let attachmentHtml = '';
+                    if (Array.isArray(attachments) && attachments.length > 0) {
+                        const items = attachments.map(function (att, index) {
+                            const previewUrl = '/mailbase/' + response.id + '/attachments/' + index;
+                            const downloadUrl = previewUrl + '/download';
+                            return '<div style="display:inline-flex;align-items:center;gap:8px;background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;padding:6px 12px;font-size:13px;">'
+                                + '<a href="' + previewUrl + '" target="_blank" style="color:#3182ce;text-decoration:none;font-weight:500;">' + att.filename + '</a>'
+                                + '<span style="color:#a0aec0;font-size:11px;">' + formatFileSize(att.size) + '</span>'
+                                + '<a href="' + downloadUrl + '" style="color:#718096;text-decoration:none;" title="Download">&#x2B07;</a>'
+                                + '</div>';
+                        }).join(' ');
+
+                        attachmentHtml = '<div style="padding:12px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;">'
+                            + '<div style="font-size:13px;font-weight:600;color:#4a5568;margin-bottom:8px;">Attachments (' + attachments.length + ')</div>'
+                            + '<div style="display:flex;flex-wrap:wrap;gap:8px;">' + items + '</div>'
+                            + '</div>';
+                    }
+
+                    const newWindow = window.open('', '_blank');
+                    newWindow.document.write(`
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                                <title>${response.subject || 'Mail'}</title>
+                                <base target="_blank" />
+                                <style>
+                                    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+                                    .mail-header { background: #f8fafc; padding: 20px; border-bottom: 1px solid #e2e8f0; }
+                                    .mail-header h1 { margin: 0 0 10px 0; color: #1a202c; }
+                                    .mail-meta { color: #4a5568; font-size: 14px; }
+                                    .mail-content { padding: 20px; }
+                                </style>
+                            </head>
+                            <body>
+                                <div class="mail-header">
+                                    <h1>${response.subject || 'No Subject'}</h1>
+                                    <div class="mail-meta">
+                                        <div><strong>From:</strong> ${response.from}</div>
+                                        <div><strong>To:</strong> ${response.to}</div>
+                                        <div><strong>Date:</strong> ${response.sent_at || 'Unknown'}</div>
+                                    </div>
+                                </div>
+                                ${attachmentHtml}
+                                <div class="mail-content">
+                                    ${response.body}
+                                </div>
+                            </body>
+                            </html>
+                        `);
+                    newWindow.document.close();
+                })
+                .fail(function() {
+                    alert('Failed to load mail content');
+                });
+        }
+
+        // Responsive functions
+        function showMailViewer() {
+            if (window.innerWidth < 768) { // Mobile
+                $('#mail-list-panel').hide();
+                $('#mail-viewer-panel').removeClass('hidden').addClass('flex');
+                $('#mobile-back-btn').removeClass('hidden');
+                $('body').addClass('mobile-mail-viewer');
+            } else { // Desktop
+                $('#mail-viewer-panel').removeClass('hidden').addClass('flex');
+            }
+        }
+
+        function showMailList() {
+            if (window.innerWidth < 768) { // Mobile
+                $('#mail-viewer-panel').removeClass('flex').addClass('hidden');
+                $('#mail-list-panel').show();
+                $('#mobile-back-btn').addClass('hidden');
+                // Show header when back to mail list
+                $('#main-header').removeClass('header-mobile-hidden');
+
+                $('body').removeClass('mobile-mail-viewer');
+            }
+        }
+
+        function showLoadingState() {
+            $("#mail-iframe").attr('srcdoc', '<div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; color: #666;"><i class="fas fa-spinner fa-spin" style="margin-right: 10px;"></i> Loading...</div>');
+        }
+
+        function showErrorState() {
+            $("#mail-iframe").attr('srcdoc', '<div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; color: #e53e3e;"><i class="fas fa-exclamation-triangle" style="margin-right: 10px;"></i> Failed to load mail content</div>');
+        }
+
+        // Handle window resize
+        $(window).resize(function() {
+            if (window.innerWidth >= 768 && $('#mail-viewer-panel').hasClass('hidden')) {
+                $('#mail-list-panel').show();
+                $('#mail-viewer-panel').removeClass('hidden').addClass('flex');
+                $('#mobile-back-btn').addClass('hidden');
+                // Show header on desktop
+                $('#main-header').removeClass('header-mobile-hidden');
+            }
+        });
+
+        // Auto-select first mail on desktop
+        if (window.innerWidth >= 768) {
+            $(".mail-item").first().click();
+        }
+    });
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file