diff --git a/components/email/EmailLayout.tsx b/components/email/EmailLayout.tsx
index cea8b1b3..e0640f5f 100644
--- a/components/email/EmailLayout.tsx
+++ b/components/email/EmailLayout.tsx
@@ -23,7 +23,11 @@ interface EmailLayoutProps {
 export default function EmailLayout({ className = '' }: EmailLayoutProps) {
   // Email state
   const [emails, setEmails] = useState<EmailMessage[]>([]);
-  const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);
+  const [selectedEmail, setSelectedEmail] = useState<{
+    emailId: string;
+    accountId: string;
+    folder: string;
+  } | null>(null);
   const [currentFolder, setCurrentFolder] = useState<string>('INBOX');
   const [folders, setFolders] = useState<string[]>([]);
   const [mailboxes, setMailboxes] = useState<string[]>([]);
@@ -116,14 +120,14 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
   // Handle folder change
   const handleFolderChange = (folder: string) => {
     setCurrentFolder(folder);
-    setSelectedEmailId(null);
+    setSelectedEmail(null);
     setPage(1);
     setSearchQuery('');
   };
   
   // Handle email selection
-  const handleEmailSelect = (id: string, accountId: string, folder: string) => {
-    setSelectedEmailId(id);
+  const handleEmailSelect = (emailId: string, accountId: string, folder: string) => {
+    setSelectedEmail({ emailId, accountId, folder });
   };
   
   // Handle search
@@ -142,7 +146,7 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
   
   // Handle composing a new email
   const handleComposeNew = () => {
-    setSelectedEmailId(null);
+    setSelectedEmail(null);
     // The compose functionality will be handled by the EmailPanel component
   };
   
@@ -313,7 +317,7 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
                   <div
                     key={email.id}
                     className={`p-3 hover:bg-secondary/20 cursor-pointer transition-colors ${
-                      selectedEmailId === email.id ? 'bg-secondary/30' : ''
+                      selectedEmail?.emailId === email.id ? 'bg-secondary/30' : ''
                     } ${!email.flags.seen ? 'bg-primary/5' : ''}`}
                     onClick={() => handleEmailSelect(email.id, email.accountId || '', email.folder || '')}
                   >
@@ -362,7 +366,7 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
         {/* Email preview */}
         <div className="flex-1 h-full overflow-hidden">
           <EmailPanel
-            selectedEmailId={selectedEmailId}
+            selectedEmail={selectedEmail}
             folder={currentFolder}
             onSendEmail={handleSendEmail}
           />
diff --git a/components/email/EmailPanel.tsx b/components/email/EmailPanel.tsx
index 5ecf627c..04a8b80a 100644
--- a/components/email/EmailPanel.tsx
+++ b/components/email/EmailPanel.tsx
@@ -40,8 +40,7 @@ interface EmailMessage {
 }
 
 interface EmailPanelProps {
-  selectedEmailId: string | null;
-  folder?: string;
+  selectedEmail: { emailId: string; accountId: string; folder: string } | null;
   onSendEmail: (emailData: {
     to: string;
     cc?: string;
@@ -57,8 +56,7 @@ interface EmailPanelProps {
 }
 
 export default function EmailPanel({ 
-  selectedEmailId, 
-  folder = 'INBOX',
+  selectedEmail, 
   onSendEmail 
 }: EmailPanelProps) {
   const [email, setEmail] = useState<EmailMessage | null>(null);
@@ -113,41 +111,34 @@ export default function EmailPanel({
     }
   }, [email]);
 
-  // Load email content when selectedEmailId changes
+  // Load email content when selectedEmail changes
   useEffect(() => {
-    if (selectedEmailId) {
-      fetchEmail(selectedEmailId);
-      // Close compose mode when selecting a different email
+    if (selectedEmail) {
+      fetchEmail(selectedEmail.emailId, selectedEmail.accountId, selectedEmail.folder);
       setIsComposing(false);
     } else {
       setEmail(null);
     }
-  }, [selectedEmailId, folder]);
+  }, [selectedEmail]);
 
   // Fetch the email content
-  const fetchEmail = async (id: string) => {
+  const fetchEmail = async (emailId: string, accountId: string, folder: string) => {
     setLoading(true);
     setError(null);
-    
     try {
-      const response = await fetch(`/api/courrier/${id}?folder=${encodeURIComponent(folder)}`);
-      
+      const response = await fetch(`/api/courrier/${emailId}?accountId=${encodeURIComponent(accountId)}&folder=${encodeURIComponent(folder)}`);
       if (!response.ok) {
         const errorData = await response.json();
         throw new Error(errorData.error || 'Failed to fetch email');
       }
-      
       const data = await response.json();
-      
       if (!data) {
         throw new Error('Email not found');
       }
-      
       // Mark as read if not already
       if (!data.flags?.seen) {
-        markAsRead(id);
+        markAsRead(emailId);
       }
-      
       setEmail(data);
     } catch (err) {
       console.error('Error fetching email:', err);
@@ -185,7 +176,7 @@ export default function EmailPanel({
   };
   
   // If no email is selected and not composing
-  if (!selectedEmailId && !isComposing) {
+  if (!selectedEmail && !isComposing) {
     return (
       <div className="h-full flex items-center justify-center">
         <div className="text-center text-muted-foreground">
@@ -224,7 +215,7 @@ export default function EmailPanel({
           <p>{error}</p>
           <button 
             className="text-primary mt-2 hover:underline"
-            onClick={() => selectedEmailId && fetchEmail(selectedEmailId)}
+            onClick={() => selectedEmail && fetchEmail(selectedEmail.emailId, selectedEmail.accountId, selectedEmail.folder)}
           >
             Try again
           </button>