diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index bd1cb453..68fc718c 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -97,8 +97,6 @@ export default function ComposeEmail(props: ComposeEmailProps) {
               ...(initialEmail.to || []),
               ...(initialEmail.cc || [])
             ];
-            // Filter out the current user if they were a recipient
-            // This would need some user context to properly implement
             setCc(formatEmailAddresses(allRecipients));
           }
           
@@ -107,95 +105,24 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
           setSubject(subject);
           
-          // Format the reply content with the quoted message included directly
-          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
-          const sender = initialEmail.from && initialEmail.from.length > 0 
-            ? initialEmail.from[0].name || initialEmail.from[0].address 
-            : 'Unknown sender';
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create reply content with quote
-          const replyContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
-            <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
-              <div style="font-size: 13px;">
-                ${content}
-              </div>
-            </blockquote>
-          `;
-          
-          setEmailContent(replyContent);
+          // Format the reply content
+          const { content } = formatReplyEmail(initialEmail, type);
+          setEmailContent(content);
           
           // Show CC field if there are CC recipients
           if (initialEmail.cc && initialEmail.cc.length > 0) {
             setShowCc(true);
           }
-        } 
+        }
         else if (type === 'forward') {
           // Set subject with Fwd: prefix
           const subjectBase = initialEmail.subject || '(No subject)';
           const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
           setSubject(subject);
           
-          // Format the forward content with the original email included directly
-          let content = initialEmail.content || initialEmail.html || initialEmail.text || '';
-          // Fix table widths before setting content
-          content = fixTableWidths(content);
-          const fromString = formatEmailAddresses(initialEmail.from || []);
-          const toString = formatEmailAddresses(initialEmail.to || []);
-          const date = initialEmail.date ? 
-            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
-            new Date();
-          
-          // Format date for display
-          const formattedDate = date.toLocaleString('en-US', {
-            weekday: 'short',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          });
-          
-          // Create forwarded content
-          const forwardContent = `
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div><br></div>
-            <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
-              <div style="font-family: Arial, sans-serif; color: #333;">
-                <div style="margin-bottom: 15px;">
-                  <div>---------- Forwarded message ---------</div>
-                  <div><b>From:</b> ${fromString}</div>
-                  <div><b>Date:</b> ${formattedDate}</div>
-                  <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
-                  <div><b>To:</b> ${toString}</div>
-                </div>
-                <div class="email-original-content">
-                  ${content}
-                </div>
-              </div>
-            </div>
-          `;
-          
-          setEmailContent(forwardContent);
+          // Format the forward content
+          const { content } = formatForwardedEmail(initialEmail);
+          setEmailContent(content);
           
           // If the original email has attachments, we should include them
           if (initialEmail.attachments && initialEmail.attachments.length > 0) {
diff --git a/components/email/EmailPanel.tsx b/components/email/EmailPanel.tsx
index fa37f1ea..2f2ef02d 100644
--- a/components/email/EmailPanel.tsx
+++ b/components/email/EmailPanel.tsx
@@ -90,21 +90,13 @@ export default function EmailPanel({
         hasAttachments: email.hasAttachments || false
       };
       
-      // Try both formatting approaches to match what ComposeEmail would display
-      // This handles preview, reply and forward cases
-      let formattedContent: string;
-      
-      // ComposeEmail switches based on type - we need to do the same
-      const { content: replyContent } = formatReplyEmail(formatterEmail, 'reply');
-      
-      // Set the formatted content
-      formattedContent = replyContent;
-      
-      console.log("Generated formatted content for email preview");
+      // Get the formatted content
+      const formattedContent = email.content || email.html || email.text || '';
       
       // Return a new email object with the formatted content
       return {
         ...email,
+        content: formattedContent,
         formattedContent
       };
     } catch (error) {
@@ -194,17 +186,12 @@ export default function EmailPanel({
   return (
     <div className="h-full">
       {isComposing ? (
-        <div className="h-full flex items-center justify-center">
-          <div className="text-center text-muted-foreground">
-            <p>Compose mode is now handled by the main modal.</p>
-            <button 
-              className="text-primary mt-2 hover:underline"
-              onClick={handleComposeClose}
-            >
-              Close
-            </button>
-          </div>
-        </div>
+        <ComposeEmail
+          initialEmail={formattedEmail}
+          type={composeType}
+          onClose={handleComposeClose}
+          onSend={onSendEmail}
+        />
       ) : (
         <div className="max-w-4xl mx-auto h-full">
           <EmailPreview