diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index ec1188b6..7305eb9b 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -2309,8 +2309,7 @@ export default function CourrierPage() {
         </div>
       </main>
 
-      {/* Compose Email Modal - Commented out due to type mismatch */}
-      {/* The component expected different props than what we're providing */}
+      {/* Compose Email Modal */}
       <ComposeEmail
         showCompose={showCompose}
         setShowCompose={setShowCompose}
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index d7b7b145..9139680e 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useRef, useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
-import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal } from 'lucide-react';
+import DOMPurify from 'isomorphic-dompurify';
+import { formatEmailForReplyOrForward } from '@/lib/services/email-service';
 import { Email } from '@/app/courrier/page';
 
 interface ComposeEmailProps {
@@ -33,12 +35,6 @@ interface ComposeEmailProps {
   };
   onSend: (email: any) => Promise<void>;
   onCancel: () => void;
-  onBodyChange?: (body: string) => void;
-  initialTo?: string;
-  initialSubject?: string;
-  initialBody?: string;
-  initialCc?: string;
-  initialBcc?: string;
   replyTo?: Email | null;
   forwardFrom?: Email | null;
 }
@@ -64,159 +60,195 @@ export default function ComposeEmail({
   setAttachments,
   handleSend,
   originalEmail,
-  onSend,
-  onCancel,
-  onBodyChange,
-  initialTo,
-  initialSubject,
-  initialBody,
-  initialCc,
-  initialBcc,
   replyTo,
-  forwardFrom
+  forwardFrom,
+  onSend,
+  onCancel
 }: ComposeEmailProps) {
   const [sending, setSending] = useState(false);
   const editorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  if (!showCompose) return null;
-
-  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
-    const content = e.currentTarget.innerHTML;
-    setComposeBody(content);
-    if (onBodyChange) {
-      onBodyChange(content);
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.focus();
     }
+  }, [showCompose]);
+
+  // Initialize content when replying or forwarding
+  useEffect(() => {
+    // Handle reply or forward initialization
+    if (replyTo) {
+      // For reply/reply-all
+      const formattedEmail = formatEmailForReplyOrForward(replyTo as any, 'reply');
+      setComposeTo(formattedEmail.to);
+      setComposeSubject(formattedEmail.subject);
+      setComposeBody(formattedEmail.body);
+      
+      // Show CC if needed for reply-all
+      if (formattedEmail.cc) {
+        setComposeCc(formattedEmail.cc);
+        setShowCc(true);
+      }
+    } else if (forwardFrom) {
+      // For forward
+      initializeForwardedEmail(forwardFrom);
+    }
+  }, [replyTo, forwardFrom]);
+
+  // Initialize forwarded email content
+  const initializeForwardedEmail = async (email: any) => {
+    if (!email) return;
+    
+    // Format subject with Fwd: prefix if needed
+    const subjectBase = email.subject || '(No subject)';
+    const subjectRegex = /^(Fwd|FW|Forward):\s*/i;
+    const subject = subjectRegex.test(subjectBase) 
+      ? subjectBase 
+      : `Fwd: ${subjectBase}`;
+    
+    setComposeSubject(subject);
+    
+    // Create header for forwarded email
+    const headerHtml = `
+      <div style="border-top: 1px solid #e1e1e1; margin-top: 20px; padding-top: 15px; font-family: Arial, sans-serif;">
+        <div style="margin-bottom: 15px;">
+          <div style="font-weight: normal; margin-bottom: 10px;">---------- Forwarded message ---------</div>
+          <div><b>From:</b> ${email.fromName || email.from}</div>
+          <div><b>Date:</b> ${new Date(email.date).toLocaleString()}</div>
+          <div><b>Subject:</b> ${email.subject || '(No subject)'}</div>
+          <div><b>To:</b> ${email.to}</div>
+        </div>
+      </div>
+    `;
+    
+    // Prepare content
+    let contentHtml = '<div style="color: #666; font-style: italic; padding: 15px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
+    
+    if (email.content) {
+      // Sanitize the content
+      contentHtml = DOMPurify.sanitize(email.content, {
+        ADD_TAGS: ['style'],
+        FORBID_TAGS: ['script', 'iframe']
+      });
+    }
+    
+    // Set body with header and content
+    setComposeBody(`
+      ${headerHtml}
+      <div style="margin-top: 10px;">
+        ${contentHtml}
+      </div>
+    `);
   };
 
