diff --git a/.DS_Store b/.DS_Store
index 6ddb0d00..c3c20e74 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 00000000..1a958b34
Binary files /dev/null and b/app/.DS_Store differ
diff --git a/app/courrier/login/page.tsx b/app/courrier/login/page.tsx
new file mode 100644
index 00000000..3782f9bd
--- /dev/null
+++ b/app/courrier/login/page.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export default function MailLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [host, setHost] = useState('mail.infomaniak.com');
+  const [port, setPort] = useState('993');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await fetch('/api/mail/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email,
+          password,
+          host,
+          port,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to connect to email server');
+      }
+
+      // Redirect to mail page
+      router.push('/mail');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Email Configuration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="host">IMAP Host</Label>
+              <Input
+                id="host"
+                type="text"
+                value={host}
+                onChange={(e) => setHost(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="port">IMAP Port</Label>
+              <Input
+                id="port"
+                type="text"
+                value={port}
+                onChange={(e) => setPort(e.target.value)}
+                required
+              />
+            </div>
+            {error && (
+              <div className="text-red-500 text-sm">{error}</div>
+            )}
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading}
+            >
+              {loading ? 'Connecting...' : 'Connect'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
new file mode 100644
index 00000000..d8b47b3b
--- /dev/null
+++ b/app/courrier/page.tsx
@@ -0,0 +1,1879 @@
+'use client';
+
+import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { 
+  MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, 
+  Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, 
+  Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, 
+  MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff, 
+  AlertOctagon, Archive, RefreshCw
+} from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface Account {
+  id: number;
+  name: string;
+  email: string;
+  color: string;
+  folders?: string[];
+}
+
+interface Email {
+  id: number;
+  accountId: number;
+  from: string;
+  fromName?: string;
+  to: string;
+  subject: string;
+  body: string;
+  date: string;
+  read: boolean;
+  starred: boolean;
+  folder: string;
+  cc?: string;
+  bcc?: string;
+  flags?: string[];
+}
+
+interface Attachment {
+  name: string;
+  type: string;
+  content: string;
+  encoding: string;
+}
+
+// Improved MIME Decoder Implementation for Infomaniak
+function extractBoundary(headers: string): string | null {
+  const boundaryMatch = headers.match(/boundary="?([^"\r\n;]+)"?/i) || 
+                       headers.match(/boundary=([^\r\n;]+)/i);
+  
+  return boundaryMatch ? boundaryMatch[1].trim() : null;
+}
+
+function decodeQuotedPrintable(text: string, charset: string): string {
+  if (!text) return '';
+  
+  // Replace soft line breaks (=\r\n or =\n or =\r)
+  let decoded = text.replace(/=(?:\r\n|\n|\r)/g, '');
+  
+  // Replace quoted-printable encoded characters (including non-ASCII characters)
+  decoded = decoded.replace(/=([0-9A-F]{2})/gi, (match, p1) => {
+    return String.fromCharCode(parseInt(p1, 16));
+  });
+  
+  // Handle character encoding
+  try {
+    // For browsers with TextDecoder support
+    if (typeof TextDecoder !== 'undefined') {
+      // Convert string to array of byte values
+      const bytes = new Uint8Array(Array.from(decoded).map(c => c.charCodeAt(0)));
+      return new TextDecoder(charset).decode(bytes);
+    }
+    
+    // Fallback for older browsers or when charset handling is not critical
+    return decoded;
+  } catch (e) {
+    console.warn('Charset conversion error:', e);
+    return decoded;
+  }
+}
+
+function parseFullEmail(emailRaw: string) {
+  // Check if this is a multipart message by looking for boundary definition
+  const boundaryMatch = emailRaw.match(/boundary="?([^"\r\n;]+)"?/i) || 
+                       emailRaw.match(/boundary=([^\r\n;]+)/i);
+  
+  if (boundaryMatch) {
+    const boundary = boundaryMatch[1].trim();
+    
+    // Check if there's a preamble before the first boundary
+    let mainHeaders = '';
+    let mainContent = emailRaw;
+    
+    // Extract the headers before the first boundary if they exist
+    const firstBoundaryPos = emailRaw.indexOf('--' + boundary);
+    if (firstBoundaryPos > 0) {
+      const headerSeparatorPos = emailRaw.indexOf('\r\n\r\n');
+      if (headerSeparatorPos > 0 && headerSeparatorPos < firstBoundaryPos) {
+        mainHeaders = emailRaw.substring(0, headerSeparatorPos);
+      }
+    }
+    
+    return processMultipartEmail(emailRaw, boundary, mainHeaders);
+  } else {
+    // This is a single part message
+    return processSinglePartEmail(emailRaw);
+  }
+}
+
+function processMultipartEmail(emailRaw: string, boundary: string, mainHeaders: string = ''): { 
+  text: string; 
+  html: string; 
+  attachments: { filename: string; contentType: string; encoding: string; content: string; }[];
+  headers?: string;
+} {
+  const result = {
+    text: '',
+    html: '',
+    attachments: [] as { filename: string; contentType: string; encoding: string; content: string; }[],
+    headers: mainHeaders
+  };
+  
+  // Split by boundary (more robust pattern)
+  const boundaryRegex = new RegExp(`--${boundary}(?:--)?(\\r?\\n|$)`, 'g');
+  
+  // Get all boundary positions
+  const matches = Array.from(emailRaw.matchAll(boundaryRegex));
+  const boundaryPositions = matches.map(match => match.index!);
+  
+  // Extract content between boundaries
+  for (let i = 0; i < boundaryPositions.length - 1; i++) {
+    const startPos = boundaryPositions[i] + matches[i][0].length;
+    const endPos = boundaryPositions[i + 1];
+    
+    if (endPos > startPos) {
+      const partContent = emailRaw.substring(startPos, endPos).trim();
+      
+      if (partContent) {
+        const decoded = processSinglePartEmail(partContent);
+        
+        if (decoded.contentType.includes('text/plain')) {
+          result.text = decoded.text || '';
+        } else if (decoded.contentType.includes('text/html')) {
+          result.html = cleanHtml(decoded.html || '');
+        } else if (
+          decoded.contentType.startsWith('image/') || 
+          decoded.contentType.startsWith('application/')
+        ) {
+          const filename = extractFilename(partContent);
+          result.attachments.push({
+            filename,
+            contentType: decoded.contentType,
+            encoding: decoded.raw?.headers ? parseEmailHeaders(decoded.raw.headers).encoding : '7bit',
+            content: decoded.raw?.body || ''
+          });
+        }
+      }
+    }
+  }
+  
+  return result;
+}
+
+function processSinglePartEmail(rawEmail: string) {
+  // Split headers and body
+  const headerBodySplit = rawEmail.split(/\r?\n\r?\n/);
+  const headers = headerBodySplit[0];
+  const body = headerBodySplit.slice(1).join('\n\n');
+  
+  // Parse headers to get content type, encoding, etc.
+  const emailInfo = parseEmailHeaders(headers);
+  
+  // Decode the body based on its encoding
+  const decodedBody = decodeMIME(body, emailInfo.encoding, emailInfo.charset);
+  
+  return {
+    subject: extractHeader(headers, 'Subject'),
+    from: extractHeader(headers, 'From'),
+    to: extractHeader(headers, 'To'),
+    date: extractHeader(headers, 'Date'),
+    contentType: emailInfo.contentType,
+    text: emailInfo.contentType.includes('html') ? null : decodedBody,
+    html: emailInfo.contentType.includes('html') ? decodedBody : null,
+    raw: {
+      headers,
+      body
+    }
+  };
+}
+
+function extractHeader(headers: string, headerName: string): string {
+  const regex = new RegExp(`^${headerName}:\\s*(.+?)(?:\\r?\\n(?!\\s)|$)`, 'im');
+  const match = headers.match(regex);
+  return match ? match[1].trim() : '';
+}
+
+function extractFilename(headers: string): string {
+  const filenameMatch = headers.match(/filename="?([^"\r\n;]+)"?/i);
+  return filenameMatch ? filenameMatch[1].trim() : 'attachment';
+}
+
+function parseEmailHeaders(headers: string): { contentType: string; encoding: string; charset: string } {
+  const result = {
+    contentType: 'text/plain',
+    encoding: '7bit',
+    charset: 'utf-8'
+  };
+  
+  // Extract content type and charset
+  const contentTypeMatch = headers.match(/Content-Type:\s*([^;]+)(?:;\s*charset=([^;"\r\n]+)|(?:;\s*charset="([^"]+)"))?/i);
+  if (contentTypeMatch) {
+    result.contentType = contentTypeMatch[1].trim().toLowerCase();
+    if (contentTypeMatch[2]) {
+      result.charset = contentTypeMatch[2].trim().toLowerCase();
+    } else if (contentTypeMatch[3]) {
+      result.charset = contentTypeMatch[3].trim().toLowerCase();
+    }
+  }
+  
+  // Extract content transfer encoding
+  const encodingMatch = headers.match(/Content-Transfer-Encoding:\s*([^\s;\r\n]+)/i);
+  if (encodingMatch) {
+    result.encoding = encodingMatch[1].trim().toLowerCase();
+  }
+  
+  return result;
+}
+
+function decodeMIME(text: string, encoding?: string, charset: string = 'utf-8'): string {
+  if (!text) return '';
+  
+  // Normalize encoding and charset
+  encoding = (encoding || '').toLowerCase();
+  charset = (charset || 'utf-8').toLowerCase();
+  
+  try {
+    // Handle different encoding types
+    if (encoding === 'quoted-printable') {
+      return decodeQuotedPrintable(text, charset);
+    } else if (encoding === 'base64') {
+      return decodeBase64(text, charset);
+    } else if (encoding === '7bit' || encoding === '8bit' || encoding === 'binary') {
+      // For these encodings, we still need to handle the character set
+      return convertCharset(text, charset);
+    } else {
+      // Unknown encoding, return as is but still handle charset
+      return convertCharset(text, charset);
+    }
+  } catch (error) {
+    console.error('Error decoding MIME:', error);
+    return text;
+  }
+}
+
+function decodeBase64(text: string, charset: string): string {
+  const cleanText = text.replace(/\s/g, '');
+  
+  let binaryString;
+  try {
+    binaryString = atob(cleanText);
+  } catch (e) {
+    console.error('Base64 decoding error:', e);
+    return text;
+  }
+  
+  return convertCharset(binaryString, charset);
+}
+
+function convertCharset(text: string, fromCharset: string): string {
+  try {
+    if (typeof TextDecoder !== 'undefined') {
+      const bytes = new Uint8Array(text.length);
+      for (let i = 0; i < text.length; i++) {
+        bytes[i] = text.charCodeAt(i) & 0xFF;
+      }
+      
+      let normalizedCharset = fromCharset.toLowerCase();
+      
+      // Normalize charset names
+      if (normalizedCharset === 'iso-8859-1' || normalizedCharset === 'latin1') {
+        normalizedCharset = 'iso-8859-1';
+      } else if (normalizedCharset === 'windows-1252' || normalizedCharset === 'cp1252') {
+        normalizedCharset = 'windows-1252';
+      }
+      
+      const decoder = new TextDecoder(normalizedCharset);
+      return decoder.decode(bytes);
+    }
+    
+    // Fallback for older browsers or unsupported charsets
+    if (fromCharset.toLowerCase() === 'iso-8859-1' || fromCharset.toLowerCase() === 'windows-1252') {
+      return text
+        .replace(/\xC3\xA0/g, 'à')
+        .replace(/\xC3\xA2/g, 'â')
+        .replace(/\xC3\xA9/g, 'é')
+        .replace(/\xC3\xA8/g, 'è')
+        .replace(/\xC3\xAA/g, 'ê')
+        .replace(/\xC3\xAB/g, 'ë')
+        .replace(/\xC3\xB4/g, 'ô')
+        .replace(/\xC3\xB9/g, 'ù')
+        .replace(/\xC3\xBB/g, 'û')
+        .replace(/\xC3\x80/g, 'À')
+        .replace(/\xC3\x89/g, 'É')
+        .replace(/\xC3\x87/g, 'Ç')
+        // Clean up HTML entities
+        .replace(/&Atilde;&sect;/g, 'ç')
+        .replace(/&Atilde;&copy;/g, 'é')
+        .replace(/&Atilde;&uml;/g, 'ë')
+        .replace(/&Atilde;&ordf;/g, 'ª')
+        .replace(/&Atilde;&laquo;/g, '«')
+        .replace(/&Atilde;&raquo;/g, '»')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/\xA0/g, ' ');
+    }
+    
+    return text;
+  } catch (e) {
+    console.error('Character set conversion error:', e, 'charset:', fromCharset);
+    return text;
+  }
+}
+
+function extractHtmlBody(htmlContent: string): string {
+  const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+  return bodyMatch ? bodyMatch[1] : htmlContent;
+}
+
+function cleanHtml(html: string): string {
+  if (!html) return '';
+  
+  return html
+    // Fix common Infomaniak-specific character encodings
+    .replace(/=C2=A0/g, ' ')  // non-breaking space
+    .replace(/=E2=80=93/g, '\u2013')  // en dash
+    .replace(/=E2=80=94/g, '\u2014')  // em dash
+    .replace(/=E2=80=98/g, '\u2018')  // left single quote
+    .replace(/=E2=80=99/g, '\u2019')  // right single quote
+    .replace(/=E2=80=9C/g, '\u201C')  // left double quote
+    .replace(/=E2=80=9D/g, '\u201D')  // right double quote
+    .replace(/=C3=A0/g, 'à')
+    .replace(/=C3=A2/g, 'â')
+    .replace(/=C3=A9/g, 'é')
+    .replace(/=C3=A8/g, 'è')
+    .replace(/=C3=AA/g, 'ê')
+    .replace(/=C3=AB/g, 'ë')
+    .replace(/=C3=B4/g, 'ô')
+    .replace(/=C3=B9/g, 'ù')
+    .replace(/=C3=xBB/g, 'û')
+    .replace(/=C3=80/g, 'À')
+    .replace(/=C3=89/g, 'É')
+    .replace(/=C3=87/g, 'Ç')
+    // Clean up HTML entities
+    .replace(/&Atilde;&sect;/g, 'ç')
+    .replace(/&Atilde;&copy;/g, 'é')
+    .replace(/&Atilde;&uml;/g, 'ë')
+    .replace(/&Atilde;&ordf;/g, 'ª')
+    .replace(/&Atilde;&laquo;/g, '«')
+    .replace(/&Atilde;&raquo;/g, '»')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/\xA0/g, ' ');
+}
+
+function decodeMimeContent(content: string): string {
+  if (!content) return '';
+
+  // Check if this is an Infomaniak multipart message
+  if (content.includes('Content-Type: multipart/')) {
+    const boundary = content.match(/boundary="([^"]+)"/)?.[1];
+    if (boundary) {
+      const parts = content.split('--' + boundary);
+      let htmlContent = '';
+      let textContent = '';
+
+      parts.forEach(part => {
+        if (part.includes('Content-Type: text/html')) {
+          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
+          if (match) {
+            htmlContent = cleanHtml(match[1]);
+          }
+        } else if (part.includes('Content-Type: text/plain')) {
+          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
+          if (match) {
+            textContent = cleanHtml(match[1]);
+          }
+        }
+      });
+
+      // Prefer HTML content if available
+      return htmlContent || textContent;
+    }
+  }
+
+  // If not multipart or no boundary found, clean the content directly
+  return cleanHtml(content);
+}
+
+// Add this helper function
+const renderEmailContent = (email: Email) => {
+  const decodedContent = decodeMimeContent(email.body);
+  if (email.body.includes('Content-Type: text/html')) {
+    return <div dangerouslySetInnerHTML={{ __html: decodedContent }} />;
+  }
+  return <div className="whitespace-pre-wrap">{decodedContent}</div>;
+};
+
+// Add this helper function
+const decodeEmailContent = (content: string, charset: string = 'utf-8') => {
+  return convertCharset(content, charset);
+};
+
+function cleanEmailContent(content: string): string {
+  // Remove or fix malformed URLs
+  return content.replace(/=3D"(http[^"]+)"/g, (match, url) => {
+    try {
+      return `"${decodeURIComponent(url)}"`;
+    } catch {
+      return '';
+    }
+  });
+}
+
+// Define the exact folder names from IMAP
+type MailFolder = string;
+
+// Map IMAP folders to sidebar items with icons
+const getFolderIcon = (folder: string) => {
+  switch (folder.toLowerCase()) {
+    case 'inbox':
+      return Inbox;
+    case 'sent':
+      return Send;
+    case 'drafts':
+      return Edit;
+    case 'trash':
+      return Trash;
+    case 'spam':
+      return AlertOctagon;
+    case 'archive':
+    case 'archives':
+      return Archive;
+    default:
+      return Folder;
+  }
+};
+
+// Initial sidebar items - only INBOX
+const initialSidebarItems = [
+  {
+    view: 'INBOX' as MailFolder,
+    label: 'Inbox',
+    icon: Inbox,
+    folder: 'INBOX'
+  }
+];
+
+export default function CourrierPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [accounts, setAccounts] = useState<Account[]>([
+    { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
+    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
+  ]);
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+  const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
+  const [showCompose, setShowCompose] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
+  const [showBulkActions, setShowBulkActions] = useState(false);
+  const [showBcc, setShowBcc] = useState(false);
+  const [emails, setEmails] = useState<Email[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [composeSubject, setComposeSubject] = useState('');
+  const [composeTo, setComposeTo] = useState('');
+  const [composeCc, setComposeCc] = useState('');
+  const [composeBcc, setComposeBcc] = useState('');
+  const [composeBody, setComposeBody] = useState('');
+  const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [foldersOpen, setFoldersOpen] = useState(true);
+  const [showSettings, setShowSettings] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [composeOpen, setComposeOpen] = useState(false);
+  const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
+  const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
+  const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
+  const [showEmailActions, setShowEmailActions] = useState(false);
+  const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
+  const [itemToDelete, setItemToDelete] = useState<number | null>(null);
+  const [showCc, setShowCc] = useState(false);
+  const [contentLoading, setContentLoading] = useState(false);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [folders, setFolders] = useState<string[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [availableFolders, setAvailableFolders] = useState<string[]>([]);
+  const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const emailsPerPage = 24;
+
+  // Debug logging for email distribution
+  useEffect(() => {
+    const emailsByFolder = emails.reduce((acc, email) => {
+      acc[email.folder] = (acc[email.folder] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+    
+    console.log('Emails by folder:', emailsByFolder);
+    console.log('Current view:', currentView);
+  }, [emails, currentView]);
+
+  // Move getSelectedEmail inside the component
+  const getSelectedEmail = () => {
+    return emails.find(email => email.id === selectedEmail?.id);
+  };
+
+  // Check for stored credentials
+  useEffect(() => {
+    const checkCredentials = async () => {
+      try {
+        console.log('Checking for stored credentials...');
+        const response = await fetch('/api/mail');
+        if (!response.ok) {
+          const errorData = await response.json();
+          console.log('API response error:', errorData);
+          if (errorData.error === 'No stored credentials found') {
+            console.log('No credentials found, redirecting to login...');
+            router.push('/mail/login');
+            return;
+          }
+          throw new Error(errorData.error || 'Failed to check credentials');
+        }
+        console.log('Credentials verified, loading emails...');
+        setLoading(false);
+        loadEmails();
+      } catch (err) {
+        console.error('Error checking credentials:', err);
+        setError(err instanceof Error ? err.message : 'Failed to check credentials');
+        setLoading(false);
+      }
+    };
+
+    checkCredentials();
+  }, [router]);
+
+  // Update the loadEmails function
+  const loadEmails = async (isLoadMore = false) => {
+    try {
+      if (isLoadMore) {
+        setIsLoadingMore(true);
+      } else {
+        setLoading(true);
+      }
+      setError(null);
+      
+      const response = await fetch(`/api/mail?folder=${currentView}&page=${page}&limit=${emailsPerPage}`);
+      if (!response.ok) {
+        throw new Error('Failed to load emails');
+      }
+      
+      const data = await response.json();
+      
+      // Get available folders from the API response
+      if (data.folders) {
+        setAvailableFolders(data.folders);
+      }
+      
+      // Process emails keeping exact folder names
+      const processedEmails = (data.emails || []).map((email: any) => ({
+        id: Number(email.id),
+        accountId: 1,
+        from: email.from || '',
+        fromName: email.from?.split('@')[0] || '',
+        to: email.to || '',
+        subject: email.subject || '(No subject)',
+        body: email.body || '',
+        date: email.date || new Date().toISOString(),
+        read: email.read || false,
+        starred: email.starred || false,
+        folder: email.folder || 'INBOX',
+        cc: email.cc,
+        bcc: email.bcc,
+        flags: email.flags || []
+      }));
+
+      // Only update unread count if we're in the Inbox folder
+      if (currentView === 'INBOX') {
+        const unreadInboxEmails = processedEmails.filter(
+          (email: Email) => !email.read && email.folder === 'INBOX'
+        ).length;
+        setUnreadCount(unreadInboxEmails);
+      }
+      
+      // Update emails state based on whether we're loading more
+      if (isLoadMore) {
+        setEmails(prev => [...prev, ...processedEmails]);
+      } else {
+        setEmails(processedEmails);
+      }
+
+      // Update hasMore state based on the number of emails received
+      setHasMore(processedEmails.length === emailsPerPage);
+      
+    } catch (err) {
+      console.error('Error loading emails:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load emails');
+    } finally {
+      setLoading(false);
+      setIsLoadingMore(false);
+    }
+  };
+
+  // Add an effect to reload emails when the view changes
+  useEffect(() => {
+    setPage(1); // Reset page when view changes
+    setHasMore(true);
+    loadEmails();
+  }, [currentView]);
+
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    
+    if (date.toDateString() === now.toDateString()) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+  };
+
+  // Get account color
+  const getAccountColor = (accountId: number) => {
+    const account = accounts.find(acc => acc.id === accountId);
+    return account ? account.color : 'bg-gray-500';
+  };
+
+  // Update handleEmailSelect to set selectedEmail correctly
+  const handleEmailSelect = (emailId: number) => {
+    const email = emails.find(e => e.id === emailId);
+    if (email) {
+      setSelectedEmail(email);
+      if (!email.read) {
+        // Mark as read in state
+        setEmails(emails.map(e => 
+          e.id === emailId ? { ...e, read: true } : e
+        ));
+        
+        // Update read status on server
+        fetch('/api/mail/mark-read', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ emailId })
+        }).catch(error => {
+          console.error('Error marking email as read:', error);
+        });
+      }
+    }
+  };
+
+  // Add these improved handlers
+  const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
+    e.stopPropagation();
+    if (e.target.checked) {
+      setSelectedEmails([...selectedEmails, emailId.toString()]);
+    } else {
+      setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString()));
+    }
+  };
+
+  // Handles marking an individual email as read/unread
+  const handleMarkAsRead = (emailId: string, isRead: boolean) => {
+    setEmails(emails.map(email =>
+      email.id.toString() === emailId ? { ...email, read: isRead } : email
+    ));
+  };
+
+  // Handles bulk actions for selected emails
+  const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
+    if (action === 'delete') {
+      setDeleteType('emails');
+      setShowDeleteConfirm(true);
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/mail/bulk-actions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          emailIds: selectedEmails,
+          action: action
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to perform bulk action');
+      }
+
+      // Update local state based on the action
+      setEmails(emails.map(email => {
+        if (selectedEmails.includes(email.id.toString())) {
+          switch (action) {
+            case 'mark-read':
+              return { ...email, read: true };
+            case 'mark-unread':
+              return { ...email, read: false };
+            case 'archive':
+              return { ...email, folder: 'Archive' };
+            default:
+              return email;
+          }
+        }
+        return email;
+      }));
+
+      // Clear selection after successful action
+      setSelectedEmails([]);
+    } catch (error) {
+      console.error('Error performing bulk action:', error);
+      alert('Failed to perform bulk action. Please try again.');
+    }
+  };
+
+  // Add handleDeleteConfirm function
+  const handleDeleteConfirm = async () => {
+    try {
+      const response = await fetch('/api/mail/bulk-actions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          emailIds: selectedEmails,
+          action: 'delete'
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete emails');
+      }
+
+      // Remove deleted emails from state
+      setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
+      setSelectedEmails([]);
+    } catch (error) {
+      console.error('Error deleting emails:', error);
+      alert('Failed to delete emails. Please try again.');
+    } finally {
+      setShowDeleteConfirm(false);
+    }
+  };
+
+  // Add infinite scroll handler
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    if (
+      target.scrollHeight - target.scrollTop === target.clientHeight &&
+      !isLoadingMore &&
+      hasMore
+    ) {
+      setPage(prev => prev + 1);
+      loadEmails(true);
+    }
+  }, [isLoadingMore, hasMore]);
+
+  // Sort emails by date (most recent first)
+  const sortedEmails = useMemo(() => {
+    return [...emails].sort((a, b) => {
+      return new Date(b.date).getTime() - new Date(a.date).getTime();
+    });
+  }, [emails]);
+
+  const toggleSelectAll = () => {
+    if (selectedEmails.length === emails.length) {
+      setSelectedEmails([]);
+    } else {
+      setSelectedEmails(emails.map(email => email.id.toString()));
+    }
+  };
+
+  // Add filtered emails based on search query
+  const filteredEmails = useMemo(() => {
+    if (!searchQuery) return emails;
+    
+    const query = searchQuery.toLowerCase();
+    return emails.filter(email => 
+      email.subject.toLowerCase().includes(query) ||
+      email.from.toLowerCase().includes(query) ||
+      email.to.toLowerCase().includes(query) ||
+      email.body.toLowerCase().includes(query)
+    );
+  }, [emails, searchQuery]);
+
+  // Update the email list to use filtered emails
+  const renderEmailList = () => (
+    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
+      {renderEmailListHeader()}
+      {renderBulkActionsToolbar()}
+      
+      <div 
+        className="flex-1 overflow-y-auto"
+        onScroll={handleScroll}
+      >
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+          </div>
+        ) : filteredEmails.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64">
+            <Mail className="h-8 w-8 text-gray-400 mb-2" />
+            <p className="text-gray-500 text-sm">
+              {searchQuery ? 'No emails match your search' : 'No emails in this folder'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100">
+            {filteredEmails.map((email) => renderEmailListItem(email))}
+            {isLoadingMore && (
+              <div className="flex items-center justify-center p-4">
+                <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // Update the email count in the header to show filtered count
+  const renderEmailListHeader = () => (
+    <div className="border-b border-gray-100">
+      <div className="px-4 py-2">
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
+          <Input
+            type="search"
+            placeholder="Search in folder..."
+            className="pl-8 h-9 bg-gray-50"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+      <div className="flex items-center justify-between px-4 h-14">
+        <div className="flex items-center gap-3">
+          <Checkbox
+            checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
+            onCheckedChange={toggleSelectAll}
+            className="mt-0.5"
+          />
+          <h2 className="text-base font-semibold text-gray-900">Inbox</h2>
+        </div>
+        <span className="text-sm text-gray-600">
+          {searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
+        </span>
+      </div>
+    </div>
+  );
+
+  // Update the bulk actions toolbar to include confirmation dialog
+  const renderBulkActionsToolbar = () => {
+    if (selectedEmails.length === 0) return null;
+
+    return (
+      <div className="bg-white border-b border-gray-100 px-4 py-2">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-sm text-gray-600">
+            {selectedEmails.length} selected
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-gray-600 hover:text-gray-900 h-8 px-2"
+            onClick={() => {
+              const allSelectedRead = selectedEmails.every(id => 
+                emails.find(email => email.id.toString() === id)?.read
+              );
+              handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
+            }}
+          >
+            <EyeOff className="h-4 w-4 mr-1" />
+            <span className="text-sm">
+              {selectedEmails.every(id => 
+                emails.find(email => email.id.toString() === id)?.read
+              ) ? 'Unread' : 'Read'}
+            </span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-gray-600 hover:text-gray-900 h-8 px-2"
+            onClick={() => handleBulkAction('archive')}
+          >
+            <Archive className="h-4 w-4 mr-1" />
+            <span className="text-sm">Archive</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-red-600 hover:text-red-700 h-8 px-2"
+            onClick={() => handleBulkAction('delete')}
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            <span className="text-sm">Delete</span>
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  // Keep only one renderEmailListWrapper function that includes both panels
+  const renderEmailListWrapper = () => (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Email list panel */}
+      {renderEmailList()}
+
+      {/* Preview panel - will automatically take remaining space */}
+      <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
+        {selectedEmail ? (
+          <>
+            {/* Email actions header */}
+            <div className="flex-none px-4 py-3 border-b border-gray-100">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2 min-w-0 flex-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setSelectedEmail(null)}
+                    className="md:hidden flex-shrink-0"
+                  >
+                    <ChevronLeft className="h-5 w-5" />
+                  </Button>
+                  <div className="min-w-0 max-w-[500px]">
+                    <h2 className="text-lg font-semibold text-gray-900 truncate">
+                      {selectedEmail.subject}
+                    </h2>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0 ml-auto">
+                  <div className="flex items-center border-l border-gray-200 pl-4">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('reply')}
+                    >
+                      <Reply className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('replyAll')}
+                    >
+                      <ReplyAll className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('forward')}
+                    >
+                      <Forward className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={(e) => toggleStarred(selectedEmail.id, e)}
+                    >
+                      <Star className={`h-4 w-4 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => {/* Add to folder logic */}}
+                    >
+                      <FolderOpen className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Scrollable content area */}
+            <ScrollArea className="flex-1 p-6">
+              <div className="flex items-center gap-4 mb-6">
+                <Avatar className="h-10 w-10">
+                  <AvatarFallback>
+                    {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-medium text-gray-900">
+                    {selectedEmail.fromName || selectedEmail.from}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    to {selectedEmail.to}
+                  </p>
+                </div>
+                <div className="ml-auto text-sm text-gray-500">
+                  {formatDate(selectedEmail.date)}
+                </div>
+              </div>
+
+              <div className="prose max-w-none">
+                {(() => {
+                  try {
+                    const parsed = parseFullEmail(selectedEmail.body);
+                    return (
+                      <div>
+                        {/* Display HTML content if available, otherwise fallback to text */}
+                        <div dangerouslySetInnerHTML={{ 
+                          __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
+                        }} />
+                        
+                        {/* Display attachments if present */}
+                        {parsed.attachments && parsed.attachments.length > 0 && (
+                          <div className="mt-6 border-t border-gray-200 pt-6">
+                            <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
+                            <div className="grid grid-cols-2 gap-4">
+                              {parsed.attachments.map((attachment, index) => (
+                                <div key={index} className="flex items-center space-x-2 p-2 border rounded">
+                                  <Paperclip className="h-4 w-4 text-gray-400" />
+                                  <span className="text-sm text-gray-600 truncate">
+                                    {attachment.filename}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  } catch (e) {
+                    console.error('Error parsing email:', e);
+                    return selectedEmail.body;
+                  }
+                })()}
+              </div>
+            </ScrollArea>
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full">
+            <Mail className="h-12 w-12 text-gray-400 mb-4" />
+            <p className="text-gray-500">Select an email to view its contents</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // Update sidebar items when available folders change
+  useEffect(() => {
+    if (availableFolders.length > 0) {
+      const newItems = [
+        ...initialSidebarItems,
+        ...availableFolders
+          .filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
+          .map(folder => ({
+            view: folder as MailFolder,
+            label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
+            icon: getFolderIcon(folder),
+            folder: folder
+          }))
+      ];
+      setSidebarItems(newItems);
+    }
+  }, [availableFolders]);
+
+  // Update the email list item to match header checkbox alignment
+  const renderEmailListItem = (email: Email) => (
+    <div
+      key={email.id}
+      className={`flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer ${
+        selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
+      } ${!email.read ? 'bg-blue-50/20' : ''}`}
+      onClick={() => handleEmailSelect(email.id)}
+    >
+      <Checkbox
+        checked={selectedEmails.includes(email.id.toString())}
+        onCheckedChange={(checked) => {
+          const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
+          handleEmailCheckbox(e, email.id);
+        }}
+        onClick={(e) => e.stopPropagation()}
+        className="mt-0.5"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
+              {currentView === 'Sent' ? email.to : (
+                (() => {
+                  const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
+                  return fromMatch ? fromMatch[1].trim() : email.from;
+                })()
+              )}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <span className="text-xs text-gray-500 whitespace-nowrap">
+              {formatDate(email.date)}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 text-gray-400 hover:text-yellow-400"
+              onClick={(e) => toggleStarred(email.id, e)}
+            >
+              <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+            </Button>
+          </div>
+        </div>
+        <h3 className="text-sm text-gray-900 truncate">
+          {email.subject || '(No subject)'}
+        </h3>
+        <div className="text-xs text-gray-500 truncate">
+          {(() => {
+            // Get clean preview of the actual message content
+            let preview = '';
+            try {
+              const parsed = parseFullEmail(email.body);
+              
+              // Try to get content from parsed email
+              preview = (parsed.text || parsed.html || '')
+                .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+                .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+                .replace(/<[^>]+>/g, '')
+                .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+
+              // If no preview from parsed content, try direct body
+              if (!preview) {
+                preview = email.body
+                  .replace(/<[^>]+>/g, '')
+                  .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ')
+                  .replace(/\s+/g, ' ')
+                  .trim();
+              }
+
+              // Remove email artifacts and clean up
+              preview = preview
+                .replace(/^>+/gm, '')
+                .replace(/Content-Type:[^\n]+/g, '')
+                .replace(/Content-Transfer-Encoding:[^\n]+/g, '')
+                .replace(/--[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?/g, '')
+                .replace(/boundary=[^\n]+/g, '')
+                .replace(/charset=[^\n]+/g, '')
+                .replace(/[\r\n]+/g, ' ')
+                .trim();
+
+              // Take first 100 characters
+              preview = preview.substring(0, 100);
+              
+              // Try to end at a complete word
+              if (preview.length === 100) {
+                const lastSpace = preview.lastIndexOf(' ');
+                if (lastSpace > 80) {
+                  preview = preview.substring(0, lastSpace);
+                }
+                preview += '...';
+              }
+
+            } catch (e) {
+              console.error('Error generating preview:', e);
+              preview = '';
+            }
+            
+            return preview || 'No preview available';
+          })()}
+        </div>
+      </div>
+    </div>
+  );
+
+  // Render the sidebar navigation
+  const renderSidebarNav = () => (
+    <nav className="p-3">
+      <ul className="space-y-0.5 px-2">
+        {sidebarItems.map((item) => (
+          <li key={item.view}>
+            <Button 
+              variant={currentView === item.view ? 'secondary' : 'ghost'}
+              className={`w-full justify-start py-2 ${
+                currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+              }`}
+              onClick={() => {
+                setCurrentView(item.view);
+                setSelectedEmail(null);
+              }}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center">
+                  <item.icon className="h-4 w-4 mr-2" />
+                  <span>{item.label}</span>
+                </div>
+                {item.view === 'INBOX' && unreadCount > 0 && (
+                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                    {unreadCount}
+                  </span>
+                )}
+              </div>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+
+  // Add attachment handling functions
+  const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    
+    const newAttachments: Attachment[] = [];
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
+    const oversizedFiles: string[] = [];
+    
+    for (const file of e.target.files) {
+      if (file.size > MAX_FILE_SIZE) {
+        oversizedFiles.push(file.name);
+        continue;
+      }
+
+      try {
+        // Read file as base64
+        const base64Content = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result as string;
+            resolve(base64.split(',')[1]); // Remove data URL prefix
+          };
+          reader.readAsDataURL(file);
+        });
+
+        newAttachments.push({
+          name: file.name,
+          type: file.type,
+          content: base64Content,
+          encoding: 'base64'
+        });
+      } catch (error) {
+        console.error('Error processing attachment:', error);
+      }
+    }
+
+    if (oversizedFiles.length > 0) {
+      alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
+    }
+
+    if (newAttachments.length > 0) {
+      setAttachments([...attachments, ...newAttachments]);
+    }
+  };
+
+  // Add handleSend function for email composition
+  const handleSend = async () => {
+    if (!composeTo) {
+      alert('Please specify at least one recipient');
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/mail/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          to: composeTo,
+          cc: composeCc,
+          bcc: composeBcc,
+          subject: composeSubject,
+          body: composeBody,
+          attachments: attachments,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        if (data.error === 'Attachment size limit exceeded') {
+          alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
+        } else {
+          alert(`Error sending email: ${data.error}`);
+        }
+        return;
+      }
+
+      // Clear compose form and close modal
+      setComposeTo('');
+      setComposeCc('');
+      setComposeBcc('');
+      setComposeSubject('');
+      setComposeBody('');
+      setAttachments([]);
+      setShowCompose(false);
+    } catch (error) {
+      console.error('Error sending email:', error);
+      alert('Failed to send email. Please try again.');
+    }
+  };
+
+  // Add toggleStarred function
+  const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    const email = emails.find(e => e.id === emailId);
+    if (!email) return;
+
+    try {
+      const response = await fetch('/api/mail/toggle-star', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ emailId, starred: !email.starred }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to toggle star');
+      }
+
+      // Update email in state
+      setEmails(emails.map(e => 
+        e.id === emailId ? { ...e, starred: !e.starred } : e
+      ));
+    } catch (error) {
+      console.error('Error toggling star:', error);
+    }
+  };
+
+  // Add handleReply function
+  const handleReply = (type: 'reply' | 'replyAll' | 'forward') => {
+    if (!selectedEmail) return;
+
+    const getReplySubject = () => {
+      const subject = selectedEmail.subject;
+      if (type === 'forward') {
+        return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
+      }
+      return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
+    };
+
+    const getReplyTo = () => {
+      switch (type) {
+        case 'reply':
+          return selectedEmail.from;
+        case 'replyAll':
+          // For Reply All, only put the original sender in To
+          return selectedEmail.from;
+        case 'forward':
+          return '';
+      }
+    };
+
+    const getReplyCc = () => {
+      if (type === 'replyAll') {
+        // For Reply All, put all other recipients in CC, excluding the sender and current user
+        const allRecipients = new Set([
+          ...(selectedEmail.to?.split(',') || []),
+          ...(selectedEmail.cc?.split(',') || [])
+        ]);
+        // Remove the sender and current user from CC
+        allRecipients.delete(selectedEmail.from);
+        allRecipients.delete(accounts[1]?.email);
+        return Array.from(allRecipients)
+          .map(email => email.trim())
+          .filter(email => email) // Remove empty strings
+          .join(', ');
+      }
+      return '';
+    };
+
+    const getReplyBody = () => {
+      try {
+        const parsed = parseFullEmail(selectedEmail.body);
+        let originalContent = '';
+        
+        // Get the content from either HTML or text part
+        if (parsed.html) {
+          // Convert HTML to plain text for the reply
+          originalContent = parsed.html
+            .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+            .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+            .replace(/<br\s*\/?>/gi, '\n')
+            .replace(/<div[^>]*>/gi, '\n')
+            .replace(/<\/div>/gi, '')
+            .replace(/<p[^>]*>/gi, '\n')
+            .replace(/<\/p>/gi, '')
+            .replace(/<[^>]+>/g, '')
+            .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, match => {
+              switch (match) {
+                case '&nbsp;': return ' ';
+                case '&zwnj;': return '';
+                case '&raquo;': return '»';
+                case '&laquo;': return '«';
+                case '&gt;': return '>';
+                case '&lt;': return '<';
+                case '&amp;': return '&';
+                default: return match;
+              }
+            })
+            .replace(/^\s+$/gm, '')
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+        } else if (parsed.text) {
+          originalContent = parsed.text.trim();
+        } else {
+          // Fallback to raw body if parsing fails
+          originalContent = selectedEmail.body
+            .replace(/<[^>]+>/g, '')
+            .trim();
+        }
+
+        // Clean up the content
+        originalContent = originalContent
+          .split('\n')
+          .map(line => line.trim())
+          .filter(line => {
+            // Remove email client signatures and headers
+            return !line.match(/^(From|To|Sent|Subject|Date|Cc|Bcc):/i) &&
+                   !line.match(/^-{2,}/) &&
+                   !line.match(/^_{2,}/) &&
+                   !line.match(/^={2,}/) &&
+                   !line.match(/^This (email|message) has been/i) &&
+                   !line.match(/^Disclaimer/i) &&
+                   !line.match(/^[*_-]{3,}/) &&
+                   !line.match(/^Envoyé depuis/i) &&
+                   !line.match(/^Envoyé à partir de/i) &&
+                   !line.match(/^Sent from/i) &&
+                   !line.match(/^Outlook pour/i) &&
+                   !line.match(/^De :/i) &&
+                   !line.match(/^À :/i) &&
+                   !line.match(/^Objet :/i);
+          })
+          .join('\n')
+          .trim();
+
+        // Format the reply
+        const date = new Date(selectedEmail.date);
+        const formattedDate = date.toLocaleString('en-GB', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: false
+        });
+
+        let replyHeader = '';
+        if (type === 'forward') {
+          replyHeader = `\n\n---------- Forwarded message ----------\n`;
+          replyHeader += `From: ${selectedEmail.from}\n`;
+          replyHeader += `Date: ${formattedDate}\n`;
+          replyHeader += `Subject: ${selectedEmail.subject}\n`;
+          replyHeader += `To: ${selectedEmail.to}\n`;
+          if (selectedEmail.cc) {
+            replyHeader += `Cc: ${selectedEmail.cc}\n`;
+          }
+          replyHeader += `\n`;
+        } else {
+          // Simple header for reply and reply all
+          replyHeader = `\n\nOn ${formattedDate}, ${selectedEmail.from} wrote:\n`;
+        }
+
+        // Indent the original content
+        const indentedContent = originalContent
+          .split('\n')
+          .map(line => line ? `> ${line}` : '>')  // Keep empty lines as '>' for better readability
+          .join('\n');
+
+        return `${replyHeader}${indentedContent}`;
+      } catch (error) {
+        console.error('Error formatting reply:', error);
+        return `\n\nOn ${new Date(selectedEmail.date).toLocaleString()}, ${selectedEmail.from} wrote:\n> ${selectedEmail.body}`;
+      }
+    };
+
+    // Open compose modal with reply details
+    setShowCompose(true);
+    setComposeTo(getReplyTo());
+    setComposeSubject(getReplySubject());
+    setComposeBody(getReplyBody());
+    setComposeCc(getReplyCc());
+    setComposeBcc('');
+    // Show CC field automatically for Reply All
+    setShowCc(type === 'replyAll');
+    setShowBcc(false);
+    setAttachments([]);
+  };
+
+  // Add the confirmation dialog component
+  const renderDeleteConfirmDialog = () => (
+    <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Emails</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+  const handleMailboxChange = async (newMailbox: string) => {
+    setCurrentView(newMailbox);
+    setSelectedEmails([]);
+    setSearchQuery('');
+    setEmails([]);
+    setLoading(true);
+    setError(null);
+    setHasMore(true);
+    setPage(1);
+
+    try {
+      // Optimize the request by adding a timeout
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+      const response = await fetch(`/api/mail?folder=${encodeURIComponent(newMailbox)}&page=1&limit=${emailsPerPage}`, {
+        signal: controller.signal
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch emails');
+      }
+
+      const data = await response.json();
+      
+      // Process emails more efficiently
+      const processedEmails = data.emails.map((email: any) => ({
+        id: Number(email.id),
+        accountId: 1,
+        from: email.from || '',
+        fromName: email.from?.split('@')[0] || '',
+        to: email.to || '',
+        subject: email.subject || '(No subject)',
+        body: email.body || '',
+        date: email.date || new Date().toISOString(),
+        read: email.read || false,
+        starred: email.starred || false,
+        folder: email.folder || newMailbox,
+        cc: email.cc,
+        bcc: email.bcc,
+        flags: email.flags || []
+      }));
+
+      setEmails(processedEmails);
+      setHasMore(processedEmails.length === emailsPerPage);
+
+      // Only update unread count if we're in the Inbox folder
+      if (newMailbox === 'INBOX') {
+        const unreadInboxEmails = processedEmails.filter(
+          (email: Email) => !email.read && email.folder === 'INBOX'
+        ).length;
+        setUnreadCount(unreadInboxEmails);
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        if (err.name === 'AbortError') {
+          setError('Request timed out. Please try again.');
+        } else {
+          setError(err.message);
+        }
+      } else {
+        setError('Failed to fetch emails');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
+        <div className="text-center max-w-md mx-auto px-4">
+          <Mail className="h-12 w-12 mb-4 text-red-400 mx-auto" />
+          <p className="text-red-500 mb-4">{error}</p>
+          <Button 
+            variant="outline"
+            onClick={() => window.location.reload()}
+            className="mx-auto"
+          >
+            Try Again
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Main layout */}
+      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
+        {/* Sidebar */}
+        <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
+                      ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+          {/* Courrier Title */}
+          <div className="p-3 border-b border-gray-100">
+            <div className="flex items-center gap-2">
+              <Mail className="h-6 w-6 text-gray-600" />
+              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
+            </div>
+          </div>
+
+          {/* Compose button and refresh button */}
+          <div className="p-2 border-b border-gray-100 flex items-center gap-2">
+            <Button 
+              className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
+              onClick={() => {
+                setShowCompose(true);
+                setComposeTo('');
+                setComposeCc('');
+                setComposeBcc('');
+                setComposeSubject('');
+                setComposeBody('');
+                setShowCc(false);
+                setShowBcc(false);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <PlusIcon className="h-3.5 w-3.5" />
+                <span>Compose</span>
+              </div>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleMailboxChange('INBOX')}
+              className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Accounts Section */}
+          <div className="p-3 border-b border-gray-100">
+            <Button 
+              variant="ghost"
+              className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
+              onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+            >
+              <span>Accounts</span>
+              {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </Button>
+            
+            {accountsDropdownOpen && (
+              <div className="space-y-1 pl-2">
+                {accounts.map(account => (
+                  <div key={account.id} className="relative group">
+                    <Button
+                      variant="ghost"
+                      className="w-full justify-between px-2 py-1.5 text-sm group"
+                      onClick={() => setSelectedAccount(account)}
+                    >
+                      <div className="flex flex-col items-start">
+                        <div className="flex items-center gap-2">
+                          <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                          <span className="font-medium">{account.name}</span>
+                        </div>
+                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
+                      </div>
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Navigation */}
+          {renderSidebarNav()}
+        </div>
+
+        {/* Main content area */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* Email list panel */}
+          {renderEmailListWrapper()}
+        </div>
+      </div>
+
+      {/* Compose Email Modal */}
+      {showCompose && (
+        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {composeSubject.startsWith('Re:') ? 'Reply' : 
+                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
+              </h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-gray-100 rounded-full"
+                onClick={() => {
+                  setShowCompose(false);
+                  setComposeTo('');
+                  setComposeCc('');
+                  setComposeBcc('');
+                  setComposeSubject('');
+                  setComposeBody('');
+                  setShowCc(false);
+                  setShowBcc(false);
+                }}
+              >
+                <X className="h-5 w-5 text-gray-500" />
+              </Button>
+            </div>
+
+            {/* Modal Body */}
+            <div className="flex-1 overflow-y-auto">
+              <div className="p-6 space-y-4">
+                {/* To Field */}
+                <div>
+                  <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+                  <Input
+                    id="to"
+                    value={composeTo}
+                    onChange={(e) => setComposeTo(e.target.value)}
+                    placeholder="recipient@example.com"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </div>
+
+                {/* CC/BCC Toggle Buttons */}
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowCc(!showCc)}
+                  >
+                    {showCc ? 'Hide Cc' : 'Add Cc'}
+                  </button>
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                    onClick={() => setShowBcc(!showBcc)}
+                  >
+                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
+                  </button>
+                </div>
+
+                {/* CC Field */}
+                {showCc && (
+                  <div>
+                    <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                    <Input
+                      id="cc"
+                      value={composeCc}
+                      onChange={(e) => setComposeCc(e.target.value)}
+                      placeholder="cc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
+                  </div>
+                )}
+
+                {/* BCC Field */}
+                {showBcc && (
+                  <div>
+                    <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                    <Input
+                      id="bcc"
+                      value={composeBcc}
+                      onChange={(e) => setComposeBcc(e.target.value)}
+                      placeholder="bcc@example.com"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                    />
+                  </div>
+                )}
+
+                {/* Subject Field */}
+                <div>
+                  <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+                  <Input
+                    id="subject"
+                    value={composeSubject}
+                    onChange={(e) => setComposeSubject(e.target.value)}
+                    placeholder="Enter subject"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  />
+                </div>
+
+                {/* Message Body */}
+                <div>
+                  <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
+                  <Textarea
+                    id="message"
+                    value={composeBody}
+                    onChange={(e) => setComposeBody(e.target.value)}
+                    placeholder="Write your message..."
+                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+              <div className="flex items-center gap-2">
+                {/* File Input for Attachments */}
+                <input
+                  type="file"
+                  id="file-attachment"
+                  className="hidden"
+                  multiple
+                  onChange={handleFileAttachment}
+                />
+                <label htmlFor="file-attachment">
+                  <Button 
+                    variant="outline" 
+                    size="icon"
+                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      document.getElementById('file-attachment')?.click();
+                    }}
+                  >
+                    <Paperclip className="h-4 w-4 text-gray-600" />
+                  </Button>
+                </label>
+              </div>
+              <div className="flex items-center gap-3">
+                <Button 
+                  variant="ghost"
+                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+                  onClick={() => setShowCompose(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="bg-blue-600 text-white hover:bg-blue-700"
+                  onClick={handleSend}
+                >
+                  Send
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {renderDeleteConfirmDialog()}
+    </>
+  );
+}
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index dfe8ed47..7852692c 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -77,7 +77,7 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
     {
       title: "Courrier",
       icon: Mail,
-      href: "/mail",
+      href: "/courrier",
     },
     {
       title: "Drive",