diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 368c0a31..dbc4bdd0 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -180,6 +180,7 @@ export default function ComposeEmail({
         : new Date().toLocaleString();
       
       // Create a clean wrapper that won't interfere with the original email's styling
+      // Use inline styles for the header to avoid CSS conflicts
       const headerHtml = `
         <div style="border-top: 1px solid #e1e1e1; margin-top: 20px; padding-top: 15px; font-family: Arial, sans-serif; color: #333;">
           <div style="margin-bottom: 15px;">
@@ -192,38 +193,80 @@ export default function ComposeEmail({
         </div>
       `;
       
-      // Get the content with proper fallbacks
+      // Process the original content
       let originalContent = '';
       
-      // First try the html field which should contain the raw HTML
-      if (initialEmail.html && initialEmail.html.trim()) {
-        console.log('Using HTML content for forward');
-        // Preserve the HTML exactly as-is without any wrapper divs that could break styles
-        originalContent = initialEmail.html;
-      } 
-      // Then try the content field
-      else if (initialEmail.content && initialEmail.content.trim()) {
-        console.log('Using content field for forward');
-        // Preserve the content exactly as-is
-        originalContent = initialEmail.content;
-      }
-      // Fall back to text with styling if available
-      else if (initialEmail.text && initialEmail.text.trim()) {
-        console.log('Using text content for forward');
-        originalContent = `<div style="white-space: pre-wrap; font-family: monospace;">${initialEmail.text}</div>`;
-      }
-      // Last resort - no content available
-      else {
-        console.log('No content available for forward');
-        originalContent = '<div style="color: #666; font-style: italic; padding: 10px; font-size: 14px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
+      // First try to use the API to parse and sanitize the email content
+      try {
+        // Use server-side parsing via fetch API to properly handle complex emails
+        const response = await fetch('/api/parse-email', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ 
+            email: initialEmail.content || initialEmail.html || initialEmail.text || '' 
+          }),
+        });
+        
+        if (response.ok) {
+          const parsedEmail = await response.json();
+          
+          if (parsedEmail.html && parsedEmail.html.trim()) {
+            console.log('Using parsed HTML content for forward');
+            
+            // Create an iframe-like containment for the email content
+            // This prevents CSS from the original email leaking into our compose view
+            originalContent = `
+              <div class="email-content-container">
+                ${parsedEmail.html}
+              </div>
+            `;
+          } else if (parsedEmail.text && parsedEmail.text.trim()) {
+            console.log('Using parsed text content for forward');
+            originalContent = `<div style="white-space: pre-wrap; font-family: monospace;">${parsedEmail.text}</div>`;
+          } else {
+            console.log('No content available from parser');
+            originalContent = '<div style="color: #666; font-style: italic; padding: 10px; font-size: 14px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
+          }
+        } else {
+          throw new Error('Failed to parse email content');
+        }
+      } catch (parseError) {
+        console.error('Error parsing email content:', parseError);
+        
+        // Fall back to direct content handling if API parsing fails
+        if (initialEmail.html && initialEmail.html.trim()) {
+          console.log('Falling back to HTML content for forward');
+          // Use DOMPurify to sanitize HTML and remove dangerous elements
+          originalContent = DOMPurify.sanitize(initialEmail.html, {
+            ADD_TAGS: ['style', 'div', 'span', 'p', 'br', 'hr', 'h1', 'h2', 'h3', 'img', 'table', 'tr', 'td', 'th'],
+            ADD_ATTR: ['style', 'class', 'id', 'src', 'alt', 'href', 'target'],
+            FORBID_TAGS: ['script', 'iframe', 'object', 'embed'],
+            FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover']
+          });
+        } else if (initialEmail.content && initialEmail.content.trim()) {
+          console.log('Falling back to content field for forward');
+          originalContent = DOMPurify.sanitize(initialEmail.content);
+        } else if (initialEmail.text && initialEmail.text.trim()) {
+          console.log('Falling back to text content for forward');
+          originalContent = `<div style="white-space: pre-wrap; font-family: monospace;">${initialEmail.text}</div>`;
+        } else {
+          console.log('No content available for forward');
+          originalContent = '<div style="color: #666; font-style: italic; padding: 10px; font-size: 14px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
+        }
       }
       
       // Preserve all original structure by wrapping, not modifying the original content
+      // Important: We add a style scope to prevent CSS leakage
       const forwardedContent = `
         ${headerHtml}
         <!-- Start original email content - DO NOT MODIFY THIS CONTENT -->
         <div class="original-email-content" style="margin-top: 10px; border-left: 2px solid #e1e1e1; padding-left: 15px;">
-          ${originalContent}
+          <!-- Email content styling isolation container -->
+          <div style="position: relative; overflow: auto;">
+            ${originalContent}
+          </div>
         </div>
         <!-- End original email content -->
       `;
@@ -234,15 +277,15 @@ export default function ComposeEmail({
     } catch (error) {
       console.error('Error initializing forwarded email:', error);
       
-      // Even in error case, provide a usable template
+      // Even in error case, provide a usable template with empty values
       setBody(`
         <div style="border-top: 1px solid #e1e1e1; margin-top: 20px; padding-top: 15px; font-family: Arial, sans-serif; color: #333;">
           <div style="margin-bottom: 15px;">
             <div style="font-weight: normal; margin-bottom: 10px;">---------- Forwarded message ---------</div>
-            <div><b>From:</b> ${initialEmail.from ? JSON.stringify(initialEmail.from) : 'Unknown'}</div>
+            <div><b>From:</b> ${initialEmail.from ? formatSender(initialEmail.from) : 'Unknown'}</div>
             <div><b>Date:</b> ${new Date().toLocaleString()}</div>
             <div><b>Subject:</b> ${initialEmail.subject || '(No subject)'}</div>
-            <div><b>To:</b> ${initialEmail.to ? JSON.stringify(initialEmail.to) : ''}</div>
+            <div><b>To:</b> ${initialEmail.to ? formatRecipients(initialEmail.to) : ''}</div>
           </div>
         </div>
         <div style="margin-top: 10px; padding: 10px; color: #d32f2f; font-style: italic; border: 1px dashed #d32f2f; margin: 10px 0; text-align: center; background-color: #fff8f8;">