diff --git a/app/api/mail/route.ts b/app/api/mail/route.ts
index b16ae3a..9ce893d 100644
--- a/app/api/mail/route.ts
+++ b/app/api/mail/route.ts
@@ -124,21 +124,25 @@ export async function GET() {
       imap.once('ready', () => {
         imap.openBox('INBOX', false, (err, box) => {
           if (err) {
+            console.error('Error opening inbox:', err);
             imap.end();
-            resolve(NextResponse.json({ error: 'Failed to open inbox' }, { status: 500 }));
+            resolve(NextResponse.json({ emails: [], error: 'Failed to open inbox' }));
             return;
           }
 
-          const total = box.messages.total;
-          const start = Math.max(1, total - 19); // Get last 20 emails
+          console.log('Inbox opened, total messages:', box.messages.total);
 
-          if (total === 0) {
+          if (box.messages.total === 0) {
             imap.end();
-            resolve(NextResponse.json({ emails: [], mailUrl: null }));
+            resolve(NextResponse.json({ 
+              emails: [],
+              mailUrl: process.env.NEXTCLOUD_URL ? `${process.env.NEXTCLOUD_URL}/apps/mail/` : null
+            }));
             return;
           }
 
-          const f = imap.seq.fetch(`${start}:${total}`, {
+          const start = Math.max(1, box.messages.total - 19); // Get last 20 emails
+          const f = imap.seq.fetch(`${start}:${box.messages.total}`, {
             bodies: ['HEADER.FIELDS (FROM TO SUBJECT DATE)', 'TEXT'],
             struct: true
           });
@@ -166,7 +170,7 @@ export async function GET() {
                   email.from = headers.from?.[0] || '';
                   email.to = headers.to?.[0] || '';
                   email.subject = headers.subject?.[0] || '(No subject)';
-                  email.date = new Date(headers.date?.[0] || Date.now());
+                  email.date = headers.date?.[0] || new Date().toISOString();
                 } else {
                   email.body = buffer;
                 }
@@ -187,14 +191,18 @@ export async function GET() {
           f.once('error', (err) => {
             console.error('Fetch error:', err);
             imap.end();
-            resolve(NextResponse.json({ error: 'Failed to fetch emails' }, { status: 500 }));
+            resolve(NextResponse.json({ 
+              emails: [],
+              error: 'Failed to fetch emails'
+            }));
           });
 
           f.once('end', () => {
+            console.log('Fetch completed, found emails:', emails.length);
             imap.end();
             resolve(NextResponse.json({
-              emails: emails.sort((a, b) => b.date.getTime() - a.date.getTime()),
-              mailUrl: null
+              emails: emails.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
+              mailUrl: process.env.NEXTCLOUD_URL ? `${process.env.NEXTCLOUD_URL}/apps/mail/` : null
             }));
           });
         });
@@ -202,17 +210,20 @@ export async function GET() {
 
       imap.once('error', (err) => {
         console.error('IMAP error:', err);
-        resolve(NextResponse.json({ error: 'IMAP connection error' }, { status: 500 }));
+        resolve(NextResponse.json({ 
+          emails: [],
+          error: 'IMAP connection error'
+        }));
       });
 
       imap.connect();
     });
   } catch (error) {
     console.error('Error in mail API:', error);
-    return NextResponse.json(
-      { error: error instanceof Error ? error.message : 'Unknown error' },
-      { status: 500 }
-    );
+    return NextResponse.json({ 
+      emails: [],
+      error: error instanceof Error ? error.message : 'Unknown error'
+    });
   }
 }
 
diff --git a/components/email.tsx b/components/email.tsx
index 6e56e5b..90763a8 100644
--- a/components/email.tsx
+++ b/components/email.tsx
@@ -39,23 +39,29 @@ export function Email() {
     
     try {
       const response = await fetch('/api/mail');
+      const data = await response.json();
       
       if (!response.ok) {
         if (response.status === 401) {
           signIn();
           return;
         }
-        
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to fetch emails');
+        throw new Error(data.error || 'Failed to fetch emails');
       }
+
+      // Transform the email data to match the expected format
+      const transformedEmails = (data.emails || []).map((email: any) => ({
+        id: email.id,
+        subject: email.subject,
+        sender: {
+          name: email.from.split('<')[0].trim().replace(/"/g, '') || email.from,
+          email: (email.from.match(/<(.+)>/) || [])[1] || email.from
+        },
+        date: email.date,
+        isUnread: !email.read
+      }));
       
-      const data = await response.json();
-      if (!Array.isArray(data.emails)) {
-        throw new Error('Invalid response format');
-      }
-      
-      setEmails(data.emails || []);
+      setEmails(transformedEmails);
       setMailUrl(data.mailUrl);
       setError(null);
     } catch (err) {
@@ -143,7 +149,9 @@ export function Email() {
         ) : (
           <div className="space-y-2 max-h-[220px] overflow-y-auto">
             {emails.length === 0 ? (
-              <p className="text-center text-gray-500">Aucun email non lu</p>
+              <p className="text-center text-gray-500">
+                {loading ? 'Loading emails...' : 'No unread emails'}
+              </p>
             ) : (
               emails.map((email) => (
                 <div
@@ -156,7 +164,7 @@ export function Email() {
                       {email.sender.name}
                     </span>
                     <div className="flex items-center space-x-2">
-                      <span className="w-1.5 h-1.5 bg-blue-600 rounded-full"></span>
+                      {email.isUnread && <span className="w-1.5 h-1.5 bg-blue-600 rounded-full"></span>}
                       <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
                     </div>
                   </div>