diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 4c5c656a..b730f479 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -9,6 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-decoder';
 import { Email } from '@/app/courrier/page';
 import mime from 'mime';
+import { simpleParser } from 'mailparser';
 
 interface ComposeEmailProps {
   showCompose: boolean;
@@ -90,49 +91,79 @@ export default function ComposeEmail({
         // Get the original email content
         const originalContent = replyTo?.body || forwardFrom?.body || '';
         
-        // Create the reply/forward structure
-        content = `
-          <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
-          <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
-            ${forwardFrom ? `
-              <div style="margin-bottom: 10px;">
-                ---------- Forwarded message ---------<br/>
-                From: ${forwardFrom.from}<br/>
-                Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
-                Subject: ${forwardFrom.subject}<br/>
-                To: ${forwardFrom.to}<br/>
-                ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
-                <br/>
-                ${originalContent}
-              </div>
-            ` : `
-              <div style="margin-bottom: 10px;">
-                On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:
-              </div>
-              <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
-                ${originalContent}
-              </blockquote>
-            `}
-          </div>
-        `;
+        // Parse the original email content using the API
+        fetch('/api/parse-email', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ emailContent: originalContent }),
+        })
+        .then(response => response.json())
+        .then(parsed => {
+          // Create the reply/forward structure
+          content = `
+            <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
+            <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
+              ${forwardFrom ? `
+                <div style="margin-bottom: 10px;">
+                  ---------- Forwarded message ---------<br/>
+                  From: ${forwardFrom.from}<br/>
+                  Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
+                  Subject: ${forwardFrom.subject}<br/>
+                  To: ${forwardFrom.to}<br/>
+                  ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
+                  <br/>
+                  ${parsed.html || parsed.text}
+                </div>
+              ` : `
+                <div style="margin-bottom: 10px;">
+                  On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:
+                </div>
+                <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
+                  ${parsed.html || parsed.text}
+                </blockquote>
+              `}
+            </div>
+          `;
+
+          if (composeBodyRef.current) {
+            composeBodyRef.current.innerHTML = content;
+            setIsInitialized(true);
+            
+            // Place cursor at the beginning of the compose area
+            const composeArea = composeBodyRef.current.querySelector('.compose-area');
+            if (composeArea) {
+              const range = document.createRange();
+              const sel = window.getSelection();
+              range.setStart(composeArea, 0);
+              range.collapse(true);
+              sel?.removeAllRanges();
+              sel?.addRange(range);
+              (composeArea as HTMLElement).focus();
+            }
+          }
+        })
+        .catch(error => {
+          console.error('Error parsing email:', error);
+        });
       } else {
         // For new messages
         content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>`;
-      }
-
-      composeBodyRef.current.innerHTML = content;
-      setIsInitialized(true);
-      
-      // Place cursor at the beginning of the compose area
-      const composeArea = composeBodyRef.current.querySelector('.compose-area');
-      if (composeArea) {
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(composeArea, 0);
-        range.collapse(true);
-        sel?.removeAllRanges();
-        sel?.addRange(range);
-        (composeArea as HTMLElement).focus();
+        composeBodyRef.current.innerHTML = content;
+        setIsInitialized(true);
+        
+        // Place cursor at the beginning of the compose area
+        const composeArea = composeBodyRef.current.querySelector('.compose-area');
+        if (composeArea) {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.setStart(composeArea, 0);
+          range.collapse(true);
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+          (composeArea as HTMLElement).focus();
+        }
       }
     }
   }, [composeBody, replyTo, forwardFrom, isInitialized]);