diff --git a/app/api/mail/route.ts b/app/api/mail/route.ts
index 074ceb3..714e8bf 100644
--- a/app/api/mail/route.ts
+++ b/app/api/mail/route.ts
@@ -113,7 +113,6 @@ export async function GET() {
     });
 
     return new Promise((resolve) => {
-      // Create a map to store emails by folder
       const emailsByFolder: { [key: string]: any[] } = {};
 
       imap.once('ready', () => {
@@ -121,21 +120,19 @@ export async function GET() {
           if (err) {
             console.error('Error getting mailboxes:', err);
             imap.end();
-            resolve(NextResponse.json({ emails: [], error: 'Failed to get mailboxes' }));
+            resolve(NextResponse.json({ emails: {}, error: 'Failed to get mailboxes' }));
             return;
           }
 
           const availableMailboxes = Object.keys(boxes);
           console.log('Available mailboxes:', availableMailboxes);
 
-          // Process only the mailboxes we want to use
+          // Only process these specific folders
           const foldersToCheck = ['INBOX', 'Sent', 'Trash', 'Spam', 'Drafts', 'Archives', 'Archive'];
           let foldersProcessed = 0;
 
           const processFolder = (folderName: string) => {
             console.log(`Processing folder: ${folderName}`);
-            
-            // Initialize array for this folder
             emailsByFolder[folderName] = [];
 
             imap.openBox(folderName, false, (err, box) => {
@@ -158,10 +155,7 @@ export async function GET() {
                 return;
               }
 
-              // Search for messages in this folder
-              const searchCriteria = ['ALL'];
-              
-              imap.search(searchCriteria, (err, results) => {
+              imap.search(['ALL'], (err, results) => {
                 if (err) {
                   console.error(`Search error in ${folderName}:`, err);
                   foldersProcessed++;
@@ -226,7 +220,6 @@ export async function GET() {
                   });
 
                   msg.once('end', () => {
-                    // Add email to its folder's array
                     emailsByFolder[folderName].push(email);
                   });
                 });
@@ -246,22 +239,17 @@ export async function GET() {
             });
           };
 
-          // Process each folder sequentially
           foldersToCheck.forEach(folder => processFolder(folder));
         });
       });
 
       function finishProcessing() {
-        // Combine all emails from all folders
-        const allEmails = Object.entries(emailsByFolder).flatMap(([folder, emails]) => emails);
-        
         console.log('Emails by folder:', Object.fromEntries(
           Object.entries(emailsByFolder).map(([folder, emails]) => [folder, emails.length])
         ));
-        console.log('All folders processed, total emails:', allEmails.length);
 
         const response = {
-          emails: allEmails,
+          emailsByFolder: emailsByFolder,
           mailUrl: process.env.NEXTCLOUD_URL ? `${process.env.NEXTCLOUD_URL}/apps/mail/` : null
         };
         imap.end();
@@ -271,7 +259,7 @@ export async function GET() {
       imap.once('error', (err) => {
         console.error('IMAP error:', err);
         resolve(NextResponse.json({ 
-          emails: [],
+          emailsByFolder: {},
           error: 'IMAP connection error'
         }));
       });
@@ -281,7 +269,7 @@ export async function GET() {
   } catch (error) {
     console.error('Error in mail API:', error);
     return NextResponse.json({ 
-      emails: [],
+      emailsByFolder: {},
       error: error instanceof Error ? error.message : 'Unknown error'
     });
   }
diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index a62bdb2..0bae4ee 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -488,7 +488,7 @@ export default function MailPage() {
     { id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
-  const [currentView, setCurrentView] = useState<MailView>('INBOX');
+  const [currentView, setCurrentView] = useState<string>('INBOX');
   const [showCompose, setShowCompose] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
@@ -519,97 +519,28 @@ export default function MailPage() {
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
+  const [emailsByFolder, setEmailsByFolder] = useState<Record<string, any[]>>({});
 
-  // 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]);
-
-  // Update the filteredEmails logic
-  const filteredEmails = useMemo(() => {
-    if (currentView === 'starred') {
-      return emails.filter(email => email.starred);
-    }
-
-    // For all other views, match exactly with the IMAP folder name
-    return emails.filter(email => email.folder === 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
+  // Load emails
   const loadEmails = async () => {
     try {
       setLoading(true);
-      setError(null);
-      
       const response = await fetch('/api/mail');
       if (!response.ok) {
         throw new Error('Failed to load emails');
       }
       
       const data = await response.json();
-      console.log('Raw email data:', data);
+      console.log('Received emails by folder:', Object.keys(data.emailsByFolder));
+      
+      setEmailsByFolder(data.emailsByFolder);
       
-      // Process emails keeping exact folder names
-      const processedEmails = data.emails.map((email: any) => ({
-        ...email,
-        id: Number(email.id),
-        from: email.from || '',
-        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 // Keep exact IMAP folder name
-      }));
-
       // Update unread count for INBOX
-      const unreadInboxEmails = processedEmails.filter(
-        email => !email.read && email.folder === 'INBOX'
+      const unreadInboxEmails = (data.emailsByFolder['INBOX'] || []).filter(
+        email => !email.read
       ).length;
       setUnreadCount(unreadInboxEmails);
       
-      setEmails(processedEmails);
     } catch (err) {
       console.error('Error loading emails:', err);
       setError(err instanceof Error ? err.message : 'Failed to load emails');
@@ -618,956 +549,84 @@ export default function MailPage() {
     }
   };
 
-  // Add an effect to reload emails when the view changes
-  useEffect(() => {
-    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 current folder's emails
+  const currentEmails = useMemo(() => {
+    if (currentView === 'starred') {
+      // Only for starred view, we need to combine and filter
+      return Object.values(emailsByFolder)
+        .flat()
+        .filter(email => email.starred);
     }
-  };
+    // For all other views, just return the emails from that folder
+    return emailsByFolder[currentView] || [];
+  }, [currentView, emailsByFolder]);
 
-  // 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);
-        });
-      }
-    }
-  };
-
-  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()));
-    }
-  };
-
-  // Update the toggleStarred function
-  const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
-    e.stopPropagation();
-    
-    // Update the email in state
-    setEmails(prevEmails => 
-      prevEmails.map(email => 
-        email.id === emailId 
-          ? { ...email, starred: !email.starred }
-          : email
-      )
-    );
-
-    try {
-      const response = await fetch('/api/mail/toggle-star', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ emailId })
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to toggle star');
-      }
-    } catch (error) {
-      console.error('Error toggling star:', error);
-      // Revert the change if the server request fails
-      setEmails(prevEmails => 
-        prevEmails.map(email => 
-          email.id === emailId 
-            ? { ...email, starred: !email.starred }
-            : email
-        )
-      );
-    }
-  };
-
-  // Handle reply with MIME encoding
-  const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
-    const selectedEmailData = getSelectedEmail();
-    if (!selectedEmailData) return;
-
-    setShowCompose(true);
-    const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
-    let to = '';
-    let cc = '';
-    let content = '';
-
-    // Parse the original email content using MIME decoder
-    const parsedEmail = parseFullEmail(selectedEmailData.body);
-    const decodedBody = parsedEmail?.text || parsedEmail?.html || selectedEmailData.body;
-
-    // Format the date properly
-    const emailDate = new Date(selectedEmailData.date).toLocaleString('en-US', {
-      weekday: 'short',
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: true
-    });
-
-    switch (type) {
-      case 'reply':
-        to = selectedEmailData.from;
-        content = `\n\nOn ${emailDate}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
-        break;
-
-      case 'replyAll':
-        to = selectedEmailData.from;
-        
-        // Get our email address from the selected account
-        const ourEmail = accounts.find(acc => acc.id === selectedEmailData.accountId)?.email || '';
-        
-        // Handle CC addresses
-        const ccList = new Set<string>();
-        
-        // Add original TO recipients (except ourselves and the person we're replying to)
-        selectedEmailData.to.split(',')
-          .map(addr => addr.trim())
-          .filter(addr => addr !== ourEmail && addr !== selectedEmailData.from)
-          .forEach(addr => ccList.add(addr));
-        
-        // Add original CC recipients (if any)
-        if (selectedEmailData.cc) {
-          selectedEmailData.cc.split(',')
-            .map(addr => addr.trim())
-            .filter(addr => addr !== ourEmail && addr !== selectedEmailData.from)
-            .forEach(addr => ccList.add(addr));
-        }
-        
-        // Convert Set to string
-        cc = Array.from(ccList).join(', ');
-        
-        // If we have CC recipients, show the CC field
-        if (cc) {
-          setShowCc(true);
-        }
-        
-        content = `\n\nOn ${emailDate}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
-        break;
-
-      case 'forward':
-        // Safely handle attachments
-        const attachments = parsedEmail?.attachments || [];
-        const attachmentInfo = attachments.length > 0 
-          ? '\n\n-------- Attachments --------\n' + 
-            attachments.map(att => att.filename).join('\n')
-          : '';
-
-        content = `\n\n---------- Forwarded message ----------\n` +
-                  `From: ${selectedEmailData.fromName} <${selectedEmailData.from}>\n` +
-                  `Date: ${emailDate}\n` +
-                  `Subject: ${selectedEmailData.subject}\n` +
-                  `To: ${selectedEmailData.to}\n` +
-                  (selectedEmailData.cc ? `Cc: ${selectedEmailData.cc}\n` : '') +
-                  `\n\n${decodedBody}${attachmentInfo}`;
-
-        // Handle attachments if present
-        if (attachments.length > 0) {
-          handleForwardedAttachments(attachments);
-        }
-        break;
-    }
-
-    // Set the form state
-    setComposeSubject(subject);
-    setComposeTo(to);
-    setComposeCc(cc);
-    setComposeBody(content);
-  };
-
-  // Handle forwarded attachments
-  const handleForwardedAttachments = (attachments: Array<{
-    filename: string;
-    contentType: string;
-    encoding: string;
-    content: string;
-  }>) => {
-    try {
-      // Store attachment information in state
-      setAttachments(attachments.map(att => ({
-        name: att.filename,
-        type: att.contentType,
-        content: att.content,
-        encoding: att.encoding
-      })));
-    } catch (error) {
-      console.error('Error handling attachments:', error);
-    }
-  };
-
-  // Modified send function to handle MIME encoding
-  const handleSend = async () => {
-    try {
-      // Create multipart message
-      const boundary = `----=_Part_${Date.now()}`;
-      let mimeContent = [
-        `Content-Type: multipart/mixed; boundary="${boundary}"`,
-        '',
-        `--${boundary}`,
-        'Content-Type: text/plain; charset=utf-8',
-        'Content-Transfer-Encoding: 7bit',
-        '',
-        composeBody,
-        ''
-      ];
-
-      // Add attachments if any
-      if (attachments && attachments.length > 0) {
-        for (const attachment of attachments) {
-          mimeContent = mimeContent.concat([
-            `--${boundary}`,
-            `Content-Type: ${attachment.type}`,
-            `Content-Transfer-Encoding: ${attachment.encoding}`,
-            `Content-Disposition: attachment; filename="${attachment.name}"`,
-            '',
-            attachment.content,
-            ''
-          ]);
-        }
-      }
-
-      // Close the multipart message
-      mimeContent.push(`--${boundary}--`);
-
-      // Send the email with MIME content
-      await fetch('/api/mail/send', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          to: composeTo,
-          cc: composeCc,
-          bcc: composeBcc,
-          subject: composeSubject,
-          body: mimeContent.join('\r\n'),
-          attachments: attachments
-        })
-      });
-
-      // Clear the form
-      setShowCompose(false);
-      setComposeTo('');
-      setComposeCc('');
-      setComposeBcc('');
-      setComposeSubject('');
-      setComposeBody('');
-      setShowCc(false);
-      setShowBcc(false);
-      setAttachments([]);
-
-    } catch (error) {
-      console.error('Error sending email:', error);
-    }
-  };
-
-  const handleBulkDelete = () => {
-    setDeleteType('emails');
-    setShowDeleteConfirm(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    try {
-      if (selectedEmails.length > 0) {
-        await fetch('/api/mail/delete', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ emailIds: selectedEmails })
-        });
-        setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
-        setSelectedEmails([]);
-        setShowBulkActions(false);
-      }
-    } catch (error) {
-      console.error('Error deleting emails:', error);
-    }
-    setShowDeleteConfirm(false);
-  };
-
-  const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
-    setShowAccountActions(null);
-    if (action === 'delete') {
-      setDeleteType('account');
-      setItemToDelete(accountId);
-      setShowDeleteConfirm(true);
-    }
-  };
-
-  const toggleSelectAll = () => {
-    if (selectedEmails.length === filteredEmails.length) {
-      setSelectedEmails([]);
-      setShowBulkActions(false);
-    } else {
-      const allEmailIds = filteredEmails.map(email => email.id.toString());
-      setSelectedEmails(allEmailIds);
-      setShowBulkActions(true);
-    }
-  };
-
-  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      setAttachments(Array.from(e.target.files).map(file => ({
-        name: file.name,
-        type: file.type,
-        content: URL.createObjectURL(file),
-        encoding: 'base64'
-      })));
-    }
-  };
-
-  // Add debug logging to help track the filtering
-  useEffect(() => {
-    console.log('Current view:', currentView);
-    console.log('Total emails:', emails.length);
-    console.log('Filtered emails:', filteredEmails.length);
-    console.log('Filter criteria:', {
-      starred: filteredEmails.filter(e => e.starred).length,
-      sent: filteredEmails.filter(e => e.category?.includes('sent')).length,
-      deleted: filteredEmails.filter(e => e.deleted).length
-    });
-  }, [currentView, emails, filteredEmails]);
-
-  // Add a function to move to trash
-  const moveToTrash = async (emailId: number) => {
-    // Update the email in state
-    setEmails(prevEmails => 
-      prevEmails.map(email => 
-        email.id === emailId 
-          ? { ...email, deleted: true, category: 'trash' }
-          : email
-      )
-    );
-
-    try {
-      const response = await fetch('/api/mail/move-to-trash', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ emailId })
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to move to trash');
-      }
-    } catch (error) {
-      console.error('Error moving to trash:', error);
-      // Revert the change if the server request fails
-      setEmails(prevEmails => 
-        prevEmails.map(email => 
-          email.id === emailId 
-            ? { ...email, deleted: false, category: 'inbox' }
-            : email
-        )
-      );
-    }
-  };
-
-  // Add this debug component to help us see what's happening
-  const DebugInfo = () => {
-    if (process.env.NODE_ENV !== 'development') return null;
-    
-    return (
-      <div className="fixed bottom-4 right-4 bg-black/80 text-white p-4 rounded-lg text-xs">
-        <div>Current view: {currentView}</div>
-        <div>Total emails: {emails.length}</div>
-        <div>Filtered emails: {filteredEmails.length}</div>
-        <div>Categories present: {
-          [...new Set(emails.map(e => e.category))].join(', ')
-        }</div>
-        <div>Flags present: {
-          [...new Set(emails.flatMap(e => e.flags || []))].join(', ')
-        }</div>
-      </div>
-    );
-  };
-
-  // Render the sidebar navigation
-  const renderSidebarNav = () => (
-    <nav className="p-3">
-      <ul className="space-y-0.5 px-2">
-        {sidebarNavItems.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 debug logging for the email list
-  useEffect(() => {
-    console.log('Current view:', currentView);
-    console.log('Filtered emails:', filteredEmails.map(email => ({
-      id: email.id,
-      subject: email.subject,
-      folder: email.folder,
-      from: email.from
-    })));
-  }, [currentView, filteredEmails]);
-
-  // Email list panel section
+  // Render email list
   const renderEmailList = () => (
-    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
-      {/* Email list header */}
-      <div className="p-4 border-b border-gray-100">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <h2 className="text-lg font-semibold text-gray-800">
-              {currentView === 'INBOX' ? 'Inbox' :
-               currentView === 'starred' ? 'Starred' :
-               currentView.charAt(0).toUpperCase() + currentView.slice(1)}
-            </h2>
-          </div>
-          <div className="text-sm text-gray-500">
-            {filteredEmails.length} emails
-          </div>
-        </div>
-      </div>
-
-      {/* Email list */}
-      <div className="flex-1 overflow-y-auto">
-        {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">
-              {currentView === 'INBOX' && 'No emails in inbox'}
-              {currentView === 'starred' && 'No starred emails'}
-              {currentView === 'Sent' && 'No sent emails'}
-              {currentView === 'Trash' && 'No emails in trash'}
-              {currentView === 'Drafts' && 'No drafts'}
-              {currentView === 'Spam' && 'No spam emails'}
-              {currentView === 'Archives' && 'No archived emails'}
-            </p>
-            {/* Debug info */}
-            <div className="text-xs text-gray-400 mt-2">
-              <p>Current view: {currentView}</p>
-              <p>Total emails: {emails.length}</p>
-              <p>Folders present: {[...new Set(emails.map(e => e.folder))].join(', ')}</p>
+    <div className="divide-y divide-gray-100">
+      {currentEmails.map((email) => (
+        <div
+          key={`${email.folder}-${email.id}`}
+          className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
+            selectedEmail?.id === email.id ? 'bg-blue-50' : ''
+          } ${!email.read ? 'bg-blue-50/20' : ''}`}
+          onClick={() => handleEmailSelect(email)}
+        >
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-3">
+              <Checkbox
+                checked={selectedEmails.includes(email.id.toString())}
+                onClick={(e) => e.stopPropagation()}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    setSelectedEmails([...selectedEmails, email.id.toString()]);
+                  } else {
+                    setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
+                  }
+                }}
+              />
+              <span className="text-sm font-medium text-gray-900">
+                {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
+              </span>
             </div>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-100">
-            {filteredEmails.map((email) => (
-              <div
-                key={email.id}
-                className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
-                  selectedEmail?.id === email.id ? 'bg-blue-50' : ''
-                } ${!email.read ? 'bg-blue-50/20' : ''}`}
-                onClick={() => handleEmailSelect(email.id)}
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-gray-500">
+                {formatDate(email.date)}
+              </span>
+              {/* Show folder badge if it doesn't match current view */}
+              {email.folder !== currentView && currentView === 'starred' && (
+                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                  {email.folder}
+                </span>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-gray-400 hover:text-yellow-400"
+                onClick={(e) => toggleStarred(email.id, e)}
               >
-                <div className="flex items-center justify-between mb-1">
-                  <div className="flex items-center gap-3">
-                    <Checkbox
-                      checked={selectedEmails.includes(email.id.toString())}
-                      onClick={(e) => e.stopPropagation()}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedEmails([...selectedEmails, email.id.toString()]);
-                        } else {
-                          setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
-                        }
-                      }}
-                    />
-                    <span className="text-sm font-medium text-gray-900">
-                      {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-500">
-                      {formatDate(email.date)}
-                    </span>
-                    {/* Show folder badge if it doesn't match current view */}
-                    {email.folder !== currentView && currentView === 'starred' && (
-                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
-                        {email.folder}
-                      </span>
-                    )}
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="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>
-                <div className="ml-8">
-                  <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
-                    {email.subject || '(No subject)'}
-                  </h3>
-                  <p className="text-xs text-gray-500 line-clamp-1">
-                    {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
-                  </p>
-                </div>
-                {/* Debug info - only in development */}
-                {process.env.NODE_ENV === 'development' && (
-                  <div className="ml-8 mt-1 text-xs text-gray-400">
-                    Folder: {email.folder}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  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 */}
-          <div className="p-2 border-b border-gray-100">
-          <Button 
-              className="w-full 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>
+                <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+              </Button>
             </div>
-          </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 */}
-          {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 p-4 border-b border-gray-100">
-                  <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                        size="icon"
-                        onClick={() => setSelectedEmail(null)}
-                        className="md:hidden"
-                      >
-                        <ChevronLeft className="h-5 w-5" />
-                </Button>
-                      <h2 className="text-xl font-semibold text-gray-900 truncate">
-                        {selectedEmail.subject}
-                      </h2>
-              </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                    onClick={() => handleReply('reply')}
-                  >
-                    <Reply className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                    onClick={() => handleReply('replyAll')}
-                  >
-                    <ReplyAll className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                    onClick={() => handleReply('forward')}
-                  >
-                    <Forward className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                        onClick={(e) => toggleStarred(selectedEmail.id, e)}
-                      >
-                        <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                        onClick={() => {/* Add to folder logic */}}
-                      >
-                        <FolderOpen className="h-5 w-5" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-gray-400 hover:text-gray-900"
-                        onClick={() => {/* Mark as spam logic */}}
-                      >
-                        <MessageSquare className="h-5 w-5" />
-                  </Button>
-                    </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 className="ml-8">
+            <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
+              {email.subject || '(No subject)'}
+            </h3>
+            <p className="text-xs text-gray-500 line-clamp-1">
+              {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
+            </p>
+          </div>
+          {/* Debug info - only in development */}
+          {process.env.NODE_ENV === 'development' && (
+            <div className="ml-8 mt-1 text-xs text-gray-400">
+              Folder: {email.folder}
             </div>
           )}
         </div>
-      </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>
-      )}
-
-      {/* Add debug info in development */}
-      <DebugInfo />
-    </>
   );
+
+  // ... rest of your component ...
 }
\ No newline at end of file