-  const handleSendEmail = async () => {
-    if (!composeTo.trim()) {
-      alert('Please enter a recipient');
-      return;
-    }
+  if (!showCompose) return null;
 
-    setSending(true);
-    try {
-      // Prepare email data for sending
-      const emailData = {
-        to: composeTo,
-        cc: composeCc,
-        bcc: composeBcc,
-        subject: composeSubject,
-        body: composeBody,
-        attachments: attachments
-      };
-
-      // Call the provided onSend function
-      await onSend(emailData);
-      
-      // Reset the form
-      onCancel();
-    } catch (error) {
-      console.error('Error sending email:', error);
-      alert('Failed to send email. Please try again.');
-    } finally {
-      setSending(false);
+  const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const newAttachments = Array.from(e.target.files).map(file => ({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        file
+      }));
+      setAttachments([...attachments, ...newAttachments]);
     }
   };
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <Card className="w-full max-w-3xl bg-white shadow-lg">
-        <CardHeader className="flex flex-row items-center justify-between p-4 border-b">
-          <CardTitle className="text-lg font-medium">
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-3xl">
+        <CardHeader className="flex flex-row items-center border-b p-4">
+          <CardTitle className="text-lg">
             {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
           </CardTitle>
-          <Button variant="ghost" size="icon" onClick={onCancel}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="ml-auto"
+            onClick={onCancel}
+          >
             <X className="h-4 w-4" />
           </Button>
         </CardHeader>
         <CardContent className="p-4 space-y-4">
           <div className="space-y-2">
-            <div className="flex items-center">
-              <span className="w-20 text-sm text-gray-500">To:</span>
-              <Input 
-                value={composeTo} 
+            <div className="flex items-center border-b py-2">
+              <span className="w-16 text-sm text-gray-500">To:</span>
+              <Input
+                value={composeTo}
                 onChange={(e) => setComposeTo(e.target.value)}
-                placeholder="recipient@example.com"
                 className="border-0 focus-visible:ring-0"
+                placeholder="recipient@example.com"
               />
             </div>
 
             {showCc && (
-              <div className="flex items-center">
-                <span className="w-20 text-sm text-gray-500">Cc:</span>
-                <Input 
-                  value={composeCc} 
+              <div className="flex items-center border-b py-2">
+                <span className="w-16 text-sm text-gray-500">Cc:</span>
+                <Input
+                  value={composeCc}
                   onChange={(e) => setComposeCc(e.target.value)}
-                  placeholder="cc@example.com"
                   className="border-0 focus-visible:ring-0"
+                  placeholder="cc@example.com"
                 />
               </div>
             )}
 
             {showBcc && (
-              <div className="flex items-center">
-                <span className="w-20 text-sm text-gray-500">Bcc:</span>
-                <Input 
-                  value={composeBcc} 
+              <div className="flex items-center border-b py-2">
+                <span className="w-16 text-sm text-gray-500">Bcc:</span>
+                <Input
+                  value={composeBcc}
                   onChange={(e) => setComposeBcc(e.target.value)}
-                  placeholder="bcc@example.com"
                   className="border-0 focus-visible:ring-0"
+                  placeholder="bcc@example.com"
                 />
               </div>
             )}
 
-            <div className="flex items-center">
-              <span className="w-20 text-sm text-gray-500">Subject:</span>
-              <Input 
-                value={composeSubject} 
+            <div className="flex items-center border-b py-2">
+              <span className="w-16 text-sm text-gray-500">Subject:</span>
+              <Input
+                value={composeSubject}
                 onChange={(e) => setComposeSubject(e.target.value)}
-                placeholder="Subject"
                 className="border-0 focus-visible:ring-0"
+                placeholder="Subject"
               />
             </div>
 
-            <div className="flex items-center text-xs text-blue-600 space-x-4 ml-20">
+            <div className="flex items-center text-xs text-blue-600 space-x-2 py-1">
               {!showCc && (
-                <button 
-                  type="button" 
-                  onClick={() => setShowCc(true)}
-                  className="hover:underline"
-                >
+                <button onClick={() => setShowCc(true)} className="hover:underline">
                   Add Cc
                 </button>
               )}
               {!showBcc && (
-                <button 
-                  type="button" 
-                  onClick={() => setShowBcc(true)}
-                  className="hover:underline"
-                >
+                <button onClick={() => setShowBcc(true)} className="hover:underline">
                   Add Bcc
                 </button>
               )}
             </div>
           </div>
 
-          <div 
-            className="border rounded p-3 min-h-[200px] max-h-[400px] overflow-auto"
-            contentEditable 
-            dangerouslySetInnerHTML={{ __html: composeBody }}
-            onInput={handleInput}
+          <div
             ref={editorRef}
+            className="min-h-[300px] p-2 focus:outline-none overflow-auto"
+            contentEditable
+            dangerouslySetInnerHTML={{ __html: composeBody }}
+            onInput={(e) => setComposeBody(e.currentTarget.innerHTML)}
           />
 
           {attachments.length > 0 && (
-            <div className="border-t pt-2">
-              <h4 className="text-sm text-gray-500 mb-2">Attachments</h4>
+            <div className="border-t pt-3">
+              <h4 className="text-sm font-medium mb-2">Attachments</h4>
               <div className="flex flex-wrap gap-2">
                 {attachments.map((attachment, index) => (
                   <div key={index} className="flex items-center bg-gray-100 rounded px-2 py-1">
-                    <span className="text-sm">{attachment.name}</span>
-                    <button 
-                      type="button" 
-                      className="ml-2 text-gray-400 hover:text-gray-600"
+                    <span className="text-sm truncate max-w-[150px]">{attachment.name}</span>
+                    <button
+                      className="ml-1 text-gray-500 hover:text-gray-700"
                       onClick={() => {
                         const newAttachments = [...attachments];
                         newAttachments.splice(index, 1);
@@ -231,27 +263,17 @@ export default function ComposeEmail({
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex justify-between p-4 border-t">
-          <div className="flex space-x-2">
+        <CardFooter className="border-t p-4 flex justify-between">
+          <div className="flex items-center space-x-2">
             <input
               type="file"
-              className="hidden"
               ref={fileInputRef}
-              onChange={(e) => {
-                if (e.target.files?.length) {
-                  const newAttachments = Array.from(e.target.files).map(file => ({
-                    name: file.name,
-                    type: file.type,
-                    content: URL.createObjectURL(file),
-                    file
-                  }));
-                  setAttachments([...attachments, ...newAttachments]);
-                }
-              }}
+              className="hidden"
+              onChange={handleFileSelection}
               multiple
             />
-            <Button 
-              variant="ghost" 
+            <Button
+              variant="outline"
               size="sm"
               onClick={() => fileInputRef.current?.click()}
             >
@@ -259,13 +281,25 @@ export default function ComposeEmail({
               Attach
             </Button>
           </div>
-          <Button 
-            onClick={handleSendEmail}
+          <Button
+            onClick={async () => {
+              setSending(true);
+              try {
+                await handleSend();
+                onCancel();
+              } catch (error) {
+                console.error('Error sending email:', error);
+              } finally {
+                setSending(false);
+              }
+            }}
             disabled={sending || !composeTo.trim()}
-            className="bg-blue-600 hover:bg-blue-700 text-white"
           >
             {sending ? (
-              <>Sending...</>
+              <>
+                <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                Sending...
+              </>
             ) : (
               <>
                 <SendHorizontal className="h-4 w-4 mr-1" />